Fire HD8 タブレット(キッズモデル)
【3月30日まで】 5,000円(33%)OFF

【JINカスタマイズ】パンくずリストを記事上に設置&文字色を変更する方法(WordPress)

JINカスタマイズ『パンくずリスト』を記事タイトル上部に設置

WordPressの人気テーマ『JIN』の、コピペでできる簡単カスタマイズをご紹介します。

今回は、ブログの回遊率に関係する『パンくずリスト』を記事上に設置し、文字色を変更&スッキリした表示にしてみました!

 

\\ ブログ初心者さん必見 //

カスタマイズをする際の注意点

カスタマイズは自己責任でお願いします

今回のカスタマイズは親テーマのPHPファイルを編集する必要があるため、

  • ワードプレス初心者さん
  • PHPのことが全くわからない方

にはあまり推奨できないのですが、何人かの方からブログを見てお問い合わせをいただいたのでカスタマイズ記事をアップすることにしました。

 

※ PHPファイルは少しでもエラーがあるとブログが表示されなくなったり、ワードプレスの管理画面に入れなくなる恐れもあるので、必ずバックアップをとった上で、自己責任でお願いします

万が一エラーになってしまった場合の対処方法は個別にご対応できません。

 

テーマのアップデートに対応できない可能性があります

JIN親テーマのPHPファイルを編集するカスタマイズのため、テーマがアップデートされたタイミングでカスタマイズ自体も消えてしまう可能性があることをご了承ください。

アップデートによる影響を受けないために、FTPクライアントソフトを使用して子テーマに該当PHPファイルをアップロードしてから編集するという方法もあるのですが、今回は割愛しています。

 

事前の設定が必要です

JINで『パンくずリスト』を使用するには、事前の設定が必要です。

 

ワードプレス管理画面 > 外観 > カスタマイズ > その他の設定

で、パンくずリストの表示を「●表示」にチェックしておいてください。

 

カスタマイズイメージ

元々JINでは、記事下にパンくずリストを表示させる機能がついています。

 

【デフォルトのパンくずリスト】

JINパンくずリストを上部に設置するカスタマイズ方法

 

これを、

  1. 記事タイトル上に設置
    ⇒ より目につきやすい場所に配置して回遊率を上げる
  2. 文字色変更
    ⇒ クリック率を上げる青色にしました
  3. 記事タイトルの表示を削除
    ⇒ 階層のみを表示させて見た目をスッキリ

この3つのカスタマイズでこんな感じにしてみました!

 

【カスタマイズ後のパンくずリスト】

JINパンくずリストを上部に設置するカスタマイズ方法

 

少しスッキリ&見やすくなったと思いません??(好みの問題かも^^;)

そして、記事上に持ってきたことで目につきやすくなりました!
 

パンくずリストを上部に設置するカスタマイズ方法

PHPファイルの編集

【手順1】ワードプレスの管理画面 > 外観 > テーマエディター(テーマの編集)へ進みます

 

【手順2】画面右側にある「

JINパンくずリストを上部に設置するカスタマイズ方法

 

【手順3】テーマファイル一覧を下にスクロールして、テーマヘッダー(header.php)をクリックします

JINパンくずリストを上部に設置するカスタマイズ方法

 

【手順4】PHPファイルに次の一行を追加します

※ 追加する場所は最後の一行<?php endif; ?>の前です

<?php breadcrumbs(); ?>

 

 

【手順5】[ファイルを更新]ボタンを押します

(更新する前に、エラー表示が出ていないかを必ず確認してください)

JINパンくずリストを上部に設置するカスタマイズ方法

 

 

CSSの編集

次に、CSSを編集します。

ワードプレス管理画面 > 外観 > 追加CSS に、下記のコードを入力してください。

▼「追加CSS」に下記コードを追加

HTML

/* パンくずリストの文字色指定 */
#breadcrumb ul li a {
			color: #0044cc !important; 
} 
 

#0044ccの部分はお好きなカラーコードを設定できます。

ちなみに、#0044ccはこんな色です。(青色はクリック率が高くなると言われています)

 

 

パンくずリストから記事タイトルを削除してスッキリさせるカスタマイズ方法

PHPファイルの編集

【手順1】ワードプレスの管理画面 > 外観 > テーマエディター(テーマの編集)へ進みます

 

【手順2】画面右側にある”

JINパンくずリストを上部に設置するカスタマイズ方法

 

【手順3】テーマファイル一覧を下にスクロールして、include > breadcrumb.phpをクリックします

JINパンくずリストを上部に設置するカスタマイズ方法

 

【手順4】開いたPHPファイルの、以下の2行をコメントアウト(※注1)します

$str.= $separatorHTML;
$str.= '<li>' . $startTextContainer. $post -> post_title .$endTextContainer . '</li>';

 

上記のコードはおおよそ122行目あたりにありますので探してください。

 

(※注1)コメントアウトとは、対象のコードを

/* */

このタグで囲むことを指します。

 

【手順5】

[ファイルを更新]ボタンを押します

(更新する前に、エラー表示が出ていないかを必ず確認してください)

 

PHPファイルは1文字でもエラーがあるとブログが表示されなくなったり管理画面に入れなくなることもあり得ますので、必ずバックアップをとってください。

また、PHPが全くわからない方は、このカスタマイズは控えた方が良いかもしれません。(念のため忠告です…)

 

 
以上、WordPressテーマ『JIN』のパンくずリストのカスタマイズをご紹介しました。

 

当サイトでは、他にもJINのオリジナルカスタマイズをご紹介しています。こちらの記事もぜひあわせてお読みください。

最後になりますが、カスタマイズを行う際は必ずバックアップをとったうえで自己責任にて作業を行ってください。

ご質問ご指摘ありましたらお問い合わせフォームからお願いします。