2015/06/13

HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用オリジナルテーマにする方法vol.5

HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用のオリジナルテーマにする方法の第5回目になります。
前回に引き続き、実際にHTML+CSSページをWordPressオリジナルテーマにするための書き換え作業を行っていきたいと思います。
第5回目の今回は、トップページに一覧表示されている投稿記事の中身（詳細）を表示するためのテンプレートsingle.phpを完成させます。

なお、「HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用のオリジナルテーマにする方法」には以下の記事があります。
「HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用オリジナルテーマにする方法vol.1」＝WordPressをサーバーにインストールして、オリジナルテーマをつくるために必要なファイル群をアップし、基本的な設定を行うまでの記事
「HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用オリジナルテーマにする方法vol.2」＝画像のパスの差し替え、カテゴリーの登録、パーマリンク設定、アイキャッチ画像の設定、投稿記事のタイトル表示までの記事
「HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用オリジナルテーマにする方法vol.3」＝カスタムメニュー機能を利用してグローバルナビゲーションを設定して、SNSボタンを設定するまでの記事
「HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用オリジナルテーマにする方法vol.4」＝index.phpを細かいパーツに分けたうえで、ページネーションを設定して新しい記事・過去の記事に自由に行き来できるようにし、index.phpのテンプレート化を完成させるまでの記事
「HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用オリジナルテーマにする方法vol.5」＝トップページに一覧表示されている投稿記事の中身（詳細）を表示するためのテンプレートsingle.phpを完成させるまでの記事
「HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用オリジナルテーマにする方法vol.6」＝ContactやAboutページといったいわゆる「固定ページ」を表示するためのテンプレートpage.phpを完成させるまでの記事
「HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用オリジナルテーマにする方法vol.7プラグイン編」＝WordPressを導入するなら最低限入れておきたいプラグインについての記事

一連の記事が、これからWordPressでオリジナルテーマを作ってみたいという方のご参考になれば幸いです。
注意：本文中に＜?php 〜 ?＞という記述がいくつも出てきますが、HTML文書の関係で、＜　＞はすべて全角で記述しています。
利用される際には、全角の＜ ＞を半角の< >に変えてご利用ください。
全角まま利用すると、うまく機能しません。

投稿記事を表示するためのsingle.phpを作成する

これまではトップページを表示させるためのテンプレートindex.phpを作成してきましたが、今回からは投稿記事を表示するテンプレートsingle.phpを準備しましょう。
Magneticファイル一式の中に、inner.htmlというファイルがあったと思います。
このinner.htmlはコンテンツの詳細記事のためのファイルです。
inner.htmlをsingle.phpにリネームします。
以下がinner.htmlです。

パーツテンプレートを組み込む

ファイル名のリネームが終わったら、index.phpと同じようにパーツテンプレートを読み込んでいきます。
読み込むのは、＜!DOCTYPE html＞〜＜/header＞＜!– end header –＞までがheader.php、＜/body＞＜/html＞がfooter.phpですね。

ブラウザで確認する

書き換えられたらブラウザで確認してみましょう。
コンテンツ部分以外がトップページと同じように表示されていたらOKです。

コンテンツ部分を書き換える

続いてはコンテンツ部分を順次書き換えていきましょう。
inner.htmlでは、トップページにも使っているアイキャッチ画像がひときわ大きく表示されてます。
画像のオリジナルサイズは1200×500pxです。
「HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用オリジナルテーマにする方法vol.2」の「functions.phpにadd_image_size();を記述して他のページで利用する画像サイズを登録する」で設定したとおりです。
これまでどおり画像のパスの差し替えるだけでいいわけですが、ブラウザのデベロッパーツールなどでトップページ画像をしてみると、画像はCSSのbackgroundで設定されています。

style.cssの340行あたりにある以下の記述になります。

しかし、WordPressのテンプレートタグはCSSには書くことできません。
どうすればいいのでしょうか。
このような場合はhtml要素に直接書き込んじゃいます。

style=”プロパティ”属性で要素に直接指定する

背景画像が設定されているhtml要素＜section class=”top”＞にstyle=”プロパティ”属性で要素に直接指定しましょう。

before

以下のコードのうち、＜section class=”top”＞に直接指定します。

after

style.cssの340行あたりにある以下の記述をコピーします。

コピーしたものは、style=”　”の中にコピペします。
ペーストできたら、background: url(‘img/hero_image.jpg’) を以下のように書き換えます。

ポイントは以下の部分です。

背景画像にアイキャッチ画像を読み込むためのテンプレートタグを利用しています。
＜?php wp_get_attachment_url(); ?＞は投稿記事のURLを取得するテンプレートタグで、get_post_thumbnail_id()は、投稿記事に設定されているアイキャッチ画像のアタッチメント情報IDを取得するテンプレートタグです。
これで背景画像にアップしたアイキャッチ画像を表示できるようになります。

CSS側の記述は消しておく

