【JIN カスタマイズ】パンくずリストをタイトル上に表示させる方法

どうもこんにちは、りゅう(@ryuta_blog)です!

今回の記事は、WordPressテーマ「JIN」のカスタマイズをしていきます。

以前から「パンくずリストをタイトルうえに表示したいなー」と考えていたので、自分用にカスタマイズしてみました。

カスタマイズ前

 

カスタマイズ後

 

スマホ表示

完全に好みの問題ですが、パンくずリストは上にあった方が回遊率が上がるのかな?と個人的には思います。

早速シェアしていきますが、個人的にカスタマイズしたものですので、ご利用は自己責任でお願いします。

 

お役に立てれば幸いです!

※JINのテーマをカスタマイズする前に

カスタマイズする前には必ずバックアップを取っておいてください。

また、カスタマイズは必ず子テーマから行ってください。

子テーマを導入していない方は必ず以下から、JINの子テーマをインストールしておいてください。

>>JIN【子テーマ】のダウンロードページ

(直接親テーマを編集してしまうと、アップデートした際に全て消えてしまいます)

 

JINのテーマで、パンくずリストをタイトル上に表示させる方法

【手順1】子テーマに必要ファイルをアップロードする

子テーマをインストールしましたら、以下の3つのファイルを、子テーマにアップロードします。

アップロードするファイル
  1. footer.php
  2. page.php
  3. single.php

アップロードは、お使いのサーバーのファイルマネージャー、もしくはFTPソフトを利用してください。

今回の説明ではエックスサーバーのファイルマネージャーを例にします。(どのサーバーでも流れは一緒です)

 

ファイルマネージャーを開き、以下の順にクリックします。

「お使いのドメイン>publc_html>wp_content>themes>jin_child」

子テーマ内にアクセスしましたら、ファイルのアップロードから3つのファイル選択し、アップロードしてください。

 

こんな感じで子テーマ内に3つのファイルが追加されていればOKです。

 

【手順2】footer.phpを編集

WordPress管理画面の「外観」から「テーマの編集」をクリックし、footer.phpを編集していきます。※編集するのは親テーマではなく、子テーマのfooter.phpです。

footer.phpを開きましたら、以下の部分を削除してください。

できましたら「ファイルを更新」をクリックします。

【手順3】single.phpを編集する

続いてsingle.phpを開き、以下のコードを貼り付けます。

single.php

<!–パンくずリスト–>
<?php breadcrumbs(); ?>

 

こんな感じで貼り付ければOKです。

 

貼り付けましたら、以下の部分を削除してください。

できましたら「ファイルを更新」をクリックします。

 

【手順4】style.cssを編集する

最後にstyle.cssを開き、以下のコードをそのままコピペしてください。

style.css

/*===================================================
パンくずリストをトップに表示
===================================================*/
/* 更新日付表示を左寄せにする */
.cps-post .cps-post-header .cps-post-meta .cps-post-date-box {
text-align: left;
}

/* page-top-footerを非表示にする */
@media (max-width: 767px) {
.page-top-footer {
display: none;
}}
@media (min-width: 768px) {
.page-top-footer {
display: none;
}}
@media (min-width: 1024px) {
.page-top-footer {
display: none;
}}

/* breadcrumb */
#breadcrumb {
width: 100%;
position: relative; }

#breadcrumb:after {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
@media (max-width: 767px) {
#breadcrumb:after {
background-color: rgba(0, 0, 0 ,0.4) !important; } }

#breadcrumb:after {
opacity: 0; }

#breadcrumb ul {
position: relative;
z-index: 1;
letter-spacing: 0;
margin: 0 auto;
display: block; }
@media (max-width: 767px) {
#breadcrumb ul {
padding: 0px;
margin-bottom: 20px;
margin-top: 0px;
font-size: 0.65rem; } }
@media (min-width: 768px) {
#breadcrumb ul {
width: 100%;
padding: 0px 0px;
margin-top: 15px;
margin-bottom: 30px;
font-size: 0.75rem;
font-weight: 300; } }
@media (min-width: 1200px) {
#breadcrumb ul {
width: 100%;
padding: 0px 0px;
margin-bottom: 30px;
} }

#breadcrumb ul li {
display: inline-block; }

#breadcrumb ul li a,
#breadcrumb ul li {
-webkit-transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, border 0.3s ease, padding 0.3s ease, left 0.3s ease, bottom 0.3s ease, box-shadow 0.3s ease;
transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, border 0.3s ease, padding 0.3s ease, left 0.3s ease, bottom 0.3s ease, box-shadow 0.3s ease; }
@media (max-width: 767px) {
#breadcrumb ul li a,
#breadcrumb ul li {
font-weight: 400;
color: rgba(0, 0, 0, 0.5) !important; } }
@media (min-width: 768px) {
#breadcrumb ul li a,
#breadcrumb ul li {
font-weight: 300;
color: rgba(0, 0, 0, 0.5) !important; } }

#breadcrumb ul li a:hover,
#breadcrumb ul li a.hover {
text-decoration: none;
-webkit-transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, border 0.3s ease, padding 0.3s ease, left 0.3s ease, bottom 0.3s ease, box-shadow 0.3s ease;
transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, border 0.3s ease, padding 0.3s ease, left 0.3s ease, bottom 0.3s ease, box-shadow 0.3s ease; }

#breadcrumb ul li .space {
margin-left: 7px;
margin-right: 7px; }

#breadcrumb .space-i {
margin-right: 3px; }

@media (min-width: 768px) {
#breadcrumb .fa-home.space-i {
margin-left: 5px;
margin-right: 15px;
font-size: 0.95rem;
line-height: 0;
display: inline-block;
-webkit-transition: color 0.4s ease, background 0.4s ease, transform 0.4s ease, opacity 0.4s ease, border 0.4s ease, padding 0.4s ease, left 0.4s ease, box-shadow 0.4s ease;
transition: color 0.4s ease, background 0.4s ease, transform 0.4s ease, opacity 0.4s ease, border 0.4s ease, padding 0.4s ease, left 0.4s ease, box-shadow 0.4s ease; }

#breadcrumb .bcHome a:hover .fa-home {
color: #fff !important; }
#breadcrumb .bcHome span {
position: relative; }
#breadcrumb .bcHome span:before {
position: absolute;
content: “”;
width: 30px;
height: 30px;
border-radius: 20px;
background: #fff;
left: -38px;
top: -8px;
z-index: -1;
-webkit-transition: color 0.4s ease, background 0.4s ease, transform 0.4s ease, opacity 0.4s ease, border 0.4s ease, padding 0.4s ease, left 0.4s ease, box-shadow 0.4s ease;
transition: color 0.4s ease, background 0.4s ease, transform 0.4s ease, opacity 0.4s ease, border 0.4s ease, padding 0.4s ease, left 0.4s ease, box-shadow 0.4s ease;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); } }

できましたら「ファイルを更新」をクリックします。

これでパンくずリストがタイトル上に表示されているはずです!

 

補足

表示のバランスを考えて、「更新日時」の部分を左寄せにしています。

デフォルトの右寄せに戻す場合は、以下のコードをstyle.cssから削除してください。

style.css

/* 更新日付表示を左寄せにする */
.cps-post .cps-post-header .cps-post-meta .cps-post-date-box {
text-align: left;
}

 

変更がうまく反映されない場合、一度ページのキャッシュを空にしてから、再度ページを更新してみてください。

ブラウザ毎のキャッシュを空にする方法
  • safariの場合:「開発」タブから「ページのキャッシュを空にする」をクリック
  • InternetExplorerの場合:「ツール」→「インターネットオプション」→全般タブの「閲覧の履歴」セクションで「削除」をクリック
  • Chromeの場合:ブラウザ右上のメニューから「設定」「閲覧履歴データの削除」をクリック

 

まとめ

今回はJINでパンくずリストをタイトル上に表示する方法を紹介しました。

あくまで個人的なカスタマイズである事と、独学の素人ですので不具合が出ましたら申し訳ありません。

その場合は、子テーマから追加した3つのファイルと、CSSのコピペした部分を削除すれば元に戻ると思います。

 

最後までお読みいただき、ありがとうございました!

 

こちらの記事もオススメ↓↓

あわせて読みたい
【デザイン知識なしでもOK】シンプルなアイキャッチ画像の作り方どうもこんにちは、りゅう(@ryuta_blog)です! アイキャッチ画像は本でいえば”表紙絵”のようなものです。 目を引く...
ABOUT ME
りゅう
2つのサイトを運営するブロガー。 「好きなことでお金は稼げる」ことを証明するために、日々奮闘中! 新卒で入社したIT企業を半年で退職し、「あ、俺組織向いてないわ」と完全に開き直り、今後の人生で自分が楽しいと思える事しかしないと心に誓う。

POSTED COMMENT

  1. […] あわせて読みたい【JIN カスタマイズ】パンくずリストをタイトル上に表示させる方法どうもこんにちは、りゅう(@ryuta_blog)です! 今回の記事は、WordPressテーマ「JIN」のカスタマイズを […]

  2. […] あわせて読みたい【JIN カスタマイズ】パンくずリストをタイトル上に表示させる方法どうもこんにちは、りゅう(@ryuta_blog)です! 今回の記事は、WordPressテーマ「JIN」のカスタマイズを […]

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です