HOME  /WordPress(初級)
 /Breadcrumb NavXT(パンくず)のインストールと使い方
2020年03月27日

Breadcrumb NavXT(パンくず)のインストールと使い方

 ­メモ

このドキュメントは2016年の初期サイトの時に作成したドキュメントです。

WordPressが全然わからない状態から、とりあえず動く状態まで持っていったやり方を記述しています。

ある程度判っている方は応用編を参照してください。

現在サイトはこの応用編の技術で作成されています。

本ドキュメントは『パンくずリスト』として『Breadcrumb NavXT』のインストールからそれを表示させる為のheader.php及びCSSの編集方法及び表示されたパンくずリストをビジュアルアイコンを使ってよりビジュアルにする方法を説明しています。

 

『パンくずリスト』は、WEBサイトにおける現在のページ位置をサイトの階層として表示するガイドのことで、英語ではBreadcrumbになります。
何故このガイド表示をBreadcrumbというか?は、童話の「ヘンゼルとグレーテル」の中に出てくる子供達が家に戻るための目印としてBreadcrumb(パンくず)を残したのが由来との事です。

このサイトのパンくずリスト表示は、『Breadcrumb NavXT』というプラグインを利用しています。

1.Breadcrumb NavXTのインストール方法

1.WPのダッシュボードの 『プラグイン→新規追加』 の画面を開きます。

検索画面に『Breadcrumb NavXT』を入力し、表示された下記画面から『いますぐインストール』を実行します。

2.『プラグインの有効化』 を実行します。

3.設定メニュにBreadcrumb NavXT が追加されているので、これをクリックします。

4.表示された画面の Migrate now をクリックします。

5.下記の設定画面が表示されました。


各設定の変更方法については後述します。

2.heder.phpとstyle.cssを編集してパンくずリストを表示する。

CSSは散々弄ってきましたが、いよいよphpの編集になります。

パンくずリストの表示はヘッダーの最後に表示させる為にheader.phpを編集します。

header.phpファイルの格納場所は下記になります。

<WordPressのサイト名>→wp-content→themes→twentytwelve→header.php

これを子テーマのtwentytwelve_childにコピーしてください

以降、header.phpの修正は下記のファイルを修正します。

2-1.heder.phpにパンくずリストを表示しなさい!というコードを追加する。

下記のコードをコピーした『header.php』の最後に追加してください。

<!-- パンくずリストを追加します -->
<div class='breadcrumbs'>
  <?php if(function_exists('bcn_display')){bcn_display();}?>
</div>

※1.<div class=”breadcrumbs”>は、CSSの.breadcrumbsというクラスを表しています。

※2.bcn_display();が、Breadcrumb NavXTの関数でパンくずリストを表示します。

2-1.style.cssにパンくずリストの表示位置等を指定します。

下記のコードをコピーした『style.css』の一番最後に追加します。

/*******************************************************************/
/* パンくずリストの設定 */
/*******************************************************************/
.breadcrumbs {margin-left:3%;margin-top:-1.5%}

※1.margin及びpaddingの%表示は『style.cssをカスタマイズする』で説明したように、PCだけでなくiPAD及びスマホにも対応させる為に、px指定でなく%指定にしてあります。

3.Breadcrumb NavXTの設定変更で、表示をカスタマイズする。

現在のパンくずリストは下記の様になっていると思います。

一方、私のWEBサイトのパンくずリストは下記の様な形式です。

かなりイメージが違うと思いますが、この変更を行うのが、設定の中にある『Breadcrumb NavXT』の設定メニューです。

上記のGeneralタブから順に説明していきます。

3-1.General(一般設定)タブで設定する項目

このタブでは下記の項目の設定を定義します。デフォルト設定と私のHP設定で説明します。

①Breadcrumb Separator(パンくずの区切り文字)

デフォルト設定 私のHPの設定
登録値 表示値 登録値 表示値
 &gt; > &nbsp;&nbsp;/&nbsp;&nbsp; ␣␣/␣␣

