WordPress自作テーマの作成(基本)

[2017.09.22]functions.phpを作る際の注意点について修正

このblogを作る際に色々調べたので備忘録のために、WordPressで自作テーマを作成する方法をまとめます。

キャプチャ

思い通りに作成するにはPHPやWordPressのルール等の知識が必要なようですが、ここでは最低限この通りにすると作れるというやり方のみ記載しています。既存テーマのカスタマイズ方法ではありませんので注意して下さい。一から自分で作ったテーマを使用しますので、HTML/CSSの知識は必要となります。PHPも多少書き換えられるぐらいの技術は欲しいです。

1.HTMLとCSSでサンプルをつくる

まずは、どんなデザインのサイトにしたいかを決め、それを普通にHTMLとCSSで作ってしまいます。その後、そのコードを元にWordPressで機能するように書き換えていきましょう。

ここでは下記の要素を持つサイトを作るものとして解説します。

キャプチャ

最低限必要なファイルは記事一覧(index.html)とスタイルシート(style.css)です。記事詳細のデザインが記事一覧と異なるようなら記事詳細(single.html)も作っておくといいです。また、メインのCSSは「style.css」とし、階層はsingle.htmlと共にindex.htmlと同じ場所(第1階層)に置いておいて下さい。他のCSSファイルやJSファイル、画像ファイルなどは各々フォルダを作成しその中に入れてしまって構いません。

ディレクトリ構造例

index.html
single.html
style.css
cssフォルダ
 └normalize.css
imgフォルダ
 └画像1
 └画像2

サンプルのマークアップ方法ですが、WordPressではテンプレートタグ等によりコードを自動で書き出すところがあります。一度各要素がどのように書き出されるのかに目を通してからコーディングを進めると、後でコードを修正する手間が省けると思います。下のリンク先を参考にして、細かい所は分からなくていいので、書き出されるコードを確認しながらサンプルをつくると良いかもしれません。

ページネーション
カテゴリー検索
最新記事
リンク集
プロフィール

2.ファイルをサーバーにアップロードする

自分が作ったサンプルファイル一式をWordPressにテーマとして認識してもらうために、幾つかの調整後、サーバーにアップロードします。

【調整1】拡張子の変更

WordPressではPHPを使うため、拡張子をHTML→PHPに変更します。この時index.phpとstyle.cssはWordPressに絶対に必要なファイルですので、必ずこの通りのファイル名にして下さい。

[調整後のフォルダ名]
index.php
(single.php)
style.css

【調整2】style.cssに追記

style.cssには必ずコメントで下の「テーマ詳細」を記述します。これがないとテーマとして認識されません。「Theme Name(テーマの名前)」は必須ですが、これ以外は必要なければ入れなくても大丈夫です。

※日本語を使用する場合、文字コードはUTF-8にして下さい。

ファイルをアップロード

調整したファイル一式をアップロードします。あげる場所は、サーバーに設置したWordPressの下記フォルダ内です。

/wp-content/themes/テンプレート名/
※テンプレート名は自由に命名して下さい。

3.自作したテーマを使う

ここまで来ると、先ほどUPしたファイルをWordPressがテーマとして認識してくれます。管理画面から「外観」→「テーマ」へ進んでください。新しいテーマが追加されているはずです。後はテーマを選択して「有効」にしましょう。サイトを開けばデザインが変更されているのが確認できます(CSSと画像が反映されていませんが気にしないでOKです)。

キャプチャ

しかし、今のままだとサムネが表示されていません。880x660px(推奨サイズ)のキャプチャー画像を用意しましょう。それをscreenshot.pngとして保存。先ほどのUPしたテーマファイルの第1階層(index.phpと同じ階層)にUPして下さい。管理画面をリロードすればサムネイルが表示されます。

4.CSSと画像を反映させる

先ほど反映されていなかったCSSや画像を反映させます。WordPressではCSS内を除いて、相対パスを使用できません。反映されていないのはこのためです。なのでPHP関数を使って表示されるようにパスを書き換えていきます。

