公開日:2017年8月28日Plusers作成中のWordPressテーマのデモサイトはこちらWordPressでは、独自に決められたテンプレートを追加することで、様々なページの表示を分けて出力することができます。トップページやアーカイブページ(カテゴリやタグの一覧ページ)ページに個別の要素を追加したり、投稿や固定ページに専用のテンプレートを用意したりして、自分だけのWordPressテーマに仕上げていきましょう。今回は、トップページやアーカイブページに加え、投稿や固定ページに様々なテンプレートを適応する方法についてご紹介します。投稿用の専用テンプレートの作り方テンプレートを呼び出して使用するWordPressのテンプレートの優先順位について理解するトップページトップページのテンプレートの優先順位は下記の通りになります。ホームページの表示』の設定が最新の投稿の場合。ホームページの表示』の設定が固定ページの場合。固定ページのテンプレート優先順位については、下で解説。トップページは、『front-page.php』が最優先で表示されます。ホームページの表示』の設定に関係なく優先して表示されるため、トップページの表示を絶対に変えたくない場合などに使用します。ホームページの表示』の設定によって分岐されるテンプレートです。設定が『最新の投稿』のときは『home.php』、『固定ページ』のときは『page.php』がテンプレートとして適応されます。アーカイブアーカイブページのテンプレートの優先順位は下記の通りになります。index.phpカテゴリーcategory-{slug}.php↓category-{ID}.php↓category.php↓archive.php↓index.phpタグtag-{slug}.php↓tag-{ID}.php↓tag.php↓archive.php↓index.php日付date.php↓archive.php↓index.php著者author-{name}.php↓author-{ID}.php↓author.php↓archive.php↓index.php全てのアーカイブページのベースとなるのは、『archive.php』と『index.php』で、それ以上に細かく出力を分けたい場合は、更に優先順位の高いテンプレートを作成するというイメージです。各アーカイブページに大きな違いがない場合は、各テンプレートを作成するのではなく『archive.php』内で各ページごとの条件分岐を行ってコンテンツを分ける方法があります。投稿・固定ページ投稿・固定ページの基本的なテンプレートの優先順位は下記の通りになります。index.php投稿カスタムテンプレート.php↓page-{slug}.php↓page-{ID}.php↓page.php↓singular.php↓index.php固定ページカスタムテンプレート.php↓page-{slug}.php↓page-{ID}.php↓page.php↓singular.php↓index.php投稿と固定ページで、最優先されるテンプレートは『カスタムテンプレート』になります。(※作成方法については、本記事の『投稿や固定ページに様々なテンプレートを適応する』で解説します。)デモでは、投稿と固定ページのテンプレートを『single.php』と『page.php』に分けて作成していますが、『single.php』と『page.php』を作成せずに『singler.php』を作成することで、投稿と固定ページを共通のテンプレートで出力できます。基本的なテンプレートの優先順位については以上です。404』ページなどの分岐がありますが、今回は作成しないので別の記事で詳しく説明しています。上記を踏まえた上で、各テンプレートをWordpressテーマに追加・編集していきましょう。トップページに独自の要素とデザインを追加する『2.WordPressテーマの骨組みをレスポンシブレイアウトに構築する』で作成したデザインに合わせて独自のトップページを作成していきます。WordPress内の『index.php』を複製し、『home.php』ファイルを作成してください。※管理画面の設定を反映させたい場合は『home.php』、反映させない場合は『front-page.php』を作成しましょう。home.phpに要素を追加する『home.php』を作成したら、TOPページに独自の要素を追加します。デモでは、一番最新の記事だけ独自のデザインで出力されるように調整します。要素を『home.php』に追加しましょう。endif;?>基本的な部分は、『loop-content.php』とほぼ一緒ですが、少しだけ要素を追加したり、条件分岐を追加したりしています。追加や変更点は下記の通りです。endif;?>上記は、トップページが1ページ目なのかどうかを判別するため条件分岐です。追加することで、トップページの1ページ目のみ独自のコンテンツを表示し、ページャーで2ページ目以降に飛んだときは、独自コンテンツを表示せずに通常のループコンテンツのみ表示します。endwhile;』を省いて記述します。?>コンテンツが大きくなるため、呼び出すサムネイルのサイズを変更しています。the_post_thumbnail('full')』でフルサイズのサムネイル画像を出力してください。POST』というアイコンを追加します。Awesomeのアイコンフォントで設置しています。上記以外にも、追加する要素に独自のCSSを追加するために、『home-top』『article-top』などのclassを追加しています。上記の要素を『home.php』に追加すると下記の画像のように出力されます。変更点・追加点がきちんと出力されていれば、要素の追加は完了です。home.php用のCSSを追加する要素の出力が完了したら、トップページ用のCSSをスタイルシートに追加しましょう。}}CSSをそのまま反映すると、上記の画像のようにデザインが反映されます(PC)。好みに合わせて、サイズや色を調整してください。アーカイブにタイトルとディスクリプションを追加する現状のテーマでアーカイブページを見てみると、カテゴリ・タグ・日付別・著者ページなどがすべて同じデザイン・要素で構成されています。このままだと、ユーザーがどの記事の一覧を見ているかが分かりづらいので、各ページにタイトルと説明を追加しましょう。WordPress内の『index.php』を複製し、『archive.php』ファイルを作成してください。今回は、タイトルと説明を追加するだけなので『archive.php』に各アーカイブページの要素を条件分岐で記述しますが、出力する要素などを細かく分けたい場合は、『category.php』や『tag.php』など、細かくテンプレートを分けて作成してください。archive.phpに要素を追加する『archive.php』を作成したら、各アーカイブページ用に条件分岐を行い要素を追加します。デモでは、記事の一覧の上にタイトルと説明を追加していきます。各アーカイブごとに条件分岐をして、タイトルを出力します。ディスクリプションは、カテゴリーとタグアーカイブのみ出力しています。出力される文言は、Wordpress管理画面のカテゴリーとタグの編集画面の説明に入力した内容が出力されます。任意の文言』を追加してください。上記の要素を『archive.php』に追加すると下記の画像のように出力されます。(下記画像はカテゴリページ)archive.php用のCSSを追加する要素の出力が完了したら、アーカイブページに新しく追加した、タイトルとディスクリプション用のCSSをスタイルシートに追加しましょう。}}CSSをそのまま反映すると、上記の画像のようにデザインが反映されます(PC)。好みに合わせて、サイズや色を調整してください。これで、WordPressのテーマとして基本的な機能は全て整いましたので、実際に運用することができます。ここからは、実際にテーマを作成・運用するときによく使うものについて簡単にご紹介します。頭の片隅にいれておくだけで、WordPressテーマを作成する際の幅がぐんと広がるので覚えておきましょう。投稿や固定ページに様々なテンプレートを適応する固定ページ用の専用テンプレートの作り方WordPressの固定ページを出力する場合には、通常は『page.php』が適応されますが、新たにテンプレートファイルを作成することで、デザインや出力する要素を各固定ページごとに切り替えることができます。固定ページ用の専用テンプレートを作成する場合は、WordPressテーマ内に新しく『.php』形式のテンプレートを追加します。テンプレートの名前の指定は特にないので、管理しやすい名前をつけましょう。作成したら、下記のコードをソースの一番最初に記述してください。テンプレートの名前*/?>『テンプレートの名前』の部分を自分の付けたいテンプレート名に変更してください。反映されると、固定ページの編集画面で使用するテンプレートを選択できるようになります。固定ページと同様に、投稿でもWordPressテーマ内に新しく『.php』形式のテンプレートファイルを作成することで、デザインや出力を各投稿ごとに切り替えることができます。こちらも、テンプレートの名前にこれといった決まりは無いので、管理しやすい名前をつけましょう。作成したら、下記のコードをソースの一番最初に記述してください。post*/?>『テンプレートの名前』の部分を自分の付けたいテンプレート名に変更してください。反映されると、投稿の編集画面で使用するテンプレートを選択できるようになります。テンプレートを呼び出して使用するWordPressでは、様々なテンプレートで出力やデザインを指定していますが、複数のテンプレートに共通の内容があることも少なくありません。共通する部分が複数ある場合は、共通部分を記述した新たなテンプレートを作成し呼び出しましょう。共通部分のテンプレートを外部化することで、修正する際なども一箇所訂正するだけで済むので効率的にWordPressのテーマを編集することができます。共通部分は好きな名前でテンプレートを作成してもOKです。新しく作成したテンプレートを呼び出す場合には、下記の記述を呼び出したい場所に追加してください。?>『'呼び出したいテンプレート名'』の部分には拡張子は不要です。これで、WordPressレスポンシブテーマ作成は終了です。様々なWordPressに追加できる機能については『WP機能追加』カテゴリで紹介しています。新たな機能をWordPressに追加したいときに覗いてみてください。今回作成したWordPressテーマに追加する機能としておすすめは、『404ページ』と『検索機能のカスタマイズ』『パンくずリストの追加』です。作成したテーマをベースに自分好みな機能やデザインを追加して、自分好みのWordPressテーマにカスタマイズしてください!下記よりwordpressレスポンシブテーマ作成で作成したテーマの完成版サンプルをダウンロードできます。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のディスクリプションの出力方法を変更しました。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のコードを修正しました。2019年9月21日WordPressテーマ作成の記事の内容をリニューアルしました。