WORK
メディアサイト向けWordPressテーマ制作
記事と著者のページを備えたWordPressテーマを制作しました。サイトの色、アイコン、カテゴリごとの画像を管理画面から変えられ、ファイルを直接編集せずに見た目を調整できます。
概要
記事と著者のページを出し、管理画面で色と画像を変えられる公開テーマです。記事の一覧と本文、著者のページはテーマが出し、色、アイコン、分類ごとの画像、外観は管理画面から調整します。ファイルを直接開かなくても、サイトの見た目の一部を管理画面で変えられるようにしています。
記事の一覧と本文、著者のページをテーマで出し、色、アイコン、分類ごとの画像、外観は管理画面から変えます。ファイルを開いて色の値を書き換えなくても、管理画面の操作が公開ページの見た目に反映されます。記事を追加しても、同じ色と画像のルールで表示されます。記事と著者のページを出し、色と画像は管理画面から変えて同じルールで表示します。設定は公開ページへ反映します。
課題
記事の一覧、著者、管理画面の見た目が、テーマの初期状態のままでした。色を変えるときも、分類ごとの画像を替えるときも、テーマのファイルを直接開いて直していました。著者のページと記事の一覧で、見出しや画像のルールが揃っていませんでした。見た目の変更がファイルの編集になると、文章の更新とスタイルの更新が同じ作業になっていました。
色や分類の画像を変えるたびに、テーマのファイルを直接編集していました。著者のページと記事の一覧で、画像の大きさや見出しが揃っていませんでした。文章の更新と、色の更新が同じファイル編集になり、どちらを直したかが見分けにくくなっていました。初期状態のテーマのまま公開すると、サイトごとの見た目にできませんでした。
対応
記事の一覧と本文、著者のページをテーマで出します。一覧から記事へ進み、著者のページではその人の記事をたどれるようにしています。管理画面では、色、アイコン、分類ごとの画像、外観を画面から調整できます。調整した内容はテーマの表示に反映し、記事を追加しても同じ色と画像のルールで出るようにしています。ファイルを開いて色の値を書き換える手順を、管理画面の操作に移しています。
一覧から記事の本文へ進み、著者のページではその人に紐づく記事をたどれます。管理画面では色、アイコン、分類ごとの画像、外観を選びます。選んだ値はテーマの表示に渡り、次の記事でも同じルールが適用されます。公開ページを見ながら、ファイルの中の色コードを探して書き換える手順を、管理画面に移しています。
構成
テーマは WordPress、PHP、JavaScript です。記事と著者のページは PHP のテンプレートが出し、管理画面の色選択、アイコン、分類画像、外観の調整は JavaScript が受けます。本文は WordPress の投稿です。管理画面で選んだ色と画像を、公開ページの表示へ渡すところまでをテーマの中に含めています。別の画面フレームワークは使っていません。
PHP のテンプレートが記事、一覧、著者のページを出します。管理画面の色選択、アイコン、分類画像、外観の操作は JavaScript が受けます。本文は WordPress の投稿です。管理画面で保存した見た目の設定を、公開側のテンプレートが読んで表示します。別の画面フレームワークは使っていません。