SWELLの404ページはシンプルです。
検索フォームを残したまま、おすすめ記事やカテゴリー一覧へのリンクを追加すると、必要なページへ進む手掛かりを用意できます。
本記事では404のカスタマイズを紹介します。
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を変えて任意の記事を指定する入口は作りません。
あとはもちろん404ページ以外のページには影響がないようにします。
if ( is_404() ) {
}ブログパーツの作成
今回のコードで追加するブログパーツには、通常の文章とリンクで「おすすめ記事」「カテゴリー一覧」「お問い合わせ」などの案内を作ります。
絞り込み検索の初期化が必要なブロックは、この例の対象外です。
ブログパーツを公開し、パスワードを設定していないことを確認します。
下書きや非公開のパーツを公開ページへ出力するコードではありません。
最後にブログパーツの記事IDもメモしておきましょう。
追加位置と404の確認結果
| 確認項目 | 隔離環境で確認した範囲 |
|---|---|
| 存在しない投稿IDのURL | HTTP 404を維持 |
| SWELLの元の本文 | 既存の案内と検索フォームを残す |
| ブログパーツの取得 | 指定した公開済みパーツの文章・リンクをサーバー側で取得 |
| JavaScriptの追加処理 | DOM準備後に1回追加し、同じIDの追加領域がある場合は重複しない |
WordPress 7.1.2 / SWELL 2.19.0の実HTTP応答で404と検索フォームの保持、ブログパーツの取得を確認しました。
JavaScriptの追加・重複防止は模擬DOMでの検証です。
実ブラウザーでのPC・スマホ表示やリンク操作、動的ブロックの動作を確認した結果とは区別してください。
実際のコード
子テーマのfunctions.phpの既存PHP内、またはPHPスニペット管理プラグインのどちらか一方へ追加します。親テーマは編集しません。
ブログパーツの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によるリンク操作を確認します。
よくある質問：SWELLの404ページのカスタマイズ
SWELLの404ページは、どうカスタマイズしますか？
記事では、検索フォームを残したまま、おすすめ記事やカテゴリー一覧へのリンクを追加すると、必要なページへ進む手掛かりを用意できます。functions.phpにコードを挿入して、404のコンテンツを作ります。
どんな実装方法ですか？
記事では、SWELL 2.19.0の404.phpには本文専用フックがありませんが、共通のwp_footerなどは動作します。既存の検索フォームとトップページへのリンクを残し、その下へ補助コンテンツをJavaScriptで追加するため、スクリプトが動かない環境でも元の案内と検索フォームが残る構成です。404ページ以外のページには影響しないようにします。
404のコンテンツは、何を使って作りますか？
記事では、ブログパーツを作成し、通常の文章とリンクで「おすすめ記事」「カテゴリー一覧」「お問い合わせ」などの案内を作ります。サーバー側で指定した公開済み・パスワードなしのブログパーツだけを読み込み、閲覧者がURLのIDを変えて任意の記事を指定する入口は作りません。ブログパーツのIDも忘れずに変更してください。
絞り込み検索などのブロックも、入れられますか？
記事では、動的ブロックのスクリプト初期化には対応しないため、この例は通常の文章・画像・リンク用です。絞り込み検索の初期化が必要なブロックは対象外で、複雑な絞り込み検索には子テーマの404.phpでサーバー側に出力する方法を検討してください。JavaScriptが無効な環境では追加部分は表示されません。
存在しないURLで、404が返っているかも確認すべきですか？
記事では、存在しないURLではHTTPステータス404が返ることを確認します。robotsタグだけでは404レスポンスの代わりになりません。robotsの値はテーマやプラグイン設定によって変わります。
コードは、どこに追加しますか？ 元に戻すには？
子テーマのfunctions.phpの既存PHP内、またはPHPスニペット管理プラグインのどちらか一方へ追加します。親テーマは編集しません。元へ戻すには今回追加したコードを削除・無効化します。記事では、元の検索フォームは削除しない実装で、ブログパーツは公開状態・パスワード・種類を確認してから使い、IDが無効なら追加しません。
設置後は、何を確認しますか？ 検証の範囲は？
記事では、未使用URLでHTTP 404、検索とトップへのリンク、PC・スマホ幅、TabとEnterによるリンク操作を確認します。検証は2026年10月1日のWordPress 7.1.2／SWELL 2.19.0の隔離環境で、実HTTP応答で404と検索フォームの保持、ブログパーツの取得を確認しました。JavaScriptの追加・重複防止は模擬DOMでの検証で、実ブラウザーでのPC・スマホ表示やリンク操作、動的ブロックの動作を確認した結果とは区別してください。最新は公式で確認してください。
