個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

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

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

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方法の第4回目になります。
前回に引き続き、実際にHTML+CSSページをWordPressオリジナルテーマにするための書き換え作業を行っていきたいと思います。
第4回目は、index.phpを細かいパーツに分けたうえで、ページネーションを設定して新しい記事・過去の記事に自由に行き来できるようにし、index.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文書の関係で、< >はすべて全角で記述しています。
利用される際には、全角の< >を半角の< >に変えてご利用ください。
全角まま利用すると、うまく機能しません。

index.phpを細かいパーツに分ける

index.phpをオリジナルテンプレート化する準備がほぼ整いました。
これからは、より汎用性のあるテンプレート化とするためにindex.phpを細かいパーツに分けていきます。
パーツは各ページで共通して利用する、文字通りサイトの「部品」です。
例えば、ヘッダー部分やサイドバー部分、フッター部分は通常、1つのサイトで共通のものを利用しますよね。
こうした共通部分をパーツに分けていくのです。
具体的には以下のように分割していきます。

HTML+CSSページをWordPress用オリジナルテーマにする方法

ソースで見るとこうです。

HTML+CSSページをWordPress用オリジナルテーマにする方法

図内で登場するheader.phpfooter.phpというパーツテンプレート(パーツテンプレートについては後ほど説明します)を利用して細分化していきます。
なお、サンプルページではheader.phpとfooter.phpという2つのパーツだけが登場しているのは、サンプルが特殊なサイトになっているためです。
一般的なサイトは、2カラムレイアウトが主流です。
その場合には、サイドバー部分をsidebar.phpというパーツテンプレートを使います。
具体的なサイトで説明すると以下のような形です。

HTML+CSSページをWordPress用オリジナルテーマにする方法

これから上記のようにパーツごとに分割していくわけですが、◯◯.phpという、いろいろなphpファイルが出てきて、頭が混乱してきませんか?
頭を整理するするために、いろいろと登場する◯◯.phpについて解説したいと思います。

WordPressのテンプレート種類と優先順位を理解する

index.phpやheader.phpなどと、いろいろとphpファイルが登場します。
これらのphpファイルはWordPressのテンプレートを構成するテンプレートファイル群です。
WordPressの各テンプレートには、それぞれ役割が存在しています。
投稿記事や固定ページで登録したコンテンツ内容は、テーマ内にあるテンプレートに従ってHTMLが出力されます。
簡単な図で説明すると以下のようなイメージです。

template_01

たとえば、投稿記事はsingle.php、固定ページはpage.phpといったように、それぞれのコンテツによって利用されるテンプレートが決まっています。
ただし、こうしたテンプレートが何もない場合は、index.phpが利用されてHTMLが出力されます。
このように、WordPressのテンプレートは、コンテンツの種類によってテンプレートの優先順位が決まっています。
具体的には以下の通りです。

テンプレートの種類と優先順位

コンテンツの種類 優先1 優先2 優先3 優先4 優先5
トップページ front-page.php home.php index.php
投稿記事 single-[投稿タイプ].php single.php index.php
固定ページ カスタムテンプレート page-[スラッグ].php page-[ID].php page.php index.php
カテゴリーページ category-[スラッグ].php category-[ID].php category.php archive.php index.php
検索結果 search.php index.php
404ページ 404.php index.php
日付別 date.php archive.php index.php
タグ別 tag-[スラッグ].php tag-[ID].php tag.php archive.php index.php

*トップページは管理画面のトップページ設定によって変わる場合があります。

パーツテンプレートの種類

上記の表は投稿記事や固定ページなどのページごとに対応するテンプレートでしたが、これらのテンプレートはさらに、複数の「パーツテンプレート」から構成されています。
「index.phpを細かいパーツに分ける」という項目で出てきたheader.phpやfooter.phpといったものが、このパーツテンプレートにあたります。
パーツテンプレートは以下のような種類があります。

パーツ名 パーツテンプレート
ヘッダー header.php
フッター footer.php
サイドバー sidebar.php
コメント comments.php
検索フォーム searchform.php
カスタム [content].phpまたは[content-sub].php

