WordPressテーマ選びとカスタマイズの極意|エンジニアが現場で語る「稼ぐための」思考法

目次

ビジネスの課題を解決できるエンジニア

「ねえ、WordPressのテーマって何が一番いいの? おしゃれなやつ教えてよ」

またか、と思いました。エンジニアとして活動していると、友人やクライアントからこの質問をされる回数は、挨拶される回数より多いんじゃないかと錯覚するほどです。
昔の私なら、「海外のThemeForestでかっこいいのを探せば?」とか、「勉強のために自作しなよ」なんて無責任なことを言っていたかもしれません。

でも、数々の炎上案件を鎮火し、納期に追われ、クライアントからの「なんかイメージと違う」というフワッとした修正依頼と格闘してきた今の私なら、こう答えます。
「悪いことは言わないから、黙ってSWELLを買っておきなさい。それが一番安上がりだから」

なぜプロのエンジニアである私が、自作でもなく、海外の高機能テーマでもなく、日本の有料テーマを推すのか。そこには明確な「生存戦略」があるからです。

この記事では、ネット上に溢れるアフィリエイト目的の「おすすめテーマランキング」には書かれていない、開発現場のリアルな視点から「テーマの選び方」「正しいカスタマイズの手法」について、泥臭く語っていきます。
画面が真っ白になった経験がない人には分からない恐怖や、納品直前にデザインが崩れた時の冷や汗など、私の失敗談も供養として書き残しておきます。

これを読み終える頃には、あなたは単に「テーマを選べる人」から、「テーマという道具を使いこなして、ビジネスの課題を解決できるエンジニア」へと進化しているはずです。

カフェのテーブルで、ノートPCを挟んで友人あるいはクライアントらしき人物に、真剣な表情でWebサイトの画面を見せながら熱弁している様子の線画イラスト

見た目で選ぶと地獄を見る?エンジニア的テーマ選定基準

初心者がテーマを選ぶとき、どうしてもデモサイトの「見た目」だけで選んでしまいがちです。
綺麗な写真、ふわっと動くアニメーション、洗練されたフォント。
「これを使えば、私のサイトもこうなるんだ!」と夢を見てポチる。わかります。私もかつてはそうでした。

でも、はっきり言います。デモサイトがおしゃれなのは、テーマが凄いからではなく、「使われている写真とレイアウト構成がプロの仕事だから」なんですよ。
中身がスカスカの状態でそのテーマを入れても、絶対にデモサイトのようにはなりません。

私がテーマを選ぶとき、デザインよりも重要視している「エンジニア的なチェックポイント」が3つあります。

1. 更新頻度と開発者の熱量

WordPress本体は、年に数回大きなアップデートがあります。
そのたびに、テーマ側も追従してアップデートしないと、機能が動かなくなったり、レイアウトが崩れたりします。
私が過去に引き継いだ案件で、最終更新が3年前のテーマを使っているサイトがありました。
PHPのバージョンを上げたら画面が真っ白になり、管理画面にも入れない。復旧だけで3日かかりました。クライアントからは「ただサーバーを更新しただけなのに、なんで壊れるの?」と詰められる始末。

だから私は、GitHubや公式サイトを見て、最終更新日がいつか、開発者がSNSで活発に発信しているかを必ずチェックします。
「機能が豊富」よりも「死んでいない」ことの方が、長期運用においては100倍重要なんです。

2. 内部構造とフックの充実度

これは少し技術的な話になりますが、エンジニアとしてカスタマイズする際、テーマのコードがいかに「行儀よく」書かれているかが死活問題になります。
WordPressには「アクションフック」や「フィルターフック」という、独自の処理を割り込ませる仕組みがあります。
良いテーマは、至る所にこのフックが用意されていて、親テーマのファイルを直接書き換えなくてもカスタマイズできるようになっています。

逆に、ダメなテーマはフックがなく、機能を足そうとするとコアファイルを直接いじるしかなくなる。
これをやると、テーマのアップデートでカスタマイズが全部消えるという悲劇が起きます。
Snow MonkeyやSWELLといった最近の人気テーマは、このあたりが変態的(褒め言葉)に作り込まれています。

3. ブロックエディタへの対応度

今さらクラシックエディタ(旧エディタ)にしか対応していないテーマを選ぶのは、ガラケーを新規契約するようなものです。
現在のWordPressは「Gutenberg(ブロックエディタ)」が標準です。
クライアントに納品した後、「ここ、ブログみたいに簡単に直せますよね?」と聞かれて、「いえ、HTMLを書いてください」とは言えませんよね。
エディタ画面での見た目と、実際のサイトの見た目がどれだけ一致しているか。独自のカスタムブロックがどれだけ使いやすいか。ここが納品後の満足度、ひいてはあなたの「修正対応の手間」を大きく左右します。

無料テーマ vs 有料テーマ|仁義なき戦いの結論

「最初は無料テーマで始めて、稼げるようになったら有料にすればいいですか?」
これもよくある相談ですが、私の答えは「NO」です。
本気でやるなら、最初から有料テーマを買うべきです。これはポジショントークではなく、単純なコスト計算の話です。

無料テーマ(Cocoon)の凄さと限界

誤解しないでほしいのは、無料テーマの代表格である「Cocoon」は、化け物級に素晴らしいテーマです。
機能面だけで言えば、数年前の有料テーマを凌駕しています。開発者のわいひら氏には足を向けて寝られません。
自分でブログを書くならCocoonで十分すぎるほどです。

しかし、「Web制作の案件」や「ブランドイメージが重要なサイト」となると、話は別です。
Cocoonは利用者が多すぎて、「あ、これCocoonで作ったな」と一瞬でバレます。デザインの骨格がどうしても似通ってしまうんですね。
それをCSSでゴリゴリにカスタマイズして、オリジナリティを出そうとすると、平気で20時間とか30時間かかります。
あなたの時給が2,000円だとしても、4$301C6万円分のリソースが溶けるわけです。

17,600円のSWELLを買う意味

一方で、現在国内シェアNo.1と言われる有料テーマ「SWELL」は、17,600円(税込)です。
高いと思いますか?
SWELLを入れるだけで、プロっぽいトップページが1時間で作れて、記事の装飾もクリックだけで完結します。
Cocoonをカスタマイズする時間の10分の1で、それ以上のクオリティが出せるんです。

エンジニアとして「稼ぐ」ことを考えるなら、時間は最も貴重な資源です。
17,600円をケチって数十時間をドブに捨てるより、サクッと課金して、浮いた時間で記事を書いたり営業したりする方が、どう考えても合理的ですよね。
これが「道具に投資する」という感覚です。

複数の有料テーマの公式サイトをモニターに並べて表示し、腕を組んで比較検討しているエンジニアの横顔の線画イラスト

カスタマイズの鉄則・初級編|CSSで見た目を変える

さて、テーマを導入したものの、「ここの余白をもう少し詰めたい」「見出しの色をブランドカラーに合わせたい」という要望は必ず出ます。
ここからがエンジニアの腕の見せ所ですが、初心者がやりがちな「NG行為」がいくつかあります。

「追加CSS」を活用せよ

WordPressの管理画面には「外観」→「カスタマイズ」→「追加CSS」という欄があります。
ちょっとした色変更や余白調整なら、ここに書くのが一番安全です。
リアルタイムでプレビューが見れるし、テーマのアップデートで消えることもありません。

!important の乱用は破滅への入り口

CSSが効かないとき、つい魔法の言葉 !important を使いたくなりますよね。
「効かない…ええい、インポータントだ!」
これでその場は解決するかもしれません。でも、それは借金をしているのと同じです。
!important はCSSの優先順位(詳細度)を強制的に最高レベルに引き上げる禁じ手です。
これをあちこちで使うと、後で「ここだけ色を変えたいのに、どこをいじっても変わらない!」という地獄に陥ります。

検証ツール(ChromeならF12キー)を使って、どのクラスがスタイルを当てているのかを確認し、詳細度を適切に計算して上書きする。
これがプロの仕事です。面倒くさがらずに、検証ツールと友達になってください。

カスタマイズの鉄則・中級編|子テーマとfunctions.php

CSSだけでは対応できない機能追加や、PHPレベルでのカスタマイズが必要になったとき、「子テーマ」の出番です。

なぜ「子テーマ」が必要なのか

親テーマ(購入したテーマそのもの)のファイルを直接書き換えてはいけません。
なぜなら、テーマのアップデートがあったとき、そのファイルが上書きされてしまい、あなたの書いたコードが跡形もなく消え去るからです。
「アップデートしたらサイトが初期化されました…」という泣きの相談を何度受けたことか。

子テーマを使えば、親テーマの機能を継承しつつ、差分だけを上書きできます。
最近の有料テーマなら、マイページから子テーマのzipファイルをダウンロードできるはずです。必ずそれをインストールして有効化してください。

画面が真っ白になる「White Screen of Death」

functions.php というファイルがあります。WordPressの動作を制御する心臓部です。
ここにコードを追加することで、機能を追加したり、挙動を変えたりできるのですが、このファイルは非常にデリケートです。

