本稿では、WordPressテーマの作り方について解説します。言っても、ゼロからテーマを作るのは少し大変。ここでは、すでにあるHTMLファイルを利用してテーマを作っていきたいと思います。テーマの仕組みや必要なファイルについても解説しています。テーマの構造がわかっていれば、子テーマを利用したテーマのカスタマイズもできるようになります。ある程度WordPressサイトを弄ったことがある方にも参考にしていただければと思います。WordPressテーマの仕組みそれでは、WordPressテーマの作り方について見ていきましょう。テーマの仕組みについて簡単に解説します。WordPressは一つのページを、複数のテンプレートファイルで構成しています。大まかに言うと、一つのページはヘッダーとフッター、コンテンツの3つの部分に分かれます。このそれぞれを異なるPHPファイルとして、別々に用意しているのです。実際にページが表示される時は、この3つのテンプレートを組み合わせて、一つのページとして表示しています。トップページであれば、index.phpとheader.php、footer.phpの3つが組み合わさっています。固定ページだとpage.phpとheader.php、footer.php、投稿ページだとsingle.phpとheader.php、footer.phpの3つです。WordPressテーマで使用できるテンプレートは上記の他にも多数あります。詳しくは、下記のWordPress公式オンラインマニュアルをご覧ください。日本語版テーマ作成の手順テーマ作成の手順です。本記事では、すでにあるHTMLファイル(下記)を使ってテーマを作っていきたいと思います。適当な名前で、事前にHTMLファイルを作っておいてください。/></head><body><header>ヘッダー</header><div>コンテンツ</div><footer>フッター</footer></body></html>テーマ用のフォルダをつくるはじめに、作成するテーマのフォルダを作りましょう。フォルダを配置する場所は、/wp-content/themes/の直下です。テーマ用のフォルダをsampleとするなら、/wp-content/themes/sampleとなります。テンプレートファイルをつくる次に、テンプレートファイルを作っていきます。ファイルの保存場所は、先ほど作成したテーマ用フォルダの中です。下記の3つのPHPファイルを作成して、保存してください。ファイルの中身は、まだ空欄で大丈夫です。index.phpheader.phpfooter.php今回はトップページのみ作成しますが、この他にも下に列挙したテンプレートも同時に作ることが多いです。home.phpsidebar.phppage.phpsingle.phparchive.phpcategory.phptag.phpsearch.php404.php各固定ページごとに、テンプレートを分けることもできます。ハイフンを使って、page-about.phpやpage-inquiry.phpなどのようにそれぞれのテンプレートを分ければOKです。HTMLを分割する次に、事前に用意しておいたHTMLを分割していきましょう。上から順番に、header.php、index.php、footer.phpの3つのファイルに分割します。/></head><body><header>ヘッダー</header><div>コンテンツ</div><footer>フッター</footer></body></html>これで、今回使うテンプレートファイルが揃いました。テンプレートをつくるHTMLを分割しただけでは、まだテーマとして動きません。WordPressに合わせて、テンプレートを修正していきましょう。header.phpheadタグ内の最後に、wp_headと記述します。これを書いておかないと、必要なコードを読み込めずページが表示されません。忘れずに追加しておきましょう。?></head><body><header>ヘッダー</header>その他にもtitleタグやCSSファイルのリンク先を変えていますが、話が逸れるのでここでは割愛します。index.phpindex.phpでは、分割したヘッダーとフッターを読み込むコードを追加します。?>footer.phpheader.phpと同じように、wp_footerを書き加えてください。あとは変更しなくて大丈夫です。?></body></html>style.cssを作成するテンプレートができたら、テーマのCSSファイルをつくりましょう。テーマ用のフォルダ直下にstyle.cssというファイルを作成して、冒頭に下記のコードを書き込んでください。※style.cssは、WordPressテーマの必須ファイルの一つです。作るようにしましょう。ライセンスのURL*/ここで記述した内容は、管理画面のテーマ選択画面で表示されます。テーマの名称など、わかりやすい名前にしておきましょう。CSSコードがある場合は、先ほどのコメントの下に書いておきます。以上で、テーマの骨組みが完成です。テーマ一覧画面から、ここで作成したテンプレートが選択・有効化できるようになっているかと思います。テーマ一覧画面では各テーマの画像(サムネイル)が表示されます。サムネイルがなくてもテーマは使えるのですが、配布予定のテーマであれば必須でしょう。サムネイルはscreenshot.pngという画像ファイルでつくり、サイズは880×660が推奨されています。あとがきWordPressのテーマ作成の基本について解説しました。骨組みができたら、WordPressの記事一覧(ループ部分)や投稿ページなど、テーマの詳細を作っていきます。今すぐ無料で見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。今すぐ無料でお見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。