画伯の試行錯誤 – 2018年4月18日 パンくずリストを導入してみた!

Yoastは多機能だ。

このページはYoastというSEO対策プラグインを導入しています。
SEO対策プラグインとして広く知られているのですが、実はSEO対策以外にも豊富な機能を搭載しています。

Yoast How To

.htaccessのファイルなどもYoastのファイルエディタ画面から編集する事ができ大変便利です。
.htaccessのファイルに変更を加える必要が時々あるので、その度にホスティング会社のページ上であったりFTPソフトからの作業は面倒だったでこの機能は痒いところに手が届く感じです。
もっとも.htaccessのファイルの記入ミスやIPアドレスが変わってしまっていてログインできない場合などはこの画面にはたどり着けないので万能ではありません…

Yoastの機能をつかってパンくずリストを導入してみよう!

設定画面がある場所

Yoast How To

WordPress管理画面からY SEOと書かれたところにあるSearch Appearanceとかかれた項目をクリックします、続いてタブの中にあるパンくずリストという箇所をクリックします。

パンくずリストで表示する分類を選ぶ!(カテゴリー、タグ等)

Yoast How To

カテゴリー以外にもタグやフォーマットを選ぶことができますが、パンくずリストを導入したい方の多くはカテゴリーを選択されるのでは無いでしょうか。

導入例

Yoast How To

階層表現で ホーム>親カテゴリー名>子カテゴリー名>投稿記事名 という具合に表示したかったので、Taxonomy to show in breadcrumbs for content typesという項目にある投稿:にある選択項目はカテゴリーを僕は選択しました。

設定が完了したらコードを貼り付けよう!

<?php 
if ( function_exists('yoast_breadcrumb') ) { 
yoast_breadcrumb(' <p id="breadcrumbs">','</p>
 '); 
} 
?>

このコードをどの箇所に貼ればいいかはYoast公式サイトに丁寧に解説されているので、それに従います。

上記のコードを貼り付ける最も一般的な場所はsingle.phpもしくはpage.phpのページタイトル上部、もしくはheader.phpの最下部では無いでしょうか。
投稿ページに導入する場合はsingle.phpへ、固定ページであればpage.phpへ。
僕の場合はindex.phpへ加筆しました。

なぜかというと上部に設置した場合はナビゲーションメニューやウィジェットにある項目カテゴリーなどの役割と重複してしまうと考えたからです。
このページの設計思想が横になりながらダラダラ読めるページを目標に作っているので、一番下まで読んで頂いた後にまたページ上部にスクロールするのは億劫では無いか?との考えからです。

レスポンシブ画面でもきちんと表示されるようにしました。

ここまででパンクズリストが無事表示されるようになったと思います。
このページではJetpackを活用しているためJetpack モバイルテーマを有効化という機能を使いレスポンシブ対応にしています。
大変便利なのですが、このままでは上記で設定したパンクズリストが表示されません。
そこで以前公開した(画伯の試行錯誤 – 2018年03月06日 モバイルテーマのメニューの問題を修正。)という記事同様にJetpackのモバイルテーマにも先ほど同じコードを追記します。

以前の書いた記事と作業工程はよく似ています。

このサイトの場合は以下のフォルダに入っているindex.phpに変更を加えました。

wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/index.php

ページ最下部にある<?php get_sidebar(); ?>と<?php get_footer(); ?>の上に僕は書き込みました。

<div align="center">
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

パンくずリストを導入する前は同様の方法でタグとカテゴリーを表示させていました。

カテゴリーをリンク付きで出力させたい場合

<?php the_category(); ?>

タグをリンク付きで出力させたい場合

<?php the_tags(''); ?>

このような感じのコードを以前は同じ場所に書いてありました。
パンくずリストを導入したことで蛇足となってしまったため廃止しました。
場合によってはタグやリンクの方がパンくずリストよりも使い勝手が良いかもしれないので忘備録として残しておきます。

レスポンシブ画面でもきちんと表示されるようになりました!

Yoast How To

自分のための忘備録として書きました。

注)すべての人が同じ方法でパンくずリストを導入できるとは限りません、また間違っている箇所があるかもしれません。他のトラブルがこの方法をとった事で発生するかもしれません。あくまでも自己責任で。

画伯

Copyrighted Image

このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。