Cocoonのメインカラムのパンくずリストの位置を変更するカスタマイズ

今回は、「メインカラムに表示されるパンくずリスト」の要素の位置を変更するカスタマイズを紹介したい。

特に、フラットデザインなWebサイトを作りたいときに役立つだろう。

追記：疑似的なパンくずリスト関数を自作してみた。

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

mycus-tom.com

メインカラムに表示されるパンくずリストの位置と問題点

現在のCocoonのバージョン：2.1.~では、下の画像のように「Cocoon 設定」ページから、投稿ページと固定ページのパンくずリストを表示させないか、もしくは4つの部分の内どれかひとつだけに表示させることができる。

その中でも、「メインカラムトップ」とデフォルトで選択されている「メインカラムボトム」は、それぞれ「記事のタイトルの上」と「記事のコメントや関連記事の下」に表示されるようになっている。

しかし、これらのふたつのパンくずリストは記事の本文のコンテンツの要素から独立した別の要素として存在し、出力されるようになっている。

そのため、Cocoonで記事のタイトル含む本文上コンテンツと本文と本文内下のコンテンツだけを目立たせる最近のフラットデザイン・マテリアルデザインなWebサイトやブログを作ろうとした際、メインカラムに表示するパンくずリストがのけ者になってしまう。

上に表示したふたつの画像のように、パンくずリストの要素は本文のコンテンツの要素と独立していることがわかっただろうか？

そのため、この記事では「メインカラムトップ」と「メインカラムボトム」のふたつのパンくずリストの要素の位置を、それぞれ「本文上の要素」と「本文下の要素」の内部に変更するカスタマイズを行う。

メインカラムのパンくずリストを本文コンテンツ内の上下に再配置するカスタマイズ

それでは、カスタマイズの説明を行っていきたい。このカスタマイズではCocoonのphpファイルを編集するため、バックアップは忘れずに行ってほしい。

設定

まずは、自分のPCにフォルダ名を「tmp」とした空のフォルダーを作り、FTPソフトかサーバーのファイルマネージャーを使用して、先ほど作った空のtmpフォルダを「cocoon-child-master」にアップロードする。

cocoon-child-masterというフォルダは、Cocoonの子テーマ全体を取り扱っているフォルダである。

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

もし、自分のPC上からCocoonの親テーマを削除してしまった等で親テーマが見つからない場合は、公式サイトからもう一度ダウンロードしておこう。

テーマのダウンロード

wp-cocoon.com

サーバーのファイルマネージャー上などで、子テーマにtmpフォルダとそのtmpフォルダ内に先ほどの3つのファイルがあることを確認出来ただろうか？

確認出来たら、次はWordPressの管理画面の左サイドバー内の「外観」にある「テーマエディター」をクリックして「テーマの編集」画面を開こう。

上の画像のようにテーマの編集画面を開けただろうか？ちゃんとCocoonの子テーマが表示されているときは「この子テーマは親テーマ Cocoon のテンプレートを引き継ぎます。」と右側のテーマファイル上部に必ず表示されるので、子テーマが選択されているかよく確認しよう。

そして、テーマファイル内に「tmp ▶」と書かれた項目があるのでそこをクリックしてフォルダを展開し、先ほど子テーマにアップロードした「content.php」と「single-contents.php」と「page-contents.php」の3つのPHPファイルが存在していることを確認しよう

カスタマイズ

それでは、3つのPHPファイルの編集を行っていこう。

single-contents.phpの編集

この「single-contents.php」が取り扱っているものは、投稿ページのmain要素内の本文コンテンツ要素とそれ以外の部分になる。つまり本文コンテンツを除くと、上下どちらかに表示される投稿ページのパンくずリストと本文コンテンツ下の関連記事・コメント・前のページと次のページを含むunder-entry-content要素やメインカラムの追従領域の出力に関わっている要素である。

そして、このPHPファイル内を見て行くと、このような2つのPHPコードが存在するはずだ。

<?php //パンくずリストがメイントップの場合
if (is_single_breadcrumbs_position_main_top()){
  get_template_part('tmp/breadcrumbs');
} ?>

<?php //パンくずリストがメインボトムの場合
if (is_single_breadcrumbs_position_main_bottom()){
  get_template_part('tmp/breadcrumbs');
} ?>

このふたつのコードが、それぞれ投稿記事のメイントップとメインボトムのパンくずリストを出力するコードになる。

このふたつのコードをコピペして控えたのち、single-contents.phpから削除してファイルを更新しよう。

page-contents.phpの編集

次は、「page-contents.php」の編集をしよう。

このPHPファイルが取り扱っているものは、固定ページのmain要素内の本文コンテンツ要素とそれ以外の部分になる。固定ページは投稿ページとは違い、プライバシーポリシーやサイト運営方針などのあまり変わらない情報を扱うページになるため、本文コンテンツを除くと上下どちらかに表示される固定ページのパンくずリストとメインカラムの追従領域くらいである。

このPHPファイルをパッと見ると、このような2つのPHPコードが存在しているはずだ。

<?php //パンくずリストがメイントップの場合
if (is_page_breadcrumbs_position_main_top()){
  get_template_part('tmp/breadcrumbs-page');
} ?>

<?php //パンくずリストがメインボトムの場合
if (is_page_breadcrumbs_position_main_bottom()){
  get_template_part('tmp/breadcrumbs-page');
} ?>

このふたつのコードが、それぞれ固定記事のメイントップとメインボトムのパンくずリストを出力するコードとなっている 。

このふたつのコードも先ほどと同じくコピペして控えたのち、page-contents.phpから削除してファイルを更新しよう。

content.phpの編集

さて、先ほどふたつのPHPファイルから、計4つのPHPコードを抜き出したはずだ。

まずはそれらのコードを、このようにふたつずつにまとめて整理してみよう。

      <?php //投稿ページのパンくずリストがメイントップの場合
      if (is_single() && is_single_breadcrumbs_position_main_top()){
        get_template_part('tmp/breadcrumbs');
      } ?>

      <?php //固定ページのパンくずリストがメイントップの場合
      if (is_page() && is_page_breadcrumbs_position_main_top()){
        get_template_part('tmp/breadcrumbs-page');
      } ?>

        <?php //投稿ページのパンくずリストがメインボトムの場合
        if (is_single() && is_single_breadcrumbs_position_main_bottom()){
          get_template_part('tmp/breadcrumbs');
        } ?>

        <?php //固定ページのパンくずリストがメインボトムの場合
        if (is_page() && is_page_breadcrumbs_position_main_bottom()){
          get_template_part('tmp/breadcrumbs-page');
        } ?>

上のふたつのコードの中に、元のコードとの違いに気が付くことができただろうか。

答えは、「is_single() && 」と「is_page() && 」といったものが付け加えられていることである。これらはそれぞれ、「投稿ページでしかパンくずリストの要素を出力しませんよ」「固定ページでしかパンくずリストの要素を出力しませんよ」といった処理を行うものである。

この命令を付け加えないと両方のパンくずリストが同時に表示されてしまうので、必ず忘れないようにしよう。

それではcontent.phpファイルを開いて、先ほどふたつにまとめたパンくずリストを出力するPHPコードを、それぞれこの位置にコピペしよう。

まずはメインカラムトップのパンくずリストの位置だ。

      <?php //投稿ページのパンくずリストがメイントップの場合
      if (is_single() && is_single_breadcrumbs_position_main_top()){
        get_template_part('tmp/breadcrumbs');
      } ?>

      <?php //固定ページのパンくずリストがメイントップの場合
      if (is_page() && is_page_breadcrumbs_position_main_top()){
        get_template_part('tmp/breadcrumbs-page');
      } ?>

      <?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_single() && is_single_breadcrumbs_position_main_bottom()){
          get_template_part('tmp/breadcrumbs');
        } ?>

        <?php //固定ページのパンくずリストがメインボトムの場合
        if (is_page() && is_page_breadcrumbs_position_main_bottom()){
          get_template_part('tmp/breadcrumbs-page');
        } ?>

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

そして、メインボトムに表示するパンくずリストは、上のコードのように「投稿者等表示用のテンプレート」の上にコピペしよう。

このようにコピペして編集したあと「ファイルを更新」して、書き換えたcontent.phpの保存が出来たら、今回のカスタマイズは完了だ。

外観

上記のカスタマイズを行うと、このようにパンくずリストが出力されるようになる。

メインカラムトップの場合

上の画像のように、メインカラムトップのパンくずリストは本文コンテンツ内の最前部に表示されるようになる。このため、記事を開いた人が最初に目に付く位置になり、わかりやすくなった。

特にカテゴリを細分化していた場合、読み始める前に親カテゴリがわかるというのは閲覧者に親切かもしれない。

メインカラムボトムの場合

