WordPressテーマを作り始める。Initializr HTML5 というhtmlなテンプレートを元に。【テーマ作成 ①】

Written by

hayashikejinan

テーマ作成

WordPressのテーマを作る。テーマを作るための下準備・知っておいた方がいいこと。からの続きになります。

1から作るとは言ったものの、0から作るのは時間がかかるので、WordPressのテーマ用ではないHTML5なテンプレートを元に作っていきます。

せっかくなんで対応バージョンは3.6以上をターゲットに。

「テーマなんて作ったことないよー(つд⊂)ｴｰﾝ」なひとはいっしょにぜひ。

順次 Github にコミットしていきます。（最初張り切って英語でコミットしてますがそのうち日本語になるはず

WordPressに超絶詳しいわけでは全くないので不備等あったら是非コメントくださいまし。

自分でテーマを作ることのメリット

メリット、考えてみました。

ソース全部を把握できる…はず
テーマの更新に惑わされない
やりたい放題
色々試せる
日本語だけに対応すればいい（日本用なら
作りながらWordPressの勉強ができる

こんな感じですかね。やっぱり実際に打ち込んで動かさないと覚えられないです。

自分でテーマを作ることのデメリット

対してデメリットも考えてみました。

飽きる
やる気と比例してクオリティが上下（下がりがち
~~セキュリティ云々とかよくわかんない~~
~~こんな記事を書いたりすると怖いひとに突撃されるかもしれない~~

デメリットはないも同然ですね！

失敗して学ぶことの方が多いと思います。継続することが大事、あきらめないように。

わからないところは学びながらやればいいんですよきっと。

Initializrってなによ

HTML5 Boilerplate という HTML5 のフレームワークをベースにしたHTML5テンプレートのジェネレーターです。

HTML5 Boilerplate についてはHTML5カルタでおなじみの webcre8 さんが詳しく書いてらっしゃるので見ればいいと思うよ！

HTML5のサイトが素早く作れるフレームワーク「HTML5 Boilerplate」をちゃんと触ってみた – WEBCRE8.jp

簡単に言うと “HTML5でマークアップされた便利な機能がいっぱい詰まったテンプレートだよ” ってやつです。

Initializr でテンプレートを生成

まずは Initializrサイトへ。

デモを見るもよし、ドキュメントを見るもよしです。

レスポンシブなほうが望ましいのでレスポンシブをクリックしカスタマイズ画面へ。

クリックするとチューニングが開き、カスタムできます。

モバイルファースト等、とりあえず全部選んで Download it!

Initializr のファイル構成

jQuery の開発版以外はフルで選択しましたので色々詰まっています。

ファイル構成はこんな ↓ 感じ

initializr
│  .htaccess
│  404.html
│  apple-touch-icon-114x114-precomposed.png
│  apple-touch-icon-144x144-precomposed.png
│  apple-touch-icon-57x57-precomposed.png
│  apple-touch-icon-72x72-precomposed.png
│  apple-touch-icon-precomposed.png
│  apple-touch-icon.png
│  crossdomain.xml
│  favicon.ico
│  humans.txt
│  index.html
│  robots.txt
│  
├─css
│      main.css
│      normalize.css
│      normalize.min.css
│      
├─img
└─js
    │  main.js
    │  plugins.js
    │  
    └─vendor
            jquery-1.10.1.js
            jquery-1.10.1.min.js
            modernizr-2.6.2-respond-1.1.0.min.js

シンプルな構成ですね。

とりあえずこれフォルダごとをWordPressのthemesフォルダ（～/wp-content/themes/ ）に入れちゃいまして進めます。

フォルダ名はテーマに付けたい名前に変えておきましょう。※空白・日本語はダメです

もちろんWordPressテーマでないためこのままではテーマとして認識しません。

WordPressテーマに作り変えていく

いよいよです、ここからはWodrdPress Codexに従って触っていきます。

Theme Development « WordPress Codex

まずは style.css を作成

テーマを触ったことがある人なら見たことがあるかも、これがないと話になりません。

テーマの情報（スタイルも）を記述するところ。

Codexのサンプルより

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)

License:
License URI:

General comments (optional).
*/

style.css という名前で新規ファイルを作りサンプルをコピペして適宜変えます。

/*
Theme Name: テーマ名（日本語でも可）
Theme URI: テーマのURL
Description: テーマの説明
Author: 作成者
Author URI: 作成者URL
Version: バージョンナンバー
Tags: タグ

License: ライセンス形式
License URI: ライセンスURL

ここは好きに記述
*/

ちなみにぼくはこう。

/*
Theme Name: Hoho
Theme URI: http://hayashikejinan.com
Description: hoho theme for WordPress.
Author: hayashikejinan
Author URI: http://profiles.wordpress.org/hayashikejinan
Version: 0.1
Tags: orange, two-columns

License:
License URI:

好きに書いていいところ
*/

index.php を作ってテーマとして認識させる

style.css でテーマの記述が終わったので次は index.php を作ってテーマとして認識できるようにします。

といっても、テンプレートに index.html があるのでリネームすればOKです。

拡張子が見えないひとは見えるようにしておきましょう。（ついでに 404.html も 404.php にしておく

リネームができたらWordPress管理画面より外観 > テーマへ。

テーマを有効化して確認

有効化してやります。

サイトを表示してみます。

cssが読み込まれず、管理バーも表示されません。

ここからWordPress独自のテンプレートタグを使って組んでいきます。（ここまでをダウンロード

つづくはず

HTML5 theme