1.作成環境の用意
WordPressテーマを作成は、まずローカル環境で行ってください。 最初にそのためのセッティングを行います。
1.MAMPやXAMPPでデータベースを新規作成する 2.WordPressをインストールする
データベース名やWordPressのユーザー名等はお好きに設定して頂いて構いません。
2.WordPressの設定
インクルードタグやデザインを確認するために、必要な設定を行ってください。
- 投稿の追加
- カテゴリーの追加
- タグの追加
- ユーザープロフィール設定
- 日付・時刻形式の変更 ……など
投稿はダミーテキストのみではなく、実際に公開予定の記事（もしくはその下書き）を１つ作るとsingle.phpの見え方が具体的になります。
3.独自テーマを作成する
デザインから起こしたhtmlページを元に、Wordpressテーマファイルを作成していきます。 課題としてデザインを作成して頂いたのは * フロントページ - front-page.php * 記事一覧ページ - index.php * ブログ記事ページ - single-php
の３点です。
共通化できる部分は、それぞれテンプレートに切り分けて使用しましょう。 これまでの課題で作成したsearchform.php等を活用して頂いても構いません。
【例】
【主に行うこと】 * テンプレートファイルに分ける * functions.phpの作成 * WordPressタグへの置換 * WordPress出力に合わせcssの調整
その他にカスタムしたい方は エディターから挿入される見出し・リストなどに対してのcss追加 などお好みに合わせて変更してみてください。
必要に応じてテンプレート/プラグインを追加する
課題としてデザインを作成して頂いたのは３点以外に、 固定ページテンプレート - page.php カテゴリーテンプレート - category.php などを作成して頂いても構いません。
サイトの構成や使用したいページに応じてテンプレートファイルを作成してください。category.phpはindex.phpをベースに、page.phpはindex.phpをベースに作ることもできますね。
搭載したい機能がある場合はプラグインも導入してみて下さい。
4.動作確認を行う
テーマが形になったら、動作確認を行います。
【チェック例】 * エラーは無いか * ブラウザ幅を変えてもレイアウト崩れが無いか * 余白が設定されているか * スマホでリンク等がタップしやすいか * プラグインは正常に動作しているか
◆課題：独自テーマを作成してください
デザインもしくは前回のレッスンで作成したhtmlファイルを、WordPressの独自テーマにしてください。
過去の作品を使ってもOK
ポートフォリオサイトの作成で作ったsearch.phpなど、そのまま・多少変更して使えるテンプレートファイルはそのまま使って頂いて良いです。
ループやアイキャッチ画像有無の条件分岐などのコードも、コピー＆ペーストして必要箇所のみ変更するようにすると作業時間の短縮になります。