サブページのテンプレート作成

前回の「基本的なテーマの構成」の手順を踏まえた上で、次は実際にWebサイト用のテーマを作成します。下図のようなデザインデータを元に、まずは一番使用頻度の高いサブページ(下層ページ)のコーディングから始めます。

Contents

コーディングの準備

まずはデザインに従ってhtmlの大まかな構造を次のように想定します。

<html>
<head>
    <title></title>
</head>
<body>
    <header>
       <nav></nav>
    </header>
    <div id=”siteContent”>
       <main></main>
       <aside></aside>
    </div>
    <footer></footer>
</body>
</html>

 index.phpを作成

大まかな構造に沿って index.php ファイルを以下のように作成します。
各部の詳細については、次項の「index.phpの詳細」で順を追って説明します。

▼index.php

コードを表示

style.cssを作成

デザインデータに沿ってCSSファイルにスタイルを設定します。

CSSについてはここでは詳しく触れませんが、参考までに sytle.css の内容は以下のように作ってます。ロゴ等の画像は index.php と同じ階層の「images」フォルダに格納します。

▼style.css

コードを表示

index.phpの詳細

<head>〜</head>

まずHTML5のDOCTYPE宣言から。

スマホからの閲覧も考慮して「meta name=”viewport” 〜」を記述しておきます。
viewportの設定とセットでスタイルシートには以下の記述も追加しておきます。

body { -webkit-text-size-adjust: 100%; }

<title>タグの設定

<title>タグの中にテンプレートタグ wp_title()bloginfo(‘name’) を下記のように記述します。

ブラウザでの出力結果は以下のようになります。

  • サイトトップページの場合→<title>サイトのタイトル</title>
  • その他ページ→<title>ページタイトル | サイトのタイトル</title>

 テンプレートタグ  wp_title($sep,$display,$seplocation)

ページのタイトルを表示します。
パラメータの設定値は左から順に「区切り文字」「ページタイトルの表示(true)非表示(false)」「区切り文字の位置(ページタイトルの左右)」です。
公式マニュアル

今後 wp_title() が非推奨になる可能性について
続きを表示

2015年11月頃の時点で「wp_title()」が非推奨になったという情報が一時期ありました。
非推奨は一旦取り下げられたものの、ネット上の情報を探ってみると2016年2月の現時点では、<title>タグは以下の出力方法に置き換えた方が将来的に良いだろうという見解が多いみたいです。

従来の wp_title() に替わる方法はと言いますと、<head>~</head>内に<title>タグは記述せず、functions.php に<title>タグを自動生成する以下の記述を追加します。

add_theme_support( ‘title-tag’ );

(参考)Document title in 4.4
(参考)WordPress 4.4 の新機能や変更点簡易まとめ > 非推奨になった関数

テーマ作成手順の現段階では functions.php ファイルは未作成なので、wp_title() を使用しない場合は、index.php ファイルと同じ階層に下記の内容の functions.php ファイルを作成してください。

▼タイトルの区切り文字をデフォルトの「-」から「|」に変更したい場合は、以下の記述を追加します。

▼サイトトップページの出力結果はデフォルトで「サイトのタイトル – キャッチフレーズ」となりますので、キャッチフレーズ(description)を取り除きたい場合は以下のように記述します。

個人的には functions.php をいじるよりも、単純にテンプレートタグで<head>内に記述する方が後々のメンテナンスもしやすいので、このまま引き続きwp_title()が使えると良いのですけどね〜

スタイルシートの設定

スタイルシートのリンク先(href)にget_stylesheet_uri()を記述します。

「一般設定」のWordPressアドレスが「http://ex.local/wp」の場合、出力結果は以下のようになります。

http://ex.local/wp/wp-content/theme/テーマディレクトリ名/style.css

 ファンクション  get_stylesheet_uri()

使用中テーマのスタイルシートのURLを取得します。
公式マニュアル

その他スタイルシートの設定方法

リンク先の記述を「<?php echo get_template_directory_uri(); ?>/style.css」とした場合も、上記と同じ出力結果を得られますので、テンプレートごとに「style.css」の箇所を変更してデザインを切り替えることも可能です。

サイトアドレスを「http://ex.local」と設定している場合、非WordPressサイトに後からWordPressを組み込むケースなどでは、「<?php echo home_url(); ?>/css/style.css」と記述して下記のように出力することもできます。

http://ex.local/css/style.css

 ファンクション  get_template_directory_uri()

使用中テーマのディレクトリのURLを取得します。
公式マニュアル

