私が愛用している至れり尽くせりなWordPressテーマ『Cocoon』。
WordPressでブログやサイトの運営をするなら迷わずオススメしているCocoonですが、今回は広告などのウィジェットを表示する位置をどうしてもページ送り(ページネーション)の下に表示したいと思い、独自でカスタマイズしてみました。
以下に実装手順及び実装コードを載せますので参考にしてください。
※必ずバックアップをしてから行ってください。また、自己責任でお願いします。
1.親テーマから子テーマへ必要ファイルをコピーする
親テーマでそのままコードの追加や修正を行っても、テーマのアップデートをした際に変更した箇所が全て消えてしまいます。ですので、カスタマイズは必ず子テーマで行います。
まず、編集するファイルをFTPソフト等で親テーマから子テーマへコピーします。
ちなみに私がいつも使っているソフトは定番中の定番、FFFTPです。
もちろん、契約中のレンタルサーバーのファイルマネージャーからでもコピー作業は可能です。
コピーするファイル
コピー元(親テーマ)
「ドメイン/wp-content/themes/cocoon-master/tmp内」のlist.php
コピー先(子テーマ)
「ドメイン/wp-content/themes/cocoon-child-master/tmp内」のlist.php
※子テーマへコピーする前に、tmpフォルダを作成しておく必要があります。
2.list.phpを編集する
WordPress管理画面から「外観」⇒「テーマの編集」を開きます。
画面右上の「編集するテーマを選択」が「Cocoon Child」になっていることを確認し、テーマファイルから「tmp」⇒「list.php」を選択します。
※事前にコピーしておいたlist.phpが正しく反映されていれば、以下の画像のように「tmp/list.php」が表示されているはずです。
上記画像のように「list.php」の140行目あたり、
////////////////////////////
//ページネーション
////////////////////////////
get_template_part(‘tmp/pagination’);
の下に以下のコードをコピーして貼り付けます。
////////////////////////////// //ページ送り下ウィジェット //////////////////////////// if ( is_active_sidebar( 'pagenation-under' ) ){ dynamic_sidebar( 'pagenation-under' ); };
貼り付けが終わったら、「ファイルを更新」ボタンを忘れずにクリックします。
3.functions.phpを編集する
続いて、functions.phpを編集します。
テーマファイルの中からfunctions.phpをクリックして開きます。
上記画像のように「//以下に子テーマ用の関数を書く」の下に以下のコードをコピーして貼り付けます。
//子テーマ名 define('CHILD_THEME_NAME', 'Cocoon-Child'); // ページ送り下ウィジェット追加 if ( !function_exists( 'register_pagenation_under_widget_area' ) ): function register_pagenation_under_widget_area(){ register_sidebars(1, array( 'name' => __( 'ページ送り下', CHILD_THEME_NAME ), 'id' => 'pagenation-under', 'description' => __( 'ページ送り下に表示されるウイジェット。', CHILD_THEME_NAME ), 'before_widget' => '<aside id="%1$s" class="widget widget-pagenation-under %2$s">', 'after_widget' => '</aside>', 'before_title' => '<div class="widget-pagenation-under-title main-widget-label">', 'after_title' => '</div>', )); } endif; register_pagenation_under_widget_area();
貼り付けが終わったら、「ファイルを更新」ボタンを忘れずにクリックします。
これでページ送り(ページネーション)の下にウィジェットを追加できる機能のカスタマイズ作業は終了です。
ウィジェット設定画面を開き、以下の画像のように「ページ送り下」の設定エリアが追加されていれば完了です。
ページ送り(ページネーション)の下にウィジェットを追加できる機能実装の設定手順は以上です、お疲れさまでした。