【テーマ自作を検討中のあなたへ】私が自作テーマを完成させるまでに踏んだ7つの手順あがくナマケモノ.net先人は言った。me【テーマ自作を検討中のあなたへ】私が自作テーマを完成させるまでに踏んだ7つの手順ツイートこんばんは!最近はコード書くのが楽しくなってきました、mati6166です。今日のお昼頃、やっと描画不具合を解消しました!いやー、原因を見つけた時・それが解消された時、すごく嬉しかったです!!これをもって、正式に自作テーマ完成と言えそうです!作ってみて思ったのですが、自作テーマは手順を追ってやっていけば、構えるほど難解な作業でもなければ途方もない時間がかかるものでもありません。そこで今回は、私が自作テーマ完成させるまでの手順と、かかった時間についてまとめたいと思います!「これから自作してみようと思うんだけど、、」という方の参考に少しでもなればと思います。※「既にWordPressでブログを運用している」前提で話を進めていきます。よってここでは「本番環境構築」には触れていません。手順はこんな感じです。1.ローカル環境にWordPressをインストールする。2.WordPressレッスンブックを一通りこなす。3.ペーパープロトタイピングをする。4.2で作ったテーマを元にカスタマイズしていく。5.各種ブラウザで表示テスト。6.本番環境にアップロード。7.CSSの最終調整。ローカル環境にWordPressをインストールする。本番環境でテーマを作るのは止めましょう。当然ですが、コードを書いている間もブログを見に来てくれている人はいます。テーマの構成要素のひとつ「function.php」は、コードに誤りがあると、テーマが真っ白で何も表示されなくなったりします。OZPAの表4簡単にできるもんは簡単にすませちゃいましょう!これであなただけの作業場ができあがりました!WordPressレッスンブックを一通りこなす。意気揚々とデフォルトテーマ「twentytwelve」の中を見ようとしたそこのアナタ!ちょっと待って下さい!!...いや、別に見てもいいけどさ。゚Д゚)y─┛~~「え?WordPressも結局はWebサイトなんだからHTMLでしょ?なんでこんなにたくさんのファイルがあんの?しかもPHPて。テーマのディレクトリを見たときは私こんな感じでした。「やっぱり難しいんやんけー!」とお嘆きの方!そんなことありません!ここまで作り込まなくてもテーマはできるし、もちろんWordPressも結局はHTMLです。いうことで次はこれで一から勉強しましょう!この本は、その名の通り、一からテーマを作るレッスンが載っています!この本の良いところは、まず全体のHTMLを作ってから、それぞれのphpファイルに分割していく手順を体験することができることです。これによってWordPressのテーマはこんな感じで作っていけばいいのかぁという感触が得られると思います。最後まで作って、仮の自作テーマを完成させましょう!これが完成するだけでも結構達成感を味わえます♪ペーパープロトタイピングをする。仮の自作テーマができたら、いよいよオリジナルの作成ですね!ここでも流行る気持ちを抑えて、一旦コードを書く作業は休憩。「ペーパープロトタイピング」をしましょう!「ペーパープロトタイピング」とは実際にコーディングを行う前に、紙などに完成イメージ等を書くことを言います。これによって、目標設定をきちんと行い、コーディング中に迷いが生じないようにします。(iPhoneアプリの開発とかにもペーパープロトタイピングは行いますよ!)そこまで厳密にやらなくても良いです。「ヘッダー部はこんな感じで〜、メインコンテンツとサイドバーはこんな感じ〜」とある程度ゆるくやりましょう!ちなみに私はこんな感じになりました。字が薄い?見にくい?...雰囲気だけ感じて下さい。2で作ったテーマを元にカスタマイズしていく。ここから本番な訳ですが、2で仮テーマを作りきっているあなたならきっとカスタマイズも上手く行くはず!カスタマイズといってもPHPコードをゴリゴリ書く訳でもないです。CSSのカスタマイズがメインといってもいいと思います。凝ったことをしないのであれば、大抵やりたいことはプラグインが提供されていたり、WordPress界の先輩方が実践されていたりするので、それを見ながらコツコツやっていきましょう!オススメの作業の進め方は、「お手本になる先輩ブロガーさんのページのソースを読む」こと!自分の目標であるブロガーさんを見つけたら、そのソースは立派な参考本になります。Day.jpさん・みんなの扉を開くカギさん・jMatsuzakiさん「こんな感じのレイアウトにしたいなぁ〜。どれどれ...」と、気になったらソースを見るようにしていました。blogHTMLとCSSでコーディングを始める最初の段階で各ブラウザが持っているデフォルトのCSSを一度リセットしてしまおうというのがいわゆる『reset.css』と呼ばれるものです。...HTMLとCSSでコーディングを始める最初の段階で各ブラウザが持っているデフォルトのCSSを一度リセットしてしまおうというのがいわゆる『reset.css』と呼ばれるものです。これは上書きができるcssの特性を利用した方法です。一度リセットしてまっさらな状態からCSSを書き始めればブラウザ間のスタイルの差異に頭を悩ませたり、余計なハックを使う必要も少なくなります。引用元:対象ページCSSリセットは必ずやっておきましょう!しなきゃいけないとまでは言えませんが、これをやっておかないと次の手順で痛い目にあうと思いますよ。各種ブラウザで表示テストさて、やっとの思いでオリジナルテーマが完成しました!「一刻も早く公開したい!」そう思うのも当然でしょう。あと少しだけ待って!!各種ブラウザでちゃんと表示されているか確認しましょう!主要なブラウザ「Chrome」「Safari」「Firefox」ぐらいは確認しておいた方がよさそうです。前の手順でCSSリセットをしていれば特段問題ないかとおもいます!本番環境にアップロードお待たせしました!いよいよ本番環境にアップロードです!アップロードする方法はいろいろあるかと思いますが、私はCyberduckというアプリを使いました。(5件の評価)※キャプチャを載せるためにAppStoreのリンクを貼りましたが、Cyberduckはフリーソフトウェアなので無料でダウンロードできます。(http://cyberduck.ch/)WordPress管理者画面からテーマを選択したら、確認してみましょう!CSSの最終調整。’・_つ・`)反映されてないように見えるのには実は訳があります。このソースを見てみて下さい。これは本ブログのfooter部のソースです。idに数字が振られています。ウィジェット側で設定したパーツ(※)のidには末尾にランダムで数字が設定されるようなんです。CSSが反映されていないんですね!でも修復は簡単!その数字をCSS側に反映させてあげればいいだけです。【最後に】ここまでにかかった時間をばいかがでしたでしょうか?「手順は分かった。これってトータルでどれぐらい時間かかるもんなん?」ですよね。この一連の作業にかかった時間、togglというWebサービスで計ってみたので最後にお知らせします。「レッスンブックがもう少しで終わりそう」というぐらいで計り始めて、トータルで約38時間でした。「全部の手順」という意味では、これにキリの良い時間をプラスしてざっと50時間ぐらいでしょうか。?思ったより時間かからなくないですか?私ははじめ100時間を見込んでいたのですが、約半分でこなせたという結果になりました。1日1時間でも3ヶ月あればできます。2時間やれば1ヶ月弱でできますよ!もちろん、「jQueryを使っていろんな動きをつけたい!」とか要望のレベルを上げると、それ相応の時間を要すると思いますが、最低限で良いのであればこれぐらいの時間で作れてしまいます。コメントをキャンセルメールアドレスが公開されることはありません。Marketingコメントフィードこのブログを書いている人1986年生まれ、大阪在住のSEもどき。iPhone、ライフハック、ブログ等に関心あり。A型かO型に見られるB型。「変わってるね」はほめ言葉です。一息」おみくじを何回も引いた場合、どれを正とすればいいの?【注意】auスマートバリューについて勘違いしていたたった1つのこと最近書きました!【お知らせ】6月末までブログ更新を不定期更新にします。