オリジナルテーマ WordPress

WordPressオリジナルテーマの作り方⑪(404ページ編)

WordPressオリジナルテーマの作り方⑪(404ページ編)

今回はWordPressオリジナルテーマの作り方【第11回】404ページ編となります。

前回までに以下の事をやってきました。

今回のWordPressオリジナルテーマの作り方は404ページ編です。

案件ではデザインが無いことの方が多いですが、たまにあるので覚えておきましょう。

また記事の最後にはWordPressのおすすめ教材をご紹介させて頂きます。

効率よくWordPress制作したい人はこちら

404ページとは?

まず404ページとは何か?という解説を簡単にします。

404ページとは?

404ページとは、存在しないページにアクセスしたときに表示されるエラーページのこと。

存在しないページにアクセスとは、例えば当ブログのお問い合わせページのURLは『https://junpei-sugiyama.com/contact/』ですが、『https://junpei-sugiyama.com/contactt/』と最後に『t』を1つ多く入れてアクセスすると以下のような404ページが表示されます。

じゅんぺいブログの404ページ

じゅんぺいブログの404ページ

つまり間違ったURLでアクセスされると表示されます。

他にも削除されたページや非公開のページにアクセスした場合も404ページが表示されます。

 

404ページのデザインがない場合のデメリット

当ブログの場合はAFFINGER6というテーマを使っていて、先ほどの様にそのテーマのデザインで表示されますが、オリジナルテーマで作成した場合に404ページを作らないと以下のように表示されます。

WordPressオリジナルテーマの404ページ

WordPressオリジナルテーマの404ページ

しかしこれではトップページに行くことも出来ず、ユーザーにとって不親切であると言えます(あと急にエラー感たっぷりの画面が表示されて心臓に悪いです)

そこで当ブログのような有料テーマの404ページではブログのレイアウトを保った状態で表示されるので、メニューにある『ホーム』ボタンなどからブログに飛ぶことが出来ますし、『トップページに戻る』ボタンなどがあればより親切ですね。

なのでオリジナルテーマでは上記のようなデフォルトで無機質な404ページではなくデザインされた404ページにしたい場合、自分で作る必要があります。

案件ではデザインが無ければ作る必要はないと思いますが、404ページのデザインも用意されていることがあるのでしっかり作れるようになっておきましょう。

 

WordPressオリジナルテーマの作り方:404ページの作り方

404ページの作り方ですが、テンプレートを作るだけで固定ページを作る必要はありません。

テンプレート名は『404.php』です。

WordPressオリジナルテーマのファイル構成

WordPressオリジナルテーマのファイル構成

コードはデザイン次第ですが、シンプルにタイトルと『トップページに戻る』ボタンだけの場合は以下になります。

<?php get_header(); ?>
<main>
  <h1>404 NOT FOUND</h1>
  <p>お探しのページはありませんでした。</p>
  <div>Topページは<a href="<?php echo esc_url( home_url( '/' ) ); ?>">こちら</a></div>
</main>
<?php get_footer(); ?>

ヘッダーとフッターはインクルードタグで読み込み、あとはmainタグの中に表示させたい文章を書くだけです。

上記コードをコピペして、あとはmainタグ内をデザイン通りに書いていけばOKです。

最後に存在しないURLでアクセスしてみて、自分で作成した404ページが表示されるか確認しましょう。

以上になります。

関連記事WordPressオリジナルテーマ関連記事

 

WordPressオリジナルテーマ制作のおすすめ教材4選!

勉強方法は書籍、動画、プログラミングスクールなど色々あり、個人によって向き不向きがあると思います。

そこでタイプごとにご紹介させて頂きたいと思いますが、その前におすすめの勉強方法は以下になります。

  1. 分かるところまでどんどん進める
  2. 勉強に詰まる
  3. 無視して次に進む or 他の教材などを使う
  4. もう一度詰まった場所を見てみる
  5. 理解できるようになっている

これからご紹介する教材と一緒にこのブログを読み進めて頂けると、より理解が深まるかと思います。

 

書籍

WordPressに関する本も沢山ありますが、ここでおすすめするのは2冊です。

いちばんやさしいWordPressの教本

こちらは以前私が持っていた本で、タイトル通りやさしいというかWordPressを1から勉強したい人向けの内容となっています。

Lightningという無料のWordPressテーマを使った制作方法など載っています。

ちなみにLightningを使ったサイト制作についてはこちらのブログでもご紹介しています。

Lightningを使ってサイト作成(前編)

Lightningを使ってサイト作成(後編)

 

初心者からちゃんとしたプロになる WordPress基礎入門

こちらは私も個人的にお世話になっているちづみさんが書かれた本になります。

WordPressの本はこれまで何冊か購入しましたが、ダントツで読みやすいです。

ちなみに私が初めてにして唯一購入したコーディング教材がちづみさんのnoteでした。

また、初心者から実務経験者まで活用出来る非常におすすめの本となっています(電子書籍で購入しました)

 

動画

WordPressを動画で学びたい人はこちらの教材がおすすめです。

WordPress開発マスター講座

本と違って動画だと手を動かしながら確認出来るのでいいですね。

こちらはUdemyの有料教材ですが、かなりの頻度でセールを行っていて90%オフとか良くあるので出来ればそのタイミングを狙いましょう(私はセール時に購入しました)

『WordPressの動画教材と言えばコレ』というくらい有名な教材で、私を含め周りでも購入している人がたくさんいます。

もちろんUdemyはWordPress以外の教材もたくさんあるので、気になる教材がセールをやっていたら購入を検討しても良いかも知れませんね。

 

プログラミングスクール

プログラミングスクールも色々ありますが『Web制作に特化したスクール』であればデイトラ一択かと思います。

開校1年で受講生が7000人を突破したオンラインスクールで、スクールと言ってもオンラインなので自宅で受講することが出来ます。

WordPressのカリキュラムは『Web制作コース上級編』にあります。

デイトラはTwitterをやっていれば分かりますが、悪い評判は見たことがなく、叩かれやすいWeb制作業界において非常にクリーンなイメージです。

カリキュラムの質が高いのはもちろん、他のスクールと比べて圧倒的なコスパかつ買い切りとなっています。

そしてカリキュラムはどんどん更新されるので『情報が古い』ということもなく、メンターに質問が出来る点も独学だと挫折しやすいWeb制作の勉強においてはおすすめです。

私の周りも『Web制作を始めるならまずデイトラを勧める』という人も多いです。

デイトラの無料レッスン動画はこちら

 

実務で使った2年分のコーディング&WordPressメモまとめ集

これは記事の最後にも載せていますが、私がBrainという知識共有プラットフォームで発売しているものになります(これは4選に入れませんでした^^;)

これは教材というより『コードスニペット集』というコードをまとめたものなので『学ぶ』というより『答え』に近いものになります。

なので学習目的での購入はおすすめしませんが、作業効率を上げたい人にはおすすめです。

詳しくはこちらの記事を参照下さい。

【コピペで使える!】コーディング&WordPressメモまとめ集【無料特典あり🎁】

 

WordPress案件の単価と作業効率を上げる!

Brain総合ランキング1位獲得 & 3日で500部突破

累計670部突破

クチコミ約370件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月8.4万PV▶︎Twitterのフォロワーは5700人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計390万円突破

-オリジナルテーマ, WordPress
-,