ディスクロージャーポリシーをお読みください。
Please Read my Disclosure Policy.
皆様ご承知のとおり「404 Not Found」とはサーバーと通信できても、サーバーが指定されたページを見つけられない時に表示されるエラーページです。
SANGOの初期設定で404にはかわいい猫の画像が設定されていますが自分の猫ちゃんの画像に差し替えたくてGoogle先生と相談しながら変更してみました。
404ページの画像を自分の好きな画像に変更する方法をご案内します。
「content-not-found.php」の編集方法をお急ぎのかたは「content-not-found」ファイルの編集へGO!
操作する前に「準備」や「注意すること」←この赤い文字を選択して読んでから操作にとりかかってくださいにゃぁ！
「404 Not Found」が表示されるとき
「404 Not Found」が表示されるときってどんな時でしょう？
- サイト（ドメイン）自体は存在する
- 指定したURLが変わったのでページが見つからない
- ページそのものが削除された場合
- ドメインより以降のURLの入力ミスなど
お気に入りの記事を後でじっくり読もうとメールに貼り付けておいてのちのちリンクをクリックしてみたら、「404 Not Found」が表示されることがあります。
既にページを削除してしまったか、URLを変えてしまった可能性があります。
https://thechubbyprince.com/how_to_start
https://thechubbyprince.com/how–to–start
Google検索してみたら？
ありました！
このサイトで利用させていただいている「有料テーマのSANGO」の作者である「サルワカくん」様の「WordPressテーマ SANGOについてのよくある質問」の中の「404ページの猫の画像を変更したい」というタイトルで以下のように案内されていました。
親テーマフォルダーに
content-not-found.phpというファイルがあります。このファイルを子テーマ内に複製します（中身もファイル名も全く同じにします）。その後、子テーマの
content-not-found.phpを開き、4行目中の<・・・ここに書かれているコードを省させていただきました・・・>
を以下に変更します。
<・・・ここに書かれているコードを省略します・・・>
「画像のURL」の部分に使いたい画像のURLを貼り付けてください。
引用元：404ページの猫の画像を変更したい
が、そこは超初心者の私が文字だけでわかるすべもなくですね。
あれやこれやと考えた挙句ほぼ1日を費やしましてやっとの思いで画像変更ができました！ またいつか編集する日のために画像で手順を残しておきます。
まずは自分の画像を用意しましょう
あらかじめ画像を用意して「メディアライブラリー」にアップロードしておく必要があります。
画像のサイズは800×450です。
初期設定の404画像を変更する方法
契約しているサーバーによりファイルへのアクセス方法が違います。
おおまかな操作の流れは以下のようになります。
注意 親フォルダの中のファイルは書き換えたりしないでね！
なぜなら、WordPress 自体が表示されなくて「真っ白」になったりするので、書き換えをするときは必ず子供フォルダの中にコピーしてから編集、書き換えをしましょう。
sango-theme フォルダ ＝> 親フォルダ
sango-theme child フォルダ ＝> 子供フォルダ
content-not-found ファイル ＝ > 404（コンテンツが見当たらない）ルールが書いてあるお約束の書
- 「content-not-found ファイル」を「親フォルダ」から「子供 フォルダ」へコピー
- WordPressの「テーマエディタ」から 「子供 フォルダ」 を開く
- 「子供 フォルダ」へコピーした「content-not-found ファイル」 の画像を指定しているURLを書き換える
404エラーで自分の好きな画像が表示されるようになります。
「content-not-found.php」のダウンロード方法をご案内します。
当サイトが契約している「レンタルサーバーmixhost（ミックスホスト）」の「cPanel」での操作画面になります。
操作している「インターネットブラウザー」は「Google Chrome」での操作になります。
他のブラウザーでも基本的な操作に変わりはありません。
- 「マイページ」の中の「有効なサービス」を選択します。
- 「サービスの詳細」ページ内の「ショートカット」わく内で「ファイル マネージャー」を選択します。
- もし！「ショートカット」わく内の「ファイル マネージャー」が見当たらない場合には「サービスの詳細」ページから「cPanel」にログインしましょう。
「ファイル」から「ファイル マネージャー」を選択です。
「+sango-theme」に保存されている「content-not-found.php」をコンピューターにダウンロードします。
- 開いた「ファイル マネージャー」の左側にある階層を展開しファイルの保存場所を探しましょう。
- 「+public_html」の「 + 」を選択し開くと「-public_html 」になります。
- 「+XXXXX.com（自分のドメイン名）」「 + 」を選択し開きます。
- 「+wp-content」の「 + 」を選択し開きます。
- 「+ themes」の「 + 」を選択し開きます。
- 今回は「+sango-theme」の黄色いフォルダをクリックしましょう。
- 右の窓の中で「content-not-found.php」を探します。
- 「content-not-found.php」を選択して「ダウンロード」の文字をクリックしましょう。
- 直ぐに「アップロード」操作をする場合には画面は開いた状態にしておきます。
＊アルファベット順に並んでいたら上から6番目あたりを目安にさがしましょう。
＊左側が「フォルダの階層」右側が「保存されているフォルダやファイル」。
- ファイルの保存場所を指定し「保存」ボタンを選択します。
- ダウンロードが完了したら、「Google Chrome」左下の角にある赤い丸の中の下向き「へ」をクリックし「フォルダを開く」を選択しましょう。
- 開いた窓に「content-not-found.php」が保存されていればダウンロード成功です！
お疲れ様でした！
これで「content-not-found」ファイルを「sango-theme」から「ダウンロード」し「自分のコンピューター」に「保存」することに成功です！
次の操作はいよいよ「+sango-theme child」へ「content-not-found」ファイルを「アップロード」する操作になります。
「content-not-found.php」をアップロードする方法をご案内します。
- 開いたままにしていた「ファイル マネージャー」の左側にある階層での操作です。
- 今度は「+sango-theme child」の黄色いフォルダを選択。
- 「アップロード）」を選択しましょう。
今回は先ほどダウンロードした「content-not-found.php」
を「+sango-theme child」に「アップロード」する操作になります。
- 開いた「ファイルのアップロード」の窓の中に「content-not-found.php」ファイルをドラッグ＆ドロップします。
- 「アップロード」が完了したら緑のバーが100％になります。
もしくは「ファイルの選択」から保存場所を指定しましょう。
「sango-theme child」へ「content-not-found.php」のアップロードが完了したことを確認！
お疲れ様でした！
これで「content-not-found」ファイルを「sango-theme」から「sango-theme child」へコピーすることに成功です！
次の操作はいよいよ「画像を指定しているURL」の書き換え操作になります。
＊これでレンタルサーバーでの作業は終わりましたのでログアウトしてください。
「content-not-found」ファイルの一部を変更する方法をご案内します。
<img src="<?php echo get_template_directory_uri() . '/library/images/notfound.jpg'; ?>">▲上の変更前 (before)の状態を▼以下の変更後 (after)ように編集します。
<img src="自分の画像のURL"> - 開いた「ダッシュボード」から「外観」を選択します。
- 次に「テーマエディタ」を選択しましょう。
- 編集するテーマを選択、下向き「へ」を選択し「SANGO child」を選び「選択」ボタンをクリック。
- 「content-not-found」を選択します。
- 「SANGO child」フォルダにアップロードした「content-not-found.php」が表示されます。
- 編集が必要な部分は？
- 変更した画面です。
- 「自分の画像のURL」の調べ方。
- 「URLをクリップボードにコピー」をクリックし（ 3 ）の “自分の画像のURL” に貼り付けます。
- 貼り付けができたら「ファイルを更新」ボタンを押します。
「赤い上線」と「赤い下線」で囲まれた部分です。
<img src="<?php echo get_template_directory_uri() . '/library/images/notfound.jpg'; ?>">「上記の部分」を「下記のように」変更します。
<img src="自分の画像のURL"> 「自分の画像のURL」の部分に自分でアップロードした画像のURLを入力すれば反映されます。
＊「”文字”」文字を挟んでいる小さな「”」マークを消さないように入力します。
「ダッシュボード」から「メディア」にアクセスし「画像を選択」します。
- さて、反映されているかどうか確認しておきましょう。
- たとえば：https://（自分のドメイン）/（存在しないページの名前）でアクセスしてみると404のエラー画面が表示されます。
おつかれさまでした！
おめでとうございます！ 自分の画像が表示されていれば成功です！
SANGOをカスタマイズしてみてすばらしさ再確認
最後になりましたが、操作するにあたり注意点をまとめてみました。
それにしても編集作業は超緊張しました！ 自分の画像が表示されたときの達成感はかかった時間が時間だけにとってもうれしかったです！
そして、「ファイルの編集」が始めての場合にはあせらずゆっくりと確実にステップ、ステップ行われることをおすすめいたします。
＊なお、「ファイルの編集」にかんしましては個人の責任において実施していただけますようお願いいたします。
- 404の画像を変更するにあたり事前に準備することは？
- 自分で用意した画像 800×450ピクセル
- 操作する前に記事やデーターのバックアップを取っておくこと
- この操作をするにあたり気をつけることは？
- 操作する前に記事やデーターのバックアップを取っておくこと
- 親ファイルからのダウンロード時に他のファイルを触らないこと
- 必ず「SANGO child」にアップロードしたファイルを編集すること
- 人のサイトの画像を無断で直接リンクしないこと
WordPress「有料テーマSANGO」の凄いところはただ単に「404エラー」を表示するだけではなくて、「検索窓」と「カテゴリの一覧」が表示されるんです。
「アレッ？」でサイトのページから「さよなら」しちゃうんじゃなくて、どのカテゴリだったな？ と探す動作が用意されていているところがさすが「WordPress 有料テーマ SANGO」だなと関心しました。
404で表示される画像を好きな画像に変えたいな？と同じことを考えてGoogle検索でさまよっている検索人の参考になれば、この上なくうれしいです。
Image Credits : Photo & images、All screenshots by author, Feb 2021
▼こちらもあわせてご覧ください
海外発行のクレカでお支払いできる日本のレンタルサーバー
2つの壁を乗り越え海外在住者がエックスサーバーの申し込み成功！ 
