WordPress テーマの作成

トップページ以外のページの作成

更新日:

WordPressでテーマの作成/その9

いよいよテンプレートの完成間近です。今日は、トップページ以外のページを作成したいと思います。ただ、基本的には、トップページとそんなに変わりはありませんので、トップページの内容をコピーして一部を変更していきたいと思います。

カテゴリーページの作成

『home.php』の中身をコピーした『category.php』ファイルを作成します。カテゴリーページでは、タイトル部分にカテゴリー名を出力するために『<p class="title">投稿記事</p>』の部分を下記のように変更します。

<p class="title"><?php single_cat_title();</p>

ブラウザで確認してみます。

月別ページの作成

次に同じ『home.php』ファイルの内容で、『date.php』ファイルを作成します。同じくタイトルの箇所を下記のように変更します。

<p class="title"><?php echo get_the_date('Y年n月)?></p>

ブラウザで確認してみます。

記事の個別ページの作成

『home.php』ファイルをコピーして、『single.php』ファイルを作成します。記事の個別ページでは、ページのタイトルは出力しませんので、『<p class="title">投稿内容</p>』の箇所を削除します。また、個別ページでは、『pagenation.php』のリンクは使えませんので、『<?php get_template_part('pagenation');?>』を削除します。新たに、前後の記事へのリンクを出力するために下記のコードを追加します。

<p class="pagenation">
<span class="oldpage"><?php previous_post_link(); ?></span>
<span class="newpage"><?php next_post_link(); ?> </span>
</p>

固定ページの作成

『home.php』ファイルをコピーして、『page.php』ファイルを作成します。固定ページでも個別ページと同様、ページのタイトルとページネーションを削除しておきます。また、固定ページでは、『content.php』を利用せず、記事の出力内容を直接指定するようにします。『<?php get_template_part('content');?>』の箇所を下記のように変更します。

  <div class="post">
 <h2><?php the_title(); ?></h2>
 <?php the_content(); ?>
 </div>

ブラウザで確認してみます。

indexページの作成

最後になりましたが、『固定ページ』と同じ内容で、『index.php』ファイルも作成しておきます。他にも、『search.php』『404.php』ファイルも必要ですが、indexページがあれば代用できますので、indexページは必ず作成しておきます。

本日のWordPress関数

single_cat_title()

カテゴリー名を出力するための関数です。1つめのパラメータにカテゴリー名の前に出力する内容を渡すことができます。また、2つ目のパラメータにfalseを渡すと、カテゴリー名を出力せずに、関数の処理結果を戻り値として返すことができます。ただし、2つ目のパラメータを指定する場合は1つめのパラメータは無効となります。

previous_post_link()
next_post_link()

投稿のテンプレート(single.php)で、ある投稿の前後の投稿にリンクするための関数です。パラメータを一切使用しない場合、『<<前の投稿のタイトル名』『次の投稿のタイトル名>>』 のような文字列を出力します。1つめと2つ目のパラメータでは、文字列の書式を指定することができます。3つめのパラメータにtrueを指定すると、同一カテゴリー内の前後の投稿へのリンクを出力します。4つ目のパラメータには、除外するカテゴリーのIDを指定することができます。

尚、似たような関数で下記のような関数がありますので、ご紹介しておきます。

previous_posts_link()
next_posts_link() 

この関数は、メインページなどで、1ページに複数件分の投稿するページで使用します。尚、1ページ当たりの出力件数は、WordPressのダッシュボードの『設定』→『表示設定』で指定します。

これで、一応テンプレートは完成しました。次回は、このテーマにスマートフォンからアクセスしてきた場合(『wp-touch』は使わずに)、CSSだけでスマートフォン用の表示ができるように改造したいと思います。

本日は以上です。

-WordPress, テーマの作成
-

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.