あがくナマケモノ.net

【テーマ自作を検討中のあなたへ】私が自作テーマを完成させるまでに踏んだ７つの手順

こんばんは！最近はコード書くのが楽しくなってきました、mati6166です。

今日のお昼頃、やっと描画不具合を解消しました！
いやー、原因を見つけた時・それが解消された時、すごく嬉しかったです！！

これをもって、正式に自作テーマ完成と言えそうです！

作ってみて思ったのですが、自作テーマは手順を追ってやっていけば、構えるほど難解な作業でもなければ途方もない時間がかかるものでもありません。

そこで今回は、私が自作テーマ完成させるまでの手順と、かかった時間についてまとめたいと思います！

「これから自作してみようと思うんだけど、、」という方の参考に少しでもなればと思います。

※「既にWordPressでブログを運用している」前提で話を進めていきます。
➡　よってここでは「本番環境構築」には触れていません。ご了承ください。

作成手順

手順はこんな感じです。

1. 1．ローカル環境にWordPressをインストールする。
2. 2．WordPressレッスンブックを一通りこなす。
3. 3．ペーパープロトタイピングをする。
4. 4．2で作ったテーマを元にカスタマイズしていく。
5. 5．各種ブラウザで表示テスト。
6. 6．本番環境にアップロード。
7. 7．CSSの最終調整。

ローカル環境にWordPressをインストールする。

いきなり本番環境でテーマを作るのは止めましょう。

当然ですが、コードを書いている間もブログを見に来てくれている人はいます。テーマの構成要素のひとつ「function.php」は、コードに誤りがあると、テーマが真っ白で何も表示されなくなったりします。
必ずローカル環境(自分の端末)にWordPressをインストールして、作業場を作りましょう！

ローカル環境の構築で参考にさせてもらったのはこちら！
死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法！（Mac編） | OZPAの表4

簡単にできるもんは簡単にすませちゃいましょう！
これであなただけの作業場ができあがりました！

WordPressレッスンブックを一通りこなす。

( ﾟДﾟ)y─┛~~
「ローカル環境も整った！さてどう料理してくれようか！？どれどれまずは標準テーマの中でも見てくれようか！？」

意気揚々とデフォルトテーマ「twentytwelve」の中を見ようとしたそこのアナタ！

ちょっと待って下さい！！
…いや、別に見てもいいけどさ。。

(;; ﾟДﾟ)y─┛~~
「え？WordPressも結局はWebサイトなんだからHTMLでしょ？なんでこんなにたくさんのファイルがあんの？しかもPHPて。。オレPHPできんし。。」

初めてテーマのディレクトリを見たときは私こんな感じでした。

「やっぱり難しいんやんけー！」とお嘆きの方！そんなことありません！
ここまで作り込まなくてもテーマはできるし、もちろんWordPressも結局はHTMLです。

ということで次はこれで一から勉強しましょう！

この本は、その名の通り、一からテーマを作るレッスンが載っています！
この本の良いところは、まず全体のHTMLを作ってから、それぞれのphpファイルに分割していく手順を体験することができることです。

これによってWordPressのテーマはこんな感じで作っていけばいいのかぁという感触が得られると思います。

ぜひ最後まで作って、仮の自作テーマを完成させましょう！
これが完成するだけでも結構達成感を味わえます♪

ペーパープロトタイピングをする。

仮の自作テーマができたら、いよいよオリジナルの作成ですね！

ここでも流行る気持ちを抑えて、一旦コードを書く作業は休憩。
「ペーパープロトタイピング」をしましょう！

「ペーパープロトタイピング」とは実際にコーディングを行う前に、紙などに完成イメージ等を書くことを言います。
これによって、目標設定をきちんと行い、コーディング中に迷いが生じないようにします。
(iPhoneアプリの開発とかにもペーパープロトタイピングは行いますよ！)

そこまで厳密にやらなくても良いです。
「ヘッダー部はこんな感じで〜、メインコンテンツとサイドバーはこんな感じ〜」とある程度ゆるくやりましょう！

ちなみに私はこんな感じになりました。

字が薄い？見にくい？
…雰囲気だけ感じて下さい。

2で作ったテーマを元にカスタマイズしていく。

さてここから本番な訳ですが、2で仮テーマを作りきっているあなたならきっとカスタマイズも上手く行くはず！

カスタマイズといってもPHPコードをゴリゴリ書く訳でもないです。
CSSのカスタマイズがメインといってもいいと思います。

