電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

【WordPressオリジナルテーマの作成①】「WordPressとPHPの基礎」と「モジュールテンプレートの作成」

calendar

reload

【WordPressオリジナルテーマの作成①】「WordPressとPHPの基礎」と「モジュールテンプレートの作成」

以前ここのホームページで「HTML/CSS」のみでのWEBサイト制作を記事にしましたので、今回は「ワードプレスのオリジナルテーマ作成」をまとめてみたいと思います。

※HTML/CSSでのWEBサイト制作はこちらでまとめています。↓

 

筆者は趣味程度でやっているので正直完成度は低いと思われますが、オリジナルテーマ作成に初めてチャレンジされる方の基礎的な部分の手助けができればと思っています。

それではこれから数回に分けてワードプレスオリジナルテーマの作成をまとめていこうと思いますので、参考になれば幸いです。

完成しているオリジナルテーマはこちらで確認できます。↓

http://atarimefrai.xsrv.jp/

このテーマをゴールとし、HTMLにPHPをはめ込んで順次進めていきたいと思います。

ちなみに、作成環境は「ローカルでの作成」を前提とします。

※ローカルでのワードプレステーマ作成環境構築はこちらでまとめています。↓

 

スポンサーリンク

WordPressの仕組み

動作原理について

WordPress仕組み

HTML/CSSのみで作ったWEBサイトであれば、ユーザーからのリクエストに対してWEBサーバーがHTMLの内容を返す仕組みになります。

変わってWordPressの場合は、HTMLの代わりに「PHP」と呼ばれるファイル(HTMLコードをひとかたまりで生成できるスクリプトを入れ込んだもの)を利用します。ただし、ユーザーに返す値はHTMLにする必要があります。

WordPressがあるWEBサーバー上にはデータベース「MySQL」があり、そこに作成したPHPに紐づいたデータが格納されています。PHPに書かれたスクリプトに対する結果が入っている感じですね。

ややこしいですが流れとしては、

ユーザーからのリクエスト→WEBサーバー上にあるWordPressが該当するPHPを選択しデータベースへ→データベースからPHPに紐づくデータをWordPressへ返す→WordPressは返ってきたデータからHTMLを生成しユーザーに返す。

つまりデータベースに記事などの情報がすべて入っていて、WordPressはそれを呼びだすためにPHPを使っているんですね。

メリットとしては、例えばHTMLでは記事毎にHTMLファイルが必要でしたが、PHPでは1つのファイルで多くの記事をデータベースから呼び出す事が可能になります。

運用が楽なんですね。

WordPressオリジナルテーマ作成の主な流れ

作成手順

かなりおおまかですが、下記に手順をまとめます。

①ベースとなるHTML/CSSのモックアップを用意する。

②WordPressのテーマフォルダにHTML/CSSを格納。

③PHPモジュールテンプレートの作成。(HTMLを各要素ごとに分割)

④各テンプレートファイルのHTML記述をPHPの記述に変更する。

⑤PHPで出力されるHTMLにCSSをあてる。

⑥テーマを公開する。(公開用サーバーにアップロード)

本記事では、③まで進めたいと思います。

HTML/CSSのモックアップ

今回は下記のHTML/CSSをベースにテーマを作成していきます。

冒頭のリンクにあるPHP完成テーマを、HTMLで再現したものになります。

今回はindex.htmlしか用意していませんが、投稿ページや固定ページのモックアップもあったっ方があとあと役立つと思います。

続いてCSSです。

WordPressのテーマフォルダにHTML/CSSを格納

テーマコピー

WordPressのthemesフォルダ内にHTML/CSSを格納します。

場所は図の通りで、

xampp/htdocs/wp-content/themes/〇〇←ココ

です。今回はtestフォルダにhtmlをいれてます。このフォルダがテーマ名になります。

PHPモジュールテンプレートの作成

モジュールテンプレート

PHPでは、各要素ごとに「モジュールテンプレート」を作成する事でPHPのコードで簡単にパーツを呼び出す事が可能になります。

例えば投稿記事の「header」「side」「footer」要素は基本的に同じ表示の使いまわしになると思います。

この部分を切り離してモジュールテンプレートとし、トップページのindex.php、投稿ページのsingle.php、固定ページのpage.phpの「header」「side」「footer」要素の部分に、切り離したモジュールテンプレートを呼び出す「インクルードタグ」のPHPコードを記述すれば、モジュールテンプレートの内容が呼び出されて反映される仕組みです。

HTMLでは全てのページに必要であった各要素の記述が、PHPによって各要素のテンプレが1つあればインクルードタグで賄えるわけです。

それでは、モジュールテンプレートを作成していきます。

各種PHPファイルの作成

モジュール・テンプレー

index.htmlの拡張子を「PHP」にリネーム後、他のPHPファイルをとりあえず空のものでいいので作成します。

CSSフォルダから「style.css」を取り出しておきます。フォルダは削除。

テキストファイルを新規で作成し、下記にリネームします。

header.php

sidebar.php

footer.php

single.php

page.php

functions.php(管理画面の設定等いろんな用途で使います)

header.php

index.phpの始めから</header>までをカットし、header.phpに張り付けます。

4行目をPHPのテンプレートタグに書き換えます。

27行目のCSS指定先をPHPのテンプレートタグに書き換えます。

</head>前に ?php wp_head(); ?> を追加。

sideber.php

index.phpの.side要素をカットし、sideber.phpに張り付けます。

.side要素終了タグ前に <?php dynamic_sidebar( ); ?> を追加します。

footer.php

index.phpのfooter要素以降全てをカットし、footer.phpに張り付けます。

</body>前に <?php wp_footer(); ?> を追加します。

index.php

index.phpからカットした要素の部分に、下記のインクルードタグを記述してモジュールテンプレートを呼び込むようにします。

<?php get_header( ); ?>

<?php get_sideber( ); ?>

<?php get_footer( ); ?>

WordPressテーマ設定確認

この時点で一度作成したテーマをWordPressで確認します。

まだまだPHPの関数に変更出来ていない箇所がありますが、とりあえずモジュールテンプレートが読み込まれているかを確認します。

モックアップの状態と同じ表示、動作が出来ていればOKです。

次回は「ナビゲーション」部分をPHPに変更していきたいと思います。