楽天スーパーセール2018 開催中!

SANGOカスタマイズ:404ページをブログになじませる&記事を探しやすくデザイン

SANGOカスタマイズ 404エラー

皆さんは「ブログの404ページ」のカスタマイズをされていますか?

読者が間違ったURLを入力したり、すでに削除されたページを見ようとして存在しないページにたどり着いてしまうことがあります。
そんなときに、正しいページや関連するページに導くために役立つのが404ページ

実はWordPressテーマ「SANGO」にはあらかじめ完成された404ページが用意されているんですが……
ブログの雰囲気に合わせて、もっと便利に使いやすくカスタマイズしてみましょう!

404ページとは

ブログのページが存在しない場合に表示されるのが、404ページ。
多くは「Not Found」や「このページは存在しません。」という文言が表示されます。

MEMO
SANGOでは、ブログ内検索等でコンテンツが見つからなかった場合や、まだ記事が投稿されていないブログの場合も、404ページ用のファイルが読み込まれて表示される仕様になっています。

404ページをカスタマイズする理由は?

ズバリ、読んでくれる人のためです。

ブログを運営する上で、404ページは必ず発生するものです。

  • 外部サイトで間違ったURLリンクを張られた場合
  • 入力されたURLが間違っていた場合
  • すでに削除された記事が検索された場合
  • ブログ内検索で入力されたキーワードが見つからなかった場合
などなど……。

読者がせっかく期待して訪問してくれたのに、「Not Found」などの簡潔なメッセージだけだと残念な気持ちになりますよね。
そのままお帰りいただくのではなく、該当の記事や関連ページにうまく誘導できると、ブログの好感度も上がることでしょう。

読者目線で考えられた404ページは素敵!

  • ページが閲覧できない理由が分かりやすく書かれている
  • 正しいページに誘導できる構成
  • 関連ページや人気ページに誘導できる構成
  • デザインがブログの雰囲気に合っている

WordPressテーマ「SANGO」のデフォルト404ページ

SANGO404ページ オリジナル

SANGOのデフォルト404ページはこんな見た目。
※ブログ内検索で入力されたキーワードが見つからなかった場合に表示されるページです。

ちゃみ

猫ちゃんの写真がとても可愛い♡

カテゴリー検索に誘導するなど、はじめからユーザーフレンドリーである印象です。

でも、手描きイラストをたくさん使っている当ブログには写真がちょっと合わないかも?
併せて、文言の変更や機能の追加もしてみたいと思います。

  • 猫ちゃん写真の変更
  • 文言の変更
  • タグクラウドでタグの一覧を表示

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

SANGOカスタマイズガイドに編集方法が記載されています。

参考 WordPressテーマ SANGOについてのよくある質問 | SANGOカスタマイズガイドSANGOカスタマイズガイド

404ページの文言を変更したい
親テーマフォルダーにcontent-not-found.phpというファイルがあります。このファイルを子テーマ内に複製します(中身もファイル名も全く同じに)。子テーマのcontent-not-found.phpに404ページの文言が書かれています。こちらを変更してくださいませ。

404ページの猫の画像を変更したい
親テーマフォルダーにcontent-not-found.phpというファイルがあります。このファイルを子テーマ内に複製します(中身もファイル名も全く同じにします)。その後、子テーマの content-not-found.phpを開き、4行目中の

<img src="<?php echo get_template_directory_uri() . '/library/images/notfound.jpg'; ?>">

を以下に変更します。

<img src="画像のURL">

「画像のURL」の部分に使いたい画像のURLを貼り付けてください。

画像については、imagesフォルダにあるnotfound.jpgを別の画像に置き換えることでも対応できます。

上記の説明だとちょっと簡潔すぎてわからないという方向けに、実際の編集方法をまとめてみました!

カスタマイズに使用するソフト

  • FTPソフト(ファイル転送ソフト)
  • テキストエディタ
私は、FTPソフトは「FileZilla」を使用。
テキストエディタは「Brackets」を使用しています。

カスタマイズ前の下準備。子テーマに編集するファイルをアップ

404ページ表示用のファイルを編集するためには、あらかじめ子テーマフォルダにファイルを用意する必要があります。

SANGOの親テーマフォルダに、404ページ表示用のcontent-not-found.phpというファイルがあります。
このファイルをFTPソフトで自分のPC上にダウンロード。

ダウンロードしたcontent-not-found.phpを、そのまま子テーマフォルダにアップロードします。
中身もファイル名も変えず、そのままアップしてください。

親テーマフォルダ
public_html wp-content themes sango-theme
子テーマフォルダ
子テーマのフォルダは、2つあります。
通常は sango-theme-child。
SANGO公認子テーマ「PORIPU」を使っている場合は sango-theme-poripuです。
public_html wp-content themes sango-theme-child
public_html wp-content themes sango-theme-poripu

▼FileZillaの使い方はサルワカで詳しく解説されています。
参考 【FileZillaの使い方】WordPressでFTPソフトを使おう | サルワカサルワカ

これで下準備は完了です。

404ページをテキストエディタで編集しよう

content-not-found.phpをテキストエディタで開くと、こんな感じです。

SANGO404ページ ファイル

細かい内容はわからなくても、404ページの文言が書かれていることは分かると思います。
こちらを適宜修正していきましょう。

MEMO
公式ではサーバ上のファイルを直接編集する方法が紹介されています。
ただ、ファイルを変に編集したことで予期した動きにならなかったり、元に戻したくなった場合に備えたい場合は、バックアップを取っておくことをオススメします。
PC上にダウンロードしたcontent-not-found.phpをコピーして、
content-not-found20181008.phpのように別のファイル名を付けておきます。
こうすることで、万が一のことがあっても変更前の状態にすぐ戻せます。

猫ちゃん画像の変更

やり方は2つあるので、お好みの方法でどうぞ。
やり方その1は、画像タグを書き換える方法です。

<img src="<?php echo get_template_directory_uri() . '/library/images/notfound.jpg'; ?>">

を以下のように変更します。

<img src="画像のURL">

やり方その2は、
imagesフォルダにあるnotfound.jpgを別画像に置き換える(上書く)方法です。
私はこちらで対応しました。

imagesフォルダ
public_html wp-content themes sango-theme library images

涙アイコンの削除・文言の変更

涙アイコン が不要なので、以下の記述を削除。

<i class="fa fa-tint fa-lg"></i>

また、タグクラウドを表示したいので、“以下のカテゴリーやタグから記事を探すこともできます。”という文言に修正しました。

タグクラウドでタグの一覧を表示

タグクラウドとは、ウィジェットで表示できるコレです。

タグクラウド

wp_tag_cloud() テンプレートタグを使って、「タグクラウド」と呼ばれるタグの一覧を表示します。
参考 テンプレートタグ/wp tag cloudWordPress Codex 日本語版

wp_tag_cloud() テンプレートタグは、引数(パラメータ)を与えることでさまざまな表示方法を実現できます。

<?php wp_tag_cloud( 'smallest=8&largest=22' ); ?>

などとつなげて書くことができますが、
多くなる場合はあらかじめ配列に入れるとすっきりします。

引数については、詳しくは上記のリンクでご確認ください。

私が作成したコードはこちら。
タグクラウドがカテゴリー一覧の下に表示されるよう、content-not-found.phpに追記します。

コード
<?php
        $args = array(
        'smallest' => 12,   // 最少使用数のタグサイズ12
        'largest' => 12,   // 最大使用数のタグサイズ12
        'number' => 0,  // 全件表示
        'orderby' => 'count',   // 使用数順
        'order' => 'DESC',  // 降順
        );
    ?>
    <div class="withtag_list">
        <span>タグ</span>
        <div class="tagcloud">
             <?php wp_tag_cloud($args); ?>
        </div>
    </div>

こんな感じで表示されます。
SANGO404ページ タグ

私がカスタマイズした404ページのコードを紹介

編集が完了したcontent-not-found.phpの内容です。
長いので折りたたんでいます(クリック or タップで表示)。

content-not-found.php
<article class="notfound">
	<div class="nofound-title"><?php if(is_search()||is_archive()){echo '記事が見つかりませんでした。';} else {echo 'お探しのページが見つかりませんでした。';}?></div>
	<div class="nofound-img"><img src="<?php echo get_template_directory_uri() 
			. '/library/images/notfound.jpg'; ?>"><?php if(is_404())echo '<h2 class="dfont strong">404</h2>'?></div>
	<div class="nofound-contents">
		<?php if(is_search()): ?>
			<p>指定されたキーワードでは記事が見つかりませんでした。別のキーワード、もしくはカテゴリーから記事をお探しください。</p>
		<?php elseif(is_archive()): ?>
			<p>まだ記事が投稿されていません。以下でキーワードやカテゴリーから記事を探すことができます。</p>
		<?php else: ?>
			<p>お探しのページは「すでに削除されている」、「アクセスしたアドレスが異なっている」などの理由で見つかりませんでした。以下でキーワードやカテゴリーから記事を探すことができます。</p>
		<?php endif; ?>
		<?php get_search_form(); ?>
		<p>以下のカテゴリーやタグから記事を探すこともできます。</p>
		<div class="withtag_list">
			<span>カテゴリー</span>
			<ul>
				<?php wp_list_categories('depth=2&title_li=');?>
			</ul>
		</div>
        <?php
            $args = array(
            'smallest' => 12,   // 最少使用数のタグサイズ12
            'largest' => 12,   // 最大使用数のタグサイズ12
            'number' => 0,  // 全件表示
            'orderby' => 'count',   // 使用数順
            'order' => 'DESC',  // 降順
            );
        ?>
        <div class="withtag_list">
            <span>タグ</span>
            <div class="tagcloud">
                 <?php wp_tag_cloud($args); ?>
            </div>
        </div>
		<div class="ct">
			<a class="raised accent-bc" href="<?php echo esc_url( home_url( '/' ) ); ?>"><i class="fa fa-home"></i> ホームに戻る</a>
		</div>
	</div>
</article>

あとは、ファイルを保存すればOKです。

完成形はこちらです。
SANGO404ページ 完成形

まとめ

以上、WordPressテーマ「SANGO」の404ページのカスタマイズ方法でした。

他にも、人気ページを表示したり、プロフィールページに誘導したりと、
まだまだ親切なつくりのブログにすることができそう
です!
※人気ページの表示もプラグインなしで実現できたので、いずれ記事にするかも……。

ぜひご自身のブログに合わせて変更してみてください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA