はじめに
2〜3段落でテーマの概要と重要性を説明します。独自の404ページを作成することで、サイト訪問者のユーザーエクスペリエンスを向上させることができます。
症状・背景
- ユーザーが存在しないURLにアクセスした際
- カテゴリー、投稿、ページが削除された後もリンクが残っている場合
- サイト移転やドメイン変更後
- 検索エンジンからの誤ったリンクをフォローしたとき
手順・設定方法
ステップ1: テーマの404テンプレートファイルを使用する
# 通常、テーマディレクトリ内の以下のパスに404.phpが存在します。
cd wp-content/themes/your-theme/
# 現在の404ページを表示するために、ウェブブラウザで以下を確認します。
http://yoursite.com/404
# 404.phpファイルを編集してカスタマイズします。
nano 404.phpステップ2: WordPressプラグインを使用する
# プラグインを検索します。例えば、「Broken Link Checker」や「404 Error Redirector」などがあります。
cd wp-content/plugins/
# 「Broken Link Checker」というプラグインのインストールと有効化を行います。
wget https://downloads.wordpress.org/plugin/broken-link-checker.zip
unzip broken-link-checker.zip -d ../plugins/
cd ..
wp plugin activate broken-link-checker
# プラグイン設定ページで404エラー時のリダイレクト先を指定します。
http://yoursite.com/wp-admin/admin.php?page=broken-link-checker-settingsステップ3: カスタムCSSとJavaScriptを使用する
# サイトのスタイルをカスタマイズするために、wp-content/themes/your-theme/inc/custom.cssファイルを作成します。
nano wp-content/themes/your-theme/inc/custom.css
# 以下のようなCSSを追加して、404ページのデザインを調整します。
.error404 .site-header {
background-color: #f9c83b;
}
# JavaScriptを使用してカスタムメッセージやユーザーインターフェースを追加する場合があります。
nano wp-content/themes/your-theme/inc/custom.js
// 以下はJavaScriptの例です。
jQuery(document).ready(function($) {
$('.error404').prepend('<p class="custom-message">お探しのページは移動または削除されました。</p>');
});ステップ4: カスタムメッセージやユーザーインターフェースを追加する
# 404.phpファイルにカスタムメッセージを追加します。
nano wp-content/themes/your-theme/404.php
// 以下はその一例です。
<p class="custom-message">お探しのページは移動または削除されました。</p>注意事項
- カスタマイズする前にバックアップを取ること
- セキュリティ上の問題が発生しないように、必要に応じて.htaccessファイルも編集すること
- パフォーマンスに影響を与えないよう、重い処理や大量のJavaScriptは避けること
まとめ
1. カスタムデザイン: サイト全体と統一感のある404ページを作成します。
2. ユーザーエクスペリエンス向上: ユーザーが迷わずにサイトを離脱せずにいられるようにします。
3. SEOへの影響: 404エラーの適切な処理は、検索エンジンからの評価向上に役立ちます。
4. セキュリティ対策: 不正アクセスやスパム対策を強化することが可能です。
5. メンテナンスの容易さ: フレンドリーなエラーページは、サイト管理者にとっても管理が楽になります。
関連記事: