目次
目次
SWELL風のコンテンツヘッダーを追加する方法

SWELL風のコンテンツヘッダーを追加する方法

Cocoonカスタマイズ集
この記事は約5分で読めます。
記事内に広告が含まれています。

はじめに

SWELには、投稿や固定ページの上部に「コンテンツヘッダー」を簡単に設定できる機能が用意されています。
この「コンテンツヘッダー」は、ページに視覚的なインパクトを与え、デザインをより魅力的にするための便利な要素です。

タイトル表示位置が「コンテンツ上」の時に現れる「コンテンツヘッダー」に関する設定について | WordPressテーマ SWELL
ここでは、タイトル表示位置が「コンテンツ上」の時に現れる「コンテンツヘッダー」に関する設定について、解説していきます。 カスタマイザーの起動 コンテンツヘッダーに関する設定はカスタマイザー内の「サイト全体設定」>「コンテンツヘッダー」に用意
swell-theme.com

そこで、SWELLのようにCocoonで実現し、アイキャッチ画像と投稿タイトルをコンテンツ上部に表示します。

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

完成イメージ

本ページに完成イメージを反映させます。

実装手順

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

add_action('cocoon_part_before__tmp-user/main-before', function () {
  if (is_home() || is_search()) {
    return;
  }

  $url   = '';
  $title = '';

  // 背景画像のオーバーレイ濃度
  $overlay_opacity = 0.5;

  // ページ種別に応じて背景画像とタイトルを取得
  switch (true) {
    // カテゴリーアーカイブ
    case is_category():
      $id    = get_query_var('cat');
      $url   = get_the_category_eye_catch_url($id);
      $title = single_cat_title('', false);
      break;

    // タグ・カスタムタクソノミーアーカイブ
    case is_tag():
    case is_tax():
      $id    = get_queried_object_id();
      $url   = get_the_tag_eye_catch_url($id);
      $title = single_term_title('', false);
      break;

    // 投稿・固定ページなどの個別ページ
    case is_singular():
      $url   = wp_get_attachment_url(get_post_thumbnail_id());
      $title = get_the_title();
      break;
  }

  // 画像がない場合はNO IMAGE画像を使用
  $url = $url ?: get_no_image_url();

  // 背景画像がある場合のみタイトルエリアを表示
  if ($url): ?>
    <div class="page_thumb" style="background-image: linear-gradient(rgba(0, 0, 0, <?= esc_attr($overlay_opacity); ?>), rgba(0, 0, 0, <?= esc_attr($overlay_opacity); ?>)), url(<?= esc_url($url); ?>);">
      <div class="page_title wrap"><?= esc_html($title); ?></div>
    </div>
  <?php endif;
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  .page_thumb {
    background-position: center;
    background-size: cover;
    display: block;
    height: 200px;
    padding: 0 1em;

    .page_title {
      align-content: center;
      color: #fff;
      font-size: 26px;
      font-weight: bold;
      height: 100%;
      text-align: center;
    }
  }

  .entry-title,
  .archive-title,
  .eye-catch-wrap {
    display: none;
  }
  <?php

  $handle = 'page-thumb-header';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());
});

参考：アピールエリアのエリア画像を切り替え表示する方法

同様にアピールエリアのエリア画像をページごとにアイキャッチ画像に切り替えて表示します。

PHPで実装する場合

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

  • ラベル
    Cocoon設定

    表2に示す項目を設定します。

    Cocoon設定
    設定大項目項目設定値
    アピールエリアアピールエリアの表示投稿・固定ページのみで表示する
  • ラベル
    PHPを追加

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

    add_filter('theme_mod_appeal_area_image_url', function ($current_mod) {
  $url = '';
  if (is_appeal_area_display_type_singular_only()) {
    $url = wp_get_attachment_url(get_post_thumbnail_id());
  }

  return $url ?: $current_mod;
});

Cocoonは設定値の取得にget_theme_mods()を用いています。
そのため、theme_mod_{$name}フィルターを使用することで、取得された設定値を動的に差し替えることができます。

CSSで実装する場合

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

  • ラベル
    Cocoon設定

    表3に示す項目を設定します。

    Cocoon設定
    設定大項目項目設定値
    アピールエリアアピールエリアの表示投稿・固定ページのみで表示する
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。
    該当ページごとに背景画像を定義します。

    /* 投稿 */
.postid-投稿ID .appeal {
  background-image: url('背景画像URL');
}

/* 固定ページ */
.page-id-固定ページID .appeal {
  background-image: url('背景画像URL');
}

さいごに

今回紹介した方法を使えば、SWELL風のコンテンツヘッダーを簡単に追加できます。
これにより、アイキャッチ画像を効果的に活用し、投稿や固定ページのデザインに視覚的なインパクトを与えることができます。

タイトルとURLをコピーしました