パンくずリストを出力する自作関数の作り方

全般

今回は、記事上にパンくずリストを表示する関数の作成手順と利用方法について説明したい。

このショートコードはWordPressの関数を利用しているので、Cocoonだけではなく他のテーマでも使用することができる

パンくずリストをもっと手軽に様々なウィジェットに設置できるように、この記事の関数をショートコード化しました。

以降はこちらのものを参考にしてください。

スポンサーリンク

Cocoonのパンくずリストの仕様のおさらい

現在のCocoonのバージョン:2.1.~のパンくずリストの設定では、パンくずリストを表示しない、もしくは「メインカラム手前」「メインカラムトップ」「メインカラムボトム(デフォルト)」「フッター手前」の4つの中のどれかひとつだけの位置に表示することができる。

上の画像のようにどれかひとつだけ配置を選び、そして必要ならば記事タイトルも表示させることができる。

Cocoonのパンくずリストの不便な点

Cocoonのパンくずリストで不便な点を挙げるとしたら、それは「ひとつだけしか表示することができない」という部分である。

というのも、例えばWebサイトの上部にパンくずリストを表示していた場合、最後まで読み終えてからもう一度記事の親カテゴリを知りたいときは、画面を上までスクロールして戻らないといけない。このため、閲覧者に不親切で少々手間をかけさせることになる。

また、パンくずリストをWebサイト下部に表示していた場合は、下まで辿らないと記事が属しているカテゴリの階層がわからない。このため、検索エンジンや内部・外部のリンクから記事に訪れた閲覧者がパッと見て、その記事がどのカテゴリに属しているのかが一目でわかりづらい。

このことについては、以前別のCocoonユーザーが公式フォーラムで「パンくずリストを上下に設置したい」と要望を書き込んではいたこともあった。

ただ、Cocoonテーマ制作者のわいひらさんの回答ももっともであり、検索エンジンに提供するパンくずリストはひとつだけでよい。現在、ほとんどのブログのテーマではschema.org」をPHPのHTMLコードに埋め込んで検索エンジンへ構造化したメタデータを提供する機能を利用しているため、マークアップされたパンくずリストの要素がふたつもあるのはおかしいからだ。

そのため、今回のカスタマイズは、記事が属しているカテゴリをパンくずリスト風に表示できるパンくずリスト「もどきを出力する簡単な関数を自作した。これにより、パンくずリストを本文中のコンテンツ内に配置してユーザービリティを高めることができるようになった。

パンくずリストを出力する自作の関数の制作手順

それでは、パンくずリストを表示する関数の作成方法を解説していきたい。

今回も子テーマのPHPファイルを使用するため、Webサイトのバックアップは必ず取るように。

今回自作したパンくずリストの関数はテーマを問わず使うことができるが、私は現在使っているCocoonで説明する。

設定

まず、今回のカスタマイズでは主に子テーマの「テーマのための関数 (functions.php)」を使う。

そして、作成した関数を記事上に呼び出す必要があるため、子テーマに「content.php」を作って、PHPファイル内に関数を直接入力しなければならない。なので、content.phpの作成方法も記しておく。

テーマのための関数 (functions.php)の場所の確認

テーマのための関数 (functions.php)」はCocoonの子テーマである「cocoon-child-master」フォルダに最初から存在しているため、新たに作る必要はない。

WordPress管理画面の左サイドバーの中にある「外観」から「テーマエディター」を選び、テーマの編集画面に入る。そして、子テーマが選択されているか確認して、右側のテーマファイルバーに存在している「テーマのための関数 (functions.php)」をクリックするだけだ。

上の画像のように、functions.phpの編集画面を確認することができただろうか?

content.phpの作成

今回のカスタマイズはfunctions.phpに作成した関数を、WordPressの記事の本文上に呼び出す必要があるので、PHPファイルに直接呼出しコードの関数を入力しなければならない。そのため、記事の本文、つまりarticle要素を制御しているcontent.phpファイルが必要になる。

