2017.01.06

WordPressのオリジナルテーマを一から作成する方法

WordPressでオリジナルのテーマを作成する場合色々なファイル一から用意したり、使いたい機能をfunction.phpに記述したりしなければいけません。一般的に必要なテーマのファイルとその作成の仕方をご紹介します。

※オリジナルテーマ作成に関して、ある程度関数やCSSなど基本的なものが用意されている「ブランクテーマ」というものもあります。

1.テーマで使うファイル一覧

テーマで使う基本的なファイルとその役割を一覧です。内容の記述の仕方は後ほどご紹介。

style.css メインのCSSファイル、これにテーマを宣言します。
screenshot.png テーマをWPの管理画面で見たときに表示されるテーマのイメージ画像（完成させてから撮ったり、デザインカンプを使用したり、なくてもOK
function.php 関数（機能）の追加や編集はこちら
header.php 共通のHeader（インクルード用）
footer.php 共通のFooter（インクルード用）
sidebar.php 共通のSidebar（インクルード用）
index.php 基本的なテンプレート（専用のテンプレートがない場合、最終的にこれが使われるので用意しておきましょう）
archive.php アーカイブ全般に適用されるテンプレート
single.php 投稿記事、カスタム投稿記事に適用されるテンプレート
page.php 固定ページで適用されるテンプレート
home.php サイトのフロント（トップ）ページとブログ投稿インデックスページに適用されるテンプレート
404.php サイト内で指定されたページがない時に表示されるテンプレート
search.php 検索結果を表示するテンプレート

さらに詳しく知りたい方はWordPressCodexのテンプレート階層を参照してください。

2.テーマ作成の流れ

テーマ作成から適用までの大まかな流れを紹介します。

      1. テーマ用のフォルダーを用意
        テーマ名はstyle.cssで宣言するのでフォルダー名は分かりやすい名前なら何でも大丈夫です
      2. テーマ用のフォルダー内にstyle.cssを用意。
        テーマの宣言をします
      3. その他必要なファイルをテーマ用フォルダーに用意。
        テーマで使うファイル一覧を参照してください
      4. テーマ用フォルダーをサーバーにアップロード
        以下のディレクトリーにアップロード
        WordPressのディレクトリー > wp-content > themes
      5. WordPress管理画面からテーマを選択
        WordPressの管理画面 > 外観 > テーマ からアップッロードしたテーマを「有効化」します。

3.style.cssでテーマの宣言

style.cssがテーマのフォルダにないとWordPressでテーマと認識されません。style.cssに以下のコードをコピペして使ってください。（Theme nameは必須ですがその他の項目ななくても大丈夫です。）
/*
Theme Name: テーマの名前
Description:テーマの説明
Theme URI: テーマの URL
Author: 作った人の名前
Author URI: 作った人の URL
Version: バージョン
License: ライセンス
License URI: ライセンスの URL
*/

Related Posts