『&gt;』を『&nbsp;&nbsp;/&nbsp;&nbsp;』に変更してください。

②Current Item(現在表示しているページのパンくずをどうするか?の設定)

・Link Current Item  :off(現在のページにリンクを貼らないのでoffにします。

・Paged Breadcrumb:off

・Paged Template   :空白にして下さい。

③Home Breadcrumb(ホームページのパンくずの設定)

・Home Breadcrumbon ホームページのパンくずを表示します!という意味です。

・Home Template   :ホームページを表すパンくずの形式を指定します。

Home Templateの所に下記の文字列をコピーして貼り付けてください

<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" title="Go to %title%." href="%link%" class="%type%"><i class="fa fa-home"></i> HOME</a></span>

【解説】

 区分  指定値 表示される文字
デフォルト <span typeof=”v:Breadcrumb”><a rel=”v:url” property=”v:title” title=”Go to %title%.” href=”%link%” class=”%type%”>%htitle%</a></span> サイトタイトル
私のHP <span typeof=”v:Breadcrumb”><a rel=”v:url” property=”v:title” title=”Go to %title%.” href=”%link%” class=”%type%”><i class=”fa fa-home”></i> HOME</a></span>

 

HOME

fa fa-homeはを表示し、その後にHOMEという文字列を記述しています。
尚、ビジュアルアイコンについては(WordPress Visual Icon Fontsのインストールと使い方)を参照

・Home Template (Unlinked)

ホームページその物にパンくずリストを表示するのか?の指定

 区分  指定値 表示
デフォルト <span typeof=”v:Breadcrumb”><span property=”v:title”>%htitle%</span></span> サイトタイトル
私のHP &nbsp;   ␣で表示しない

HOMEページは、自分自身なのでパンくずリストを表示させる意味がないので、空白(&nbsp;)にしてください。

上記の設定が終わったら『変更を保存』してください。パンくずリストは下記の様に変更されます。

3-2.Posts Types(投稿タイプ)タブで設定する項目

このタブでは下記の項目の設定を定義します。。

①Posts(投稿)

投稿のパンくずリストの指定項目は2つあります。

・Post Template:投稿のリンクありの場合

・Post Template(Unlinked):投稿のリンクなしの場合

しかしGeneralタブで現在のページはリンクを貼らない設定にしたためPost Template (Unlinked)しか利用されません。
よって紛らわしいのでPost Templateは空白にする。
Post Template (Unlinked)の所は下記の文字列をコピーして貼り付けてください。

<span typeof="v:Breadcrumb"><span property="v:title"><i class="fa fa-file"></i> %htitle%</span></span>

【解説】

 区分  指定値 表示
デフォルト <span typeof=”v:Breadcrumb”><span property=”v:title”>%htitle%</span></span> 記事タイトル
私のHP <span typeof=”v:Breadcrumb”><span property=”v:title”><i class=”fa fa-file”></i> %htitle%</span></span>

記事タイトル

fa fa-fileは を表示し、その後にドキュメントのタイトルを表示します。

・Post Hierarchy Display:on カテゴリの階層表示をするかしないか?の設定です。

・Post Hierarchy:投稿階層は『カテゴリ』を選択してください。

以上で表示は下記のようになる。

②Pages(固定ページ)

今までの設定では固定ページが表示されてない筈です。
表示されてない場合はダッシュボードの『設定⇒表示設定』でフロントページの表示を固定ページから、最新の投稿に変更してください。

そうすると表示が下記に変わります。そこで固定ページをクリックすると下記の様なパンくずが表示されます。

この表示方法を変更していきます。

固定ページの設定も投稿ページと同様にPage Template (リンクあり)とPage Template (Unlinked)(リンクなし)があり、現在の設定はリンクなしなのでPage Template (Unlinked)を変更します。
紛らわしいのでPage Templateは空白にしてください。

Page Template (Unlinked)の所は下記の文字列をコピーして貼り付けてください。

<span typeof="v:Breadcrumb"><span property="v:title"><i class="fa fa-file"></i> %htitle%</span></span>

【解説】

 区分  指定値 表示
デフォルト <span typeof=”v:Breadcrumb”><span property=”v:title”>%htitle%</span></span> 固定ページタイトル
私のHP <span typeof=”v:Breadcrumb”><span property=”v:title”><i class=”fa fa-file”></i> %htitle%</span></span>

固定ページタイトル

fa fa-fileはを表示し、その後にドキュメントのタイトルを表示します。

以上で固定ページの表示は下記のようになります。

3-3..Taxonomies(分類)タブで設定する項目

①Categories(カテゴリ)

最後にカテゴリのパンくずリストの設定をここで行います。

カテゴリはリンク有の設定にしてあるので、リンクなしは空白となります。
Category Templateの所は下記の文字列をコピーして貼り付けてください。

<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" title="Go to the %title% category archives." href="%link%" class="%type%"><i class="fa fa-book"></i> %htitle%</a></span>

【解説】

 区分  指定値 表示
デフォルト <span typeof=”v:Breadcrumb”><a rel=”v:url” property=”v:title” title=”Go to the %title% category archives.” href=”%link%” class=”%type%”>%htitle%</a></span> カテゴリ
私のHP <span typeof=”v:Breadcrumb”><a rel=”v:url” property=”v:title” title=”Go to the %title% category archives.” href=”%link%” class=”%type%”><i class=”fa fa-book”></i> %htitle%</a></span> カテゴリ

fa fa-bookは を表示し、その後はカテゴリ名を表示します。

 以上で、投稿文書のパンくずリストは、下記になります。

 

上記以外に、タグや投稿フォーマット、miscellaneous(その他)タブの中にも投稿者テンプレート等の設定がありますが、私のHPにはそのようなページがないので設定していません。

これらは、必要が出た時に設定すれば良いと思います。

以上で、パンくずリストをビジュアルな形で表示できるようになったと思います。

 

<ドキュメントガイド>

前のテーマ: Twenty Twelveのメニューを設定する

次のテーマ: Twenty Twelveの投稿ページのカスタマイズ方法

以上でこのドキュメントの説明は完了です。

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

「wordpress」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

WordPressをインストールするとディフォルトではサイトURLはドメイン名/WordPressフォルダになります。これをドメイン名だけにする為にSynologyの仮想ホスト機能を使います。本ドキュメントはこの使い方を解説しています。

WordPressの動作環境を変更すると、DBをダイレクトに変更しなければならないケースがあります。このドキュメントはphpMyAdminのエクスポートとインポートを使って修正した事例を紹介しています。

ここではSynoligyサーバを「Hyper Backup」アプリケーションで、Googleドライブにバックアップ/リストアする方法を解説しています。

Synologyを複数台持っている場合は、Synology間でバックアップを相互に持たせる事ができます。ここではその方法を解説しています。

SynologyのMariaDBから、mysqldumpを使ってDBを定期的にダンプする方法と、それを利用してWordPressを過去の時点に戻す方法を解説しています。

フロントページやカテゴリページを使って最終的なメニュ構成を作成する方法を紹介しています。

Contact Form 7では確認用のe-mailアドレスをチェックする方法がありません。このドキュメントはContact Form 7のフィルターフックの機能をfunctions.phpに記述する事によりこれを可能にする方法を紹介しています。

固定ページに必要なのは、読者からの問い合わせを受けるメールフォームです。これを実現する為に『Contact Form 7』のインストールと設定、更にメールを送るためのSMTPとして、『WP-Mail-SMTP』のインストールと設定事例を紹介しています。

カテゴリページの表示を抜粋表示に変更してもこのカテゴリーの何処にどの様なドキュメントがあるか?は良く分かりません。そこで解説ページを固定ページに書き、カテゴリページの表示の時に、この固定ページを表示させる方法を解説しています。

このドキュメントは投稿ページと固定ページの違いや固定ページのプログラム構造を説明し、この固定ページを広幅表示に変更するための具体的カスタマイズ方法を紹介し更に固定ページのタイトルを非表示にする方法も解説しています。

Twenty twelve 投稿ページには各種の一覧ページがありこの表示方法に全文表示と抜粋表示があります。その中で検索ページは抜粋表示ですがそれ以外は総て全文表示になっています。このドキュメントは一覧表示の物は総て抜粋表示にする方法が記載されています。

ヘッダーはWEBサイトの顔になりますがTwenty Twelveのヘッダーは貧弱です。ヘッダーはタイトル、説明及びメニューから構成されており、このドキュメントはこれらをカスタマイズする方法が記載されています。

このドキュメントはウィジェットエリアの考え方とCSSを編集して少し見栄えの良いウィジェットエリアする方法を解説しています。

一般のテキストボックスを使ってPHP/HTMLソースを記述するとhttp画面で正しく表示されない問題が発生します。
このドキュメントはTinyMCE Advancedに整形済みテキスト(preformatted text)を使ったボックスを作成する方法を紹介しています。

このドキュメントはsingle.phpとcontent.phpをカスタマイズし、投稿ページの<前の記事><次の記事>のリンクを削除。メタ情報はカテゴリと投稿日を削除し編集のみとし、最後に記事タイトルの前に更新日をいれ、記事タイトルを装飾した事例です。

Twenty Twelve のフッターには『Proudly powered by WordPress』という文字が出力されます。これを通常サイトの様に『Copyright表現』に変更する方法を記載しています。

アイコンも文字を使ったWEBサイトをよく目にしますが、WPのビジュアルエディタで使えるプラグインが『WordPress Visual Icon Fonts』です。このドキュメントには、インストールの仕方と簡単な使い方を紹介しています。

このドキュメントはTinyMCEのビジュアルエディタとhttp画面を一致させる設定や、見出しや段落等のテキストエリア要素の設定、テキストボックスの新設方法、及び表がビジュアルエディタで利用できる設定等TinyMCEの使いこなす為のテクニックを紹介しています。

このドキュメントはCSSのカスタマイズ編です。内容はTwenty Twelveの画面構成解説、子テーマの作り方、CSSを編集する際の注意点、具体的なCSSカスタマイズ事例。事例はスマートデバイスにも対応させる為に%指定をしています。

本投稿はTwenty Twelveの投稿のカテゴリ設定や文書の作成について事例と注意点を記載しています。

WordPressをインストールする時に、ログインユーザ名を指定しますが、デフォルトのままではブログの表示名も上記ログインユーザ名が使われます。これを変更する方法を解説しています。

WordPressをインストールして、WPのテーマを『Twenty Twelve』決めた次に悩んだのは、ダッシュボードにある『設定』をどの様に設定したら良いか?です。本ドキュメントではこのWEBサイトの設定をどの様にしたのか?を解説しています。

本サイトのWordPressのテーマは、Twenty Twelveで構築しました。本ドキュメントでは何故、このテーマを選択したのか?の背景と設定方法を解説しています。

WordPressのCSSファイルやPHPファイルを編集する為には『UTF-8 の BOM なし』のテキストエディタが必要になります。本稿ではこのサイトで使っているEmEditor Free版の利用事例を紹介しています。

SynologyのWordpressパッケージをインストールする方法を解説しています。

画像を取り込むツールとしてOnePerss Image Elevator、サムネールの再構築にRegenerate Thumbnailsを利用しています。このドキュメントは画像に関するツールと管理方法について解説しています。

SynologyのNASに日本語版WordPressをインストールするやり方を解説しています。複数のWordPressも同一手法で稼動させることができます。