まずは自分のPC上に、フォルダ名をtmp」と命名した空のフォルダを作成する。そして、作成した空のtmpフォルダを、FTPソフトかサーバーのファイルマネージャーを使って「cocoon-child-master」にアップロードしよう。この「cocoon-child-master」というフォルダはCocoonの子テーマ全体を取り扱っているフォルダになる。

Cocoonの子テーマのフォルダの場所は、通常「public_html/あなたのドメイン名/wp-content/themes/cocoon-child-master」に存在する

この構造が、「public_html/あなたのドメイン名/wp-content/themes/cocoon-child-master/tmp」となるようにアップロードしよう

それから、Cocoonの親テーマのフォルダである「cocoon-master」のtmpフォルダ内に存在するcontent.php」ファイルをコピーして、先ほど子テーマに作った空のtmpフォルダにアップロードする。

もし、自分のPCに「cocoon-master」の控えが無い場合は、もう一度公式サイトのテーマの配布ページからダウンロードしてほしい。

FTPソフトやサーバーのファイルマネージャー上に子テーマに作ったtmpフォルダとその内部のcontent.phpファイルの存在が確認できただろうか?

ちゃんと確認出来たら、先ほどのfunctions.phpと同じく、WordPress管理者画面の「外観」から「テーマエディター」を選んでクリックし、テーマの編集画面を開こう。

テーマの編集画面を開いたら、必ず右側のテーマエディターで子テーマが選ばれていることも確認しよう。子テーマが選ばれている際はダイアログが必ず表示されている。

テーマエディター内を見ると、新たに「tmp ▶」という項目が存在しているはずなので、それをクリックしてフォルダを展開し、「content.php」が存在するかを確認しよう。

そして、「content.php」をクリックしたらPHPコードの編集画面に入ることができるかも確認しておこう。

このように、content.phpの編集画面にも入ることができただろうか?

自作したパンくずリスト関数の作成と呼び出し方

それでは、作成した関数を紹介する。とても単純なコードなので、あまり手間はかからない。

パンくずリスト関数の作成

まずは、「functions.php」に入力するショートコードの関数の説明になる。以下のコードをそのままコピペして「ファイルを更新」をおして保存するだけでよい。

functions.phpに入力するパンくずリスト関数のPHPコード
// パンくずリストもどきの関数
add_action( 'mycus_breadcrumbs_tag', 'mycus_breadcrumbs_tag_func' );
function mycus_breadcrumbs_tag_func() {
    if (is_single()) {
        echo '<div class="mycus-breadcrumbs-tag"><span>';
        echo '<a href="'.get_home_url().'"><i class="fas fa-home"></i></a><i class="fas fa-chevron-right"></i>';
        echo the_category( '<i class="fas fa-chevron-right"></i>', 'multiple', false );
        echo '</span></div>';
    } else {
        echo '<div class="mycus-breadcrumbs-tag"><span><a href="'.get_home_url().'"><i class="fas fa-home"></i></a></span></div>';
    }
}
パンくずリスト関数のPHPコードの内訳の解説
  • まずは、「add_action()」という関数で、「パンくずリスト関数の文字列」と「パンくずリスト関数の関数名」を決めなければならない。なお、「mycus_~」といったオリジナルの接頭語を付けたのは、ほぼ確実にCocoonの親テーマでは使われることのない造語だからだ。
  • このパンくずリスト関数は、投稿ページ固定ページなどのそれ以外のページとで表示の内容を切り替えるため、「もし〇〇ならば□□をもし〇〇でなければ△△を行う」という「else」を使用するコードで組み立てる。こうすることで、関数がPHPファイル上で行うHTML要素の出力を投稿ページと固定ページとで分岐させることができる。
  • そして、投稿ページとそれ以外を分岐する関数である「is_single()」をつかって投稿ページの本文上では「ホームのアイコン>カテゴリの階層」としたパンくずリストが表示される。また、投稿ページ以外の場合のコードを「else」で繋げることで固定ページの時は本文上に「ホームのアイコン」のみが表示されるようになる。
  • ホームアイコンを押したらホームに戻るようにするには「get_home_url()」関数を使用する。この関数は、ホームページのURLを取得する命令を実行する。なお、カッコ内は空欄でよい。
    そして、パンくずリストの表示には「the_category()」関数を使う。これはカテゴリーの階層を取得する関数である。これのカッコ内は後で説明する。
  • また、関数内のHTMLコードこのパンくずリストの全体の要素である「div class=”mycus-breadcrumbs-tag”」要素とパンくずリストの本文の要素の間に「span」要素を挟んで、パンくずリストを入れ子にする。これにより、CSSを用いてパンくずリストをカスタマイズする際に自由度が向上する。

「the_category()」関数の説明を少し端折ってしまったが、カッコの内部の文字にはそれぞれ意味がある。

左から順にそれぞれ

  • カテゴリとカテゴリの間に挟み込まれる記号の表示。空欄にするとカテゴリがul要素でリスト表示されるため、必ず何か指定するべき。
  • 記事のカテゴリー階層の表示設定
    空欄の場合は、カテゴリーの親子関係を表示せず子カテゴリーのみの表示で、リンクも子カテゴリーのみ。
    multiple」を設定した場合は、カテゴリーの親子関係を表示してリンクも親子で別々になる。基本的にこれを選べばOK
    single」を設定した場合は、カテゴリーの親子関係を表示するものの、リンクは子カテゴリーのみ。この設定はユーザーを混乱させるだけなので、設定する必要はない。
  • カテゴリーを取得する投稿のIDを入力する場所ここは「false」でよい

となる。

このパンくずリスト関数の内容をとても簡単に説明すると、「ホームのURLを取得する関数」と「現在の記事が属しているカテゴリを表示する関数」を繋げてパンくずリストに見せかけているだけである

これで、自作したパンくずリスト関数の説明は終わりになる。

パンくずリスト関数の呼び出し方

それでは、先ほど作った関数をPHPファイル内に入力して、Webサイト上に呼び出す方法の説明に移ろう。

今回作成したパンくずリスト関数は、「content.php」ファイル内に入力することが前提になるので、それを踏まえて表記する方法を説明する。

パンくずリスト間数は、PHPファイル内でこのようなPHPコードを使うことで、Webサイト上に表示することができる。

パンくずリスト関数を呼び出すPHPコード
<?php // パンくずリストもどきの関数
do_action( 'mycus_breadcrumbs_tag' ); 
?>

基本的にはこの仕組みを使ってPHPファイル上にコードを入力し、Webサイトにパンくずリストを出力する。

また、フロントページにパンくずリストを表示したくない場合はこのように入力しよう。

条件分岐を命令したパンくずリスト関数を呼び出すPHPコード
<?php // パンくずリストもどきの関数
if( ! is_front_page()) {
	do_action( 'mycus_breadcrumbs_tag' );
} ?>

この仕組みを説明すると、is_front_page()」という関数は、「フロントページでのみ動作する」という命令を支持するWordPressの条件分岐の関数であり、これの前にエクスクラメーション・マーク(ビックリマーク)を付けることで、「フロントページ以外のすべてのページで動作します」つまり「フロントページでは動作しません」といった処理が行われるのである。

将来的に固定ページをフロントページ化する場合も考えて、このように入力しよう。フロントページにパンくずリストを表示する必要は無いからだ。

「半角の!マーク」は否定を意味するものであり、プログラミングでは頻繁に登場する。

作成した関数を呼び出して表示する方法がわかっただろうか?

パンくずリスト関数の使用方法

それでは、記事の本文タイトル上部、または本文内下要素の下部に自作したパンくずリスト関数を出力する方法を解説したい。

先ほど解説したパンくずリスト関数を呼び出すPHPコードを「content.php」ファイル内に直接入力することによって、投稿ページと固定ページの本文内のコンテンツ上にパンくずリストが常に表示されるようになる。

本文コンテンツ内の上部に表示する場合

Cocoonテーマのパンくずリストをメインカラムボトム、もしくはフッターボトムに表示しているときに、本文記事内の上部に自作したパンくずリストを表示する場合の配置になる。

