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

※【追記11/25】Google AdSenseの関連コンテンツが表示されなくなる不具合がありました。修正が完了するまで、こちらのカスタマイズはお控えくださいm(_ _)m

どうもこんにちは、りゅう（@ryuta_blog）です！

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

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

カスタマイズ前

カスタマイズ後

スマホ表示

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

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

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

JINのテーマをカスタマイズする前に
JINのテーマで、パンくずリストをタイトル上に表示させる方法
補足
まとめ

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

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

また、カスタマイズは必ず子テーマから行ってください。（直接親テーマを編集してしまうと、アップデートした際にカスタマイズ内容が全て消えます）

子テーマを導入していない方は以下からダウンロードできます。

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

子テーマについて詳しく知らない方は、まず以下の記事を一読ください。

⇒WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】

WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】WordPressでブログをやっている皆さん！ちゃんと「子テーマ」を利用していますか？「子テーマ？なにそれ？」となった人は、この記事を参考に子テーマについて理解していってください。子テーマを理解しないままテーマをカスタマイズしてしまうと、場合によっては取り返しのつかないことになります。...

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

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

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

アップロードするファイル

footer.php
page.php
single.php

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

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

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

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

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

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

【手順２】footer.phpを編集

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

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

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

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

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

single.php

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

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

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

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

【手順４】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); } }