wp_head()の追加

headの終了タグ</head>の直前にwp_head()を追加します。

wp_head()はWordPressの動作に欠かせない重要なアクションフックを呼び出す関数です。
記述が無いとWordPress本体や追加したプラグインが正常に動作しませんので、追加するのを忘れないように特に注意してください。

 ファンクション  wp_head()

WordPress本体やプラグインが動作する上で必要な記述を<head>〜</head>内に追加するためのアクションフックを配置する関数です。
公式マニュアル

<body>

body_class()の追加

<body>タグにbody_class()を追加します。

下記のようにページごと異なるクラスが自動で追加されますので、CSSでデザインを切り替える際などに利用します。

以下は<body <?php body_class(); ?>>の一行のみを記述した場合の実際の出力例です。

  • サイトトップページ(固定ページ)
        <body class=”home page page-id-2 page-template-default“>
  • 投稿ページ
        <body class=”single single-post postid-1 single-format-standard”>

 テンプレートタグ  body_class()

ページごとにCSSでデザインを設定できるように、body要素にページの種類に応じて異なるクラス属性を自動的に追加します。
公式マニュアル

サイト構築の場合は特に固定ページを個別に細かく作り込みますので、次のようにis_page()で固定ページか否かを判別して、body_class()に各ページ個別のスラッグを追加します。
現在のページのスラッグはget_post($post)->post_nameで取得します。

さらに、親ページが存在する場合は親ページのスラッグも追加します。
まずはget_post($post->post_parent)で親ページのIDの有無を判別して、親ページが存在する場合は親ページのスラッグを変数$parentに格納してbody_class()に追加します。
親ページのスラッグはget_post($post->post_parent)->post_nameで取得します。

 ファンクション  get_post( $id,$output,$filter )

パラメータで指定されたIDの投稿または固定ページのレコードをデータベースから取得します。使用する際にはパラメータの$idが必須です。
上記の例ではWordPressのグローバル変数$postで現在の記事IDを取得しています。
公式マニュアル

 グローバル変数  $post

現在の投稿(投稿、固定ページ、カスタム投稿タイプ)の情報(オブジェクト)を保持しています。ループ内に於いてthe_post()で更新されます。
公式マニュアル

グローバル変数$postは「ループ内で使用できる変数」と公式マニュアルにありますが、テンプレートファイル内ではループ外且つ「global $post」の宣言無しでも使用できます。
しかしながら、将来的にはWordPressのアップデートで仕様が変わる可能性も一応は考慮に入れておいた方がいいかも知れません

 

<body>の内側は<div id=”wrapper”>〜</div>で囲みます。
#wrapperのセレクタは、CSSでサイト全体の幅や背景画像などを設定する際に使用します。

<header>〜</header>

subpages_theme_img01

サイト名とキャッチフレーズの追加

まずはページのヘッダーにサイト名(bloginfo(‘name’))とキャッチフレーズ(bloginfo(‘description’))を追加します。
サイト名にはサイトトップページ(home_url())に移動するようにリンクを追加します。

グローバルナビゲーションの追加

ナビゲーションはWordPressのカスタムメニューを使う方法もありますが、個人的にはサイト公開後のメンテナンス時にはテンプレートファイル上で管理できた方が何かと楽なので、下記のように独自に簡単なプログラムを記述しています。

リスト項目内のページがアクティブな際には「class=”current”」を追加するように、「get_post($post)->post_name」または「get_post($post->post_parent)->post_name」で現在の記事IDまたは親記事のIDのスラッグを取得します。

 

ヘッダーエリアの最後に、お問い合わせページへのリンクをデザインに合わせて追加します。

タイトルバナーとパンくずリスト

subpages_theme_img02

サイトヘッダーの次に、右図のようにメインエリア(<main>)とサイドバーエリア(<aside>)を含むコンテンツエリアを「<div id=”siteContent”> <main>…</main> <aside>…</aside> </div>」となるように<div>タグで囲みます。

コンテンツエリアのタイトルバナー

ページのタイトルの取得にはget_the_title()を使用します。
リクエストされたページが存在しない場合はタイトルバナーは使用しませんので、is_404()でページの有無を判別します。

 ファンクション  get_the_title()

ループ内またはループ外で記事タイトルを取得する際に使用します。
公式マニュアル

 ファンクション  is_404()

404エラーの発生状況を判定します。
公式マニュアル