本文コンテンツ内の一番上に表示したい場合は、このように「タイトル上の広告表示」コードの上にパンくずリスト関数を呼び出すコードをコピペしよう。

パンくずリストを本文内の一番上に表示する場合
      <?php // パンくずリストもどきの関数
      if( ! is_front_page()) {
        do_action( 'mycus_breadcrumbs_tag' );
      } ?>

      <?php //タイトル上の広告表示
      if (is_ad_pos_above_title_visible() && is_all_adsenses_visible()){
        get_template_part_with_ad_format(get_ad_pos_above_title_format(), 'ad-above-title', is_ad_pos_above_title_label_visible());
      }; ?>

この配置は、タイトルの上部ウィジェットや広告よりもパンくずリストが上に表示されていた方が目立ってわかりやすいだろうと考える人におすすめだ。

本文タイトルのすぐ上にパンくずリストを表示させたい場合は、このように「タイトル上のカテゴリー・タグ」と「本文のh1タイトル出力コード」の間にパンくずリスト関数を呼び出すコードをコピペしよう。

パンくずリストをh1タイトルのすぐ上に表示する場合
      <?php //タイトル上のカテゴリー・タグ
      if (is_category_tag_display_position_title_top()) {
        get_template_part('tmp/categories-tags');
      } ?>

      <?php // パンくずリストもどきの関数
      if( ! is_front_page()) {
        do_action( 'mycus_breadcrumbs_tag' );
      } ?>

      <header class="article-header entry-header">
        <h1 class="entry-title" itemprop="headline">
          <?php
          if (is_wpforo_plugin_page()) {
            echo wp_get_document_title();
          } else {
            the_title();
          }
           ?>
        </h1>

もし「タイトル上のカテゴリー・タグ」がパンくずリストの上にあることに違和感を感じるならば、カテゴリー・タグとパンくずリストのコードの位置を入れ替えてもよい。

この配置は、タイトルのすぐ上にパンくずリストがあったほうがまとまりを感じて自然だと思う人におすすめだ。

本文コンテンツ内の下部に表示する場合

Cocoonテーマのパンくずリストをメインカラムトップ、もしくはメインカラム手前に表示しているときに、本文記事内の下部に自作したパンくずリストを表示する場合の配置になる。

本文コンテンツ内の下のほうにパンくずリストを表示したい場合は、このように「SNSボタン下ウイジェット」と「投稿者等表示用のテンプレート」の間にパンくずリスト関数を呼び出すコードをコピペしよう。

パンくずリストを本文内の下のほうに表示する場合
        <?php //投稿SNSボタン下ウイジェット
        if ( is_single() && is_active_sidebar( 'below-single-sns-buttons' ) ): ?>
          <?php dynamic_sidebar( 'below-single-sns-buttons' ); ?>
        <?php endif; ?>

        <?php //固定ページSNSボタン下ウイジェット
        if ( is_page() && is_active_sidebar( 'below-page-sns-buttons' ) ): ?>
          <?php dynamic_sidebar( 'below-page-sns-buttons' ); ?>
        <?php endif; ?>

        <?php // パンくずリストもどきの関数
        if( ! is_front_page()) {
          do_action( 'mycus_breadcrumbs_tag' );
        } ?>

        <?php //投稿者等表示用のテンプレート
        get_template_part('tmp/footer-meta'); ?>

この配置は、パンくずリストがカテゴリー・タグや本文下のウィジェット、広告よりも下にあったほうが自然だと感じる人におすすめだ。

なお、「投稿者等表示用のテンプレート」のすぐ上にしたのは、記事内の締めは投稿者名で終わっていた方がまとまっていると感じたからだ。

「本文下のカテゴリー・タグ」のすぐ下にパンくずリストを表示したい場合は、このように「本文下のカテゴリー・タグ」と「本文下の広告表示」の間にパンくずリスト関数を呼び出すコードをコピペしよう。

