こんにちは、じゅんぺーです。
SnowMonkeyをカスタマイズする中で、アーカイブページをもっと自由にカスタマイズしたいことってありませんか？
ウィジェットでも、ある程度のカスタマイズが可能なのですが、ウィジェットのみでは割と制限が多いのでデザインや構成に限りがあります。
僕の場合、実案件でほとんどの場合はアーカイブページのカスタマイズが必須になっており、これから紹介する手法を多用してきました。
「Snow Monkey Archive Content」という有料のアドオンを購入したり、テンプレートの上書きなどをしても可能なのですが、実はお金をかけることなく、簡単にアーカイブページのカスタマイズをする方法があるので紹介していきます。
この記事を最後まで読むと
この記事を最後まで読んで、理解した方はアーカイブページに表示される記事一覧の「上部」や「下部」にアーカイブページ用に作成した固定ページを挿入する方法がわかるようになります。
具体的には、画像のようなアーカイブページに固定ページの内容を表示できるようになります。
記事一覧の上下に固定ページを挿入出来るようになると、ある程度の要望やデザインをカバー出来るようになります。
今回は、記事一覧の上部にピックアップスライダーを挿入してみました。
フックを使用して実装しているのですが、とても簡単にアーカイブページをカスタマイズできるのでサクッと覚えてマスターしておきましょう！
それでは早速制作に取り掛かります。
アーカイブページに挿入する固定ページを作成しよう！
- 新規固定ページに表示させたいブロックを挿入する
- 必ずスラッグを記述する
- 下書き保存をする
それでは詳しく説明していきますね！
新規固定ページにブロックを挿入する
アーカイブページにデザインを追加したい場合、固定ページで作成したブロックを表示させる必要があります。
表示させたいブロックを選定して固定ページに挿入しましょう！
ここでは、「SnowMonkeyBlocks」で準備されている「ピックアップスライダー」を挿入していきます。
このようにブロックを選択し、いつもと同じ要領で追加していきます。
また、僕の場合ですが固定ページを見た時、具体的に「どの固定ページ」が「どのアーカイブページ」に反映されているか一目でわかるようにタイトルを決めています。
スラッグを設定しておく
後で、どの固定ページを挿入するかスラッグで指定する必要があるので、必ずスラッグを設定しておきましょう。
今回の場合はNEWSのアーカイブページに挿入したいので「news_before_archive_content」というスラッグにしてみました。
スラッグの命名は特に決まりはないので、あなたがわかりやすいスラッグを記述しておきましょう。
下書き保存をする【公開はしない】
設定の方法によっては、「公開済み」や「レビュー待ち」でも問題はないのですが、「下書き」で統一しておくとわかりやすいので、今回は下書きのみで設定をしています。
このような形で下書き保存ができたら固定ページでの作業は終了です。
【my-snow-monkey.php】フックを使用して任意のアーカイブページを指定しよう！
- フックの「snow_monkey_before_contents_inner」を使用する
- 作成した固定ページを出力させる記述をする
- 任意のアーカイブページを指定する
それではみていきましょう。
「 my-snow-monkey.php」にフックを記述する
アーカイブページのコンテンツ上部に固定ページを挿入するには、「snow_monkey_before_contents_inner」というフックを使用してコンテンツ上部を指定します。
「 my-snow-monkey.php」に下記コードを記述します。
/* アーカイブページの記事一覧上部に固定ページを挿入 */
add_action(
'snow_monkey_before_contents_inner',
function () {
}
);このフックを利用することで記事一覧の上部に「HTML」の挿入が可能になりました。
正式には「インナーコンテンツの前に HTML を追加する」フックとなります。
ただ、このままではHTMLの挿入であれば可能なのですが、作成した固定ページの挿入はできません。
開発者であるキタジマさんのGitHubを見ると、用意されているフックが確認できますよ。
フック内部に作成した固定ページを挿入させる記述をする
現状のままでは、作成した固定ページを挿入できないのでフックの中に作成した固定ページを指定する記述を行います。
それでは、先ほど記述したフックの「function()」の記述がある下の行に下記コードを記述しましょう。
$new_query = new \WP_Query(
[
'pagename' => 'news_before_archive_content',/* 作成したページのスラッグ */
'post_type' => 'page',/* 固定ページを指定 */
'post_status' => ['draft']/* 下書きページの指定 */
]
);
if (!$new_query->have_posts()) {
return;
}
$new_query->the_post(); ?>
<div class="p-entry-content">
<?php the_content(); ?>
</div>
<?php wp_reset_postdata();
}
記述ができたら画面を確認してみましょう。
先ほど作成した固定ページの内容が反映されていますね！
- pagename：スラッグを指定
- post_type：固定ページなのか、投稿ページなのかを選択【’page’=固定ページ】
- post_status：投稿ステータスを選択【’draft’=下書き】
余談ですが、この時点で記述しているコードの意味が全くわからない方は、一度「WordPress」でテーマを作成してみることをおすすめします。
一度でもテーマの作成をしていると、割と頻繁に使うコードが多いのでなんとなくわかってきます。
上記2つの教材は僕も購入していますが、めちゃくちゃわかりやすく解説されていて次のステップに繋がる内容になっていると思います。
特定のアーカイブページを指定する
先ほどは、すでに固定ページの内容が反映されていることを確認しましたが、このままではNEWSのアーカイブページ以外にも固定ページの内容が反映されている状態となります。
試しに、こちらで別に作成していた「施工例」のアーカイブを確認してみると、こちらにもピックアップスライダーが表示されています。
実は、現状ではアーカイブページのみならずその他ページ全てに反映されてしまっています。
そこで、条件分岐を使用してNEWSのアーカイブページのみに表示させる記述をしましょう。
先ほど記述したコードを挟む形で下記コードを記述します。
/* 特定のアーカイブページを指定 */
if (is_category('news')) {/* 'news'の記述を各自の環境に合わせて変更 */
ここに先ほど記述したコード
}ここではNEWSカテゴリーのアーカイブページを指定しているので、各自指定しているページのカテゴリーやIDに変更しましょう。
確認すると必要のないアーカイブページには表示されないようになっています。
そして、NEWSのアーカイブページにはしっかりとピックアップスライダーが表示されていることがわかります。
最後に記述したコードをまとめておきます。
/* アーカイブページの記事一覧上部に固定ページを挿入 */
add_action(
'snow_monkey_before_contents_inner',
function () {
/* 特定のアーカイブページを指定 */
if (is_category('news')) {/* 'news'の記述を各自の環境に合わせて変更 */
$new_query = new \WP_Query(
[
'pagename' => 'news_before_archive_content',/* 作成したページのスラッグ */
'post_type' => 'page',/* 固定ページを指定 */
'post_status' => ['draft']/* 下書きページの指定 */
]
);
if (!$new_query->have_posts()) {
return;
}
$new_query->the_post(); ?>
<div class="p-entry-content">
<?php the_content(); ?>
</div>
<?php wp_reset_postdata();
}
}
);まとめ【実はアーカイブページ以外にも反映できる話】
今回は、アーカイブページのコンテンツ上部に反映する方法のみを紹介しましたが、全く同じ要領でコードを記述し、フックを変更するだけでアーカイブページのコンテンツ下部やインナーの外に表示させたりすることも可能になります。
例えば、コンテンツ下部「snow_monkey_after_contents_inner」のフックを使用すると
このようになります。
そして、上下にインナーの外の指定「snow_monkey_prepend_contents（これが上部）」「snow_monkey_append_contents（これが下部）」の両方を指定すると
このように記事一覧の上下にピックアップスライダーが表示されることになります。
因みにですが、使用したコードはこのようになります。
/* アーカイブページの記事一覧上部に固定ページを挿入 */
add_action(
'snow_monkey_append_contents',/* コンテンツの先頭に HTML を追加 */
function () {
/* 特定のアーカイブページを指定 */
if (is_category('news')) {/* 'news'の記述を各自の環境に合わせて変更 */
$new_query = new \WP_Query(
[
'pagename' => 'news_before_archive_content',/* 作成したページのスラッグ */
'post_type' => 'page',/* 固定ページを指定 */
'post_status' => ['draft']/* 下書きページの指定 */
]
);
if (!$new_query->have_posts()) {
return;
}
$new_query->the_post(); ?>
<div class="p-entry-content">
<?php the_content(); ?>
</div>
<?php wp_reset_postdata();
}
}
);
/* アーカイブページの記事一覧下部に固定ページを挿入 */
add_action(
'snow_monkey_prepend_contents',/* コンテンツの最後に HTML を追加 */
function () {
/* 特定のアーカイブページを指定 */
if (is_category('news')) {/* 'news'の記述を各自の環境に合わせて変更 */
$new_query = new \WP_Query(
[
'pagename' => 'news_before_archive_content',/* 作成したページのスラッグ */
'post_type' => 'page',/* 固定ページを指定 */
'post_status' => ['draft']/* 下書きページの指定 */
]
);
if (!$new_query->have_posts()) {
return;
}
$new_query->the_post(); ?>
<div class="p-entry-content">
<?php the_content(); ?>
</div>
<?php wp_reset_postdata();
}
}
);今回は先ほどと同じピックアップスライダーを表示していますが、好きなブロックを挿入したり、フックを使用すると、いくらでも好きなようにカスタマイズができるようになります。
例えば、記事上部に出力したいデザインによってフックを複数使い分けるなどすれば、かなり自由なレイアウトを組めそうですよね。
また、今回はアーカイブの上部でしたが、条件分岐の指定次第では記事ページのみにも表示することが可能です。
使いこなせるとさまざまなレイアウトに対応できそうです。
色々と触ってみてどのようなことができるか試してみてくださいね！