コンテンツエリアのタイトルにはデザインに合わせてページごとに異なる画像をCSSで設定しますので、<body>タグのbody_class()を設定した時と同様に現在のページのスラッグを取得してh2要素にクラス属性として追加します。

また、「$post->post_parent」で親ページ(の記事ID)の有無を確認して、存在する場合は「get_post($post->post_parent)->post_name」で親ページのスラッグも追加します。

パンくずリスト

パンくずリストにはプラグイン「Breadcrumb NavXT」を利用します。
プラグインを追加インストール・有効化して、パンくずリストを表示したい箇所に下記のように「bcn_display()」を記述します。

設定はほぼデフォルトのままで利用できると思いますが、デザインに応じて区切り文字やリンクの有無など適宜設定してください。

ちなみにこのテーマ作例での設定は以下の通りです。

Breadcrumb NavXTの設定
続きを表示

subpages_theme06バージョンによりますが、インストール後最初の設定画面で「Your settings are out of date. 」の警告が出る場合は、「Migrate now.」をクリックして設定を更新してください。

【一般】
・ホームページテンプレート
・ホームページテンプレート(リンクなし)
%htitle%」→「ホーム」に変更
・ブログテンプレート(リンクなし)
<span><span>…</span></span>」→「<span><strong><span>…</span></strong></span>」に修正

【投稿タイプ】
・投稿テンプレート(リンクなし)
・固定ページテンプレート(リンクなし)
・添付ファイルテンプレート(リンクなし)
<span><span>…</span></span>」→「<span><strong><span>…</span></strong></span>」に修正

【タクソノミー】
・カテゴリーテンプレート(リンクなし)
・タグテンプレート(リンクなし)
・投稿フォーマットテンプレート(リンクなし)
<span><span>…</span></span>」→「<span><strong><span>…</span></strong></span>」に修正

【その他】
・日付テンプレート(リンクなし)
・404テンプレート(リンクなし)
<span><span>…</span></span>」→「<span><strong><span>…</span></strong></span>」に修正

<main>〜</main>

subpages_theme_img03

記事タイトルと記事本文の追加

メインエリアにループで記事を挿入するテンプレートタグを記述します。

ここではとりあえず記事タイトル(the_title())と記事本文(the_content())が確認できれば良いので、メインエリアは簡易に作成します。

ループ(while文)の後には、下記のように「have_posts()」で取得するデータが無かった場合の記述を追加します。

<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
        …
<?php endwhile; ?>
<?php else: ?>
   
ここに「Not Found」ページの表示を記述
<?php endif; ?>

 テンプレートタグ  the_ID()

ループ内で記事IDを表示します。
公式マニュアル

 テンプレートタグ  post_class()

body_class()と同様に、記事の種類に応じてスタイルを設定するためのクラス属性を追加します。
公式マニュアル

 テンプレートタグ  the_title()

ループ内で記事タイトルを表示します。
公式マニュアル

 テンプレートタグ  the_content()

ループ内で記事本文を表示します。
公式マニュアル

<aside>〜</aside>

subpages_theme_img04

サイドバーは後ほどページごとに作り込みますので、ここではとりあえず大まかにコーディングのみしておきます。

最後に、前項のメインエリアとサイドバーエリアを囲むdiv#siteContentの終了タグ</div>を追加します。

<footer>〜</footer>

subpages_theme_img05

フッターナビゲーションはグローバルナビゲーションと同じ要領で記述します。

<address>にはサイト管理者の情報を記述します。
メールアドレスを記載する場合は、迷惑メール対策にantispambot()関数を使ってエンティティ化しておきます。

 ファンクション  antispambot()

スパム防止対策にメールアドレスをHTMLエンティティ化します。
公式マニュアル(英語)

サブナビゲーションはプログラム化するほどの量ではないので、普通に記述します。

footerの最後にコピーライトを追加、bodyの最後に<div id=”wrapper”>の終了タグ</div>を追加します。

</body>

wp_footer()の追加

bodyの終了タグ</body>の直前にwp_footer()を追加します。

wp_footer()wp_head()と同じくWordPressの動作に欠かせない重要なアクションフックの関数ですので、忘れずに追加してください。

 ファンクション  wp_footer()

WordPress本体やプラグインが動作する上で必要な記述を</body>タグ直前に追加するためのアクションフックを配置する関数です。
公式マニュアル

終了タグ</html>を最後に記述して index.php の作成は終了です。

 


【次の手順→】 固定ページの編集と新規追加
【←前の手順】 基本のテーマ作成

PR

DO WP 管理人