書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】パンくずリストにアイコンを設定する方法

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

どうもみなさん。多忙につきパソコンを1週間ぶりに起動している「かきてぃー」です。

今回は、ヘルプサポートのコメントに

・パンくずリストにアイコンを設定する方法
・人気記事に順位とview数を設定しオシャレにデザインする方法

の2点、依頼がありましたのでご説明致します。

https://kakitare.info/web/affinger4-help/

この記事では

パンくずリストにアイコンを設定する方法

を書いていきます。

完成形のイメージ

やっぱりアイコンがある方がオシャレな感じはしますよね!

アイコンの設定方法は2種類ありまして。

  1. 既存のパンくずを削除して、プラグインを導入する
  2. 既存のパンくずにアイコンを設定する

どちらかです。

難易度は私的にはどちらも変わらない気がしました

一般的にはやっぱりプラグインが簡単なのかもしれません。

既存のパンくずを削除して、プラグインを導入する

既存のパンくずを削除しましょう。

パンくずは、

  • single-type1.php
  • single-type2.php

のテンプレートに設定されています。

だいたい24行目付近です。

<!– ぱんくず –>

のコメントアウトが設定されているので、分かりやすいですね。

ここを丸ごと削除します。

削除後にパンくずが消えていることを確認しましょう。

続いて、削除した位置に以下のコードを追記します。

これで、準備は完了です。

プラグイン「Breadcrumb NavXT」を導入

「Breadcrumb NavXT」というパンくずを自動的に生成してくれるプラグインを導入します。

「プラグイン」→「新規追加」

より導入して下さい。

有効化すると、パンくずが表示されます。

style.cssの設定をしていないので、デザインは崩れているので「AFFINGER」に寄せましょう。

上記を設定すれば、ある程度似せることができます。

アイコンを設定する

http://fontawesome.io/icons/

アイコンは上記のサイトから持ってくるので

  • ホーム用
  • 投稿ページ用
  • 固定ページ用
  • カテゴリ用
  • タグ用

と5つ考えておくと良いです。

だいたい検索で

  • home
  • page
  • folder
  • tag

などで調べればそれっぽいのが出ていきます。

選んだら、

こんな形でサンプルが用意されていますので、余分なロジックを削除し、

とします。

アイコンはプラグインの設定から設定できますので、

「設定」→「Breadcrumb NavXT」

を選択します。

一般の設定にて

パンくずの区切り

には「&nbsp;&nbsp;/&nbsp;&nbsp;」を設定します。

これは、「半角スペース 半角スペース / 半角スペース 半角スペース」をパンくずの区切りとして設定しているだけです。

かきてぃー
ちょっと設定が多いので、一気に書きます。

ホームぺージのテンプレート

投稿テンプレート (リンクなし)

ページテンプレート (リンクなし)

カテゴリーテンプレート

タグテンプレート

<i class=”××××××”></i>

のところは、ご自身で選んだアイコンを設定して下さい。

v:×××××

のところはプラグインにて定義した情報を取得していますね。

後は、それぞれのtitleやlinkなんかを取得しています。

これで、設定を保存すれば…

サメくん
か、簡単すぎる…
イルカさん
サメくんの頭でも出来たか…。
スポンサーリンク

既存のパンくずにアイコンを設定する

せっかく「AFFINGER」にはパンくずがあるのに、削除するのは嫌だ!!!

って方も少なからずいるはず。

かきてぃー
というか、私がそうなのでwプラグイン嫌いなのでw

ということで、既存のぱんくずロジックを解析してアイコンを付けてみました。

既存のロジックでは…

「schema.orgを使用したパンくずリスト」を設定しているみたいですね。

https://www.suzukikenichi.com/blog/google-finally-supports-breadcrumbs-with-schema-org/

さて。どうやるかな。

Homeのアイコン設定はとても簡単

かきてぃー
5行目の「Home」は静的な値になっているので、ただアイコンを設定すればいけるのでは…

と思い設定してみました。

5行目のロジック

うん。やっぱり。

まあ、ここはいいんですよ。問題は次。

既存のロジックはカテゴリーの情報しか取得していないっぽいですね。

かきてぃー
ならば、カテゴリにアイコンを追加すればいける!!!

カテゴリーアイコンを追加する

21行目のロジック

かきてぃー
なんだよ。くそ簡単か

フォルダのアイコンをホームと同じように追加しただけです。

やったー!超簡単にアイコンが追加出来たぞー!!

気に入らん。

なぜって。これだと全部のカテゴリーが同じアイコンになってしまう。

カテゴリー毎にアイコンを変えたい!

ってことでもう少しカスタマイズ!

カテゴリ毎にアイコンを可変する

・事前準備

カテゴリのIDを把握しておく。

私の場合は以下の通り。

  • Web…1
  • お金…2
  • グルメ…3
  • ブログ…4
  • 仕事…5
  • 子育て…7
  • 旅行…6
  • 車関係…54

やることは、カテゴリIDをみてif文で分岐

分岐先でアイコンのclassを設定して、パンくずで出力する。

はい。こんな感じになりました。

これで動作確認をすると…

カテゴリ毎にアイコンが可変出来ました。

サメくん
まじか!!サメのアイコンも設定しましょうよ!
イルカさん
…アイコンもなければ、サメのカテゴリもないよ。
サメくん
…え……

パンくずは別出しにして呼び出すべき

パンくずリストは

  • 投稿ページ
  • 固定ページ
  • タグページ
  • カテゴリページ
  • 投稿者アーカイブページ
  • 添付ファイルアーカイブページ
  • 日付アーカイブ用ページ

の7つで使われています。

今回のカスタマイズでは、「投稿ページ」のみしか直していないので

それ以外のページ

  • archive.php
  • category.php
  • index.php
  • page.php

の4つも同様の修正が必要です。

これってかなり面倒だし、万が一カテゴリが増えた時に凄く手間です。

そこで、パンくずは別出しのテンプレートに保存して他は呼び出し方式にした方がずっと楽。

ってことで早速実行!

パンくず用のテンプレートを作成

とりあえず「ori-breadcrumb.php」というテンプレートで保存します。

ファイルの中身はこんな感じ…

それぞれのファイルに対応するために、かなり追記しました。

カテゴリーIDやアイコン設定はご自身の情報にご変更下さい。

テンプレートは子テーマ内に格納します。

それぞれのテーマに「ori-breadcrumb.php」を呼び出す

子テーマに格納したパンくず用のテンプレートを呼び出すロジックに変更します。

修正するのは

  • archive.php
  • category.php
  • index.php
  • page.php
  • single-type1.php
  • single-type2.php

の5ファイル。

まずは、<!–ぱんくず –>~<!–/ ぱんくず –>

のエリアをすべて削除します。

削除したら、代わりに

を記載します。

変更後でもパンくず・アイコンが表示されていれば、完了です。

今後は「ori-breadcrumb.php」を修正すれば、パンくずが反映されます。

sampleロジック

参考までに修正後のロジックを載せておきます。

ori-breadcrumb.php

single-type1.php

かきてぃー
いかがでしょうか。割と簡単にアイコンが設定出来ましたね!グローバルメニューとかも同じような形でアイコンが追加出来そうな気もします…
かきてぃー
それでは、本日もお疲れ様でした!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











Comment

  1. 匿名 より:

    ありがとうございます。
    やりたかったことを全て書いていただいているので参考にさせていただきます。

匿名 にコメントする コメントをキャンセル

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.