どうもこんにちは、りゅう（@ryuta_blog）です！
今回の記事は、WordPressテーマ「JIN」のカスタマイズをしていきます。
以前から「パンくずリストをタイトルうえに表示したいなー」と考えていたので、自分用にカスタマイズしてみました。
完全に好みの問題ですが、パンくずリストは上にあった方が回遊率が上がるのかな？と個人的には思います。
早速シェアしていきますが、個人的にカスタマイズしたものですので、ご利用は自己責任でお願いします。
Contents
JINのテーマをカスタマイズする前に
カスタマイズをする前に、必ずバックアップを取っておいてください。
また、カスタマイズは必ず子テーマから行ってください。（直接親テーマを編集してしまうと、アップデートした際にカスタマイズ内容が全て消えます）
子テーマを導入していない方は以下からダウンロードできます。
子テーマについて詳しく知らない方は、まず以下の記事を一読ください。
⇒WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】
JINのテーマで、パンくずリストをタイトル上に表示させる方法
【手順１】子テーマに必要ファイルをアップロードする
子テーマをインストールしましたら、以下の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を開きましたら、以下の部分を削除してください。
できましたら「ファイルを更新」をクリックします。
【手順３】single.phpを編集する
続いてsingle.phpを開き、以下のコードを貼り付けます。
<!–パンくずリスト–>
<?php breadcrumbs(); ?>
こんな感じで貼り付ければOKです。
貼り付けましたら、以下の部分を削除してください。
できましたら「ファイルを更新」をクリックします。
【手順４】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よりご連絡くださいませ！
こちらの記事もオススメ↓↓
[…] あわせて読みたい【JIN カスタマイズ】パンくずリストをタイトル上に表示させる方法どうもこんにちは、りゅう（@ryuta_blog）です！ 今回の記事は、WordPressテーマ「JIN」のカスタマイズを […]
[…] あわせて読みたい【JIN カスタマイズ】パンくずリストをタイトル上に表示させる方法どうもこんにちは、りゅう（@ryuta_blog）です！ 今回の記事は、WordPressテーマ「JIN」のカスタマイズを […]
[…] あわせて読みたい【JIN カスタマイズ】パンくずリストをタイトル上に表示させる方法どうもこんにちは、りゅう（@ryuta_blog）です！ 今回の記事は、WordPressテーマ「JIN」のカスタマイズを […]