ヘッダーロゴを固定ページごとに変更する方法

はじめに

以下をCocoonで実現します。

【SWELL】LPや固定ページごとにロゴ画像を変更するカスタマイズ｜かんた🌊SWELLマニア

2023年1月更新 SWELL最新バージョン（2.7.2.1）に対応させました。 SWELLマニアのかんた（@swell_mania）です。 Web制作の仕事でSWELLのLPページだけロゴ画像を変更するという作業をしました。 今回の記事は...

note.com

固定ページに合わせて、ヘッダーロゴの表示を変更します。

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

実装手順

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

拡張：ページ編集にメタボックスを追加する方法

固定ページ編集で、ヘッダーロゴ画像を選択できるようにします。

完成イメージ

実装手順

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

/**
 * 固定ページごとのカスタムロゴ設定
 */

// メタボックスを追加
add_action('add_meta_boxes', function () {
  add_meta_box(
    'page_logo_url',
    'ロゴ画像URL',
    'render_page_logo_url',
    'page',
    'side'
  );
});


/**
 * メタボックスの入力フォームを出力
 *
 * @param WP_Post $post 現在の投稿オブジェクト
 * @return void
 */
if (!function_exists('render_page_logo_url')):
function render_page_logo_url($post) {
  $logo_url = get_post_meta($post->ID, 'my_page_logo_url', true);
  wp_nonce_field('page_logo_url_action', 'page_logo_url_nonce');
  ?>
  <p class="page-logo-url">
    <input type="text" id="page-logo-url" name="my_page_logo_url" value="<?= esc_url($logo_url); ?>" style="width: 100%; margin-bottom: 8px;" />
    <input type="button" class="page-logo-url__button button" value="画像を選択" />
    <?php if ($logo_url): ?>
      <input type="button" class="page-logo-url__clear button" value="削除" />
    <?php endif; ?>
  </p>
  <div class="page-logo-url__preview" style="margin-top: 8px;">
    <?php if ($logo_url): ?>
      <img src="<?= esc_url($logo_url); ?>" style="max-width: 100%; height: auto; display: block;" />
    <?php endif; ?>
  </div>
  <p class="description">この固定ページで使用するロゴ画像を選択してください。</p>
  <?php
}
endif;


// 管理画面用JS・CSSを追加
add_action('admin_enqueue_scripts', function ($hook_suffix) {
  if (!in_array($hook_suffix, ['post.php', 'post-new.php'], true)) {
    return;
  }

  $screen = get_current_screen();

  if (!$screen || 'page' !== $screen->post_type || 'post' !== $screen->base) {
    return;
  }

  // メディアライブラリを読み込み
  wp_enqueue_media();

  // インラインJSを追加
  ob_start();
  ?>
  jQuery(function ($) {
    $(document).on('click', '.page-logo-url__button', function (e) {
      e.preventDefault();

      var $button = $(this);
      var $container = $button.closest('.page-logo-url');
      var $input = $container.find('input[name="my_page_logo_url"]');
      var $preview = $container.next('.page-logo-url__preview');

      var frame = $button.data('customUploaderFrame');

      if (frame) {
        frame.open();
        return;
      }

      frame = wp.media({
        title: '画像を選択',
        button: { text: 'この画像を使用' },
        library: { type: 'image' },
        multiple: false
      });

      frame.on('select', function () {
        var selection = frame.state().get('selection').first();

        if (!selection) {
          return;
        }

        var attachment = selection.toJSON();
        var url = attachment.url || '';

        $input.val(url).trigger('change');
        $preview.html('<img src="' + url + '" style="max-width: 100%; height: auto; display: block;" />');

        if (!$button.siblings('.page-logo-url__clear').length) {
          $button.after('<input type="button" class="page-logo-url__clear button" value="削除" />');
        }
      });

      $button.data('customUploaderFrame', frame);
      frame.open();
    });

    // 削除ボタンの処理
    $(document).on('click', '.page-logo-url__clear', function (e) {
      e.preventDefault();

      var $button = $(this);
      var $container = $button.closest('.page-logo-url');
      var $input = $container.find('input[name="my_page_logo_url"]');
      var $preview = $container.next('.page-logo-url__preview');

      $input.val('');
      $preview.empty();
      $button.remove();
    });
  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean());
});


// 投稿データを保存
add_action('save_post', function ($post_id) {
  // 固定ページ以外は除外
  if (get_post_type($post_id) !== 'page') {
    return;
  }

  // nonceチェック
  if (!isset($_POST['page_logo_url_nonce']) || !wp_verify_nonce($_POST['page_logo_url_nonce'], 'page_logo_url_action')) {
    return;
  }

  // 自動保存・リビジョンチェック
  if ((defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) || wp_is_post_revision($post_id)) {
    return;
  }

  // 権限チェック
  if (!current_user_can('edit_post', $post_id)) {
    return;
  }

  // ロゴ画像URLを更新・削除
  if (isset($_POST['my_page_logo_url']) && !empty($_POST['my_page_logo_url'])) {
    update_post_meta($post_id, 'my_page_logo_url', esc_url_raw($_POST['my_page_logo_url']));
  } else {
    delete_post_meta($post_id, 'my_page_logo_url');
  }
});


// Cocoon設定（ヘッダー）のヘッダーロゴを変更
add_filter('theme_mod_the_site_logo_url', function ($current_mod) {
  if (is_admin() || (!is_page() && !is_front_page())) {
    return $current_mod;
  }

  $post_id = get_queried_object_id();
  $page_logo_url = get_post_meta($post_id, 'my_page_logo_url', true);

  if (!empty($page_logo_url)) {
    return esc_url($page_logo_url);
  }

  return $current_mod;
});

さいごに

今回紹介した方法を使えば、固定ページごとにヘッダーロゴを簡単に変更することができます。
これにより、ページごとに異なるブランディングを実現でき、訪問者にとっての印象を向上させることができるでしょう。