全角スペースが1つ入っただけ、セミコロンが1つ抜けただけで、サイト全体が真っ白になります。管理画面にも入れなくなります。
心臓が止まる瞬間です。
初心者のうちは、WordPressの管理画面上から functions.php を編集するのは絶対にやめてください。ミスった瞬間に詰みます。

必ずFTPソフト(FileZillaなど)を使ってファイルをダウンロードし、手元のエディタで編集してアップロードする。
そうすれば、真っ白になっても、元のファイルをアップロードし直せば戻せます。命綱なしで綱渡りをするのはやめましょう。

深夜の暗い部屋で、画面が真っ白になったPCモニターを前に呆然としている様子の線画イラスト

アクションフックとフィルターフックの魔術

エンジニアとして一歩抜きん出るために理解しておきたいのが、WordPress特有の「フック」という概念です。
これを使いこなせると、テーマのコアファイルを汚さずに、魔法のように機能を追加できます。

アクションフック(do_action)

「特定のタイミングで、独自の処理を実行させる」仕組みです。
例えば、「wp_head」というフックは、<head>タグの閉じタグの直前で実行されます。
これを使えば、Googleアナリティクスのタグを入れたり、独自のCSSを読み込ませたりといった処理を、テーマファイルをいじらずに functions.php から注入できます。

// 例:ヘッダーに独自のメッセージを表示する
add_action( 'wp_head', 'my_custom_header_message' );
function my_custom_header_message() {
    echo '<!-- 独自のタグ挿入 -->';
}

フィルターフック(apply_filters)

「特定のデータを、表示する前に書き換える」仕組みです。
例えば、記事の本文を表示する直前に、特定のキーワードをリンクに変換したり、文末に定型文を追加したりできます。

// 例:記事タイトルの先頭に【注目】をつける
add_filter( 'the_title', 'add_prefix_to_title' );
function add_prefix_to_title( $title ) {
    return '【注目】' . $title;
}

SWELLやSnow Monkeyなどの優秀なテーマは、いたるところに独自のフックが用意されています。
「記事下のこの部分にバナーを入れたい」と思ったとき、テンプレートファイルを直接編集するのではなく、フックを使って挿入する。
これができるようになると、メンテナンス性が劇的に向上し、「こいつ、できるな」と評価されます。

案件におけるテーマ選定とライセンスの罠

ここからは、実際に副業やフリーランスとして案件を受ける際の話です。
技術的なこと以上に、知っておかないとトラブルになるのが「ライセンス」の話です。

100%GPLとスプリットライセンス

WordPressの世界には「GPL」というライセンス形態があります。ざっくり言うと「自由に改変していいし、再配布してもいいよ」という精神です。
SWELLやSnow Monkey、Lightningなどは「100%GPL」を謳っています。
これはどういうことかというと、「一度購入すれば、複数のクライアント案件で使い回してもOK」ということです(※開発元によって規約が異なる場合があるので必ず確認してください)。

一方で、ThemeForestなどで売られている海外テーマや、一部の国内テーマは「スプリットライセンス」の場合があります。
これは「1サイトにつき1ライセンス購入してください」というものです。
これを知らずに、自分の持っているライセンスをクライアント案件で使い回すと、規約違反で訴えられるリスクがあります。

案件見積もりにテーマ代はどう含める?

私がクライアントワークをする場合、SWELL(100%GPL)を使うことが多いですが、見積もりにはどう記載するか。
基本的には「制作費」の中に含めてしまいます
「テーマ代:17,600円」と明細に書くと、「これ、私が払うんですか? 今後も課金されますか?」とややこしい話になりがちです。
それよりは、「Webサイト構築一式:〇〇万円(高機能テーマ導入費込み)」としてしまった方がスムーズです。

ただし、クライアント自身で今後もテーマのフォーラムを利用したい場合や、スプリットライセンスのテーマを使う場合は、「クライアント自身のアカウントで購入してもらう」のが鉄則です。
アカウントの譲渡や共有はトラブルの元です。面倒でも、クライアントにクレカを切ってもらいましょう。

クライアントとの商談中に、見積書を見せながら指を指して費用の説明をしているシーンの線画イラスト

自作テーマへの道|いつかはフルスクラッチ?

エンジニアとして勉強していると、「既存テーマを使わずに、ゼロから自作テーマ(フルスクラッチ)を作りたい」という欲求が出てきます。
それは素晴らしい向上心ですし、PHPやWordPressの構造を理解するために一度はやってみるべきです。
index.phpstyle.css だけのフォルダを作って、それがテーマとして認識された時の感動は、何物にも代えがたいものです。

