お問い合わせ

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

  • URLをコピーしました!

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ページをカスタマイズする

STEP

親テーマの404.phpを子テーマにコピー

親テーマの404.phpを子テーマにコピーします。

テーマファイルのコピーは以下のプラグインを使うと便利です。

子テーマを導入していない場合は以下の記事をご参照ください。

STEP

子テーマの404.phpを編集します

do_actionでアクションフックを追加します。

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

404ページに表示するブログパーツを用意します

ブログパーツで404ページに表示する内容を作成します。

STEP

functions.phpなどでブログパーツを呼び出します

表示したいブログパーツのショートコードをコピーします。

<?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の差別化のためにあえて導入されない可能性の方が強い気がします。

他の人にもシェアしてね
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次