Tom Works

WordPress, WordPressオリジナルテーマ

第4章 1.11 ⑨ 404.php のソースコードと詳細




new:

1.11 ⑨ 404.php のソースコードと詳細 

解説) 404.php はWordPressが正常に動作している場合は動作しませんが、何かエラーなどが発生し該当ページが見つからない無い場合に、はじめて動作するプログラムです。ここでは「404エラー(ページが見つかりません) 対象のページは移動もしくは削除された可能性があります。 メニュー右の(サイト内)検索、もしくはトップページよりお探しください。」と表示します

何かエラーが発生した場合、下図のようにヘッダー部、フッター部、サイドバーに加え、青線で囲んだ領域にエラーメッセージを表示します。

以下が今回のプログラムソースです。

<?php get_header(); ?>

<div class="container">
    <div class="row mt-5">
        <div class="col-lg-3">
            <?php get_sidebar(); ?>
        </div>
        <div class="col-lg-9">
            <div class="row">
                <div class="col-lg-1"></div>
                <div class="col-lg-auto">
                    <header class="h1">
                        404エラー(ページが見つかりません)
                    </header>
                    <div class="content-Body">
                        <p>対象のページは、移動もしくは削除された可能性があります。<br>
                            メニュー右の(サイト内)検索、もしくは<a href="<?php echo esc_url(home_url()); ?>">トップページ</a>よりお探しください。</p>
                    </div>
                </div>
                <div class="col-lg-1"></div>
            </div>
        </div>
    </div>
</div>

<?php get_footer(); ?>

解説

プログラムソース解説
1<?php get_header(); ?>get_header()
ページのヘッダー部(画面の赤線の部分)を読み込む関数です。(ここでheader.php を読み込みます。)
5<div class=”col-lg-3“>col-lg-3 :
BootstrapのCSSクラスです。ページの中央部分を12分割したうちの左3分割分をサイドバー(画面の緑線の部分)のために確保します。
6<?php get_sidebar(); ?>get_sidebar()
ページのサイドバー(画面の緑線の部分)を読み込む関数です。(ここでsidebar.php を読み込みます。)
8<div class=”col-lg-9“>col-lg-9
5行目と同じくBootstrapのCSSクラスです。ページの中央部分を12分割したうちの右9分割分(画面の青線の部分)をエラーメッセージ表示のために確保します。
12/1412 <header class=”h1“>
13 404エラー(ページが見つかりません)
14 </header>
エラーメッセージをh1(BootstrapのCSSクラス)の大きさで表示します。
16/1716 <p>対象のページは、移動もしくは削除された可能性があります。<br>

17 メニュー右の(サイト内)検索、もしくは<a href=”<?php echo esc_url(home_url()); ?>”>トップページ</a>よりお探しください。</p>
☆エラーメッセージを表示します。

esc_url(home_url())
① esc_url() はWordPressでhref属性やsrc属性に指定するURLをXSSなどの攻撃からエスケープ処理(無害化)するセキュリティ用の関数です。
② home_url() はトップページのURLを返す変数です。
ここではトップページのURLを無害化して安全にリンクします。

第4章 1.10 ⑧ search.php のソースコードと詳細
解説) サイト画面上部のメニュー右にある(サイト内)検索にてキーワードを検索が行われた際、その検索結果を表示するプログラムです。
第4章 1.12 index.php のソースコードと詳細
解説) ここでは追加作業として第3章で作成した index.php を以下のように書き換えておきましょう。【歯科クリニックのWebサイト】では「新着記事一覧」を表示する際に起動します。

参考)1.2 php基本プログラム一覧と簡単な解説です。

Noプログラム名解説
404.phpWordPressが正常に動作している場合は動作しませんが、何かエラーなどが発生し該当ページが見つからない無い場合に、はじめて動作するプログラムです。ここでは「404エラー(ページが見つかりません) 対象のページは移動もしくは削除された可能性があります。 メニュー右の(サイト内)検索、もしくはトップページよりお探しください。」と表示します。
archive.phpWordPress管理画面の投稿一覧で作成された「投稿」記事の一覧を表示するプログラムです。ここではサイドバー中段にあるカテゴリーのワードがクリックされた際に動作します。
footer.php表示されるサイト画面下部で共有に使用されるプログラムです。ここでは画面上部と同じメニューとCopyrightの表示を行います。
front-page.phpトップページを専用に表示するプログラムです。このプログラムを準備することでトップページのみの工夫をすることができ独自の表現ができます。
functions.php今回作成する【歯科クリニックのWebサイト】にいろいろな機能を追加するプログラムです。
header.php表示されるサイト画面上部で共有に使用されるプログラムです。ここでは歯科のロゴ、及びメニューと(サイト内)検索の表示を行います。
page.phpWordPressダッシュボードにて作成された「固定ページ」記事を表示するプログラムです。header.php、footer.php、sidebar.phpに設定された固定ページへのリンク(虫歯治療、矯正歯科、当院のご案内、審美歯科、定期検診、インプラント)がクリックされた際に動作します。
search.phpサイト画面上部のメニュー右にある(サイト内)検索にてキーワードを検索が行われた際、その検索結果を表示するプログラムです。
sidebar.php表示されるサイト画面のサイド側で共有に使用されるプログラムです。
single.phpWordPressダッシュボードにて作成された「投稿」記事を表示するプログラムです。ここではトップページ、または投稿記事の一覧に表示されている記事がクリックされた際に動作します。



TomWorksProfileIcon TomWorksProfileLogo

フリーランス

働いていた会社が外資になり10年間外国人と一緒に働きました。

今は好きでIT学習やプロボノ活動をリモートでしています。

このサイトでは今までの経験や学んだITの事例などを紹介します。

Amazon オーディブル