2019年3月29日WordPressのテーマを自由自在にカスタマイズするためには、テーマの構造を理解しなければならない。それには、独自でテーマを作って見るのが一番近道だ。いう事で、テーマを試作することにした。その記録を備忘録の意味も兼ねて記録していこう。静的サイトからWordpressのテーマを作る場合の工程は以下の通りだ。発展1.HTMLとCSSで静的サイトを作成するWeb化したいコンテンツ(文章や画像)を用意する通常、Webサイトを立ち上げたいと考える人は、公開したい内容を既に持っている。(持っているから公開したいと考えるのだ)まだ文章化されていなかったり画像化されていなかったりする場合は、要点だけ記述したサンプルコンテンツでもいいので準備する。サイトマップとワイヤーフレームを考案するサイトマップとはWebサイトのページ構成の事で、ツリー図で表現する。これは、コンテンツを内容に応じて分類分けすればよいが、ユーザー視点で考案してもいい。ワイヤーフレームとはページごとのレイアウトのラフ案だ。コンテンツの配置ももちろんだが、下層ページなどへのリンクボタンやナビゲーションボタンをどう配置するのかを考えるので、サイトマップと見合わせながら考えるといい。フォトショップで、実際の画面を作成するワイヤーフレームにしたがって、実際の線や色を使ってWEBページのイメージを作成する。画像でしか表現できない部分をpng画像ファイルとして書き出すタイトルロゴや背景画像、アイキャッチ画像など、HTMLとCSSでは表現できない部分を画像ファイルとして保存しておく。HTMLタグとCSSを組んでいくHTMLエディタを使って、まずコンテンツ(文章)を流し込み、見出しや本文、目次などアイテムごとにHTMLタグを設定していく。レイアウトやデザインはフォトショップで作ってあるWEBページイメージを見ながらCSSを使って設定していく。2.静的サイトをWordPressへ変換するa.静的サイトの各ページを、固定ページか投稿ページを決めて、PHP形式のファイルで保存する。b.CSSファイルのヘッダにWordpressテーマの宣言を書く。c.ページ内の動的部分をphpの構文に差し替え、Wordpressデータに置き換えていく。本当にHTMLサイトを完成させる?さてここで鶏が先か卵が先かについて整理していこう。WordPressのテーマを作るには元になるHTMLサイトが必要だ。コンテンツを更新しやすくするのがWordPressを使う理由なので、HTMLサイトがコンテンツも含めてあらかじめ完成しているケースはほとんどない。答えは、HTMLテンプレート(ひな形)サイトを作成する、だ。HTMLテンプレート(ひな形)を作る際に、Photoshopなどで作成したWeb画面から、ボタン画像などを作ってしまうと、後からWordpress化した時に追加出来ない部分となってしまう。ヘッダーの背景やロゴの画像、サイト全体の背景画像などはいいとしても、それ以外例えばメニュー項目などはボタン画像等にしない方がひな形化しやすいだろう。視覚的デザインは扱う情報内容によって後から変えたくなるので考えるのは後まわしにして、サイトのジャンルだけをあらかじめ設定しておき、情報の構造(サイトマップやワイヤーフレーム)を決めてテンプレートとする、という事だ。サイトのジャンルを決める例えば以下のようなジャンルがあるが、自分が今作ろうとしているサイトは何のジャンルかを定めておく。サイトマップとワイヤーフレームを作る自分が作ろうとしているサイトのサイトマップとワイヤーフレームを作る。サイトマップとは、各ページ間の親子関係をツリー上に整理した図の事だ。概要情報が親ページで、詳細ページが子ページといった具合に整理していく。ワイヤーフレームとは、1ページ内での文字や画像、リンクボタン等の配置をラフスケッチしたものだ。この時、自分が作ろうとしているサイトのジャンルを念頭に置き、ネット上に公開されている同じジャンルのWEBサイトがどのような構成になっているのかを参考にしながら作成する。最終的にはそのジャンルでの標準的なひな形にしたいからだ。PhotoshopでWEB画面イメージ作成ダミー画像とダミー文章を使ってPhotoshopでWEB画面イメージを作成する。Photoshopではなくても他のペイントソフトでもOK。言えば、手順4のタイトルロゴなどの必要画像が別途準備できるのであれば、この手順3は省略してもよい。タイトルロゴと背景画像とアイキャッチ画像を書き出す画像の書き出しも、ここではあくまでダミー画像で問題ない。手順2や手順3で作成したWEB画面イメージと見比べながら、HTMLエディタ等でHTMLとCSSを使ってWEBページを作成する。まとめ実際のWEBサイトを作るのとの違いは、WEBサイトのジャンルを意識して、ダミー文章とダミー画像を使ってサイトを仕上げていく点だ。発展HTMLひな形として完成させてしまってもよいのだが、もっと柔軟にカスタマイズできる状態でおいておく方法もある。headタグ部分の内容とサイトサイズくらいをひな形としておき、グローバルメニューの配置やタイトルロゴの場所など、各パーツはHTMLソースとしていつでも簡単にコピペできる状態で別に保存しておいて、あとから都度自由にレイアウトしてから使う、という方法だ。ひな形HTMLの一歩手前の、アレンジ可能なHTMLひな形というわけだ。コメントをキャンセルメールアドレスが公開されることはありません。静的サイト(HTMLサイト)をWordPress化する目的WordPressサイト(WordPressテーマ)を作成する事前準備としてなぜHTMLサイトが必要だっただろうか。それは、WordPressテーマファイルの実行結果がHTMLページだからだ。※本サイトはプロモーションを含みます。AFFINGER4.。