【SWELL】404ページをテンプレートファイルを編集しないでカスタマイズする方法

2023 6/25

2023年6月25日

実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。

【SWELL】404ページをテンプレートファイルを編集しないでカスタマイズする方法

初心者

404ページをアレンジしたい…
テンプレートファイル編集しないでカスタマイズできる方法ってないの？

そんな疑問に答えます。

SWELLの404テンプレートファイルを見てみると独自のフックがありません。子テーマ化するの面倒だな～と思っていませんか？

Code Snippetsなどのコード管理系プラグインを使っている環境であれば子テーマ化せずに404ページをカスタマイズできる方法があります。

本記事ではCode Snippetsを使い404ページを編集する方法を紹介します。404ページに画像を表示したり、PHPコードでタグクラウドを表示させるほか、ブログパーツで作ったデザインを呼び出コードを用意しました。

この記事を書いた人

IT業界24年のベテランエンジニア
WordPressで企業サイトの構築しています
取り扱いWordPressテーマは300個オーバー

SWELLマニアのかんたです

【概要】404ページって何だ？

404ページは、Webサイトで見つけられないページに表示されるエラーページのことです。

例えばアクセスしたページのURLが間違っている、ページが削除されているといった場合に表示されます。

404ページが表示されるケース

URLの間違い
ページが削除されている

ちなみに、SWELLのフォルト404ページは次のような出力です↓

ページがない旨が明記され、検索フォームとサイトのトップページへのリンクが表示される仕様です。

カスタマイズオプションはない

SWELLのカスタマイザーには、404ページの変更オプションはありません。表示するテキストや、検索フォームの非表示、トップページへのリンク以外のページへのリンクを設置するには独自カスタマイズが必要です。

コーポレート系サイトの場合だと、FAQコンテンツや問い合わページなどへの導線を設置したいところです。

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

テンプレートファイルを直接編集しないでSWELLの404ページをカスタマイズする方法です。

以下は、SWELLの404テンプレートファイルです↓

404テンプレートファイル

<?php
if ( ! defined( 'ABSPATH' ) ) exit;
get_header();
?>
<main id="main_content" class="l-mainContent l-article">
	<div class="l-mainContent__inner">
		<h1 class="c-ttl404"><?=esc_html__( 'ページが見つかりませんでした。', 'swell' )?></h1>
		<div class="post_content">
			<p class="u-ta-c">
				<?=esc_html__( 'お探しのページは移動または削除された可能性があります。', 'swell' )?>
			</p>
			<p class="u-ta-c">
				<?=esc_html__( '以下より キーワード を入力して検索してみてください。', 'swell' )?>
			</p>
			<?php echo get_search_form(); ?>
			<div class="is-style-more_btn">
				<a href="<?=esc_url( home_url( '/' ) )?>"><?=esc_html__( 'TOPページへ', 'swell' )?></a>
			</div>
		</div>
	</div>
</main>
<?php get_footer(); ?>

404テンプレートファイルにはSWELLの独自フックはありません。コンテンツエリアでフィルターできるのはget_search_form()だけです。

テンプレートファイルを編集しないことを前提にすると、唯一使える関数と言えます。

【カスタマイズ①】テキストを消す

上記画像の赤線部分の消す方法です。

CSSでdisplay:none使って非表示にするか、JavaScriptでコードを削除します。

CSS

タイトル部分を消すCSSコード↓

.error404 .c-ttl404{
	display:none;
}

テキスト部分を消すCSSコード↓


.error404 .u-ta-c{
	display:none;
}

JavaScript

タイトル部分を消すJavaScriptを404ページだけで実行するコード↓

function kanta_404_remove_title() {
    if (is_404()) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            const kanta_h1 = document.querySelector('.l-mainContent__inner h1');
            if (kanta_h1) {
                kanta_h1.parentNode.removeChild(kanta_h1);
            }
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'kanta_404_remove_title');

テキスト部分を消すJavaScriptを404ページだけで実行するコード↓

function kanta_404_remove_text() {
    if (is_404()) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            const kanta_404_texts = document.querySelectorAll('.l-mainContent__inner .u-ta-c');
            kanta_404_texts.forEach(function(element) {
                element.parentNode.removeChild(element);
            });
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'kanta_404_remove_text');

【カスタマイズ②】検索フォームの「上」に要素を付け加える

上記の画像のように、フォームの上に任意の要素を表示させる方法です。get_search_form()を使い、任意の要素を付け加えるコードです↓

function kanta_404_above( $form ) {
	if ( is_404() ) {
		// 追加する要素
		$additional_content = '<div>追加の要素</div>';
    
		// $formに上に追加の要素を結合して返す
				return $additional_content .$form;
	}
}
add_filter( 'get_search_form', 'kanta_404_above' );

テキストだけでなく、任意のHTMLを出力できます。

テキストだけでなく、画像などを自由に追加設定可能です。

【カスタマイズ③】検索フォームの「下」に要素を付け加える

フォームの下に任意の要素を表示させる方法です。先ほど同様にget_search_form()を使います。

function kanta_404_above( $form ) {
	if ( is_404() ) {
		// 追加する要素
		$additional_content = '<div>追加の要素</div>';
    
		// $formに追加の要素を結合して返す
		return $form . $additional_content;
	}
}
add_filter( 'get_search_form', 'kanta_404_above' );

【カスタマイズ④】ブログパーツを呼び出す

ブログパーツで作ったパーツを呼び出すコードです↓

function kanta_404_below( $form ) {
	if ( is_404() ) {
		// 追加する文字列
		$additional_content = '<div>追加の要素</div>';
    
		// ショートコードを実行し、結果を取得して追加の文字列に結合する
		$additional_content .= do_shortcode( '[呼び出しコード]' );
    
		// $formに追加の文字列を結合して返す
		return $form . $additional_content;
	}
}
add_filter( 'get_search_form', 'kanta_404_below' );

上記コード内「呼び出しコード」部分を、ブログパーツの呼び出しコードに置き換えてください。