WordPressでは、このようなPHP関数が無数に用意されています。その中でも特にテーマ用に用意され、テンプレート内で使用するPHP関数をテンプレートタグと呼びます。テンプレートとは、何処にどのように表示するかを定義するphpファイルで、index.phpなどもその一つです。

関数リファレンス
テンプレートタグ

では下記を参考にして、本来のデザインで表示されるようにindex.phpを書き換えていきましょう。

style.cssを読み込む

get_stylesheet_uri();は使用しているテーマのスタイルシート(style.css)のURIを返す関数です。

【変更前】

【変更後】

関数リファレンス/get stylesheet uri…テーマで使われているスタイルシート(style.css)のURIを返す

その他のCSSや画像、JS等を読み込む

get_template_directory_uri();は、有効化されてるテーマのテンプレートディレクトリのURIを取得します。
style.css以外のCSSファイルや画像、JSファイルのパスなどに使用します。
※<?php bloginfo( ‘template_url’ ); ?>は古い書き方で非推奨なので使わないようにしましょう。

【変更前】

【変更後】

関数リファレンス/get template directory uri…有効化している テンプレート ディレクトリのURIを取得

これで必要なファイルは一通り読み込めたと思います。

5.テンプレートパーツを作る

次に、index.phpを幾つかのパーツに分けて、それぞれを別のテンプレートとして保存します。

先程も出ましたが、「テンプレートは、何処にどのように表示するかを定義するphpファイル」です。index.phpやsingle.phpなどがそうです。テンプレートには他に、特定のパーツを収めるためのテンプレートもあります。例えば、サイトヘッダーに表示するものを定義するheader.phpやフッターに表示するものを定義するfooter.phpなどがあるのです。これらはページ自体の表示を定義するindex.phpなどと区別してテンプレートパーツ(パーツテンプレート、モジュールファイル)と呼ばれたりします。

WordPressのテーマは、index.phpやsingle.phpなどのページを表示するためのテンプレートに複数のテンプレートパーツを読み込ませることでページを完成させています

キャプチャ

おもなテンプレートパーツ

header.php … ヘッダー用テンプレート →[読み込み] <?php get_header(); ?>
footer.php … フッター用テンプレート →[読み込み] <?php get_footer(); ?>
sidebar.php … サイドバー用テンプレート →[読み込み] <?php get_sidebar(); ?>
searchform.php … 検索フォーム用テンプレート →[読み込み] <?php get_search_form(); ?>
comments.php … コメント用テンプレート →[読み込み] <?php comments_template(); ?>

ヘッダーをheader.phpに移す

では、ヘッダー部分をheader.phpにパーツ化してみましょう。

・一行目(DOCTYPE宣言)から移動させて下さい。
・どこまで含めるかはデザインに合わせて決めて下さい。
<?php wp_head(); ?>を絶対に</head>の直前に入れてください。

index.phpからheader.phpを呼び出します。呼び出したい場所に下記のインクルードタグ(読み込み用のテンプレートタグ)を記入してください。

フッターをfooter.phpに移す

フッター部分をfooter.phpにパーツ化してみましょう。

<?php wp_footer(); ?>を絶対に</body>の直前に入れてください。

index.phpからfooter.phpを呼び出します。呼び出したい場所に下記のインクルードタグを記入してください。

<?php wp_head(); ?>と<?php wp_footer(); ?>について

これらは、wp_headアクションとwp_footerアクションをスタートさせる関数です。デフォルトでさまざまなコードを出力してくれます。多くのプラグインがwp_head・wp_footerが有ることを前提に開発されているため、この記述がないとプラグインが正常に動作しないことがあります。必ず書くようにしてください。

サイドバーをsidebar.phpに移す

今までと同様にサイドバー部分をsidebar.phpに移してください。index.phpに書くインクルードタグは下記です。

検索用フォームをsearchform.phpに移す

検索用のフォームを作った方はそれも移動させて下さい。header.phpに検索フォームがある場合はheader.phpにインクルードタグを記述します。

カスタムテンプレートについて

この他にも必要に応じで独自にテンプレートパーツを作ることが可能です。このようにファイル名を自分で決められるテンプレートパーツをカスタムテンプレートと呼びます。

例えば「loop.php」というカスタムテンプレートを作れば、呼び出すには下記のインクルードタグを使います。

間に「-」を挟むテンプレート名を使う時は下記になるので気をつけて下さい(例:loop-content.php)。

6.各要素をテンプレートタグ等で置き換えて動的にする

最後にWordPressで動的に扱えるところが機能するように書き換えていきましょう。

<title>タイトル</title>

<title>タイトル</title>をテンプレートタグに置き換えます。これにより、管理画面の「設定」→「一般」の「サイトのタイトル」に登録したブログ名を自動で出力してくれるようになります。

さらに、次のよう記述すると、「ページタイトル | ブログ名」を自動入力してくれるようになります。この時ページタイトルは記事を投稿した際に設定した記事タイトルが表示されます。

テンプレートタグ/bloginfo…サイトの情報を表示
テンプレートタグ/wp title…現在のページタイトルを表示

サイトロゴ(サイトTOPへ戻る)

サイトロゴなど、サイトのTOPへ戻るリンクは下記のように記述します。自動でブログのURLを呼び出してくれます。

テンプレートタグ/home url…現在のブログのホームURLを返す

検索フォーム

以下は、検索フォームの例です。必ずしもこの形である必要はありません。守らなければいけないルールは3点だけです。(WordPress Codex 日本語版より)

・検索フォームはブログのホームページへGETで行う
・テキストボックスのname属性の値は「s」
・labelは必ず含める(無くても動きはするようですが。)

<?php echo home_url(); ?>ブログのURLを呼び出します。引数でパスの追加が出来ます。
<?php the_search_query(); ?>は検索された時に、検索ワードを呼び出します。value属性にこれを入れておくと、検索結果が表示された際に検索ワードがフォームに入力されたままで残ってくれます。必要なければ削除して構いません。

テンプレートタグ/home url…現在のブログのホームURLを返す
テンプレートタグ/the search query…検索された時にその検索ワードを表示

記事一覧(ループ)

記事一覧を表示させます。まず、下記が基本的な構成です。自分のcodeに合わせて各テンプレートタグで囲っていきましょう。

あとは該当箇所を置き換えていくだけです。

【記事タイトル/記事詳細へのリンク】

※このテンプレートタグはループ内でしか使えません

【記事内容】

※このテンプレートタグはループ内でしか使えません

【記事抜粋】

※このテンプレートタグはループ内でしか使えません
※投稿の編集画面に抜粋の入力欄が無い時は、ページ上部にある「表示オプション」で抜粋にチェックを入れて下さい

【投稿日1】

※このテンプレートタグはループ内でしか使えません
※同じ日に複数の記事がある時は、最初の記事とともに一度だけ出力されます。

【投稿日2】

※常に投稿日を表示します

【記事カテゴリー】

※このテンプレートタグはループ内でしか使えません

テンプレートタグ/the permalink…記事詳細のパーマリンクのURLを表示(※ループ内で使用)
テンプレートタグ/the title…記事タイトルを表示(※ループ内で使用)
テンプレートタグ/the content…記事の本文を表示(※ループ内で使用)
テンプレートタグ/the excerpt…記事の抜粋を表示。抜粋を設定していない時は本文の一部の後に[…]を表示(※ループ内で使用)
テンプレートタグ/the date…投稿日を表示(※ループ内で使用)
テンプレートタグ/get the date…投稿日を取得
テンプレートタグ/the category…記事が属するカテゴリーへのリンクを表示(※ループ内で使用)

ページネーション

【方法1】プラグインを使用

