ワードプレスサイトで「トップページのみに掲載したいコンテンツ」を表示するための条件分岐の書き方

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日は業務メモです。ワードプレスでトップページのみに表示させたいコンテンツがある際の条件分岐方法です。インターネットの世界では、他のサイトにホームページURLを掲載してもらう代わりに「指定のバナー(またはリンクテキスト)を貼らなくてはならない」といった状況があります。

このような「被リンク効果(別ページからリンクを貼ってもらうこと)」で検索エンジンの上位表示を狙っている外部サービスは意外と多く、すべてはSEO対策の一貫として行なっている内容です。一般的な掲載ルールではリンクを表示させる場所は「トップページのみでOK」な場合が多いです。

もし「トップページ以外の下層ページも含むすべてのページから他社サイトへのリンク」を貼ってしまうと、運営しているホームページの「全ページに指定バナーを表示させること」になります。となると、せっかく検索エンジンからホームページにやってきたお客様に全ページ内で「他社サイトへの外部リンクバナー」を見ることになり、閲覧を中断するきっかけにもなりかねないわけです。

ホームページの内容だけに集中して欲しい状況で、他社サイトへのリンクバナーが邪魔になると困りますよね。何も考えずに全ページに外部リンクを貼ると、訪れた閲覧ユーザーにも失礼な行為になるのです。

このような状況では、外部リンクは「トップページのみ」の表示にとどめておくのが無難です。ワードプレスでは下記の条件分岐で「トップページのみに表示させるコンテンツ」にできます。書き方は簡単。

<?php if( is_front_page() ): ?>
<a href="指定のURL(http形式)"><img src="画像までのパス(自社サーバー内での指定を推奨)" alt="指定あれば" width="横幅" height="縦幅" /></a>
<?php endif; ?>

実際に入力した例は以下です。外部サービスから指定された被リンク先のURLが「http://example.com」で、バナー画像の保存先は自分のサイト(example.net内)を想定した書き方です。

<?php if( is_front_page() ): ?>
<a href="http://example.com/"><img class="css-option" src="https://example.net/wp-content/uploads/2019/01/bunner200.gif" alt="○○○のバナー" width="200" height="40" /></a>
<?php endif; ?>

class:cssでclass指定をする際に使用(idならid=”id-name”)
width:画像の横幅サイズを指定
height:画像の縦幅サイズを指定

ワードプレス内のテンプレートでは<?php if( is_front_page() ): ?><?php endif; ?>で挟まれている内容はフロントページでのみ実行され「トップページの場合のみ読み込む」という指定ができます。下記のようにワードプレスのテーマ内にあるお好きなphpテンプレートへ書き込めばOKです。

作業が不慣れな場合はテンプレートのバックアップをとってから作業しましょう。ワードプレスはphpとDBが連動してホームページ全体を表示しているので記述ミスなどがあれば全ページが見れなくなるのでご注意くださいませ。不安な場合は常にサイト全体のバックアップをとってから作業をしましょう。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する