なまら春友流

ラーメン屋店主兼ブロガーの春友がラーメン、ガジェット、日常について書くブログ

ど素人でも自作できたWordPressテーマの作り方。教科書は『WordPress デザインブック』

Sponsored Links


Wordpress image


先日WordPressテーマを自作した。
しかし自作したとは言っても実際はゼロからHTMLを書き出して作成したわけではない。
私はそんな知識は持ち合わせていないから。
タイトルで述べた「WordPress デザインブック」を教科書として、Chapterに沿ってコピペでPHPを組み立てていったにすぎない。
いわゆるコピペテーマ。
それでも世界にひとつだけのテーマ、愛着満点。

Sponsored Links


AGENDA

  1. なぜ作ろうと思ったか?
  2. 教科書「WordPressデザインブック」ってどんな本?
  3. WordPressをローカルにインストール
  4. WordPress デザインブック付録のCD-ROMもローカルに保存
  5. 実際の作業方法
  6. 表示具合のテスト
  7. 今まで使っていたテーマと置き換える
  8. 最後に


1. なぜ作ろうと思ったか

こちらの記事を読んだことで背中を押された。

[WordPrsss] ブログテーマ自作しました & 自作して感じたこと * ラクイシロク

以下引用。

このブログ「ラクイシロク」の全部を僕自身が管理できてるので、ますます愛着が持てる。サーバーを自分で借りて、ドメインを取得して、ブログテンプレートを作って、そこでブログ記事を書いて。
こんなに素晴らしい環境はないと思うのです。

こちらの記事でも「WordPress デザインブック」で作成してあると書いてあったので真似てみることに。
直接会ったことがある友人なのでわからなかったら聞けばいいかな〜くらいに考えてもいたのでw
実際は苦労したけど本を読むだけで作成することができた。
今後わからないことは教えてください、 @rakuishi07 さん。
そして、ブログを長く続けていくだろうという確信が最後の背中を押した。

2. WordPress デザインブックってどんな本?


2011年9月20日に初版第1刷が発行。
現在は初版第3刷目。
特徴として、添付のCD-ROMに各チャプターごとのPHPが収録されている。
このCD-ROMのおかげで作成できた(コピペ)と言っても過言ではない。
本書は全部で9つのチャプターで構成されており、基本サイトの構築から各ページのカスタマイズ方法等がわかりやすく説明されている。


私がこの本を推す理由はみっつ。

  • チャプター通り行えば予備知識がなくても自作できる
  • PHPがCD-ROMに収録されているのでコピペすることができ、打ち間違いがない
  • PHPの勉強ではなくWordPressテーマの作成&デザインに主眼をおいている

それでは実際に私の作成方法を記してゆく。

3. まずはローカルにWordPressをインストール

ローカルにWordPressをインストールすることで逐一プレビューしながらカスタマイズすることができるようになる。
MacでローカルにWordPressをインストールするにはMAMPというアプリケーションを使用する。
構築方法は以下の記事がものすごくわかりやすい。
記事の通りに行ってゆけばMacにWordPressをインストールできる。

おねえさんの分かりやすい説明付きで、Mac のローカル環境に WordPress をインストールしてみた – ウェブおねえさん

無料版とPRO版があるが私は現在でも無料版で問題なく使用できている。
Windowsの方はBitNamiというソフトを使用する。

超簡単&スピーディにローカル環境にPHP+MySQL 、WordPress構築を実現するBitNami – かちびと.net

BitNamiをMacにインストールしてWordPressのローカル環境構築をされる方はこちら。

死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法!(Mac編) | OZPAの表4

導入が終了すればWordPressをローカルで弄り倒せる環境が整う。

4. WordPress デザインブック付録のCD-ROMもローカルに保存

CD-ROMをそのままWordPressテーマを作成するPCに保存する。
ここからPHPをコピペするから。
ちなみに私はMacBookAir11インチを使用している。
そしてMBAには光学ドライブがない。
一度光学ドライブの備わっているWindowsPCに保存してからSugarSync経由でMBAに保存した。
今回の記事には関係ないけれどやっぱりクラウドって素晴らしい。

5. 実際の作業方法

