【WP】オリジナルテンプレート作成手順

2017.09.07|サイト構築

基本覚書です。

他にもググったらいろいろと詳しく書いている方もいらっしゃいますので、そちらも並行してご参考くださるといいかと思います。

オリジナルテンプレート作成に当たって

WordPressにて、サイトを作成する場合、
WordPress内にあるテンプレートを使用してももちろん構いませんが、自分でデザインしたサイトをworldpressに反映させたい。

と思ったのがきっかけでいろいろと試行錯誤して作成した時に必要だったものを覚書のような感じで記事していきたいと思っております。

中にはもっといいコードの書き方などあるかもしれませんが…

 

オリジナルテンプレートに必要なデータ

オリジナルデザインのテンプレート作成に最低限必要なデータは実は

  • index.php
  • style.css

この二つで事足りるようです。

WordPressのオリジナルテーマを3時間で作成する手順
https://webseeya.com/2015/02/15/howto-wordpress-original-themes/

実はこれを用意してフォルダに入れ、圧縮してアップロードするだけでテンプレートはできます。

ただ、やっぱこれだけでできるといいましても、
あのページは?このページは?
といろいろありますよね。

ちなみに私は最低限これだけ用意します。

  • header.php
  • footer.php
  • index.php
  • page.php
  • single.php
  • archive.php
  • search.php
  • style.css

それプラスアルファ、

  • imgフォルダ
  • jsフォルダ
  • cssフォルダ
  • fontフォルダ

も併せて作成し、ページに必要なimg、js、css、fontの外部ファイルを格納するフォルダも作成します。

基本私は仕事用にベースとなるテンプレートを作成しており、そちらにワンセット最低限必要なもののベースを入れて、デザインが終わればすぐにコーディング・ページ作成に入れるように用意しています。

必要ファイルの解説

  • header.php …共通ヘッダー
  • footer.php …共通フッター
  • index.php …インデックステンプレートにもなるファイル
  • page.php …固定ページのテンプレート
  • single.php …単一記事のテンプレート
  • archive.php …一覧ページのテンプレート
  • search.php …検索結果のテンプレート
  • style.css …全体のベースとなるスタイルシート

さらに詳細は各テンプレートの内容を細かく記載する際に記述していきます。

ページを作成する手順

ページを作成する手順としては私は以下手順で作成しています。

  1. デザイン作成
  2. 通常のHTMLでのコーディング
  3. ページを分割してWPテンプレートに書き換え
  4. テンプレートをアップしてWPページ内で確認
  5. CSSを修正してプラグインを色々整理・設定して
  6. 最後表示確認をしてOKなら終了

必要ファイルを作成するタイミングは3のページを分割してWPテンプレートに書き換え
の段階となります。

この手順はいろいろとあると思いますが、1,2,3はだいたい一緒だと思います。

次の記事では具体的にファイルの説明や記述内容などを記載していきます。