デザイン等に拘らないならプラグインが簡単に設置できて便利です。
こちらにプラグインの一つが紹介されています。
WP-PageNavi – WordPressプラグイン – ページナビゲーションを作成 – WordPressの使い方と設定 – Webkaru

【方法2】プラグインを使用しない

プラグインを使用した場合、形が決まってしまうため、カスタマイズに苦労します。そこでプラグインを使わずに作ることもできます。

まず、functions.phpファイルを作成します。functions.phpはテーマで使用する機能を定義するためのファイルです。自分の欲しい機能を追加したい場合は、このファイルの中にPHPで記述するとテーマ内で機能するようになります。functions.phpはindex.phpやstyle.cssと同じ階層に入れてください。

functions.phpを作る際の注意点

functions.phpは少しのミスで表示にエラーをきたします。常に正常な状態に戻れるよう。バックアップを取りましょう。また、保存する際は文字コードをUTF-8(BOM無し/UTF-8N)にしてください。
functions.phpにはPHPコードを書いていくため、<?php(開始タグ)と?>(終了タグ)をファイルの先頭と最後に入れておいて下さい。関数ごとに開始タグと終了タグで囲うのはエラーを起こす可能性があるのでやめましょう。
下記サイトで詳しく説明されています。
WordPressの初心者がfunctions.phpの編集でエラーを防ぐ為に気を付けたいこと|D-31Nデザインスタジオ

functions.phpのようなHTMLが混在したりしない、純粋なPHPが書かれるコードでは最後の?>(終了タグ)は省略しましょう。プラグインが動作しなかったり、改行による表示のトラブルを防ぐことができます。(※2017.09.22追記)
PHPの最後の終了タグ ?> は付けないでおこうねというお話 | ザ サイベース

functions.phpを作成したら、下記の関数を記入します。

※4行目の「$range = 2」の数値を変更することで最大で表示されるページ番号リンクの総数を変更できます。ここの例では「2*2+1」で最大5ページ分のリンクが表示されることになります。

次に、index.phpなどの設置したい場所へ下記を記述してください。

ページが増えた時に以下のようなコードが自動で書きだされます。

※改行等はこの通りになりません。

この方法であれば、分かる範囲で自由に書きだされるタグやclass等を変更することができます。
このページネーションは、管理画面の「設定」→「表示設定」の「1ページに表示する最大投稿数」で設定した投稿数以上の投稿があった場合に表示されるようになります。最終ページや先頭ページが番号リンクで表示されている場合や、先頭ページにいる場合など、「First」「Back」「Next」「Last」のリンクが必要ない状態では、class=”nolink”を持つ方のタグが表示されることになります。

ページネーションのコードは下記のサイトを参考にさせていただきました。先頭へ戻るリンクなどの表示するしないなど、他のパターンも紹介されていますので参考にしてください。
1.WordPressにプラグイン無しでページネーションを設置する方法 | コリス
2.TEST CORDING » WordPressのpluginを使わないページネーションを改造する方法

カテゴリー検索

サイドバーにあるカテゴリーのリンク一覧です。クリックするとそのカテゴリーに属する記事だけを検索して表示してくれます。カテゴリーは管理画面の「投稿」→「カテゴリー」で設定できます。

検索結果ページはindex.phpを使ってくれますので用意する必要はありません。デザインを変えたいなど、あえて別のHTMLファイルを用意したい時は、category.php(archive.php)というファイル名にしてください。WordPressは、カテゴリーの検索結果ページにindex.phpより優先してcategory.php(archive.php)を使います。書き方はindex.phpと同じです。

この様にWordPressでは、各ページごとに優先して使用するテンプレート名というものが決まっています。これはテンプレート階層と呼ばれます。例えば、記事詳細のページはindex.phpだけでも表示してくれますが、single.phpがあればそっちを優先して使用してくれます。
どのページがどのテンプレートを優先して使用するかは、下記で確認できます。

テンプレート階層

【方法1】ウィジェットを使用

管理画面で設定したカテゴリーを表示するのに一番楽な方法はウィジェットを利用することです。管理画面の「外観」に「ウィジェット」が表示されていない場合は、下記コードをfunctions.phpに記述してください。

※functions.phpについてはページネーションのところで説明しています。

ウィジェットが表示されたら、左の「カテゴリー」のタイトル部分を右の「サイドバー1」にドラッグ&ドロップします。

キャプチャ

後は、表示したい場所に下記のコードを記述するだけです。

書き出されるコードは下のようになります。親カテゴリーと子カテゴリーも区別なく<li>で並びます。

【方法2】ウィジェットを使用しない

ウィジェットは楽ですが、他のマークアップにしたい場合もあると思います。次の方法なら、ある程度自由になります。

表示したい場所に下記のように記述します。

上記の例では次の様に書きだされますが、これなら好きなタグに書き換えられます。

$parent_val -> count$child_val -> countはそのカテゴリを持つ投稿が何件あるかを出力しています。必要なければ抜いて下さい。
このコードはこちらのサイトを参考に書かせていただいています。
WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする | Web技術Tips

最新記事

こちらも一番簡単なのはウィジェットを利用することです。方法はカテゴリー検索の時と同じ。

しかしやはり、このブログの様に記事のサムネイルを入れたいなど、自由にカスタマイズをするには、ウィジェット利用しない方法をとります。

次のコードを表示したい場所に記述します。

これで次の様なコードが書きだされます。

the post thumbnailは投稿の際に指定したアイキャッチ画像を表示しています。投稿編集画面に「アイキャッチ画像」が見当たらない場合は、表示オプションでアイキャッチ画像にチェックを入れてください。また、このアイキャッチ画像のサイズは管理画面の「設定」→「メディア」のサムネイルのサイズで設定する事ができます。

テンプレートタグ/the post thumbnail…現在の投稿の設定したアイキャッチ画像を表示

このコードは下記サイトを参考にさせていただきました。
今さら…いや今だから「WordPressのトップページに、新着記事数件を表示する」サンプルコードをあげとく[WordPress使えそうなスニペットシリーズ]-マイペースクリエイターの覚え書き

リンク集

リンク集は管理画面の「リンク」で設定できます。もし、左のメニューに「リンク」が無い時は、プラグイン「Link Manager」をインストールして下さい。次に表示方法です。

【方法1】ウィジェットを使用

やはり、ウィジェットを利用するのが簡単です。方法はカテゴリー検索と同じです。
この時、リンクにカテゴリーを設定していると、下記のように表示されます。

【方法2】ウィジェットを使用しない

ウィジェットを使わずに下記のように書くこともできます。

ちょっと分かりづらいですが、例えば上のコードだと次のように書きだされます。

変更できる箇所とできない箇所があることが分かります。各設定部分は必要なければ削除して構いません。デフォルトで書き出されるコードはウィジェットを利用したものとほとんど同じです。

テンプレートタグ/wp list bookmarks…管理画面のリンクにあるブックマークを表示

プロフィール

ウィジェットの「テキスト」を利用します。「テキスト」では、任意のテキストやHTMLを設定できます。管理画面の「外観」→「ウィジェット」にある左の「テキスト」を右の「サイドバー」にドラッグ&ドロップ。タイトルにHN(ハンドルネーム)を、内容に紹介文を設定ます。

表示方法はカテゴリー検索の時と同じです。すると下記のように書きだされます。

functions.phpに以下のように描くことで、多少のタグ変更が可能になります。

上の例では次のように書き出されるでしょう。

<div class=”textwidget”>~</>は換えられないようですね。

これで、ブログの完成です。管理画面の「投稿」→「新規追加」から記事を投稿してみましょう。記事を投稿する際にエディタのタブを「テキスト」にすれば、タグを直接入力することができます。抜粋もタグを入れることができます。また、画像はエディタの左上にある「メディアを追加」ボタンから挿入してください。