WordPressテーマを作る

WordPressテーマの骨組みとおすすめブランクテーマ

ゼロからテーマを用意するのは大変。
ブランクテーマには、基本のテンプレートが揃っているので、作り始めをスピードアップしてくれます。

お客様からテーマ作成を依頼された時に、私はよくブランクテーマを使います。
この記事では、テーマの骨組みの作り方とブランクテーマをご紹介します。

WordPressテーマの骨組み

ブランクテーマを使う前に、まずは基本のWordPressテーマの骨組みを紹介します。

最低3つのファイルがあればテーマはできる

テーマに必要なファイルはこの3つです。

  • style.css
  • index.php
  • screenshot.png

フォルダにこの3つのファイルをいれます。
フォルダ名はテーマ名がわかるようにしてあげてください。
空のテーマフォルダ

style.css

テーマの情報をstyle.cssに書くことで、WordPressがテーマを認識してくれます。

サンプルとして以下のように書きましょう。


/*
Theme Name: SampleForest
Theme URI: https://0forest.com
Author: Emi Konno
Author URI: https://0forest.com
Description: This is my original theme
Version: 1.0
*/

ご自身の作りたいテーマの内容に変更してくださいね。
Theme Name:テーマの名前
Theme URI:テーマの配布元のURL
Author:製作者の名前
Author:製作者のURL
Description:テーマの説明

index.php

「index.php」にはなんでもいいのですが、


<html>
<head>
<title><?php bloginfo('name'); ?></title>
</head>
<body>
空のWordPressテーマ。
</body>
</html>

 

ひとつだけ、phpのコードを入れてみました。

<?php bloginfo('name'); ?> 

でブログのタイトルが表示されます。

screenshot.jpg

WordPressの管理画面からテーマのイメージとして表示される画像です。
テーマのスクリーンショットの画像やイメージ画像を入れます。
サイズは横880px×縦660pxが推奨。
テーマのスクリーンショット

初めての方は、ブランクテーマを使うと簡単よ

一から骨組み用にファイルを作るのは不便ですよね。
実は世の中にはブランクテーマ(デザインなどの装飾がされてない、カスタマイズ前提の骨組みだけのテーマ)が配布されています。

ブランクテーマをベースにカスタマイズをすると早いですよ。

ブランクテーマとは?

ブランクテーマとは、一言でいうと空のテーマ。
装飾などが一切されていない、基本のテンプレートファイルがセットになっています。
デザインを変更したり、必要な機能を追加すればテーマができあがります。

私もテーマ開発に必要なファイル構成やWordPress用の関数の書き方はブランクテーマを紐解くことで学びました。
プログラムを0から書くより簡単だし、時間も短縮になりますよ。

おすすめのブランクテーマ

私がよく使うのはこの2つ。

bones

Bones – An HTML5, Mobile-First starter theme for rapid WordPress development. – Themble

有名なブランクテーマ。
カスタム投稿タイプなど、便利機能がすでに実装されています。
コメントにコードの説明が細かく書かれていて親切!カスタマイズしやすいなと思います。

【追記:2019/1/20】 残念ながら、ダウンロードできなくなっています。。。

html5blank
HTML5 Blank WordPress boilerplate theme – build themes faster with HTML5 Blank
シンプルな構造でわかりやすいです。
ザ・テンプレートって感じで必要最低限のファイル、コードが書かれている。

understarp

UnderStrap

bootstrapのフレームワークに馴染んでいる人は、Bootstrap 4をWordPressテーマに組み込んだブランクテーマもおすすめです。(このテーマは公式ディレクトリからダウンロードできます)

<h2>テーマの導入方法

用意したテーマをZIPファイルにして、管理画面からアップロードする
テーマ>新規追加>テーマのアップロードから用意したファイルを入れることができます。
または、/wp-contents/themes/ の下にフォルダごといれても大丈夫。

テーマを有効化してみて、テーマのデザインが表示されたらOK。

まとめ

この記事では、WordPressのテーマの骨組みと、おすすめブランクテーマについて紹介しました。
テーマ作成の参考にしてくださいませ。