JINカスタマイズ

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

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

この記事は、WordPressの人気テーマ「JIN」の非公式カスタマイズです。

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

 

このブログは、WordPressのテーマ「JIN」を使用しています。

過去にもJINの簡単カスタマイズを4つ提案してきましたが、今回は『パンくずリスト』をカスタマイズしてみました!

今までご紹介したカスタマイズはこちらの記事にまとめています

 

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

 

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

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

 

これを、

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

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

 

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

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

 

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

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

 

 

 

それではカスタマイズを紹介していきます!

JINカスタマイズの注意点

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

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

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

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

 

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

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

 

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

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

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

 

事前の設定が必要です

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

 

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

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

 

 

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

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

 

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

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

 

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

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

 

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

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

<?php breadcrumbs(); ?>

 

 

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

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

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

 

 

JINのパンくずリストの文字色を変更するカスタマイズ方法

コピペして使ってね☆

 

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

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

 

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

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

 

 

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

【手順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が全くわからない方は、このカスタマイズは控えた方が良いかもしれません。(念のため忠告です…)

 

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

万が一データをなくされた際の責任はとりかねます。

 

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

 

WEBデザインやプログラミング
に興味があるならTECH::CAMP



⇒ 自宅で受けれるオンライン講座も!

TechAcademyのオンラインブートキャンプ WordPressコース

▼未経験でもOK!在宅で稼ぐスキルを身につけよう




WEBデザインやプログラミングを未経験から勉強するなら【TECH::CAMP】がおすすめ!

まずは無料のオンライン説明会に参加して、講座の内容を見てみよう

\ 25分間の無料説明会 /
TECH::CAMPオンライン説明会

主婦 & WEBライター
あっつ

アラサー主婦、2歳(男の子)のママです。

0~3歳の子育てに役立つ情報をブログで発信しています。

DWEの中古教材を使って楽しく「おうち英語」挑戦中!

詳しいプロフィールはこちら

\ Follow me /