WordPressテーマの作り方1(ファイル準備)

WordPressテーマの作り方1(ファイル準備)

WordPressテーマ作成に必要なファイル

この記事では、WordPressテーマを作るにあたって、必要なファイル(テンプレートファイル)を説明します。ここでは7つのファイルでテーマを構築することを前提に進めます。

header.php

サイトを構成する各ページに共通した部分は、パーツごとにphpファイルを作ります。これにより各ページにheaderを書いたりする手間が省け、管理がしやすくなったり時間短縮が図れます。

header.phpではヘッダーの表示部分、メタ情報(head内のコード)等のコードを各ページごとに生成するコード、htmlでいう(<!DOCTYPE html> ~ </header>)を書くのが一般的です。

準備の段階で、style.cssとの紐づけ、<?php wp_head(); ?>の追記はしておきましょう。

style.cssとの紐づけ(head内に追記)

<head>
    ...
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri();?>">

<?php wp_header(); ?>の追記(</head>の上に追記)

...
<?php wp_head();?>
</head>

WordPressテーマの作り方2(メタ情報,head内コード)

index.php

トップページの表示部分を担当するのがindex.phpです。ブログ系テーマなら記事の一覧を表示させるもよし。ビジネス系テーマなら個別ページの一覧を表示させるもよしですね。

WordPressテーマの作り方3(ループで記事表示)

htmlでいう<main>~</main>を書くのが一般的です。header.phpとfooter.phpの読み込みのために、以下コードそれぞれを最上部、最下部に追記しておきましょう。

<?php get_header(); ?>
...
<?php get_footer(); ?>

single.php / page.php

page.phpが固定ページを表示させるときに使われるもの。single.phpが固定ページを除く投稿記事に使われます。single.phpとpage.phpの中身は、ほぼ似たコードになることが多いです。

index.phpと同じように、htmlでいう<main>~</main>を書くのが一般的です。index.phpと同じように、<?php get_header(); ?>と<?php get_footer(); ?>は追記しておきましょう。

footer.php

フッター表示部分を担当するのが、footer.php。このブログではプライバシーポリシーへのリンクを表示させたり、タグ、カテゴリ等の表示を説明します。

htmlでいう<footer>~</html>を書くのが一般的です。

準備の段階で、<?php wp_footer(); ?>の追記はしておきましょう。

...
<?php wp_footer(); ?>
</body>
...

functions.php

wordpressの処理に関するいろいろな設定を記述します。トップページにおける記事の説明文の文字数制限を記述したり、wordpress編集画面の設定を記述したりします。

下準備として、phpが使えるように最上部に以下を記述。エラー防止のために「?>」は記述しません。function.phpではなく、functions.phpなので注意!

<?php

style.css

見た目を整えるのがstyle.cssです。テーマの名前の情報もstyle.cssに記述します。そのため、wordpressでは「style.css」を認識して情報を得るので、安易に名前を変えるとエラーが起こります。つまり、wordpressテーマにはかならず一つstyle.cssファイルがないと動かない仕様になっているので注意してください。

 

必要なファイルの説明は以上です。ファイルに何を書くのかの説明は下に貼っとくので是非参考に見てください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA