DAINASHI YESTERDAY

2016.12.12

静的ページをWordPressに!テンプレートタグとループを理解しよう

前回、最低限のファイルのみを格納した状態で、テーマをWordPressにインストールするところまで進めました。

今回からいよいよ本格的に、WordPressテーマの制作っぽい内容になってきます。WordPressテーマの制作にはPHPという言語を使いますので、これまでHTML(+CSS&JS)でしかサイトを作ったことがない場合はちょっと不安になるかもしれません。

しかしWordPressテーマを制作する上では、そこまでややこしいことをする必要はなく、基本的にはHTMLで作ったソースを部分的にPHPに差し替える程度のものです。

HTMLの基本的な知識があれば、あとは+α程度に新しいことを覚えるだけですので、心配せずに取り組んで頂ければと思います。

WordPressテーマの役割とは?

そもそも、テーマとはWordPressにおいてどんな役割をするのでしょうか?

これまで無料ブログなどを運営したことがある人ならわかるかと思いますが、ブログには「スキン」とか「テンプレート」と呼ばれる、ブログの見た目を設定するための「型枠」のようなものがあります。

WordPressでいう「テーマ」とは、この型枠のことです。WordPressで書いたブログ記事などのコンテンツの情報は、サーバー上に構築されたデータベースに格納されています。

ユーザーがブラウザであなたのWordPressにアクセスしたときに、WordPressはデータベース上の情報とテーマの情報を組み合わせてページを生成するのです。

※アメブロで「テーマ」というと、WordPressでいうところの「カテゴリー」のことを指します。このあたりブログサービスによって呼び方が違うので混同しないように注意しましょう。

WordPressテーマの役割

WordPressダッシュボードからテーマを編集する

テーマの編集は、WordPressのダッシュボードから行うことができます。

ダッシュボードのサイドバーにて、「外観」→「テーマの編集」からテーマ編集画面に入ります。画面右側のテンプレート一覧から編集したいファイルを選択してください。

ここでは、最低限のファイルのみの状態でアップロードしてあるかと思いますので、その中からindex.phpをクリックします。前回、index.phpにはテーマ制作前に作成しておいたHTMLソースを貼り付けました。今回は、それを元にして制作を進めていきます。

WordPressテーマには、「テンプレートタグ」というものを記述することでデータベースの情報を呼び出すことができます。テーマに書かれたブログの見た目に関する情報と、データベースにあるコンテンツの情報を組み合わせるのです。

それでは、index.phpにテンプレートタグを埋め込んでいきたいと思います。

ウェブサイトの情報を表示させるテンプレートタグbloginfo

ウェブサイトを作るための言語について知ろうでも書いた通り、Webページは頭(head)と胴体(body)から成り立っており、headにはウェブサイトに関する情報を記載します。

WodPressでは、それらウェブサイトの情報をデータベースから呼び出すためのテンプレートタグ「bloginfo」というものがあります。ここでは、使用頻度の高いと思われる物をご紹介します。

※bloginfoはテンプレートファイルのどこでも使うことができます。headタグ内でなければ使えないということではありません。

charset

ウェブサイトの文字コードを取得します。WordPressバージョン3.5.0以降は常に「UTF-8」を返します。

<?php bloginfo( 'charset' ); ?>

name

ダッシュボードの「設定」→「一般」にある「サイトのタイトル」に入力された内容を表示します。

<?php bloginfo('name'); ?>

description

ダッシュボードの「設定」→「一般」にある「キャッチフレーズ」に入力された内容を表示します。

<?php bloginfo('description'); ?>

rss2_url

RSS 2.0 フィードのURLを表示します。

フィード(Feed)とは、ウェブサイトの更新を自動的に知らせるための仕組みです。RSSリーダーなどに更新情報を伝え、ユーザーにサイトの更新を効率的に伝えることができます。

<?php bloginfo('rss2_url'); ?>

pingback_url

ピンバックURLを表示します。

ピンバックとは、ウェブサイトAからウェブサイトBへのリンクを設置すると、ウェブサイトBにリンクされたことを通知する仕組みのことです。これによりウェブサイト同士のリンク構築や交流が促進されることが期待されます。

<?php bloginfo('pingback_url'); ?>

stylesheet_url

WordPressテーマのスタイルシート(style.css)のURLを表示します。

<?php bloginfo('stylesheet_url'); ?>

しかし子テーマを使用する場合、stylesheet_urlには注意が必要です。

プライマリーな CSS (usually style.css) ファイルの URL を表示します。 get_stylesheet_uri() 関数の出力を用いることを推奨します。

テンプレートタグ/bloginfo – WordPress Codex 日本語版

とあるように、stylesheet_urlを子テーマで使った場合、親テーマのスタイルシートのURLを表示してしまいます。そのため、スタイルシートURLの表示にはget_stylesheet_uri関数を使うことが推奨されています。

get_stylesheet_uri関数

get_stylesheet_uri関数は、現在使われているテーマのURIを表示します。そのため親テーマでは親テーマの、子テーマでは子テーマのスタイルシート(style.css)のURIを表示することができます。

<?php echo get_stylesheet_uri(); ?>

template_url

テーマディレクトリのURLを表示します。テーマで使用している画像などのファイルへのパスは、このtemplate_urlを使って記述する必要があります。

<?php bloginfo('template_url'); ?>

これもstylesheet_urlと同様ですが、子テーマで使用する場合には注意が必要です。

アクティブなテーマのディレクトリー URL を表示します。 (‘template_directory’ は Version 2.6 以前ではローカルパスを表示していました。ハック的な代替策は get_theme_root() と get_template() を参照してください)。 子テーマの中では、 get_bloginfo(‘template_url’) と get_template() はどちらも親テーマのディレクトリーを返します。そのため、親テーマでは get_template_directory_uri() を、子テーマでは get_stylesheet_directory_uri() を使うよう考慮してください。

テンプレートタグ/bloginfo – WordPress Codex 日本語版

ようは、WordPressで子テーマを使う場合に、template_urlでテーマディレクトリのパスを呼び出すと親テーマのパスを取得してしまうため、親テーマではget_template_directory_uriを、子テーマではget_stylesheet_directory_uriを使えば間違いがないですよ、ということです。

get_template_directory_uri関数

現在有効化しているテーマのディレクトリURIを表示します。この関数を子テーマで使用した場合、親テーマのディレクトリURIを表示します。

<?php echo get_template_directory_uri(); ?>

get_stylesheet_directory_uri関数

現在有効化しているテーマのスタイルシート(style.css)が置かれているディレクトリのURIを表示します。子テーマを有効化している場合は、子テーマのディレクトリURIを表示します。

<?php echo get_stylesheet_directory_uri(); ?>

wp_head関数とwp_footer関数を忘れずに!

WordPressには、テーマやプラグインからいろいろな機能を追加することができます。

追加した機能をテーマ上で動作させるには、その機能で使用されているCSSファイルやJSファイルをテーマから読み込まなくてはいけません。

それらのファイルを読み込むために、テーマにはwp_head関数とwp_foot関数を使います。

wp_head関数とwp_foot関数はアクションフックといわれるものを呼び出すための関数で、ここにプラグインなどで使用されるCSSファイルやJSファイルを読み込むためのソースが挿入されます。

プラグインやテーマのfunctions.phpの記述によって、wp_head関数とwp_foot関数のどちらで呼び出されるかは違いますが、WordPressを正常に動作させるために必要なソースもここで生成されるため、この2つは忘れずに記述するようにしましょう。

wp_head関数は</head>の直上、wp_foot関数は</body>の直上に記述します。

<html>
<head>
…
……
………
<?php wp_head(); ?>
</head>
<body>
…
……
………
<?php wp_footer(); ?>
</body>
</html>

head要素のサンプルソース

これまでにご紹介したテンプレートタグ(と関数)を使って作ったhead要素のサンプルソースです。

なお通常、head要素にはtitleタグを記述しますが、WordPressではバージョン4.1以降titleタグはwp_head関数によるアクションフックで出力されます。そのため、ここでは記述していません。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset="<?php bloginfo( 'charset' ); ?>" >
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no" />
<meta name="robots" content="index,follow">
<meta name="description" content="<?php bloginfo('description'); ?>"/>
<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" type="text/css">
<link href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?> RSS Feed" />
<link href="<?php bloginfo('pingback_url'); ?>" rel="pingback" />
<?php wp_head(); ?>
</head>
<body>
…
……
………
<?php wp_footer(); ?>
</body>
</html>

11行目のlink要素のtitle属性ではbloginfo(‘name’)ではなくesc_attr( get_bloginfo( ‘name’ )としています。これはタイトルに<や>、&などの記号が入っている場合に、それらをエンコード※するためのものです。

※<や>などの記号はHTMLを記述する際に使用するため、テキストの中に含まれていると意図したように文字が表示されません。そのようなことを防ぐために、記号をそのまま表示できる形に変換してやる必要があります。この処理のことをエンコードといいます。

WordPressの肝!ループを理解しよう

WordPressで構築したブログで記事(投稿)を追加すると、ブログのトップページには最新の記事から自動で一覧表示されますよね。この仕組みのことを「ループ」といいます。

ループは、WordPressのもっとも基本となる仕組みと言っていいかと思います。このループについてしっかり理解しておくことで、WordPressで作れるサイトの幅がグンと広がりますし、制作に掛かる時間も大幅に短縮できるでしょう。

ループの仕組み

それでは、ループが一体どんな仕組みになっているのか見ていきましょう。

ループの仕組み

最初にループで取り出す記事の条件や表示件数などを指定すると、その条件に合致したものを投稿日時の新しい順※に一覧表示します。

ループには、条件に合う記事が見つからなかった場合の処理を指定することもできますので、記事が見つからない場合には「記事がありませんでした」などとメッセージを表示するようにしておくといいでしょう。

上図のループをPHPファイルに記述すると、下記のソースのような感じになります。

※ループに条件を指定することで投稿日時の古い順やランダムに表示することもできます。
<html>
<head>
</head>
<body>
<div id="header">
ヘッダー
</div>
<div id="content">
<?php if(have_posts()) : while(have_posts()) : the_post(); //ループ開始 ?>
<!-- ここに記事を表示させるためのソースを記述します -->
<?php endwhile; else : //記事がなかった場合の処理 ?>
<!-- ここに記事がなかった場合のソースを記述します -->
<?php endif; //ループ終了 ?>
</div><!-- .content -->
<div id="sidebar">
サイドバー
</div>
<div id="footer">
フッター
</div>
</body>
</html>

ループ内にテンプレートタグを埋め込む

ここまでで、ループの大枠を作ることができました。次に、ループ内で記事を表示するためのソースや、記事がなかったときに表示する内容などを作っていきます。

まずは、もととなるHTMLも記述します。

<html>
<head>
</head>
<body>
<div id="header">
ヘッダー
</div>
<div id="content">
<?php if(have_posts()) : while(have_posts()) : the_post(); //ループ開始 ?>
<article class="post">
<h1 class="title">記事タイトル</h1>
<div class="thumb"><img src="サムネイル画像のパス" alt="" /></div>
<div class="meta">
<div class="date">20XX年XX月XX日</div>
<div class="category">記事のカテゴリー</div>
</div><!-- .meta -->
<div class="excerpt">記事の抜粋文</div>
<div class="author">投稿:作成者の名前</div>
</article><!-- .post -->
<?php endwhile; else : //記事がなかった場合の処理 ?>
<p>記事がありません</p>
<?php endif; //ループ終了 ?>
</div><!-- .content -->
<div id="sidebar">
サイドバー
</div>
<div id="footer">
フッター
</div>
</body>
</html>

記事に関する情報はサーバー上のデータベースに格納されていますので、それを取り出すためにここでもテンプレートタグを使います。以下に、ループ内でよく使われるテンプレートタグをご紹介します。

the_permalink

投稿のパーマリンクを取得します。

<?php the_permalink(); ?>

the_title

投稿のタイトルを表示します。

<?php the_title(); ?>

the_post_thumbnail

投稿のアイキャッチ画像※を表示します。

<?php the_post_thumbnail('thumbnail'); ?>

上記はWordPressダッシュボードの「設定」→「メディア」にて「サムネイルのサイズ」に指定したサイズでアイキャッチ画像を表示します。

これ以外にも、タグに値を記入してサイズを指定することもできます。横200px×縦150pxで表示したい場合には以下のように記述します。

the_post_thumbnail( array( 200, 150 ) );
※WordPressでアイキャッチ画像を使用するためには、テーマのfunctions.phpにてアイキャッチ画像を有効化する必要があります。アイキャッチ画像を有効にする手順は第7回:WordPressテーマの機能を拡張するで説明します。

get_the_date

投稿が公開された日付を取得します。

<?php echo get_the_date('Y.m.d'); ?>

the_category

投稿が属するカテゴリーへのリンクを表示します。

<?php the_category(); ?>

the_content

投稿の本文を表示します。

<?php the_content(); ?>

the_excerpt

投稿の抜粋文を表示します。

<?php the_excerpt(); ?>

the_author_posts_link

投稿の作成者による記事一覧へのリンクを表示します。

<?php the_author_posts_link(); ?>

ループのサンプルソース

上記を踏まえて、作成したループ内に該当するテンプレートタグを挿入していきます。

<html>
<head>
</head>
<body>
<div id="header">
ヘッダー
</div>
<div id="content">
<?php if(have_posts()) : while(have_posts()) : the_post(); //ループ開始 ?>
<article class="post">
<h1 class="title"><?php the_title(); ?></h1>
<div class="thumb"><?php the_post_thumbnail('thumbnail'); ?></div>
<div class="meta">
<div class="date"><?php echo get_the_date('Y年m月d日'); ?></div>
<div class="category"><?php the_category(); ?></div>
</div><!-- .meta -->
<div class="excerpt"><?php the_excerpt(); ?></div>
<div class="author">投稿:<?php the_author_posts_link(); ?></div>
</article><!-- .post -->
<?php endwhile; else : //記事がなかった場合の処理 ?>
<p>記事がありません</p>
<?php endif; //ループ終了 ?>
</div><!-- .content -->
<div id="sidebar">
サイドバー
</div>
<div id="footer">
フッター
</div>
</body>
</html>

まとめ

以上で、index.phpにテンプレートタグを埋め込み、WordPress上でテーマが動作するようになりました。しかしWordPressにはトップページ以外にも、アーカイブ(記事一覧)ページや固定ページ、投稿(シングル)ページなどさまざまな種類のページがあります。

次回以降、それらページの種類ごとに対応させるためのテンプレートファイルの作成、またページ内のヘッダーやフッター、サイドバーなどの要素をパーツ化する方法などについてお話ししていきたいと思います。

投稿者: