こんにちは。TOMOデザインです。
Snow Monkeyのカスタム投稿のアーカイブページの「my-snow-monkey」でできる、一部だけのカスタマイズ方法をご紹介します。
全体的なカスタマイズや、大幅なカスタマイズは子テーマなどを活用したほうが早いのですが、ちょっとしたカスタマイズの場合は「my-snow-monkey」で行った方がスムーズです。
カスタム投稿を設定する
まずカスタム投稿の設定をします。
今回の設定は
・カスタム投稿名は「お知らせ」
・カスタム投稿スラッグは「news」
の設定を前提とします。
なお、カスタム投稿は、CPT UI(Custom Post Type UI)のプラグインを使っています。
(CPT UIのインストール方法は今回は割愛します)
CPT UIでカスタム投稿「news」を設定する
ダッシュボードから「CPT UI」→「投稿タイプの追加と編集」へ進みます。
下記のような新規作成画面になります。
下記のように設定します。
(今回はnewsで設定していますが、必要に応じ、任意の文字に置き換えて活用してください)
設定が完了したら「投稿タイプを追加」ボタンを押します。
カスタム投稿の設定完了
設定が完了すると、サイドバーに先ほど設定したカスタム投稿の項目が追加されます。
記事をいくつか投稿しておきます。
この状態でアーカイブページは、下記の通りです。
カスタマイズするファイルの位置を特定する
今回は、アーカイブのタイトルをカスタマイズしてみます。
アーカイブのタイトル用ファイルを特定する
まず、アーカイブファイルを開いてみます。
親テーマのSnow Monkeyのファイルにアクセスし、
「snow-monkey」→「templates」→「view」→「archive.php」をエディタで開きます。
エディタで開くと下記のようになっています。
アーカイブのコンテンツ部分のファイルは、
'template-parts/archive/entry/entry',
となっており、
「snow-monkey」→「template-parts」→「archive」→「entry」→「entry.php」
にあることがわかります。
この「entry.php」をエディタで開きます。
ヘッダー部分のファイルは、
Helper::get_template_part( 'template-parts/archive/entry/header/header', $args['_name'] );
となっており、
「snow-monkey」→「template-parts」→「archive」→「entry」→「header」→「header.php」
にあることがわかります。
この「header.php」をエディタで開くと…
カスタマイズしたい場所が出てきたので、ここをカスタマイズしていきます。
my-snow-monkeyでカスタマイズする
さて、ここからは「my-snow-monkey」を使ったカスタマイズをしていきます。
「my-snow-monkey」は、Snow Monkeyを有償購入した方のみ利用できるプラグインです。
購入および、プラグイン反映方法や基本の使い方については、Snow Monkeyの公式サイト をご参照ください。
ファイルパス
上記手順で、カスタマイズしたい「header.php」の場所が
「snow-monkey」→「template-parts」→「archive」→「entry」→「header」→「header.php」
ということで、この場合のファイルパスは、下記のようになります。
template-parts/archive/entry/header/header
最後の「header」は「header.php」のことですが、「.php」は取り除いて記述します。
my-snow-monkey.phpを開く
いよいよカスタマイズです。
今回は、アーカイブタイトルの前に◎をつけてみます。
「my-snow-monkey.php」を開き、下記コードを追記します。
// アーカイブタイトルの前に◎をつける ******************************
add_filter(
'snow_monkey_template_part_render_template-parts/archive/entry/header/header',
//header.phpが対象
function( $html ) {
if (get_post_type() === 'news'): //カスタム投稿 newsに限定する
// 以降の出力を変数に格納する
ob_start();
?>
<?php
// 変数に格納
$hoge = "◎";
// </header>を書き換える
return str_replace(
'<h1 class="c-entry__title">',
'<h1 class="c-entry__title">'.$hoge,
$html
);
endif;
return $html;
}
);
内容は下記の通りです。
変更後はアーカイブタイトルの前に◎が追加され、下記のような表示になります。
まとめ
今回は、my-snow-monkeyを使ったカスタマイズをご紹介しました。
my-snow-monkeyは、CSSの追加ファイルを読み込んだり、PHPやJavascriptを使えたり、アクションフック、フィルターフックなども使えるようになります。
今回はちょっとしたカスタマイズでしたが、しっかり使えるとかなり制作の幅が広がります。
ご参考までに!