パンくずリストを本文下のカテゴリー・タグのすぐ下に表示する場合
        <?php //本文下のカテゴリー・タグ
        if (is_category_tag_display_position_content_bottom()) {
          get_template_part('tmp/categories-tags');
        } ?>

        <?php // パンくずリストもどきの関数
        if( ! is_front_page()) {
          do_action( 'mycus_breadcrumbs_tag' );
        } ?>

        <?php //本文下の広告表示
        if (is_ad_pos_content_bottom_visible() && is_all_adsenses_visible()){
          //レスポンシブ広告のフォーマットにrectangleを指定する
          get_template_part_with_ad_format(get_ad_pos_content_bottom_format(), 'ad-content-bottom', is_ad_pos_content_bottom_label_visible());
        }; ?>

この配置は、「本文下のカテゴリー・タグ」のすぐ下にパンくずリストがあったほうがわかりやすくデザイン的にもいいと感じるひとにおすすめだ。

パンくずリスト関数の表示の確認

それでは、「content.php」ファイルに入力した呼出しコードから、自作したパンくずリスト関数がちゃんと記事本文内に呼び出されているかを確認してみよう。

投稿ページ上での表示

投稿ページの場合は、自作したパンくずリスト関数はホームアイコン>カテゴリー階層」となるようにパンくずリストを記事上に表示する

また、パンくずリストすべてリンク付けがされており、クリックするとそれぞれホームや親・子・孫カテゴリのページに移動することができる

固定ページ上での表示

固定ページの場合は、自作したパンくずリスト関数はホームアイコン」のみを記事上に表示する

また、ホームアイコンはリンク付けがされており、クリックするとホームのページに移動することができる

固定ページは投稿する際にカテゴリーやタグを指定することができない

なので、条件分岐の関数でホームアイコンのみを表示するように命令したのだ。

デザインのカスタマイズ

きちんと表示されていることが確認出来たら、次はパンくずリストの外観を整えていこう。

ただ表示しているだけでは、リンク付けされた文字は青く表示されアンダーラインも引かれたままだし、矢印アイコンと文字との間隔も狭い。また、パンくずリストの上下の間隔もとってないからだ。

なお、外観のカスタマイズには子テーマの「スタイルシート(style.css)」を利用する

土台のカスタマイズ

それではまず、このCSSコードを子テーマのstyle.cssにコピペして保存しよう。このコードは自作したパンくずリストのデザインの全体を整える土台となる

CSSコード
/*自作のパンくずリストもどきの土台のカスタマイズ*/
/*ここから*/
.mycus-breadcrumbs-tag {
    margin: 5px 0;
}

.mycus-breadcrumbs-tag a {
    line-height: 1.6;
    text-decoration: none;
}

.mycus-breadcrumbs-tag a:hover {
	color: #1967d2;
}

.mycus-breadcrumbs-tag .fa-chevron-right {
	margin: 0 5px;
}

.mycus-breadcrumbs-tag a, .mycus-breadcrumbs-tag .fa-chevron-right {
	color: #333;
}

@media screen and (max-width: 480px) {
    .mycus-breadcrumbs-tag {
        font-size: 14px;
    }
}
/*ここまで*/

外観はこのようになる。

土台となるカスタマイズの解説
  • まずは、上下に存在するウィジェットとの間隔を取りたいため、パンくずリスト全体の上下のmarginを5pxほど取る
  • そして、パンくずリストの文字の行の高さを1.6に設定し、アンダーラインを消すために「text-decoration: none;」とする
  • 文字にマウスカーソルを合わせた時に、文字の色が変化してそこにリンクを埋め込んでいることがわかるようにする。疑似クラス「;hover」を使い、もともとリンクを埋め込んだ文字を表す色であった#1967d2に変色するように設定した
  • 文字と矢印の左右のmarginを5pxほど取る。これで余裕を持った間隔になった。
  • あとは文字と矢印の色を揃えよう。土台の設定なので、色は標準的な#333に設定した。PC上で使われている文字のカラーは通常この色が使われている。
  • 最後に、スマートフォンの画面ではパンくずリストの文字サイズが大きすぎるので、画面サイズが480pxの時は文字の大きさが14pxとなるように変更した

