フロントページタイプ「タブ一覧」の新着記事を非表示にする方法

はじめに

フロントページタイプを「タブ一覧」に設定すると、デフォルトで「新着記事」タブが表示されます。

そこで、「新着記事」タブを非表示にし、2番目のタブを初期表示するよう変更します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

参考：PHPで実装する場合

PHPを用いて同様の処理を行う方法もあります。
1番目のタブに関連する要素を全て削除し、2番目のタブを初期表示に設定します。

以下のコードをfunctions.phpに追加します。

add_filter('cocoon_part__tmp/list-tab-index', function ($content) {
  if (empty($content)) {
    return $content;
  }

  $rules = [
    [
      'search'  => '/<input id="index-tab-1" type="radio" name="tab_item" checked>/',
      'replace' => '',
    ],
    [
      'search'  => '/<label class="index-tab-button" for="index-tab-1">.*?<\/label>/s',
      'replace' => '',
    ],
    [
      'search'  => '/<div class="tab-cont tb1">.*?(?=<div class="tab-cont tb2">)/s',
      'replace' => '',
    ],
    [
      'search'  => '/<input id="index-tab-2" type="radio" name="tab_item">/',
      'replace' => '<input id="index-tab-2" type="radio" name="tab_item" checked>',
    ],
  ];

  foreach ($rules as $rule) {
    $content = preg_replace($rule['search'], $rule['replace'], $content);
  }

  return $content;
});

参考：フロントページタイプ「カテゴリーごと」の新着記事を非表示にする方法

CSSで実装する場合

以下のコードをstyle.cssに追加します。

.list-new-entries {
  display: none;
}

PHPで実装する場合

以下のコードをfunctions.phpに追加します。

add_filter('cocoon_part__tmp/list-new-entries',function () {
  return '';
});

さいごに

今回紹介した方法を使えば、「新着記事」タブを非表示にし、2番目のタブを初期表示にするカスタマイズが簡単に実現できます。
自分のサイトに合ったデザインを手軽に調整できるので、ぜひ試してみてください。

拡張

本スキンでは、ローディング表示やフロントページの拡張、目次スタイルの調整、プロフィール機能の強化などの多彩なオプション設定を可能にし、サイト全体のデザイン性と使い勝手を向上させることを実現します。

chuya.s239.xrea.com