html要素に直接記述したスタイルはCSS側で記述したスタイルよりも優先されますが、CSS側に記載されているスタイルは念のため削除もしくはコメントアウトしておきましょう。
style.cssの340行あたりにある以下の記述になります。

ブラウザで確認する

ブラウザで確認してみて、アイキャッチ画像に登録した画像が表示されていれば完了です。

古い記事・新しい記事に行き来するためのページネーションを組み込む

inner.htmlを見ると、アイキャッチ画像の下部に古い記事・新しい記事に自由に行き来できるページネーションがついています。

一般的なページ番号が表示されるタイプのページネーションについては「HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用オリジナルテーマにする方法vol.4」で解説しましたが、今回のページネーションは、現在のページを起点に、新しい記事と古い記事へと行けるようにするページネーションです。
こうしたページネーションについても、WordPressではテンプレートタグが用意されています。

通常利用するprevious_post_link();やnext_post_link();を使用しない

古い記事・新しい記事へのページネーションを作成したい場合、一般的に利用されるのは、＜?php previous_post_link(); ?＞や＜?php next_post_link(); ?＞というテンプレートタグです。
便利なテンプレートタグで利用価値大なのですが、このテンプレートタグを記述すると、
a要素に加えて、リンク先の記事タイトルも合わせて表示（拾って）しまいます。
ところが、今回のinner.htmlを見ると、デザインは出来上がっているので、記事のタイトルなどは必要ありません。
必要なのはリンク先のURLだけです。
しかし、＜?php previous_post_link(); ?＞＜?php next_post_link(); ?＞のテンプレートタグの場合、リンク先のURLだけを抽出することができません（できるのかも知れないのですが、私にはわかりませんでした）。
そこで、新しい記事・古い記事のURLだけを表示してくれるテンプレートタグを記述する必要があります。
そんなテンプレートタグがあるのでしょうか。

テンプレートタグget_permalinkとget_adjacent_postを組み合わせて対象となる記事のURLだけを表示する

利用するテンプレートタグは、＜?php get_permalink(); ?＞と、＜?php get_adjacent_post() ?＞です。
get_permalinkは、投稿記事のパーマリンクを取得するテンプレートタグで、get_adjacent_postは現在の投稿記事に隣接する投稿記事を取得するテンプレートタグです。
この2つのテンプレートタグを組み合わせて、対象となる記事のURLだけを表示します。
具体的には以下のようにします。

before

書き換えるのはli内のa要素になります。

after

以下のように書き換えます。

＜?php echo get_permalink(get_adjacent_post(false,”,true)); ?＞　で古い記事を、＜?php echo get_permalink(get_adjacent_post(false,”,false)); ?＞ で新しい記事のURLを表示できるようになります。
便利なテンプレートタグの組み合わせなので、覚えておくと便利です。
なお、真ん中にあるボタンは、トップページへのリンクにしました。
トップページへのリンクは＜?php echo get_option(‘home’); ?＞で設定することができます。

ブラウザで確認する

ブラウザで開いてみて、古い記事、新しい記事にへ問題なく移動できれば成功です。

投稿記事のコンテンツ部分はWordPressループで表示させる

single.phpのテンプレート化はほとんど終わりました。
あとは、投稿記事の中身を表示させるための記述をするだけです。
投稿記事の中身を表示させるには、「HTML+CSSページ（レスポンシブWEBデザイン）をWordPress用オリジナルテーマにする方法vol.2」でも出てきたWordPressループを使用します。
＜?php if(have_posts()): while(have_posts()) : the_post(); ?＞〜
＜?php endwhile; endif; ?＞
というやつですね。

WordPressループに書き換える

書き換えるのはinner.htmlの以下の部分になります。

before

after

h1タブの前からループをはじめ、＜/div＞＜!– end content –＞の前で終わらせます。

the_title();で投稿記事で設定したタイトルを出力する

h1タグのなかを、＜?php the_title(); ?＞というテンプレートタグで書き換えています。
これは投稿記事で設定したタイトルを出力するためのテンプレートタグです。

このテンプレートタグをWordPressループ内に記述することで各投稿記事で設定したタイトルを表示できるようになります。

the_content();で投稿記事の本文を出力する

タイトルを表示できるようになりましたが、本文を表示するにはどうすればいいでしょうか。
本文を表示する場合に用意されているテンプレートタグがあります。
それが、＜?php the_content(); ?＞です。
これにより、投稿記事画面で作成した本文を表示できるようになります。

ブラウザで確認する

ブラウザで確認してみて、投稿記事設定画面で登録した記事内容が表示されていれば完了です。

これで、投稿記事を表示させるためのsingle.phpのオリジナルテンプレート化が終わりました。
トップページindex.phpがすでに出来上がっているため、簡単でしたね。
次回は、固定ページ（ContactやAboutページ）を表示させるためのオリジナルテンプレート化（page.php）について解説したいと思います。
WordPressを使ってオリジナルテンプレート化する際のご参考になれば幸いです。

なお、完成した場合の投稿記事ページは以下のようになります。

COJIN SAMPLE：これはサンプル01です

Sponsored by

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。