完成!卒業作品

XAMPPを使って

Webクリエイター養成講座のホームページ（HP）自作授業は最終局面－。

菜園ブログのHPをつくろうと考えから、ブログの記事や写真といったデータを編集・管理するのに適しているWordPress（WP）機能を採り入れることにしました。これに伴い、先にコーディングしてきたHTMLとCSSのの2つのファイルを、それぞれWP（PHPファイル）化していきます。

WPのプログラム言語はPHPです。
PHPはサーバーサイドのコンピューターを動かす言語なので、クライアントのユーザー側のブラウザーを開いただけでは表示されません。
自分のパソコン上でPHPを動かすため、パソコンにローカル環境をXAMPP（ザンプ）という仕組みを使って、ローカル環境と呼ばれる、いわばWeb仮想空間を構築しなくてはいけません。
ローカル環境下では、WPを使った作品の制作過程が自分以外の人の目にさらされることはないですし、コーディングによるプログラムの動作をじっくりと確認することができます。

WP化作業とは、これまで書き込んできた「狭庭日記」のHTMLファイルをPHPファイルへ置換し、XAMPP上でその動作を確認していくことです。
HPのデザインの大枠はHTMLファイルへコードを書き込むことで決まるわけですが、そこにWPの仕組みを加えるためには、WP化したときのホーム（フロント）ページ、個別記事ページ、固定ページ、カテゴリーページ等の動作を担うPHPファイルを新たに作成しなければなりません。
コンテンツの装飾に関して指示を与えるCSSファイルもPHPファイルへ変換します。

分割変換、再編してWP化

具体的には、HTMLファイルに書かれているコードを分割して、WP化するため「header.php」「footer.php」「functions.php」「index.php」「archive.php」「single.php」「page.php」といった機能別のPHPファイルへ〝移植〟した上で、改めてコードを追加・削除するなど再編集していきます。

「header.php」には、HTMLの中で記したhead（ヘッド）部分のタイトル名のほかアイコンや装飾用のCSSファイルとのリンクや、body（ボディ）の冒頭のheader（ヘッダー）部分で書き込んだサイトロゴやディスクリプション、ナビゲーションメニューに関することをコードを記入。「footer.php」にはコピーライト等のコードを、「functions.php」には装飾を関係の担うCSSファイル関連のコードを、それぞれ読み込ませます。

ホーム（フロント）ページを担う「index.php」には、header.phpとfooter.phpを読み込ませた上で、メインコンテンツとなるブログ記事を時系列で一覧表示させるための下記ループコードを入力します。
<?PHP if(have_posts()):while(have_posts()):the_post(); ?>

「archive.php」では、月別やカテゴリー、タブ別に記事をまとめて表示させる仕組みを読み込ませ、「single.php」では、一覧表示させたブログ記事をクリックすると個別の記事が読める個別投稿ページの表示に関して設定。コンテンツ内容に大きな変化がないプロフィールや問い合わせといったページについては「page.php」ファイルで管理します。

error頻発乗り越えて

教科書を片手にブラウザー「Google Chrome」のデベロッパーツール（console機能）を使いながら、コード入力を進めていきます。

「重大なerror」表示では、問題を包含しているコードが書き込まれている箇所が行数明示されるため、それを頼りに指定された行数のコード内容を見直し、修正しながら進んでいきます。
〝格闘〟が数十分間に及んでも問題が解決できないときは、先生のヘルプを受けることになります。

実際に映し出してみると、当初のデザインを変えた方がいい点も見えてきます。
ページの背景カラー、見出しや本文等のテキストフォントの大きさ・太さ・色、ホームページに掲載するコンテンツの数、写真のサイズ…。
コンテンツの記事と写真もそれぞれ７、８点ほど用意。これらはWPのダッシュボードと呼ばれる編集者用のインターフェースを使って実際に入力して、稼働するか否かをチェックしました。

手作り感が目立ち、洗練さが欠落。
ブログHPということでJavascriputを使わなかったため、動的要素がほぼゼロ。
制作時間内に肝心のアーカイブ機能を盛り込めず。
反省点は多々あります。

それでも還暦男にとっては記念すべき「初プログラミング」－。
かすみ目をこすりながら、腰をさすりながらの「汗と涙の結晶」なのでした。