よっぽど凝ったことをしないのであれば、大抵やりたいことはプラグインが提供されていたり、WordPress界の先輩方が実践されていたりするので、それを見ながらコツコツやっていきましょう！

オススメの作業の進め方は、「お手本になる先輩ブロガーさんのページのソースを読む」こと！

自分の目標であるブロガーさんを見つけたら、そのソースは立派な参考本になります。

ちなみに私は以下の先輩ブロガーさんのページを参考にさせて頂きました！

• ・OZPAの表4さん
• ・No Second Lifeさん
• ・和洋風KAIさん
• ・Last Day.jpさん
• ・みんなの扉を開くカギさん
• ・jMatsuzakiさん

「こんな感じのレイアウトにしたいなぁ〜。どれどれ…」と、気になったらソースを見るようにしていました。

【注意】本格的にCSSを編集する前にやっておくこと
HTML初心者が知っておくべきリセットCSS と3つのポイント | 3streamer blog
HTMLとCSSでコーディングを始める最初の段階で各ブラウザが持っているデフォルトのCSSを一度リセットしてしまおうというのがいわゆる『reset.css』と呼ばれるものです。これは上書きができるcs …

CSSリセットは必ずやっておきましょう！

しなきゃいけないとまでは言えませんが、これをやっておかないと次の手順で痛い目にあうと思いますよ。。

各種ブラウザで表示テスト

さて、やっとの思いでオリジナルテーマが完成しました！

「一刻も早く公開したい！」そう思うのも当然でしょう。
でもあと少しだけ待って！！

各種ブラウザでちゃんと表示されているか確認しましょう！
主要なブラウザ「Chrome」「Safari」「Firefox」ぐらいは確認しておいた方がよさそうです。

もっとも、前の手順でCSSリセットをしていれば特段問題ないかとおもいます！

本番環境にアップロード

お待たせしました！いよいよ本番環境にアップロードです！

アップロードする方法はいろいろあるかと思いますが、私はCyberduckというアプリを使いました。
Cyberduck 4.2.1（￥2,100）
カテゴリ: 仕事効率化, ユーティリティ
販売元: David Kocher – David Kocher（サイズ: 54.6 MB）
全てのバージョンの評価: （5件の評価）


※キャプチャを載せるためにAppStoreのリンクを貼りましたが、Cyberduckはフリーソフトウェアなので無料でダウンロードできます。（http://cyberduck.ch/）

WordPress管理者画面からテーマを選択したら、確認してみましょう！

CSSの最終調整。

確認してみました？どうです？上手く反映されてますか？

反映されてる！？おめでとうございます！ヾ(*´∀｀*)ﾉ゛

…反映されてない！？(　’・_つ・`)
反映されてないように見えるのには実は訳があります。

ちょっとこのソースを見てみて下さい。
これは本ブログのfooter部のソースです。

idに数字が振られています。

どうもウィジェット側で設定したパーツ(※)のidには末尾にランダムで数字が設定されるようなんです。だからCSSが反映されていないんですね！

でも修復は簡単！
その数字をCSS側に反映させてあげればいいだけです。これで上手く反映されるはず！

(※)本ブログでいうフッター部の「アーカイブ」「タグクラウド」「カテゴリー」、サイドバーの「人気記事」「最近の記事」を表示するプラグイン「WordPress Popular Posts」「Newpost Catch」等。

【最後に】ここまでにかかった時間をば

いかがでしたでしょうか？

「手順は分かった。でもこれってトータルでどれぐらい時間かかるもんなん？」

ですよね。当然気になる問題です。

この一連の作業にかかった時間、togglというWebサービスで計ってみたので最後にお知らせします。

「レッスンブックがもう少しで終わりそう」というぐらいで計り始めて、トータルで約38時間でした。
「全部の手順」という意味では、これにキリの良い時間をプラスしてざっと50時間ぐらいでしょうか。

どうでしょう？思ったより時間かからなくないですか？
私ははじめ100時間を見込んでいたのですが、約半分でこなせたという結果になりました。

1日1時間でも3ヶ月あればできます。2時間やれば1ヶ月弱でできますよ！

 

もちろん、「jQueryを使っていろんな動きをつけたい！」とか要望のレベルを上げると、それ相応の時間を要すると思いますが、最低限で良いのであればこれぐらいの時間で作れてしまいます。

「よっしゃ、作ってみるか！」と思って頂ければこれ幸い♪

02/03 [日] 6:00 PM | カテゴリー：06_WordPress | コメント(0)