記事一覧レイアウトを関連記事部分のみ変更する

Snow Monkeyでは、閲覧している記事と同一カテゴリの記事などが存在する場合、関連記事を記事の下部に表示する機能があります。

関連記事スタイル例

Snow Monkeyの「記事一覧レイアウト」の設定は、記事の「関連記事」部分にも反映されますので、検索結果や記事一覧のページは「シンプル」にして、記事の「関連記事」部分は「リッチメディア」にするなどと言った個別にレイアウトに設定することが出来ません。

記事一覧のレイアウトを変更する方法

Snow Monkeyの「記事一覧レイアウト」の設定は、アーカイブページ(検索結果や記事一覧などのページ)を管理モードで開いている際に、管理画面の「外観」→「カスタマイズ」より開く、カスタマイザーから、「デザイン」→「アーカイブページ設定」にある「記事一覧レイアウト」で記事一覧のレイアウトデザインを変更する事が可能です。

記事一覧レイアウト設定

カスタマイズ方法

記事一覧レイアウトを関連記事部分のみ個別として設定したいと言う場合は、カスタマイズが必要となっています。そのカスタマイズ方法を紹介いたします。

記事一覧レイアウトを関連記事部分のみ変更するカスタマイズ方法です。
My Snow Monkeymy-snow-monkey.phpに追加していきましょう。

まずはカスタマイズの基本を!フックを追加しよう

add_filter(
  'snow_monkey_get_template_part_template-parts/content/related-posts',
  'customize_related_posts',
  10,
  2
);

今回のフックであるsnow_monkey_get_template_part_template-parts/content/related-postsは、関連記事のテンプレートを取得する際に処理を行うと言うフックです。

テネーブル

snow_monkey_get_template_part_template-parts/content/related-poststemplate-parts/content/related-posts部分は、テンプレートのslugとなりますので、Snow Monkeyのフック一覧では、snow_monkey_get_template_part_<slug>該当のテンプレートパーツの出力を変更)として記載されているフックになります。

テネーブル(アイコン01)

フックで追加したfunctionの内容を記述しよう

例として、関連記事の部分だけ記事一覧レイアウトリッチメディアにしたい場合は、下記のソースコードとなります。(その他の場合は後述の説明で解説しています)

public function customize_related_posts( $name, $vars ) {
  // customize_related_postsの処理を繰り返して実行しないように一度removeします
  $is_removed = remove_filter(
    'snow_monkey_get_template_part_template-parts/content/related-posts',
    'customize_related_posts',
    10
  );
  // removeが成功した場合に下記の処理を行います
  if ( $is_removed ) {
    // entries_layoutのfunctionをフックに追加します
    add_filter(
      'theme_mod_' . get_post_type() . '-entries-layout',
      '_entries_layout',
      10,
      1
    );
   // テンプレートを取得し、<ul>のクラス名の記述を置換して出力します
    ob_start();
    \Framework\Helper::get_template_part( 'template-parts/content/related-posts', $_name, $_vars );
    $_html = ob_get_clean();
    $_html = mb_ereg_replace(
      '<ul class="c-entries c-entries--[^"]*">',
      '<ul class="c-entries c-entries--rich-media">',
      $_html
    );
    echo $_html;
    // 追加したフック処理(_entries_layout)を、removeします
    remove_filter(
      'theme_mod_' . get_post_type() . '-entries-layout',
      '_entries_layout',
      10
    );
  }
}
// _entries_layoutのフック処理
public function _entries_layout( $value ) {
  // リッチメディアのレイアウト値を返却します
  return 'rich-media';
}

functionのソースコード内容を解説

まず最初に、追加したフック処理(customize_related_posts)を繰り返して実行されない為に、同フック処理のremove(削除)を行います。

ルミェール

この削除を行う理由の手順や詳細解説は、別記事「できる!Snow Monkey カスタマイズ – 基礎・初歩編」で解説を行っているから、もし解らない場合はそちらを閲覧してね。

ルミェール(アイコン01)

removeが成功した場合、_entries_layoutをフック処理に追加しています。
このフック「theme_mod_post_type-entries-layout」は、カスタマイザーで設定された記事レイアウトの値を取得するフックとなります。
今回のカスタマイズでは、関連記事の際にリッチメディアのレイアウトにしたい為、リッチメディアの値であるrich-mediaを強制的に返却するようにしています。

しかし、_entries_layoutのフック処理で判定を変更しているのに関わらず、<ul>のクラス名の記述を変更している理由としては、オリジナルの記事一覧レイアウトを追加した場合や、記事一覧レイアウトの他のカスタマイズをした際のフックの優先度によっては問題も起こるケースもあり、そのままでは<ul>のクラス名の記述は、元のシンプルで記述されてしまう場合がある時もあります。(またはクラス名の記述がされない場合もあります)
そうした場合の為に<ul>内のクラス名の記述を置換して対策しています。
しかし、フックを追加したままだと他の場合に影響を与えてしまう場合も起こる為、念の為に最後に_entries_layoutのフック処理をremove(削除)して実行をしないように制御を行っています。

テネーブル

もし、リッチメディア以外の記事一覧レイアウトに変更したい場合は、rich-mediaと記述されている2箇所を、シンプルならsimple、テキストならtextと変更すれば可能です。

テネーブル(アイコン01)