オリジナルテーマ WordPress

WordPressオリジナルテーマの作り方⑦(パンくずリスト編)

今回はWordPressオリジナルテーマの作り方【第7回】パンくずリスト編となります。

前回までに以下の事をやってきました。

今回はパンくずリストについて書いていきたいと思います。

その前にパンくずリストとは何かということについて軽く説明していきます。

パンくずリストとは?

最初聞いた時何のことだ?と思いましたが、これはWikipediaにも載っています。

簡単に説明すると、自分が今開いているページの階層を表示するものです。

大抵は以下のように画面左上にあると思います。

 

これを見れば何となく分かると思いますが、もっと階層が深くなれば右側にどんどん増えていきます。

そしてなぜパンくずリストという変な名前なのかというと、ヘンゼルとグレーテルという童話で森に入った時に道に迷わないようにパンくずを道しるべとして置いていった、という話が由来となっています。

要するにサイト上でも迷子にならないようにということですね。

それではこのパンくずリストの設置について説明していきます。

 

プラグイン「Breadcrumb NavXT」をインストール

パンくずリストは有料テーマであれば最初から標準装備している場合もありますが、オリジナルテーマの場合はありません。

なので自作するかプラグインを使うかなのですが、今回はプラグインを使っていきます。

まずはプラグインをインストールして有効化しましょう。

右上のキーワード入力欄に「Breadcrumb NavXT」と入力するとプラグインが表示されます。

 

 

今すぐインストールをクリックすると有効化と表示が変わるので、そのまま有効化をクリックすれば完了です。

 

パンくずリストを表示させるコードを追記

Breadcrumb NavXTのインストールと有効化が完了したら、次はパンくずリストを表示させるために必要な関数を書いていきます。

<?php
  if ( function_exists( 'bcn_display' ) ) { 
    bcn_display();
  }
?>

それでこれをどこに書けばいいのかということですが、単純にパンくずリストを表示させたい位置になります。

先ほど書いた通り基本的に左上にあると思うので、上の方に書くことが多いと思います。(書いてみて表示の位置を確認してみて下さい)

全部のページで表示させたい場合は全ページ共通となるheader.phpになると思います。

もしトップページ以外ということであれば各固定ページの上の方になると思います(paga-〇〇.phpなど)

これでとりあえず表示されるようになったかと思いますが・・・デザインもデフォルトのままなので、デザインに合わせていく必要があります。

 

パンくずリストをイメージ通りのデザインにする

まずは管理画面左側の設定からBreadcrumb NavXTを選択します。

 

するとこの画面が表示されるので、ここから設定していきます。

 

パンくずの区切り

まずは一般タブの最初にあるパンくずの区切りです。

これはそのままですが、区切りの文字やアイコンになります。

これはデフォルトの状態で、「→」と入力すればこうなります。

(デフォルトの「 &gt; 」は「>」を表す特殊記号です)

 

トップページへの表示を変更

パンくずリストの一番左にはトップページである「トップ」や「HOME」が来ると思うので、この設定をしていきます。

一般のタブのまま少しスクロールするとこのような表示があります。

 

最初にパンくずリストにトップページを表示させるためのチェック項目がありますが、ここはデフォルトでチェックになっていると思うので確認だけしておきます。

そして重要なのが %htitle% の部分です。

ここはデフォルトだとサイトのタイトルになってしまうので、表示させたい文字に変更します。

ここをHOMEと表示させたかったら

 

と変更すればOKです。

するとこのようになります。

 

パンくずリストのデザインを変更

ここからが重要ですね。

このままではデザインがデフォルトのままなので、自分でカスタマイズしやすくします。

まずカスタマイズ出来るように、最初の方で書いたパンくずリストを表示させるコードにclass名を付けたdivで囲います。

<div class="breadcrumb">
  <?php
    if ( function_exists( 'bcn_display' ) ) { 
      bcn_display();
    }
  ?>
</div>

class名は何でも大丈夫ですが、今回はbreadcrumbとしました。

このclass名を使うとフォントの色やサイズを変えやすくなると思います。

 

以上です。

-オリジナルテーマ, WordPress