これでパンくずリストの土台となる基本的なデザインの設定は完了した。

次の項目では文字の色や太さの変更や、背景カラーを設定したデザインのカスタマイズを紹介しておく。

これから先で紹介するデザインのカスタマイズは、必ずいま紹介した土台のカスタマイズのすぐ下にコピペしよう。

CSSのルールは、下に書いたコード上のコードの内容を上書きするからだ。なので、順序を逆にすると土台のコードにデザインのコードが打ち消されてしまう。

文字の色と太さの変更

文字やアイコンの色が#333のままでは殺風景なので、色を変えよう。同時に、font-weightも変更してポップな感じに仕上げよう。

先ほどの土台のカスタマイズのすぐ下に、このCSSコードをコピペするだけでよい。

CSSコード
/*自作のパンくずリストもどきのデザインのカスタマイズ*/
/*ここから*/
.mycus-breadcrumbs-tag a {
    font-weight: 600;
}

.mycus-breadcrumbs-tag a, .mycus-breadcrumbs-tag .fa-chevron-right {
	color: #B7B7B7;
}
/*ここまで*/

外観はこのようになる。

デザインのカスタマイズの解説
  • まずは、font-weightで文字の太さを600に変更して目立つようにした。
  • そして、文字の色を少し明るいグレーに変更して柔らかい印象を与えるようにした。

基本的にはこのような感じでいいだろう。これで、記事内のどの部分にも調和する自然なデザインとなった。

背景色を付ける場合

もし、パンくずリストに背景を付け加えてもうちょっと目立たせたい場合は、このようにカスタマイズしよう。

土台のカスタマイズのすぐ下に、このCSSコードをコピペするだけでよい。

CSSコード
/*自作のパンくずリストもどきのカスタマイズ*/
/*ここから*/
.mycus-breadcrumbs-tag span {
	padding: 6px 20px;
	background-color: #999;
	border-radius: 20px;
}

.mycus-breadcrumbs-tag a {
    font-weight: 600;
}

.mycus-breadcrumbs-tag a, .mycus-breadcrumbs-tag .fa-chevron-right {
	color: #fff;
}
/*ここまで*/

外観はこのようになる。

また、固定ページではこのように表示される。

デザインのカスタマイズ解説
  • このカスタマイズでは、パンくずリストの内側の要素である「span」を使用する。パンくずリストの要素を入れ子にしておいたのはこのためだ。
  • 「span」にpaddingを用いて内側の間隔を広げる。角を丸めるため、前後左右の余裕を持って設定しよう。特に固定ページではホームアイコンしか表示されないので違和感が無いようにしたい。
  • 「span」の背景はとりあえず薄い黒である#999を使用した。
  • そして、「span」の角をborder-radiusで丸くする。20pxくらいがちょうどいい。
  • 文字の太さは先ほどと同じくfont-weightで600にしておこう。見やすくなる。
  • 最後に、文字と矢印記号の色を白に変えて目立つようにした。

だいたいこんなものだろう。背景を使うとパンくずリストが目立って見やすくなるものの、うるさく感じられたりもするので、設定するときはあなたのWebサイトのデザインと相談してほしい。


だいたいデザインのカスタマイズの解説はこのような感じになる。

なるべくカスタマイズしやすいHTML構造にしたので、あなたもいろいろ試してみてほしい。

最後に

今回のショートコード関数は「テーマのための関数 (functions.php)」と、Cocoonのメインの投稿・固定記事内の本文コンテンツを司る「content.php」を利用した。

そして、Cocoonテーマは度々アップデートを行っている。content.phpファイルの中身もだいぶん変わり、追加された機能も増えた。

なので、Cocoonのアップデートが来た際は、content.phpに変更がないかを確認し、もし何か変更されていた場合は、子テーマに作成したcontent.phpもカスタマイズを維持しつつアップデートしてほしい。


今回は、ふたつめのパンくずリストを表示する方法を考え、最終的に私自身で関数を作ってしまおうと考えた。

結果的にとりあえず満足のいくものが出来たと思う。

それでは。