ホームページ

　私は一般的なWebページを何年にも亘り作り続けてきましたが、今はPanasonic OB会に参加して、WordPressによる投稿ページを作っています。私がこのWordPressに接した経験は以下の3つです。
・2年前にWordPressの教本を買い、何回か読み返しましたがピンときません。
・令和2年の正月にはネットでWordPressについての記述を読みあさりました。
・現在はカスタマイズされたWordPressで、ページの投稿・更新などをしています。
　WordPressによるページは今やWebページ全体の30％を占めるまでになっています。WordPress がなぜこの位置を占めるに至ったのか、WordPressのメリットは何か、この点に私は興味を持ち続けてきました。その理由の一端が分かるかと、今回レンタルサーバを借りてWordPressによるWebページを一から作ってみました。
　以下はそのWordPressページ作りのまとめですが、まずはページの投稿ができるまでの前準備の報告です。

＜教本を手元に置いておく＞
　今回のページ作りに参考にした教本は、インプレス社刊の右図示すものです。
　　-------------------------------------------
「いちばんやさしいWordPress の教本（人気講師が教える本格Webサイトの作り方）」、石川栄和・大串肇・星野邦敏共著、インプレス社刊、2018年4月21日版
　　-------------------------------------------
　この教本の印刷時のWordPressのバージョンは4.7.1ですが、現在のバージョンは5.3.2となっています。ということで、教本のWordPressの記述に古い部分があり、ページの作成にかなり惑わされることになりました。初めてページを作るときに参照する教本のバージョンに注意を払わなかったことは、私の大きな反省点となりました。

＜サーバを借りてWordPressをインストールする＞
　私が借りたレンタルサーバは「さくらインターネットのスタンダードプラン」（100GB 524円/月）です。サーバを借りると、右図のようなサーバの各種設定をする「コントロールパネル」と呼ばれる便利なツールが使えます。WordPressのインストールとその初期設定などを丁寧にサポートしてくれます。

　このコントールパネルから今回は、データベースの設定、クイックインストール、ファイルマネージャーの3つのツールを使います。また、これらツールの取扱説明書も揃っています。コントールパネルの「サポートオンラインマニュアル」～「WordPress」～「クイックインストールWordPress（ブログ）のインストール」に分かりやすい説明があります。

1．データベースの設定
　WordPressはデータベースと一対になって働くWebページ作成ツールです。さくらのサーバを借りると、あらかじめインストールされているデータベース（MySQL）が使えるようになっています。WordPressをインストールする前にコントールパネルの「データベースの設定」ボタンから、その設定をしておきます。

2．WordPress本体のインストール
　一般にサーバ業者からサーバを借りるとWordPressを簡単にインストールする仕組みが整っています。さくらインターネットではコントールパネルの「クイックインストール」ボタンから始めます。画面の指示に従って操作を進めると、下図左のWordPressのログイン画面が現れます。
　ここにログインすると、下図右のWordPressの管理画面＝ダッシュボードが表示されます。今後はこのダッシュボードを使って、WordPressの各種設定やWebページの作成をします。まだ、テーマとプラグインは有効化していません。

3．トップページの表示

　ダッシュボードの上段左端にあるタイトル名（ここではWordPressの研究）にマウスを合わせ、「サイトを表示」をクリックすると右図のように現在のWordPressのトップページが表示されます。
　さらに、タイトル名にマウスを合わせ「ダッシュボード」をクリックするとダッシュボードに表示が変わります。このようにダッシュボードとトップページ表示を繰り返して、ページを完成していきます。
　ちなみに、それぞれの画面表示のURLの一例をまとめておきます。
・ログイン画面のURL：http://yytomy.sakura.ne.jp/wp/wp-login.php
・ダッシュボードのURL：http://yytomy.sakura.ne.jp/wp/wp-admin/
・トップページのURL：http://yytomy.sakura.ne.jp/wp/

＜メディアは /wp-cotent/uploads に保存される＞

　プログラムやデータのバックアップは、WordPressの管理において重要項目の一つです。そのためにテーマやプラグイン、アップロードしたメディアの保存場所を確認しておきましょう。
　左図は先に示したコントロールパネルの一部です。「運用に便利なツール」～「ファイルマネージャー」から、下図のWordPressのファイル構成を見ることができます。WordPressの保存場所を「wp」とすると、その下に3つのディレクトリ「wp-admin」「wp-content」「wp-includes」があります。
　そして「wp-content」にはテーマ「themes」とプラグイン「plugins」があり、さらに「uploads」にはアップロードされたメディア（写真・動画・音声・PDFなど）が、年月順に保存 される仕組みになっています。
　下図「uploads」フォルダ構成をよく見ると、メディアの管理は「年月」単位で管理されていることが分かります。例えば、同じ画像「abc.jpg」を1月と2月にアップすれば、この2つは別ファイルとして月別で管理されます。また、同じ画像を同じ月にアップすれば、「abc.jpg」「abc-1.jpg」のように順次数値が付与されて区別されます。

＜ブラウザがWebページを表示する仕組み＞

　Webページを見る人が意識してブラウザでWebサーバにリクエストするのは、ページのURLを1回クリックするだけでOKです。
　ブラウザが「ページを表示する仕組み」は、まずブラウザがWebサーバにリクエストして、サーバはその html ページをブラウザに送り返し、ブラウザはページの素材がすべて揃うまでリクエストを繰り返すことです。
　もう少し具体的にいうと、ブラウザは最初に読み込んだ html ページの内容をページの上から順番に読んでいき、画像表示の指定 <img src=" ･･･"> がある都度、その画像のダウンロードをサーバにリクエストします。このようにブラウザはサーバと会話を続けて、完全なWebページを作成（レンダリングという）して表示します。

◇記事コンテンツと画像情報はデータベースに保存される
　ここで、前項の「メディア」とは別に、ページの「記事コンテンツ」とその関連情報の保存場所の確認です。実は外からは見えませんが、データベース(MySQL) が WordPressに紐付けされており、ここに記事コンテンツと関連するパーマリンク・作成日時などの情報が保管されます。
　さらに、上図「uploads」にアップロードされた画像の情報は、データベースの「wp_posts」というテーブルに、画像ごとに画像IDとして保存されます。その内容はIDごとに、ファイル名・アップロード日・タイトル・投稿者・画像パス(URL) など20項目ほどもあります。
　これでデータベースの画像IDから画像のファイル名やパス(URL)などが参照できるので、ブラウザからリクエストがあれば、php はデータベースの情報だけで新規にhtmlページを作れます。

◇ブラウザがWordPressのページを表示する仕組み
　ブラウザがWordPressのページを表示する仕組みも、基本的に一般のWebページの場合と同じです。ただ、WordPressではブラウザからページ表示のリクエストがある都度、php がデータベースにある記事コンテンツとその関連情報（画像ID情報も含む）から、アクセスされたhtml ページを新規に構築することだけが異なります。
　ユーザはブラウザでWordPressのページ（パーマリンク）にアクセスすると、WordPressサーバは新規に構築したhtml ページをブラウザに返します。このhtml ページはテキストのみのページです。ブラウザは受け取ったページを順次読み込んで、 <img src="http//: ･･･"> で指定された画像を次々とダウンロードして、最終的に閲覧できるWebページを作ります。

― 前編の終わり ―

WordPressのページを一から作ってみた－前編