でも、「実案件で自作テーマを使うか」は別の話です。
予算が100万円以上ある大規模案件や、独自性の高いデザインが求められるキャンペーンサイトなら、自作テーマの出番です。
しかし、一般的なコーポレートサイトやブログメディアの場合、既存テーマのクオリティと機能性を自作で再現しようとすると、途方もない時間がかかります。
SEO対策、構造化データ、レスポンシブ対応、ブロックエディタ対応…。これらを一人でメンテナンスし続けるのは修羅の道です。

「守破離」という言葉があります。
まずは既存テーマを使い倒し(守)、フックや子テーマでカスタマイズし(破)、最終的にどうしても既存のものでは対応できない要件が出てきた時に初めて自作する(離)。
この順番を守ることが、挫折せずに成長するコツだと私は思います。

FAQ|現場でよく聞かれる質問集

Q. テーマを変更したら記事のデザインが崩れました。どうすれば?
A. テーマ独自の装飾(ショートコードや独自ブロック)を使っていた場合、テーマを変えれば当然機能しなくなり、崩れます。
これを防ぐためには、記事本文にはなるべくWordPress標準のブロックを使うか、乗り換えプラグインが用意されているテーマ(SWELLなど)を選ぶことです。
修正するには、残念ながら一記事ずつ手作業で直すか、置換プラグインでHTMLを書き換えるしかありません。これが「テーマロックイン」の怖さです。

Q. 海外のおしゃれなテーマを使いたいのですが?
A. 英語が得意で、トラブル対応も自分でできるなら止めません。
ただ、海外テーマは「日本語フォント」を想定して作られていないので、導入した瞬間に「なんかダサい」となりがちです。
また、管理画面もマニュアルも全部英語です。クライアントが操作することを考えるなら、悪いことは言わないので国産テーマにしておきましょう。

Q. カスタマイズの勉強におすすめの本はありますか?
A. 本もいいですが、情報はすぐに古くなります。
一番勉強になるのは、「有名なテーマのソースコードを読むこと」です。
CocoonやSWELLのコードは、実力あるエンジニアが書いた「生きた教科書」です。
「この機能はどうやって実装してるんだろう?」と functions.php を覗きに行く習慣がつけば、あなたのスキルは爆上がりします。

自宅の作業デスクで、専門書を開きながらPC画面のコードと見比べて勉強している様子の線画イラスト

まとめ|テーマは「城」の土台である

WordPressのテーマ選びとカスタマイズについて、エンジニア視点で語ってきました。
いろいろ言いましたが、結局のところテーマは「道具」であり、あなたのWebサイトという「城」を建てるための土台です。

土台がしっかりしていれば、その上に自分の好きな装飾を施し、コンテンツという家具を並べ、素晴らしい城を築くことができます。
逆に土台がグラグラだと、どんなに良い記事を書いても、常に雨漏りや倒壊の心配をしなければなりません。

私がSWELLなどの有料テーマを推すのは、あなたが「土台作り」に時間を浪費するのではなく、「城の中身」を作ることに全力を注いでほしいからです。
そして、エンジニアとしてのスキルが必要になるのは、その土台の上で「もう少し窓を大きくしたい」「ここに隠し扉を作りたい」といった、オーナーならではのこだわりを実現する時です。

その時こそ、今回紹介したCSSやフックの知識が武器になります。
既存のものをうまく利用し、足りない部分を技術で補う。それが、賢いエンジニアの戦い方です。

窓から朝日が差し込む部屋で、完成したWebサイトが表示されたPC画面を前に、コーヒーを片手に達成感を味わっている様子の線画イラスト

さあ、あなたの城作りを始めましょう。
最高の土台を選び、あなただけのカスタマイズを加えて、世界に一つだけのサイトを作り上げてください。
エラーが出たら、ログを見て、ググって、直せばいいだけのことです。その一つ一つのトラブルシューティングが、あなたのエンジニアとしての筋肉になりますから。

あなたの構築するサイトが、誰かにとって価値ある場所になることを、心から応援しています。
コードは裏切らない。手を動かした分だけ、ちゃんと答えてくれますからね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いたエンジニア

金城 美咲のアバター 金城 美咲 フロントエンドエンジニア

フロントエンド領域に強く、UIの細部にまでこだわるデザイナー気質のエンジニア。React・Vueを扱い、モダン開発に柔軟に対応。人当たりがよく、相談しやすい雰囲気を持つ。休日はカフェ巡りやガジェット研究で新しい刺激を得ることが多い。

目次