WordPressで自作テーマ(第10回:特定ページへの記事出力)

スポンサーリンク


BananaBoatのWordpress講座では最低限覚えておきたい知識としてループを紹介しました。ループは記事を出力する上で欠かせないテクニックですが、時には出力したくない情報もあるでしょう。それを制御するのが、特定ページへの記事出力を抑えるテンプレートタグです。初心者にはやや複雑に感じますが、しっかり覚えたい技術です。

一度に表示される記事数を調整

これまで作った手順を踏まえると、表示されるトップページ(index.php)には3件全てが表示されます。
現段階は3件しかないので問題はなさそうに見えますが、これが5件、10件と増えてくると、上から下まで記事がズラーッと並んでしまって、人によってはダラダラ続くのが嫌だと感じる方もいるのではないでしょうか。
そこで、記事を一度に表示させる件数を設定で調整させましょう。

初期設定では、トップページの投稿記事の表示は10件となっています。この数値を変更するにはダッシュボードから「設定>表示設定」に「1ページに表示する最大投稿数」から調整することができます。

ダッシュボードの「設定>表示設定」で件数を変更できる

ダッシュボードの「設定>表示設定」で件数を変更できる

前後の記事のリンクはトップページでは非表示に

さらに、トップページでは前後の記事のリンクは不要なので、表示されないように設定します。

//リンク部分を個別ページだけ表示させる(一部コード省略)
<?php if(have_posts()): while(have_posts()):the_post();?>
<?php the_content();?>
<?php if(is_single()):?>

<div class="pagenav">
<span class="old">
  <?php previous_post_link('%link','<i class="fa fa-chevron-circle-left"></i>%title'); ?>
</span>
<span class="new">
  <?php next_post_link('%link','%title <i class="fa fa-chevron-circle-left"></i>'); ?>
</span>
</div>

<?php endif; ?>
</article>

上記のコードは、リンク部分を表示させている「pagenav」の入れ子部分を、トップページではなく個別ページだけ出力させるために「if(is_single()):〜endif;」で囲みました。
「もし(if)記事の個別ページ(is_single)だったら表示させる」という意味です。
特定ページの出力は「is_single(個別ページ)」だけではありません。

  • 固定ページ=is_page()
  • トップページ=is_home() か is_front_page()
  • カテゴリーページ=is_category()
  • 月別ページ=is_month()

注意したいのはトップページには2種類の出力方法が存在するものの、どちらでも良いという意味ではないことです。「is_home()」はブログ記事をトップページにする場合に使い、「is_front_page()」は企業サイトなどのインデックス(目次)ページをトップページにする場合に使用してください。

リンク部分が消えた

リンク部分が消えた

個別ページのタイトルにリンクを貼る

これで、トップページに前後記事のリンクが表示されなくなりました。しかし、これでは各記事への個別ページへのリンクも無くなり、アクセスができません。今度は個別ページにリンクを貼る作業が必要となります。

個別ページへのリンクを各記事のタイトルに設定するには「the_permalink();」のタグを組み込みましょう。

スポンサーリンク

//タイトルにリンクを組み込む方法

<h1><a href="<?php the_permalink();?>"><?php the_title();?></a></h1>

タイトルにリンクが設定された

タイトルにリンクが設定された

個別ページでもリンクが表示

個別ページでもリンクが表示

パラメーターに値を入力することでページを絞り込む

また、記事の個別ページ、固定ページ、カテゴリーページについては、カッコ内のパラメーターにタイトルやカテゴリーを指定することで、ページを絞り込むことが可能となります。
例えば、投稿した記事の中で「テスト投稿その2」のページだけリンクを表示させたい場合は、パラメーターに「テスト投稿その2」と記述すればよいのです。

//「テスト投稿その2」だけ表示させたい場合
<?php if(is_single('テスト投稿その2')):?>
特定ページ以外はリンクが表示できない

特定ページ以外はリンクが表示できない

これで「テスト投稿その2」以外の記事にはリンクが登場しません。例えば、特定の連載記事にだけリンクを設定したい場合などに共通のキーワードを設定するなどして使うとうまく活用できるのではないでしょうか。
「if(is_single())」はワードプレスにおいてループと同じくらい大切なのでしっかりマスターしましょう。

不要な個別ページのタイトルリンクも外す

これでよりトップページから個別ページへとよりジャンプしやすくなりました。しかし、個別ページへと移動した後もタイトルにはリンクがつきっぱなしです。このままでも特に問題はありませんが、念のため外しておきましょう。
ここでも「if(is_single())」を利用します。「個別ページの場合は、リンクなしのタイトルが表示され、個別ページ以外の場合はリンク付きタイトルにする」とコードを記述すればよいのです。個別ページの場合は「if(is_single())」なのですが「それ以外」という条件をつける場合は「else」を使いましょう。
使い方は以下のコードの書き方を参考にしてください。

//記事の個別ページはタイトルにリンクを表示させず、それ以外の場合はタイトルにリンクを表示させる(一部コード省略)
<?php if(have_posts()): while(have_posts()):the_post();?>

<article <?php post_class();?>>

//個別ページ
<?php if(is_single()):?>

<h1><?php the_title();?></h1>

//個別ページ以外
<?php else:?>

<h1><a href="<?php the_permalink();?>"><?php the_title();?></a></h1>
<?php endif;?>

</article>

<?php endwhile; endif;?>
タイトルのリンク部分が外れた

タイトルのリンク部分が外れた

これで記事の個別ページの時だけタイトルのリンク部分が外すことができました。「is_single」と「else」はセットで覚えておきたい必須テクニックです。

次回は、トップページで投稿記事数が増えていった時に、一度に表示される投稿数を少なくして、前後ページのリンクをつける作業を紹介していきます。

スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

新聞社の記者をしています。仲間との起業を夢見て、これまでに学んできたノウハウを記しておきます。現在、主に結婚新聞や企業・団体向けの広報紙を制作していますが「こんな紙面をつくってほしい」とのご要望にも随時お応えしています。