どうもこんにちは、りゅう（@ryuta_blog）です！
今回の記事は、WordPressテーマ「JIN」のカスタマイズをしていきます。
以前から「パンくずリストをタイトルうえに表示したいなー」と考えていたので、自分用にカスタマイズしてみました。
完全に好みの問題ですが、パンくずリストは上にあった方が回遊率が上がるのかな？と個人的には思います。
早速シェアしていきますが、個人的にカスタマイズしたものですので、ご利用は自己責任でお願いします。
Contents
※JINのテーマをカスタマイズする前に
カスタマイズする前には必ずバックアップを取っておいてください。
また、カスタマイズは必ず子テーマから行ってください。
子テーマを導入していない方は必ず以下から、JINの子テーマをインストールしておいてください。
（直接親テーマを編集してしまうと、アップデートした際に全て消えてしまいます）
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のコピペした部分を削除すれば元に戻ると思います。
こちらの記事もオススメ↓↓
[…] あわせて読みたい【JIN カスタマイズ】パンくずリストをタイトル上に表示させる方法どうもこんにちは、りゅう（@ryuta_blog）です！ 今回の記事は、WordPressテーマ「JIN」のカスタマイズを […]
[…] あわせて読みたい【JIN カスタマイズ】パンくずリストをタイトル上に表示させる方法どうもこんにちは、りゅう（@ryuta_blog）です！ 今回の記事は、WordPressテーマ「JIN」のカスタマイズを […]