こんにちは。TOMOデザインです。
Snow Monkeyのカスタム投稿のアーカイブページをカスタマイズすることがあり、その備忘録です。
カスタマイズは、
・子テーマを利用する方法
・my-snow-monkeyを利用したカスタマイズ（一部のカスタマイズに利用）
があるようで、今回は子テーマを利用したカスタマイズをご紹介いたします。
カスタム投稿を設定する
まずカスタム投稿の設定をします。
今回の設定は
・カスタム投稿名は「お知らせ」
・カスタム投稿スラッグは「news」
の設定を前提とします。
なお、カスタム投稿は、CPT UI（Custom Post Type UI）のプラグインを使っています。
（CPT UIのインストール方法は今回は割愛します）
CPT UIでカスタム投稿「news」を設定する
ダッシュボードから「CPT UI」→「投稿タイプの追加と編集」へ進みます。
下記のような新規作成画面になります。
下記のように設定します。
（今回はnewsで設定していますが、必要に応じ、任意の文字に置き換えて活用してください）
設定が完了したら「投稿タイプを追加」ボタンを押します。
カスタム投稿の設定完了
設定が完了すると、サイドバーに先ほど設定したカスタム投稿の項目が追加されます。
記事をいくつか投稿しておきます。
この状態でアーカイブページは、下記の通りです。
子テーマテンプレートの設定
Snow Monkeyの子テーマを設定します。
子テーマの作り方は、SnowMonkeyの公式サイトでも説明してくださっています。
しかしオレインデザインさんが子テーマ専用のテンプレートを配布してくださっており、今回はごちらを利用します。
子テーマのテンプレートをダウンロード
下記URLにアクセスします。
Snow Monkey専用のWordPress子テーマテンプレートを公開しました（オレインデザイン様）
ページ内に「GitHubよりダウンロード」というリンクがあるので、そちらをクリックします。
クリックするとGitHubにジャンプするので、GitHubからzipデータ（snow-monkey-child-master.zip）をダウンロードします。
子テーマの反映
続いてWordPressに子テーマを反映させます。
WordPressの管理画面にログインし、「外観」→「テーマ」→「新しいテーマを追加」へ進みます。
「テーマのアップロード」をクリックします。
「選択」をクリックします。
ダウンロードした「snow-monkey-child-master.zip」を選択し、「今すぐインストール」をクリックします。
「有効化」をクリックしてテーマを有効化させます。
子テーマの有効化が完了しました。
子テーマにカスタム投稿のアーカイブページを作る
Snow Monkeyの親テーマからカスタマイズ用のファイルをコピーします。
今回は、「archive.php」を利用します。
親テーマにあるファイルをコピー
親テーマのSnow Monkeyのファイルにアクセスし、
「snow-monkey」→「templates」→「view」フォルダにある「archive.php」をコピーします。
子テーマにカスタマイズするファイルをペースト
テーマをカスタマイズする際は、親テーマと同じ構成にします。
子テーマ「snow-monkey-child-master」のフォルダ内に「templates」フォルダを作り、さらに「templates」内に「view」フォルダを作ります。
子テーマ内に作成した「view」フォルダに、親テーマでコピーした「archive.php」を貼付けます。
子テーマのカスタム投稿用archive.phpにスラッグ名を付ける
子テーマ内にコピーした「archive.php」にカスタム投稿のスラッグ名をつけたファイル名に変更します。
今回はカスタム投稿のスラッグ名が「news」なので「archive-news.php」に変更しました。
これでカスタム投稿「news」専用のアーカイブテンプレートになりました。
とはいえ、まだカスタマイズしていないので、見た目では同じです。
カスタム投稿アーカイブテンプレートをカスタマイズ
今回は、アーカイブタイトルのカスタマイズ方法をご紹介します。
カスタマイズ用archive-news.phpのコンテンツ部分を読み込む
「archive-news.php」は中を見てみると分かるのですが、別のファイルを参照しているため、このままではカスタマイズできません。
カスタマイズ用にヘッダーがあるパーツ部分を読み込みます。
子テーマに作成した「archive-news.php」をエディタで開きます。
このファイルは、親テーマの構造に下記のように対応しています。
entry.phpをコピー
親テーマ内の「template-parts」→「archive」→「entry」→「entry.php」をコピーし、
子テーマに「template-parts」→「archive」→「entry」を作り、「entry」フォルダ内に「entry.php」をコピーします。
カスタム投稿だけに反映させるため、ファイル名を「entry-news.php」に変更します。
archive-news.phpの読み込みファイル名を変更
子テーマ内の「archive-news.php」を開き、先ほど変更したファイル名と同じに変更します。
'template-parts/archive/entry/entry-news',カスタマイズ用entry-news.phpのヘッダー部分を読み込む
上記でコンテンツ部分「entry-news.php」を読み込みましたが、こちらも開いてみれば…
ヘッダー部分を読み込んでいます。
アーカイブコンテンツ用のheader.phpをコピー
こちらも親テーマ内の「template-parts」→「archive」→「entry」→「header」→「header.php」をコピーし、
子テーマの「template-parts」→「archive」→「entry」内に「header」フォルダを作り、そこに「header.php」をコピーします。
カスタム投稿だけに反映させるため、ファイル名を「header-news.php」に変更します。
entry-news.phpの読み込みファイル名を変更
子テーマ内の「entry-news.php」を開き、先ほど変更したファイル名と同じに変更します。
Helper::get_template_part( 'template-parts/archive/entry/header/header-news', $args['_name'] );ヘッダー部分をカスタマイズ
カスタマイズできるファイルの設定が完了したら、カスタマイズしていきます。
「header-news.php」を開き、枠部分をカスタマイズします。
今回は先頭に●とタイトルにボーダーを設定します。
<header class="c-entry__header">
<h1 class="c-entry__title" style="border-bottom: solid 2px #FFCC00;">●<?php echo wp_kses_post( Helper::get_page_title_from_breadcrumbs() ); ?></h1>
</header>設定完了後は下記のようになります。
まとめ
以上がSnow Monkeyの子テーマを使ったカスタマイズです。
今回はカスタム投稿アーカイブページのみのご紹介でしたが、個別記事ページやその他のパーツのカスタマイズも可能です。
子テーマのカスタマイズ方法は多岐に渡るのでこの方法はあくまで一例ではありますが、ご参考になれば幸いです。
（というか、毎回カスタマイズ方法を失念してしまうので自分向けだったりする…）
コメント