SWELL│カテゴリーページの記事タイトルのH1をDivにする方法

カテゴリーページのタイトルを、見た目を残したままh1要素からdiv要素に変更するカスタマイズです。掲載コードの初期条件はカテゴリーだけで、タグは条件を変更した場合に対象になります。

タイトルを非表示にするコードではありません。別の場所でページを説明するh1を用意するときに、標準タイトルの見出しとしての役割を外します。タグ名の変更だけで検索順位が改善するとは限りません。

こちらはフックが用意されてないので、コードの上書きで変更してあげます。

そのやり方を解説します。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

SWELL│カテゴリーページの記事タイトルのH1をDivにする方法

子テーマのfunctions.phpで、親テーマが同名の関数を定義する前に読み込ませます。すでに同名関数がある環境では、掲載コードのfunction_existsによる判定で置き換えが実行されません。複数の上書きコードを重ねないでください。

functions.php

外観 ＞ テーマファイルエディターで子テーマ（SWELL CHILD）のfunctions.phpを選び、末尾にコードを挿入します。作業前に必ずfunctions.phpをバックアップしてください。

Code Snippetsを使う場合も、親テーマが同名関数を定義する前に、このPHPが実行される設定であることを確認します。子テーマのfunctions.phpとスニペットの両方には登録しません。initやafter_setup_themeの処理内へ関数定義を移すと、親テーマの定義が先に読み込まれるため、この方法では置き換えられません。

if ( ! function_exists( 'swl_parts__page_title' ) ) :
    function swl_parts__page_title( $args ) {
        $title     = $args['title'] ?? '';
        $subtitle  = $args['subtitle'] ?? '';
        $has_inner = $args['has_inner'] ?? false;
        $nowrap    = $args['nowrap'] ?? false;

        // サブタイトル
        if ( $subtitle ) {
            $title .= '<small class="c-pageTitle__subTitle u-fz-14">– ' . $subtitle . ' –</small>';
        }

        // 旧バージョンではh1の中だけ出力してた
        if ( $nowrap ) {
            echo wp_kses( $title, SWELL_Theme::$allowed_text_html );
            return;
        }

        // 先にエスケープ
        $title = wp_kses( $title, SWELL_Theme::$allowed_text_html );

        $title_style = '';
        if ( $has_inner ) {
            $title       = '<span class="c-pageTitle__inner">' . $title . '</span>';
            $title_style = is_archive() ? SWELL_Theme::get_setting( 'archive_title_style' ) : SWELL_Theme::get_setting( 'page_title_style' );
        }

        // タグの選択（カテゴリーページではdivを使用）
        $tag = is_category()  ? 'div' : 'h1';

        if ( $title_style ) {
            echo '<' . $tag . ' class="c-pageTitle" data-style="' . esc_attr( $title_style ) . '">' . $title . '</' . $tag . '>';
        } else {
            echo '<' . $tag . ' class="c-pageTitle">' . $title . '</' . $tag . '>';
        }
    }
endif;

　上記はis_category()とカテゴリページだけを対象にしています。

タグの場合はis_tag()

両方ともの場合はis_category() || is_tag()と記述します。

このコードはSWELL本体の関数を丸ごと置き換えます。そのため、SWELLのアップデートで元の関数が変わっても、その変更は反映されません。アップデート後はタイトルの表示を確認してください。元に戻す場合は、追加したコードを削除してキャッシュをクリアします。

確認

開発者ツールでカテゴリーの標準タイトルがdivに変わり、別途設置したh1がページ内容を表していることを確認してください。太字などの見た目はCSSに依存するため、タグ変更だけで消えるとは限りません。タグ・固定ページ・検索結果は初期条件の対象外です。

変更されないときは読み込み順を確認する

カテゴリーの標準タイトルがh1のままなら、まずコードの登録場所と実行時点を確認します。掲載コードはfunction_existsで二重定義を防ぐため、先に同名関数が定義されていると、エラーを出さずに元の関数を使い続けます。キャッシュを消すだけでは、この読み込み順の問題は解決しません。

WordPress 7.1.2・SWELL 2.19.0で上の2通りを実行して確認しました。プラグインの実行モードや併用コードごとの読み込み順は導入先で確認してください。タイトルの文言や内側のHTMLを変える場合も、まずカテゴリーだけに適用され、タグ・検索結果の見出しが残ることを確認します。

カテゴリーと著者一覧を比べる

掲載コードをテーマのプラガブル関数より先に読み込んだ実SWELL 2.19.0で、カテゴリーのc-pageTitleがdivになり、表示テキストと投稿一覧が残ることを確認しました。著者一覧のc-pageTitleはh1のままです。

PC幅1280pxとスマホ幅390pxでカテゴリー画面を確認しました。下の画像はスマホ幅です。タグを変えても、タイトルの見た目を消すコードにはなりません。

自分のサイトではカテゴリーと著者・タグなどの対象外ページを開き、開発者ツールでc-pageTitleのタグを比較してください。変更を戻す場合は追加関数を外します。先に親テーマ側の関数が定義された環境では、この例は上書きされません。

Code Snippetsで実行範囲を保存して確認する

2026年10月3日、WordPress 7.1.2・SWELL 2.19.0の隔離環境にCode Snippetsの公式無料版3.10.2を追加し、掲載PHPをそのまま保存しました。

管理画面の新規スニペットでPHPを選び、LocationをOnly run on site front-end、Priorityを初期値の10にしてSave and Activateで有効化しました。

この実行範囲でカテゴリーの標準タイトルがdivになり、対象外の固定ページのタイトルはh1のまま表示されました。

掲載コードのカテゴリー判定はタイトルを描画するときに行うので、管理画面でカテゴリー別の有料条件を追加する必要はありません。

Only run in administration areaは公開画面への適用先として選びません。

停止する場合は同じ編集画面のSave and Deactivateを押します。

今回の検証では停止後にカテゴリーを開き直し、標準タイトルがh1へ戻ることも確認しました。

子テーマと同じ関数を二重に登録すると先に読み込まれた定義が使われるため、コードの設置先は一方に揃えてください。

このプラグイン経由の追加検証はPCで行っており、導入先の併用コードとスマホ表示は別途確認してください。

まとめ

今回はタイトルの構造を変えましたが、この部分の改修はブログパーツを挿入したりと色々応用が効くカスタマイズです。

以前はアーカイブページにブログパーツを入れるようにしました。

あわせて読みたい

SWELL│アーカイブページにブログパーツを挿入する方法 カスタム投稿タイプnewsの一覧ページで、タイトルと記事一覧の間にブログパーツを入れる方法です。news専用の子テーマテンプレートを作り、他のアーカイブや固定ページ…

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。