上の画像のように、メインカラムボトムのパンくずリストはSNSシェアボタンウィジェットの下に表示されるようになる。投稿者名テンプレートと非表示化されているpublisher要素を除くと、実質的に本文コンテンツの最下部と言っていいだろう。

補足：メインカラムボトムのパンくずリストを本文コンテンツ直下に再配置するカスタマイズ

これは補足的なカスタマイズになるが、メインカラムボトムのパンくずリストの位置を本文コンテンツのすぐ下に表示させるカスタマイズになる。

先ほどのカスタマイズとは違い「content.php」は編集せず、「single-contents.php」と「page-contents.php」だけで完結する方法になる。

設定

先ほどの説明と全く変わらない。子テーマにtmpフォルダを作り、「single-contents.php」と「page-contents.php」のふたつのファイルがあることを確認しよう。

注意事項

先ほどのカスタマイズでメインカラムボトムのPHPコードをcontent.php内に書いている場合は、そのコードを削除しておこう。二重に表示されてしまう。

カスタマイズ

今回は単純なカスタマイズとなる。と言うのも、本文コンテンツのすぐ下に出力されるコードとメインカラムボトムのコードを入れ替えるだけだからだ。

single-contents.phpの編集

まずは投稿ページを出力するsingle-contents.phpの編集になる。このようにメインカラムボトムのコードがこの配置になるように移動させよう。

<?php //本文テンプレート
get_template_part('tmp/content') ?>

<?php //パンくずリストがメインボトムの場合
if (is_single_breadcrumbs_position_main_bottom()){
  get_template_part('tmp/breadcrumbs');
} ?>

パンくずリストのコードを本文テンプレート直下に移動させよう。under-entry-contentのdiv要素と位置を入れ替える形になる。

移動させたら、「ファイルを更新」ボタンを押して編集したファイルの変更を保存しよう。

page-contents.phpの編集

次は固定ページを出力するpage-contents.phpを編集する。このようにメインカラムボトムのPHPコードを移動させよう。

<?php //本文の表示
get_template_part('tmp/content') ?>

<?php //パンくずリストがメインボトムの場合
if (is_page_breadcrumbs_position_main_bottom()){
  get_template_part('tmp/breadcrumbs-page');
} ?>

パンくずリストのコードを本文の表示のすぐ下に配置しよう。コメントのテンプレートと位置を入れ替える形になる。

移動させたら、「ファイルを更新」ボタンを押して編集したファイルの変更を保存しよう。

外観

先ほどのようにPHPファイルを編集すると、メインカラムボトムのパンくずリストはこのように表示される。

上の画像のように、本文のコンテンツのすぐ下にパンくずリストが表示されているだろうか？

もしデザインが殺風景だと感じたならば、子テーマのスタイルシート (style.css)にこのようなCSSコードを付け足して外観を整えてみよう。

/*メインカラムボトムのパンくずリストのデザインを整えるカスタマイズ*/
/*ここから*/
.sbp-main-bottom, .pbp-main-bottom {
	margin: 2em 0;
	padding: 10px 29px;
	background-color: #fff;
	border: 1px solid transparent;
}
/*ここまで*/

パンくずリストの外観はこのようになる。

最低限のCSSコードなため、あまり凝ったカスタマイズではないものの、シンプル故の見やすさが生まれた。

もし柔らかくしたり立体的なデザインにしたければ、「border-radius」で少しだけ角を落としたり、「box-shadow」でほんの少し影を付けて見てもいいかもしれない。

最後に

このカスタマイズ記事を読んだ人に注意してほしいことは、Cocoonは時折テーマのアップデートが入るため、親テーマのPHPファイルの内容が変わることがあったりする。特にcontent.phpファイルは新機能の追加などがあったりする。

パンくずリストを出力するPHPコードがガラリと変わることはないはずだが、もし大幅なアップデートがあった際は、子テーマに作ったtmpフォルダ内のphpファイルをアップデートすることを忘れないようにしておこう。方法としては親テーマのphpファイルを上書きでアップロードしなおしてからもう一度テーマの編集ページでカスタマイズし直そう。

今回のカスタマイズの解説はこれで終わりになる。

私は今のところフッターボトムにパンくずリストを設定しているが、スマホでは最後までスクロールしないと見えない位置に存在しているので、今のサイトのデザインを崩さずパンくずリストを持ってくる方法はないものかと考え、思いついたカスタマイズを忘備録的に書き留めた。

この記事が役に立つと嬉しい。