それでは私の作業方法を記してゆく。
その前にもう1回言うが私はHTMLもCSSもど素人だしPHPなんて文庫しか知らなかった。
なのでこういうやり方もあるのか程度に思ってくれれば幸い。

まずはTextWranglerという無料のHTML&テキストエディタをインストールしよう。
(Windowsの方用のエディタはちょっとわからないので各自で調べてみてほしい)

TextWrangler 3.5.3(無料)
カテゴリ: 開発ツール, 仕事効率化
販売元: Bare Bones Software, Inc. – Bare Bones Software, Inc.(サイズ: 10.1 MB)

設定等はこちらの記事がわかりやすい。

無料だけどかゆいところに手が届く高機能なHTML&テキストエディタ「TextWrangler」 | けんけん.com

では実際の作業方法。

0制作風景 1


左側がMAMPからのローカル環境のWordPressのthemeフォルダ内。
右側がCD-ROMの各チャプターの内部。
私は「WordPress デザインブック」の初めからチャプター通りに作成していった。
その際にCD-ROM内のファイルをWordPress(ローカル)にコピペする。
(例えば header.php をコピペ)

スクリーンショット 2012 03 14 14 16 51


TextWranglerを立ち上げて本を読み進めながらコピペしてゆき、一段落ついたところで実際にプレビューしてみる。

1ヘッダー フッターのみ


基本的にこの繰り返しで少しずつ確認しながら作成した。
そうすることで中盤くらいからなんとなく繋がりが見えてくる。
ただPHP自体を理解しているわけではないので自分でまっさらなとこから書くことはできない。
漢字書けないけど読める、みたいなそんな感じ。
で、慣れてきたらスタイルシートもその都度自分の表現したいデザインにしつつ作り込んでいくようにした。

6. 表示具合のテスト

ヘッターやフッター等の枠組みを作成したら記事がないと表示の確認ができなくなる。
新規作成でWeb上に公開している自分の過去記事をコピペしてもいいが、ありがたいことに日本語版のテストデータを作成してくれている方がいる。
本当にありがたい。
このテストデータは管理画面のツール > インポートで「WordPress」からインストールすることができる。
以下のサイトからダウンロードできる。

WordPress テストデータ日本語版 | め組の小ネタ

自分の作成して公開している記事をまとめてローカルにインポートするのが一番いいんだろうけれどなぜかそれはやらなかった。
なぜなのかは思い出せないが作成途中のレイアウトがガタガタなテーマで公開してある記事を見ると後悔する気がしたからかもしれない。

7. 今まで使っていたテーマと置き換える

テーマが完成したら後はFTPでサーバーへ。
私はCyberduckを使用している。

Cyberduck 4.2.1(¥2,100)
カテゴリ: 仕事効率化, ユーティリティ
販売元: David Kocher – David Kocher(サイズ: 54.6 MB)

有料になっていたのは知らなかったが安定して使えるのでオススメ。

あとはCyberduckを起動してWordPressのThemesフォルダにDrag&Dropすると新しいテーマがサーバーにアップされる。

スクリーンショット 2012 03 14 17 52 53


これでWordPressの管理画面からテーマを変更できるようになっているのでテーマを有効化してみよう。

ドキドキ…

思ったように表示されていたら完了だ。

最後に

基本的にコピペで作成したテーマ。
でもかなりWordPressの全体像を把握する勉強になった。
各パーツ(.php)の持つ役割が少しずつわかってくると全体的な構造自体をだんだん理解できるようになってゆく。
そうすると自分流にカスタマイズする際にどこを弄れば良いかもなんとなくわかってくる。
これがわかっただけでもけっこういい収穫。
そしてなんと言っても1番の収穫はこれ、
とにかく更になまら自分のブログに愛着が湧きましたw

エビスコム
ソシム 2011-09
¥ 2,940


Sponsored Links


COMMENTS & TRACKBACKS

  • Comments ( 0 )
  • Trackbacks ( 1 )

No commented yet.

  1. […] ど素人でも自作できたWordPressテーマの作り方。教科書は『WordPress デザイン… […]

LEAVE A REPLY

*
*
* (公開されません)

Return Top