AFFINGER5は、色々カスタマイズできますが、「ページ送り prev next」については、何故かカスタマイズができず、現状のスタイルに不満を覚えたので、イメージを崩さない程度の小変更にとどめたカスタマイズを行ってみました。
AFFINGER5・ページ送り（スタイル）
変更前のスタイル
 |
現状スタイルの不満なところ
「PREV」と「NEXT」の表現が判り難く、行間も狭く、「PREV」と「NEXT」にリンクも設定されていない。
カスタマイズ後のスタイル
 |
スタイル変更の手順
step
1４つのファイルを子テーマへコピー
ページ送りを子テーマ内でカスタマイズするために、関連している３つのファイル（header.php、single.php、single-type1.php、single-type2.php）をFTPソフト等で親テーマからコピーして子テーマフォルダーへ貼り付けておきます。
step
2single.phpの一部変更
子テーマフォルダーに入れたsingle-type1.phpでスタイル変更を行いますが、これを反映させるためには、single.phpのコードを以下のようにTEMPLATEPATHからSTYLESHEETPATHに変更することが必要です。
single.php
|
1 2 3 4 5 6 |
<?php if ((trim($GLOBALS['stdata74']) !== '') && ( in_category($GLOBALS['stdata74']) )) { include(STYLESHEETPATH . '/single-type2.php'); } else { include(STYLESHEETPATH . '/single-type1.php'); } |
ポイント
ページ送りの設定は、子テーマにコピーしたsingle-type1.phpにあるコードです。 このコードを色々いじっても全く変更が反映されませんでした。 この原因を調べたら、single.phpにあるTEMPLATEPATHをSTYLESHEETPATHに変えれば子テーマのsingle-type1.phpの設定が反映されることが判りました。
参考にさせて頂いたのは、以下のサイトです。
https://itwn.jp/archives/2720/
step
3 「Font Awesome 5」の導入（header.php）
下の画像で示す、要素部分（色分け文字）が変更箇所です。 アイコン部は「Font Awesome 5」になります。
 |
「Font Awesome 5」を使用するために（2020/3/28）
AFFINGER5で対応しているFont Awesomeのバージョンは今の所「４」です。 「Font Awesome 5」を導入するには、親テーマのheader.phpを子テーマにコピーして、</head>の上に以下のコードを予め記述しておきます。
以下のコードは、「WordPressのヘッダーメニューの作り方」からFont Awesomeの遅延読み込みができる「Font Awesome 5」の導入コードを使用させて頂いています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--use FontAwesome --> <script type="text/javascript"> var mycss=function(){// mycss関数を定義。{}内の処理を実行。 var l=document.createElement("link");// link要素をlに代入。 l.rel="stylesheet";// lにrel="stylesheet"属性を付与。 l.href="https://use.fontawesome.com/releases/v5.8.1/css/all.css";// lにhref属性を付与。 var s=document.getElementsByTagName("link")[0];// HTML内の最初のlink要素名をsへ代入 s.parentNode.insertBefore(l,s);// sの直前にlを出力 }; window.addEventListener("DOMContentLoaded",mycss);// DOMの構築が終わったらmycss関数を実行 </script> |
step
4 「ページ送り」デザインの変更（single-type1.php）
「ページ送り」デザインを変更するには、子テーマにコピーしたsingle-type1.phpに対して以下のようにコードを変更します。
single-type1.php
159行目以降の行のハイライト部分が、変更箇所になります。
|
159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 |
<!--ページナビ--> <div class="p-navi clearfix"> <dl> <?php $prev_post = get_previous_post(); if ( !empty( $prev_post ) ): ?> <center><p> 〜〜〜〜〜〜〜〜〜〜〜 </p></center> <dt>PREV</dt> <dd> <a href="<?php echo esc_url( get_permalink( $prev_post->ID ) ); ?>"><?php echo $prev_post->post_title; ?></a> </dd> <?php endif; ?> <?php $next_post = get_next_post(); if ( !empty( $next_post ) ): ?> <p style="margin-bottom:2em;"> </p> <dt>NEXT</dt> <dd> <a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>"><?php echo $next_post->post_title; ?></a> </dd> <?php endif; ?> </dl> </div> </aside> </div> |
PREVとNEXTは、以下の様に、Font Awesomeアイコンに変更しています。
（2020/3/28 変更）
<dt>タグで囲まれた「PREV」と「NEXT」部分を下の様にデザイン変更しました。
「PREV」→ 前頁
|
1 2 |
<dt><a href="<?php echo esc_url( get_permalink( $prev_post->ID ) ); ?>" style="text-decoration:none;">前頁 <i class="fas fa-caret-square-left fa-lg"></i></a></dt> |
「NEXT」→ 次頁
|
1 2 |
<dt><a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>" style="text-decoration:none;">次頁 <i class="fas fa-caret-square-right fa-lg"></i></a></dt> |
備 考（注意）
- 「Font Awesome 5」を導入する場合、AFFINGER5「管理」＞「その他」の[上級者向け]にある「headに出力するコード」に記述すると、サイト全体が「Font Awesome 5」になり、例えばツイッター アイコンが消えてしまいます。 「Font Awesome 5」導入コードはheader.phpに追記する必要があります。
- AFFINGER5のバージョンが上がるとheader.php、single.php、single-type1.php、single-type2.phpの内容が変更されている場合があり、この時は、子テーマのファイルに上書きコピーして、上記Step1〜Step4の作業を行う必要があります。
以上、「ページ送り」スタイルの小変更でした。
AFFINGER5について
Affinger5