※【追記11/25】Google AdSenseの関連コンテンツが表示されなくなる不具合がありました。修正が完了するまで、こちらのカスタマイズはお控えくださいm(_ _)m
どうもこんにちは、りゅう(@ryuta_blog)です!
今回の記事は、WordPressテーマ「JIN」のカスタマイズをしていきます。
以前から「パンくずリストをタイトルうえに表示したいなー」と考えていたので、自分用にカスタマイズしてみました。



完全に好みの問題ですが、パンくずリストは上にあった方が回遊率が上がるのかな?と個人的には思います。
早速シェアしていきますが、個人的にカスタマイズしたものですので、ご利用は自己責任でお願いします。
目次
JINのテーマをカスタマイズする前に
カスタマイズをする前に、必ずバックアップを取っておいてください。
また、カスタマイズは必ず子テーマから行ってください。(直接親テーマを編集してしまうと、アップデートした際にカスタマイズ内容が全て消えます)
子テーマを導入していない方は以下からダウンロードできます。
子テーマについて詳しく知らない方は、まず以下の記事を一読ください。
⇒WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】

JINのテーマで、パンくずリストをタイトル上に表示させる方法
【手順1】子テーマに必要ファイルをアップロードする
子テーマをインストールしましたら、以下の3つのファイルを、子テーマにアップロードします。
- footer.php
- page.php
- single.php
アップロードは、お使いのサーバーのファイルマネージャー、もしくはFTPソフトを利用してください。
今回の説明ではエックスサーバーのファイルマネージャーを例にします。(どのサーバーでも流れは一緒です)
ファイルマネージャーを開き、以下の順にクリックします。
「お使いのドメイン>publc_html>wp_content>themes>jin_child」
子テーマ内にアクセスしましたら、ファイルのアップロードから3つのファイル選択し、アップロードしてください。

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

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

できましたら「ファイルを更新」をクリックします。
【手順3】single.phpを編集する
続いてsingle.phpを開き、以下のコードを貼り付けます。
<!–パンくずリスト–>
<?php breadcrumbs(); ?>

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

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

できましたら「ファイルを更新」をクリックします。
【手順4】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から削除してください。
/* 更新日付表示を左寄せにする */
.cps-post .cps-post-header .cps-post-meta .cps-post-date-box {
text-align: left;
}
変更がうまく反映されない場合、一度ページのキャッシュを空にしてから、再度ページを更新してみてください。
- safariの場合:「開発」タブから「ページのキャッシュを空にする」をクリック
- InternetExplorerの場合:「ツール」→「インターネットオプション」→全般タブの「閲覧の履歴」セクションで「削除」をクリック
- Chromeの場合:ブラウザ右上のメニューから「設定」「閲覧履歴データの削除」をクリック
まとめ
今回はJINでパンくずリストをタイトル上に表示する方法を紹介しました。
あくまで個人的なカスタマイズである事と、独学の素人ですので不具合が出ましたら申し訳ありません。
その場合は、子テーマから追加した3つのファイルと、CSSのコピペした部分を削除すれば元に戻ると思います。
>> ミスが不安な方は、3,000円でカスタマイズの代行もできます。TwitterDMよりご連絡くださいませ!
こちらの記事もオススメ↓↓



プロがどのようにサイトを育てているのか…
どのように収益化しているのか…
気になりませんか?
そんな方のニーズを満たす新感覚コミュニティ…
その名も「NOZOKIMI」を始動しました!
サイト設計&戦略を全公開
収益&アクセスデータを毎日公開
メディアのYouTube攻略も全公開
自社商品販売までの過程を全公開
どんな質問でも無制限し放題
メンバー同士の交流チャット付き
チーム会議も全公開(Zoom&チャット)
サイトを伸ばす過程を生で体感できる新感覚コミュニティです。
詳しくは下記をチェック!