パーツテンプレートは、他のテンプレートに読み込んで利用します。
複数のテンプレートで繰り返し使用する共通パーツとして利用できます。
これらのパーツテンプレートを、テンプレートに読み込む際には、専用のテンプレートタグを利用して読み込ます。
専用テンプレートタグは以下のようになります。

パーツテンプレート テンプレートタグ
header.php <?php get_header(); ?>
footer.php <?php get_footer(); ?>
sidebar.php <?php get_sidebar(); ?>
comments.php <?php comments_template(); ?>
searchform.php <?php get_search_form(); ?>
[content].phpまたは[content-sub].php <?php get_template_part(‘[content]または[content-sub]’); ?>

各種テンプレートの解説が終わったところで、index.phpをパーツごとにわけていきましょう。

パーツテンプレートheader.phpを作成する

index.phpからパーツテンプレートheader.phpを作成します。
まずはheader.phpというファイルを新規作成します。
新規作成できたら、index.phpから以下の部分をカットし、header.phpにペーストします。

パーツテンプレートfooter.phpを作成する

index.phpからパーツテンプレートfooter.phpを作成します。
footer.phpというファイルを新規作成します。
新規作成できたら、index.phpから以下の部分をカットし、header.phpにペーストします。
とっても少ないですが……。

テンプレートタグを使ってパーツテンプレートを読み込む

header.phpとfooter.phpをに分けたことで、index.phpには以下の部分だけが寂しく残っていると思います。

上記の部分にパーツテンプレートを読み込むためのテンプレートタグを書き込みます。
header.phpは<?php get_header(); ?>、footer.phpは<?php get_footer(); ?>です。

ブラウザで確認する

テンプレートタグを書き込んだら、header.php、footer.php、FTPでファイルをサーバーにアップします。
アップできたらブラウザで確認してみましょう。
表示になにも変化がなければ成功です。

header.phpとfooter.phpにテンプレートタグのwp_head();とwp-_foot();を書き込む

トップページのオリジナルテンプレート化はほぼ終わりましたが、もう少しだけ手を加える必要があります。
追加するのはheader.phpとfooter.phpです。
ここに2種類のテンプレートタグを記入することで、プラグインを利用できるようになります。
WordPressには豊富な機能を簡単に追加できるプラグインというものがあります。
このプラグインの豊富さがWordPressの人気の一つです。
プラグインを使わないままWordPressを運営することは難しいでしょう。
そこで、プラグインを利用できるようにするために、以下のテンプレートタグを追加しましょう。

wp_head();をheader.phpに記述

まずはheader.phpを開きます。

次の場所、headの閉じタグ直前に、テンプレートタグのwp_head();を記述します。

wp_footerをfooter.phpに記述

footer.phpを開きます。
記述するのはbodyの閉じタグの直前です。

bodyの閉じタグの直前に、テンプレートタグのwp_footer();を記述します。

ブラウザで確認する

ブラウザで確認してみましょう。
ヘッダー部分に見慣れないコードがズラズラと並んでいれば、テンプレートタグが無事に記述できたことになります。

HTML+CSSページをWordPress用オリジナルテーマにする方法

WordPressのバージョン情報を隠す

wp_header();とwp_footer();を記述したましたが、このままでは都合の悪いことがあります。
コードを見ると、WordPressのバージョン情報が表示されたままになっています。

このバージョン情報を誰でも閲覧できてしまうと、いろいろと不都合があります。
そこで、このバージョン情報を表示しないしなようにしましょう。
function.phpファイルを開き、以下のコードを追加します。

ソースを見てバージョン情報が消えていたら成功です。

HTML+CSSページをWordPress用オリジナルテーマにする方法

ページネーションを追加する

トップページindex.phpのテンプレート化はほとんど終了しました。
しかし、問題が1つあります。
トップページには投稿記事のサムネールが12しか表示されていません。
今後、記事を増やしていっても、このままでは新しい記事もしくは古い記事が表示されなくなってしまいます。
そこで、新しい記事・古い記事へ自由に行き来できるようページネーション機能をつけましょう。
こうしたことができるのも、動的ページの利点です。
HTML+CSSだけの静的ページだと、このようなことはできません。

ページ番号を表示する

トップページ表示設定は12件を上限にしていますが、投稿しているのは12記事のみになっています。
これではページネーションを設置しても、機能しているかどうかわかりません。
そこで、ページネーションを設置するためのコードを記述する前に、ページネーションがしっかり機能するかどうかを確認できる状態にするため、投稿記事を適当に増やしておきます。
写真・文章・カテゴリーは適当で構いません。
以下の様な感じで、投稿記事が増えました。

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

画像を準備するのが面倒という方は、サンプルに使っている画像を以下に用意しましたので、これを利用してください。
36記事増やせれば、全部で48記事=4ページ分になります。
img20150602.zip

ページネーションを設置するためのコードを記述する

記事が増やせたら、ページネーションを表示できるようにしましょう。
あとで整形しやすいように、<div class=”prevnext”>〜</div>をつくり、その中に、以下のようなコードを記述します。
記述する場所はループが終わったところとsectionの閉じタグとの間です。

<div>〜</div>のなかに記述しているのが、ページネーションを表示するためのコードです。
PHPをかじっていないと、ややこしく感じると思いますので、そのまま利用してください。
このように記述することで、現在表示しているページに、前後2ページずつのリンクを表示できるようになります。

ブラウザで確認してみる

ブラウザで確認してみましょう。
以下のようになっているかと思います。

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

ページネーション部分をCSSでデザインする

ページネーションを設置することができましたが、CSSでデザイン設定していないので、見栄えがよくありません。
早速、CSSでデザインを適用しましょう。
ここでは以下のように設定しました。
記述場所は、/* Responsive code */の上あたりでいいと思います。

これで以下のようなデザインになりました。

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

PHPを使ってWordPressループの最後にだけ別のクラス名をつける

ページネーションにCSSでデザインを設定しましたが、ページネーションとコンテンツとのアキが詰まってしまってします。
そこで、余白をつくるため、.main .workにmargin-bottomを使ってアキを入れると、以下のようになってしまいました。

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

それもそのはず、ソースを見ると<div class=”work”>が繰り返し表示されているため、すべてにmargin-bottom: 50pxが適用されてしまっています。

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

適用したいのは、最後に表示される<div class=”work”>です。
しかし、クラス名がworkしか設定されていないため、最後にだけCSSの設定するのが難しい状況です。
でも、大丈夫。
PHPを使えば、ループの最後だけに別のクラス名を追加することが可能です。

PHPが苦手ならGoogle先生に聞いてみる

いきなりPHPといわれても、詳しくない方だと記述できませんよね。
でも、諦めてはいけません。
WordPressのもう一つの利点、情報量の多さを利用するのです。
今回のようなケースであっても、ググれば大抵の情報が出ています。
早速、「WordPress クラス名 ループ 最後だけ」などと検索してみましょう。
WordPress:最初・最後・奇数・偶数の記事にそれぞれクラスを付けたり、表示内容を変更する方法」という記事がヒットしました。
まさに希望通り。
これに従ってやっちゃいましょう。

functions.phpに関数を記述する

記事によれば、functions.phpに以下のコードを記述せよ、というアドバイスがありますので、そのとおり記述します。
記述場所はバージョン情報の出力停止の次でかまいません。

WordPressループ部分を書き換える

functions.phpに記述した処理を利用して、WordPressループ部分を書き換えましょう。

before

対象となるのは以下の部分です。

after

クラス名を変えたいわけですから、div class=”work”を中心に以下のように書き換えます。

PHPやWordPressで頻繁に利用するif文を使っています。
条件分岐によって、最後のときだけ別のクラス名last-workを追加するように設定しました。
最後以外のループ部分は、通常通り.workとなるようにしています。

新しいクラス名に対してCSSを適用する

これで準備が整いました。
最後に追加した.last-workにCSSを適用しちゃいましょう。

ブラウザで確認する

