WordPressパンくずリスト(パンくずナビ)の作成方法 - 初心者の簡単WordPressでホームページ作成方法


WordPressパンくずリスト(パンくずナビ)の作成方法

パンくずリストとは

  • パンくずリストとは、
    ホームページ内で、
    該当のページに、
    そのページのホームページ内での位置関係を、
    ツリー構造にしたリンクの型式で、
    表示するものです。
    「パンくずナビ」とも言います。
    ホームページ閲覧者がホームページ内での現在位置を見失わないようにし、ナビゲーションを助けるために使われるのと、サイト内リンクが充実することでSEO的にも有益になります。
    下図の赤線の箇所です。WordPressでパンくずリスト作成

WordPressでパンくずリストを作成するには、プラグインを使います

  • プラグインでなくても作成できるのですが、初心者にはやや難しいのでプラグインを使う方が良いです。
  • パンくずリストの作成プラグインには、色々あるのですが、今回は「Breadcrumb NavXT」の設定の仕方を説明します。
    パンくずリストプラグインで、投稿ページだけ表示するものもありますが、この「Breadcrumb NavXT」は固定ページにも表示可能なのが良いです。

Breadcrumb NavXTの設定方法

  • インストールは「WordPressのプラグインの設定方法」に掲載している方法を参照してください。
    インストールしたら直ぐに「有効化」しましょう。
  • Breadcrumb NavXTの設定ページがあるのですが、初期では日本語化されていません。
    日本語化するには、「日本語用翻訳ファイル」を設置すると可能ですが、初心者にはやや難しいので、初期設定のままでも大丈夫です。
  • 表示したい場所に下記のスクリプトをコピーして記載します。

    「固定ページテンプレート(page.php)」と「単一記事の投稿(single.php)」の表示したい箇所に記載します。
    下図では、h2(各ページのタイトル)を目印にその上に記載した例です。
    ※何かの記述の途中に記載するとバグることがありますので、記述の区切りに記載するのがコツです。下図では、<section>の直上に記載しています。
    ※貼り付けする前には、必ず元のソースをコピーしておきましょう。
    WordPressでパンくずリスト作成

パンくずリスト(パンくずナビ)表示の装飾方法

  • テーマによっては、そのままでまずまずの見栄えになることもありますが、色や文字サイズを調整したい場合には、CSSで調整します。
  • CSSファイルは、「外観」→「テーマの編集」→「スタイル スタイルシート (style.css)」にあります。
    このファイルを開いて、下記のこのサイトの記述例を参考にして記述してください。
    .breadcrumbs{
    width:686px;
    height:auto;
    padding:10px 10px 8px 14px;
    margin:0 0 10px 0;
    background:#F1F6D0;
    border-radius:20px;
    }
    1.widthは、横幅→掲載部分の横幅。
    ※ピクセルpxが分からなければ、100%にしてみてください。長すぎたら94%などにして短くしてみて調整しましょう。
    2.heightは、高さ→通常はautoで大丈夫です。
    3.paddingは、文字列の上右下左の余白です。
    4.marginは、上右下左の他のdivとの距離です。
    5.backgroundは、文字列の背景色です。paddingの余白にも反映されますが、marginで拡げた部分には反映されません。
    6.border-radiusは、背景色の角を丸型にするものです。pxの数値は、角丸のサイズとなります。

次は、タグクラウド(投稿時に設定したキーワードの自動一覧表示)

 

 

 

WordPressパンくずリスト(パンくずナビ)の作成方法

「 WordPressパンくずリスト(パンくずナビ)の作成方法」のページ