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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

Initializrってなによ

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

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

簡単に言うと “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に従って触っていきます。

 

まずは 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独自のテンプレートタグを使って組んでいきます。(ここまでをダウンロード

 

つづくはず


投稿日

カテゴリー:

投稿者:

タグ:

コメント

“WordPressテーマを作り始める。Initializr HTML5 というhtmlなテンプレートを元に。【テーマ作成 ①】” への7件のフィードバック

  1. Ebba_oBL Avatar

    連載始まった!

  2. abeshin22 Avatar

    愉快なこと思いつくなぁ。 → WordPressテーマを作り始める。Initializr HTML5 というhtmlなテンプレートを元に。

  3. s56bouya Avatar

    おー、さすが

  4. masterq Avatar

    ただ、PHPがないと動かないので、静的なWebページには使えない。。。

  5. Initializr | KNOW

    […] WordPressテーマを作り始める。Initializr HTML5 というhtmlなテンプレートを元に。【テーマ作成 ①】 | ホホ冢次男 […]

  6. ymn Avatar

    メモ。

コメント、してみません?

%d人のブロガーが「いいね」をつけました。