ブラウザで確認してみましょう。
うまくいけば以下のように、コンテンツ同士にアキがない表示になっていると思います。

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

ページネーションをパーツテンプレートにする

記述したページネーションですが、トップページ以外の部分でも利用する機会が多い便利な機能でもあります。
そこで、ページネーションをパーツテンプレート化して、他のページでも手軽に利用できるようにしておきましょう。

pagenation.phpを作成してコードを移す

pagenation.phpという名前の新規ファイルを作成します。
そこにページネーションで作成したコードを貼り付けましょう。

本記事前半「index.phpを細かいパーツに分ける」でもパーツテンプレートを利用しましたが、このときはheader.php、footer.phpと、決まった名前を利用していました。
今回、新規作成したpagenation.phpは任意の名前です。
「パーツテンプレートの種類」で触れたカスタムパーツテンプレートです。
カスタムパーツテンプレートは、任意の名前でもパーツテンプレートとして利用できます。

カスタムパーツテンプレートを読み込む

pagenation.phpを作成できたら、index.phpにカスタムパーツテンプレートを読み込みましょう。
以下のようにindex.phpに書き込みます。

ブラウザで確認する

ブラウザで開いてみて、表示に変化がなければ成功です。

index.phpを構成する、最終的なソースの一覧

最後に、トップページが完成しましたので、ここまでのサイトのソースを記載しておきます。

index.phpのソース

index.phpのソースは以下のとおりです。

header.phpのソース

header.phpのソースは以下のとおりです。

footer.phpのソース

footer.phpのソースは以下のとおりです。

pagenation.phpのソース

pagenation.phpのソースは以下のとおりです。

style.css

style.phpのソースは以下のとおりです。

これでトップページのオリジナルテンプレート化はひとまず終了しました。
次回は、投稿記事を表示するためのオリジナルテンプレート化(single.php)についての解説したいと思います。
WordPressを使ってオリジナルテンプレート化する際のご参考になれば幸いです。

なお、完成した場合のトップページは以下のようになります。

COJIN SAMPLE

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

  • 0
  • 0
  • 0
  • 0

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

この記事を読んだ人はこんな記事も読んでいます

無料で利用できるキレイなデザインのWordPressテーマ50(2015年版)

無料で利用できるキレイなデザインのWordPressテーマ50(2015年版)

無料で利用できるキレイなデザインのWordPressテーマ2015年版をご紹介します。 WordP

記事を読む

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

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

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.7プラグイン編

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.7プラグイン編

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

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

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

無料なのに高機能なWordPress用バックアッププラグイン「UpdraftPlus」

WordPressのバックアップに!無料なのに高機能なプラグイン「UpdraftPlus」

WordPress用バックアッププラグインについては前回「おすすめはコレだ!WordPressのバッ

記事を読む

WordPressのテーマ検索に最適!テーマをより探しやすくした検索サービス「ThemeBro」

WordPressのテーマ検索に最適!テーマをより探しやすくした検索サービス「ThemeBro」

WordPressのテーマ検索に最適な、テーマ検索に最適化された検索サービス「ThemeBro」をご

記事を読む

WordPressのカスタマイズでよく使うWordPressのif文と条件分岐タグ

WordPressのカスタマイズでよく使うWordPressのif文と条件分岐タグ15

WordPressのカスタマイズでよく使うWordPressのif文と条件分岐タグを、個人的にまとめ

記事を読む

レスポンシブに対応したWordPress用テーマ90+(2014年ベストテーマ)

レスポンシブに対応したWordPress用テーマ90+(2014年ベストテーマ)

レスポンシブWEBデザインに対応したWordPress用テーマをまとめてご紹介します。 今回ご紹介

記事を読む

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

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

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

WordPress記事作成マニュアル:クライアント向けをInDesignで作成しました(ご自由にどうぞ)

WordPress記事作成マニュアル:クライアント向けをInDesignで作成しました(無料です。ご自由にどうぞ)

WordPress記事作成マニュアルをInDesignで作成しました。 知り合いのサイトをWord

記事を読む