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

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

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

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

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

パンくずリストを表示する自作ショートコードの作り方

mycus-tom.com

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

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

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

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

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

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

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

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

パンくずリストを上下に設置したい

wp-cocoon.com

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

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

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

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

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

設定

まず、今回のカスタマイズでは主に子テーマの「テーマのための関数 (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の親テーマのフォルダである「cocoon-master」のtmpフォルダ内に存在する「content.php」ファイルをコピーして、先ほど子テーマに作った空のtmpフォルダにアップロードする。

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

テーマのダウンロード

wp-cocoon.com

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

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

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

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

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

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

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

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

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

まずは、「functions.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ファイル内に入力して、Webサイト上に呼び出す方法の説明に移ろう。

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

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

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

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

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

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

先ほど解説したパンくずリスト関数を呼び出す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());
      }; ?>

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

        <?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にコピペして保存しよう。このコードは自作したパンくずリストのデザインの全体を整える土台となる。

/*自作のパンくずリストもどきの土台のカスタマイズ*/
/*ここから*/
.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;
    }
}
/*ここまで*/

外観はこのようになる。

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

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

文字の色と太さの変更

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

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

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

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

外観はこのようになる。

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

背景色を付ける場合

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

土台のカスタマイズのすぐ下に、この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;
}
/*ここまで*/

外観はこのようになる。

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

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

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

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

最後に

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

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

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

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

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

それでは。