SWELL 404ページにブログパーツを追加するカスタマイズ

SWELLには404ページがありますが、残念ながらカスタマイザーやSWELL設定などからカスタマイズできません。

フォーラムにも要望が出ていましたが、特に反応は無く、現在も404ページはカスタマイズできるようになっていません。

404.phpテンプレートのコンテンツ部分書き換え用に、arkhe_404_content相当のフックがあると嬉しいです。

404ページのコンテンツ上書きフック < ご要望

もちろん、SWELLはWordpressテーマですので、404ページはテンプレートファイルになっています。

子テーマに404ページをコピーすればユーザーは自由にカスタマイズできます。

この記事では、SWELLの404ページにブログパーツを埋め込めるようにするカスタマイズをご紹介します。

SWELLの404ページのテンプレートファイル

SWELLの404ページのテンプレートファイルは404.phpです。

<?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(); ?>

このテンプレートファイルを見てもわかるように、ユーザーがカスタマイズできるよなフックは仕込まれていません。

SWELLの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>
			<?php	do_action('swell_404_html');?>
			<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(); ?>

<?php
add_action('swell_404_html',function(){
	echo do_shortcode('[blog_parts id="1915"]');
});

SWELLの404関連のフック

SWELLには404関連のフックはありますが、いずれも404ページのものではありません。

swell_post_list_404_text

swell/parts/post_list/loop_main.php

404、記事がなかった場合周りのフック。

swell_posts_404_text

swell/parts/post_list/loop_sub.php

404、記事がなかった場合周りのフック。

swell_related_post_404_text

swell/parts/single/related_post_list.php

関連記事の404、記事がなかった場合周りのフック。

まとめ

404ページというのは通常は全く意識しません。しかし、パーマリンクを変更した時や記事を削除、非公開にした時などは表示されるページですので、離脱されないようにカスタマイズしたいと思う人も多いと思います。

404ページのカスタマイズは、ユーザーファーストという意味でSEO対策にもなるかもしれません。

Arkheには404ページをカスタマイズできるフックがありますので、将来的にはSWELLにも導入されると考えている人は多いかもしれません。しかし、SWELLとArkheの差別化のためにあえて導入されない可能性の方が強い気がします。