こんにちは、ガタガタです。
先日、自作WordPressテーマを無料で公開・配布し始めました。
EASEL – 創作・同人サイトに特化した、シンプルで多機能なWordPressテーマ
イラスト・小説などを展示する創作・同人サイトに特化した国産無料WordPressテーマ。多彩な機能とシンプルなデザインで、サイト作りが楽しくなる。あなただけのアトリエを作りましょう！
ゼロからコードを書いたわけではなく、いわゆるブランクテーマをカスタマイズする形で制作したのですが、テーマ開発自体が初めての経験だったため、それでもかなり手間と労力がかかりました。
しかし、どんな機能があれば利用者が喜ぶのか、そしてその機能をつけるにはどうしたらいいかを考えるのはとても楽しく、思い描いた通りのテーマが出来上がったときは本当に感動しました。
2020年現在、世界のWebサイトのうち3分の1ほどがWordPressサイトであると言われています。コーダー、フロントエンドエンジニアとして仕事ができるレベルになるためには、WordPressテーマを自分で開発できることは大きな強みになるでしょう。（もしかしたら必須レベルかもしれません）
そこで、私が実際に「HTML/CSSでLPくらいはコーディングできるレベル」から「WordPressテーマが自作できる」ようになるまで、どんな方法で勉強したかを紹介します。
大切なのは、「開発者目線」と「利用者目線」の両方でWordPressテーマを知ることです。以下詳しく掘り下げます。
WordPressテーマについて、利用者目線で研究する
この項目に書かれていることは、WordPressにあまり触れたことがない方向けの情報です。すでに自分でWordPressサイトを運営したことがある人は、次の「開発者目線で研究する」まで飛ばしてOKです。
自分でWordPressサイトをいちから制作・運営してみる
何を差し置いても、まずは自分がユーザーになってみることが最重要です。WordPressサイトを「制作する」だけではダメで、少なくとも半年くらいは自分で運営してみることが肝心です。使用テーマは自作じゃなくて構いません。
WordPressが便利で使いやすいことは本当ですが、とはいえWeb制作の素人が扱うにあたっては難点も少なくありません。自分で実際に運営してみることで、WordPressの便利な点や、逆に不便な点を自分の手で洗い出し、肌で覚えることができるためです。
あなたがWordPressテーマ（サイト）を作る仕事を請けるとき、納品する相手（クライアント）はほとんどがサイト制作の素人です。何か分からないことが出てきても、自分でググって解決することはおそらくできません。
あらかじめ自分の肌でWordPressを知っておくことで、WPの良いところは活用し、悪いところをカバーするにはどんな機能をテーマに盛り込めば良いかが分かるはず。そうすることで、素人であるクライアントにも快適に使用できて、満足してもらえるようなテーマを作ることができるようになります。
他人の作ったWordPressテーマを、何種類か触ってみる
テーマを何種類か触ることで、以下のことがわかります。
- WordPressテーマにどんな機能を組み込むことができるか
- どんな機能があると、ユーザーが使いやすいと感じるか
- どんな機能がないと、ユーザーが使いにくいと感じるか
- 逆に、どんな機能が不要か
私が触ってみて参考になったのは次のテーマです。
Cocoon
Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。
日本では有名な無料テーマです。無料でありながらかなりの高機能なので、「こんな機能も実装可能なのか……」とか「この機能、便利すぎるから自分のテーマにも絶対ほしい」という発見が多く、大変参考になりました。
Cocoon開発者であるわいひらさんのブログ「寝ログ」に、Cocoonの機能の実装方法などが書かれているため、こちらも参考になります。
TCDテーマ
ワードプレステーマTCD
WordPressのテーマ・カスタマイズ情報サイト
TCDのテーマはかなり作り込まれていて、知識のない素人でもかなり自由にサイトをカスタマイズすることができます。初めて触ったとき、WordPressテーマでこんなことができるなんてと驚きました。
ただ、TCDテーマは有料でけっこう高額なので、自分で購入・利用するにはハードルが高そうです。私の場合は幸運にも仕事で扱う機会が多かったのですが、そういう機会があればぜひ中身をみて欲しいです。デザインもかなり洗練されていて参考になるので、デモサイトだけでも見る価値ありです。
WordPressテーマに何個も触れる機会なんてないんだけど……
当然ながらひとつのサイトで複数のテーマを扱うことはできないため、普通にサイトを運営していては「複数のテーマに触れる」というのは難しいです。かといって、複数のサイトを運営するのも現実的ではないですね。
そこでオススメしたいのがココナラ
で出品したり、公開依頼に提案を出して仕事をもらう方法です。他のクラウドソーシングサイトにはあまりないのですが、ココナラでは「既存のWordPressサイトのカスタマイズをお願いしたい」という軽めの依頼が結構出ています。
このような依頼をもらって、クライアントのWordPressサイトにログインできるようにしてもらえれば、クライアントのサイトで使っているテーマの管理画面やphpなどのファイルを覗くことができます。仕事をこなすことでおこづいかいももらえて、一石二鳥ですね！
また、自分のスキルを出品しておけば、待っているだけで依頼をいただくことも可能です。会員登録・出品は無料なので、まずは覗いてみてください。
WordPressを開発者目線で研究する
書籍で勉強する
WordPressはPHPと呼ばれる言語で作られているため、これを読み書きできるようにならなければ自由にカスタマイズすることはできません。とはいえ、HTML/CSSを理解できるまでこれたなら、PHPもすぐに習得できるはずです。
こちらの書籍は、PHPの基礎を学びながら、WordPressの機能がPHPによってどのように作られているかをやさしく解説してくれる良書です。WordPressの機能に触れながらPHPを学ぶことができるため、PHPだけを勉強するよりも言語の働きが想像しやすく、理解しやすいです。
この書籍だけでもなんとなくPHPは書けるようになりますが、そのあとドットインストールなどの学習サイトで詳しくPHPを学ぶようにすれば、よりスムーズにPHPが書けるようになるはずです。
詳解PHP 基礎文法編 (全34回)
Webサービス開発でよく使われるPHPの基礎的な文法について学んでいきます。
ブランクテーマで勉強する
ブランクテーマとはWordPressテーマの一種で、新規テーマ開発のベースになることが前提で、必要最低限の機能がついている代わりにスタイリングがされていないシンプルなテーマのことです。
WordPressテーマの勉強をするには、Bonesというブランクテーマを使うのがとてもオススメです。
Bones – An HTML5, Mobile-First starter theme for rapid WordPress development.
Bones is a WordPress Theme for Developers Built around the latest in Web Standards, Bones is a rock solid foundation to start any WordPress project. Keep what you need, remove what you don’t. It’s totally up to you. Bones is not a Framework Frameworks are great, but sometimes they make things more complicated than they …
※DOWNLOAD NOWボタンはリンク切れでダウンロードできないので、ボタンの上の「bones on github」からGithubへ飛び、「Clone or download」からダウンロードしてください。
Bonesの素晴らしいところは以下の通り。
- モバイルファーストのレスポンシブ対応で作られている
- カスタム投稿タイプ、カスタムタクソノミー、ウィジェットエリアなどがあらかじめ備わっている
- 機能を追加したい場合の例文および解説つき（英文）
- SASSがついているため、SASSを使った制作の参考にもなる
- ライセンスはかなりオープンで、改造、再配布、販売なども自由。納品物にも使えます
実は冒頭で紹介した自作WordPressテーマもBonesをベースに制作しています。ゼロからコードを書くよりかなり時間短縮できますし、解説付きなので（英語ですが）WordPressテーマ制作の知識がかなりつきます。
ある程度WordPressの知識がついたら、Bonesを使ってテーマを作ってみることで、テーマ開発の技術が爆速で身につきます。制作したテーマを配布することもできるので、オススメです！
まずは手を動かしてみましょう
もちろん学習の手段はひとつだけではありませんが、何よりも実際に手を動かして何かを作ることが重要です。
この記事を読んだら、ぜひ制作に向けて行動に移してください！
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。