SWELL│離脱を防ごう！404ページのカスタマイズ

SWELLの404ページはシンプルです。

検索フォームを残したまま、おすすめ記事やカテゴリー一覧へのリンクを追加すると、必要なページへ進む手掛かりを用意できます。

本記事では404のカスタマイズを紹介します。

著者

motoki

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

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

MOTOKI合同会社

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

SWELLの404ページのカスタマイズ方法

やり方は簡単です。

functions.phpのコードを挿入して、404のコンテンツを作るだけです。

実装方法について

SWELL 2.19.0の404.phpには本文専用フックがありませんが、共通のwp_footerなどは動作します。ここでは既存の検索フォームとトップページへのリンクを残し、その下へ補助コンテンツを追加します。

JavaScriptで追加するため、スクリプトが動かない環境でも元の案内と検索フォームが残る構成にします。

存在しないURLではHTTPステータス404が返ることを確認します。下のrobotsタグだけでは404レスポンスの代わりになりません。robotsの値はテーマやプラグイン設定によって変わります。

<meta name="robots" content="noindex, nofollow">

以下はサーバー側で指定した公開済み・パスワードなしのブログパーツだけを読み込みます。閲覧者がURLのIDを変えて任意の記事を指定する入口は作りません。

JavaScriptが無効な環境では追加部分は表示されません。動的ブロックのスクリプト初期化には対応しないため、この例は通常の文章・画像・リンク用です。複雑な絞り込み検索には子テーマの404.phpでサーバー側に出力する方法を検討してください。

あとはもちろん404ページ以外のページには影響がないようにします。

if ( is_404() ) {
}

ブログパーツの作成

今回のコードで追加するブログパーツには、通常の文章とリンクで「おすすめ記事」「カテゴリー一覧」「お問い合わせ」などの案内を作ります。

絞り込み検索の初期化が必要なブロックは、この例の対象外です。

ブログパーツを公開し、パスワードを設定していないことを確認します。

下書きや非公開のパーツを公開ページへ出力するコードではありません。

最後にブログパーツの記事IDもメモしておきましょう。

追加位置と404の確認結果

WordPress 7.1.2 / SWELL 2.19.0の実HTTP応答で404と検索フォームの保持、ブログパーツの取得を確認しました。

JavaScriptの追加・重複防止は模擬DOMでの検証です。

実ブラウザーでのPC・スマホ表示やリンク操作、動的ブロックの動作を確認した結果とは区別してください。

実際のコード

子テーマのfunctions.phpの既存PHP内、またはPHPスニペット管理プラグインのどちらか一方へ追加します。親テーマは編集しません。

エラーが怖い人はCode Snippetsのプラグインを入れて、そこからコードを挿入しましょう。

ブログパーツのIDも忘れずに変更しましょう。

functions.php

add_action( 'wp_footer', function () {
    if ( ! is_404() ) {
        return;
    }
    $parts_id = 1234; // 公開済みブログパーツのIDへ変更。
    $parts = get_post( $parts_id );
    if ( ! $parts || 'blog_parts' !== $parts->post_type
        || 'publish' !== $parts->post_status || '' !== $parts->post_password ) {
        return;
    }
    $html = do_shortcode( '[blog_parts id="' . absint( $parts_id ) . '"]' );
    if ( '' === trim( $html ) ) {
        return;
    }
    ?>
    <script>
    (function () {
        function appendParts() {
            var target = document.querySelector('#main_content .post_content');
            if (!target || document.getElementById('waza-404-parts')) return;
            var extra = document.createElement('div');
            extra.id = 'waza-404-parts';
            extra.innerHTML = <?php echo wp_json_encode( $html, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT ); ?>;
            target.appendChild(extra);
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', appendParts, {once: true});
        } else {
            appendParts();
        }
    }());
    </script>
    <?php
} );

元へ戻すには今回追加したコードを削除・無効化します。元の検索フォームは削除しない実装です。ブログパーツは公開状態・パスワード・種類を確認してから使い、IDが無効なら追加しません。

未使用URLでHTTP404、検索とトップへのリンク、PC・スマホ幅、TabとEnterによるリンク操作を確認します。