WordPress経験の浅い、PHP苦手の僕が初テーマ作成までにやったこと

OLYMPUS DIGITAL CAMERA

先日、無料WordpressテーマSimplicityを作成しました。

今年からWordpressを始めた僕ですが、いろいろなツールや参考ページの力を借りて、何とか初となるテーマを完成させることができました。

僕の、しょぼいなりに知っていることを総動員して作ったので、テーマ適用日の7月15日から昨日まで、悪くないというか予想以上に良い結果が出せています。テーマ適用からのアクセスの推移

(途中PVが微妙に少なくなったところは、「ページ/セッション」のような巡回率が悪くなったからで、ver20140722で対策済み。Googleのクロールも16日から21日でほとんど終わっています。)

もちろん、PVが増えだしたからといって、テーマのおかげではないと思います。ただ、テーマをSimplicityにしたからといって、SEO的に悪く評価されてアクセスが減るようなテーマではないと思います。

今回は、初めてこのSimplicityというWPテーマを作るためにやったこと、参考にしたものなどを、忘れる前に書いておこうかと思います。

photo by Christopher Ross

スポンサーリンク
レクタングル(大)広告

WordPressテーマを作った手順

僕がテーマを作った時はこのようにしました。

  1. ローカルにWordpress環境を作る
  2. WordPressテーマ作成に関する記事を読みまくる
  3. フリーのサンプルテーマを編集してテーマを作る
  4. 公開

主にやったことをざっくりと書くと、こんな感じになります。

以下では順を追って書いていきたいと思います。

ローカルのWordpress環境を作る

僕の開発環境は、Windowsですのでそれに合わせて書きます。

まずテーマを作るのに、ローカルで何度でも手軽に試行錯誤を繰り返せる環境が必要です。いちいち変更するたびに、サーバーにアップロードして試していたら面倒ですからね。

ということで、僕はローカルでの開発に、Bitnamiを利用しました。

参考にした記事は以下など。

開発環境は、EmEditorSublime Textを使いました。

この2つのエディターを使ったのは、以下のような機能目当てです。

  1. コード補完機能があるのでキー入力を少なくできる(僕のようなヘボグラマーには必須機能)
  2. 少ない入力からコードを生成するZen Coding/Emmetが使えるのでキー入力を少なくできる(EmEditorのZen Codingは、ちょっと古いけど)

とにかく、なるべくキーボードを打つ事なく、なるべく楽がしたいからです。あと、Sublime TextのEmmetでCSSを打ち込んだ日には、ザクザク書けて気持ちよくてクセになるというのもあります。

作った環境はこんな感じです。

WordPressテーマ作成関連の記事を読む

僕がテーマを作る前に、何度も読んだWPテーマ作成関連記事などを紹介します。

チュートリアル

これらの記事は本当にわかりやすくて、作りながらもわからないところが出てきたら読み返していました。

初めて WordPress でオリジナルテーマを作ろうと思ったとき、真っ先に参考にしたいのが公式のデフォルトテーマ...。でも最近のデフォルトテーマは、ちょっといろいろな機能もついていて複雑な構造をしています。今回は初めて WordPress
WordPressのオリジナルテーマ作成フロー・基本マニュアルです。もうすこし情報があってもいいなと思ったので書いてみることにしました。WordPressのオリジナルテーマ開発の為の一連の手順と環境作りなどを書いています。
はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。サンプル付きで、PHPやWordPressが初めての方にも分かりやすく解説しているつもりです。...
WordPressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者には少し難しいWord

いろいろな方のテーマ作成記事を読むことで、一方でわからなかった表現も、他の記事を読むことで理解できたりします。いろいろ読むことで「テーマ作成って、こんなことするんだな」というのが、素人なりにわかりました。

リファレンス

あと、作っていてHTMLやCSS、Wordpressなどでわからないことがあれば以下のページで、機能を確認しました。

HTMLタグ・スタイルシート・特殊文字等の早見表
SEOにも強く、表示も速くなるCSS(スタイルシート)によるホームページレイアウトの実践講座です。

WordPressに関しては、以下のチートシート(PDF)でカンニングしまくりました。(多少古い記述もありますが、コードがそのまま使えます。)

WordPressの覚え書きというか、カンニングペーパーです。コードなんぞをまとめました。他にもWordPressのチートシートはいたるところで記事にされていますが、CSSハックやCSS小技集に続き、これもまた自分用まと

PHPに関しては、特定のサイトで調べず、すべてググりました。PHPはユーザーが多いので、とりあえず検索すれば目当てのものが見つかります。

その他に参考にしたものはこちら→参考・技術情報

サンプルテーマをもとに作成開始

とりあえず、テーマを1から全部作るのは、とても面倒くさ大変そうだったので自由に編集して使えるテーマをカスタマイズすることにしました。

中でもとてもシンプルでカスタマイズしやすそうだった、WebデザインレシピSimpleSimpleを利用さしてもらいました。

先程のチュートリアルでも紹介した以下のページにあります。

初めて WordPress でオリジナルテーマを作ろうと思ったとき、真っ先に参考にしたいのが公式のデフォルトテーマ...。でも最近のデフォルトテーマは、ちょっといろいろな機能もついていて複雑な構造をしています。今回は初めて WordPress

SimpleSimple

今回作成したテーマをダウンロードすることができます。ライセンスは WordPress 同様、GPL にしてあるので自由に使っていただいて構いません。

チュートリアルで勉強したあと、このテーマをいじれば、理解度が早く、取っつきやすいです。

公開

で、シンプル(地味)なWordPress無料テーマ「Simplicity」を作ってみましたのエントリを書いたときぐらいに公開しました。

この記事あたりからテーマを作っていること言っているので、制作期間はだいたい1ヶ月くらいです。

作成したものは、Simplicityにて公開しています。

screenshot

そのままですぐに始められるので、これからWordpressを始める人にも簡単に使えると思います。けど、もともと、カスタマイズありきで作ったテーマなので、ブログを運営しながら、いろいろ自分好みの色に染めて利用するのがお勧め。

その後、Simplicityは、公開後も何度かバージョンアップして、機能追加&問題点を修正しています。

何か、改善点・不具合がありましたら、お気軽にご報告ください。

まとめ

とりあえず出来のことは置いといて、WP素人ながらテーマを一つ作ったことで、Wordpressの理解度が深まったのが1番の収穫です。

今まで、なんとなくコピペだけでテーマのカスタマイズを済ましていたところを、「ああ、ここは、こういう理由でこうなっているのか!」と気づくことがあったり、いろいろ調べているうちに「あっ、こんな方法もあるのか!」なんて、新たな発見もあったりして、作っててとても楽しかったです。

最初は何となく「作ってみようかな」的に始めたテーマ作りですが、Wordpressや、WPカスタマイズ好きなら、かなり楽しめるのではないかと思います。