ページ単位にスキンを変更する方法

はじめに

ページごとにスキンを切り替え、デザインを変更します。

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

実装手順

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

add_filter('get_skin_url', function ($skin_url) {
  $skin_map = [
    'category' => [
      1 => 'm-sora',
      2 => 'skin-tegakinote-dark-sky',
    ],
    'tag'  => [3 => 'silk'],
    'post' => [4 => 'skin-made-in-heaven'],
    'page' => [5 => 'skin-grayish-topfull'],
  ];

  // 現在のURLを取得
  $current_url = home_url(add_query_arg([], $_SERVER['REQUEST_URI']));
  $skin = null;

  // 投稿・固定ページ判定
  $post_id = url_to_postid($current_url);
  if ($post_id) {
    $post_type = get_post_type($post_id);
    $skin = $skin_map[$post_type][$post_id] ?? null;
  }

  // タクソノミー（カテゴリー・タグ）判定
  $taxonomies = ['category' => 'category', 'tag' => 'post_tag'];
  foreach ($taxonomies as $key => $taxonomy) {
    if ($skin) {
      break;
    }
    // URLに該当のタクソノミーパスが含まれていなければスキップ
    if (strpos($current_url, "/{$key}/") === false) {
      continue;
    }

    // URLのパスからスラッグ部分を抽出
    $slug = explode('/', parse_url($current_url, PHP_URL_PATH))[2] ?? '';
    if ($slug === '') {
      continue;
    }

    // スラッグとタクソノミー名からターム情報を取得し、マップに存在すればスキンを決定
    $term = get_term_by('slug', $slug, $taxonomy);
    if (!$term) {
      continue;
    }

    $skin = $skin_map[$key][$term->term_id] ?? null;
  }

  if ($skin) {
    $skin_url = get_template_directory_uri() . '/skins/' . $skin . '/style.css';
  }

  return $skin_url;
});

さいごに

今回紹介した方法を使えば、カテゴリ、タグ、投稿ごとに異なるスキンを適用できるようになります。
これにより、サイト全体で一貫したデザインを保ちながら、各ページに独自のスタイルを提供できます。