WordPressサイトを運営したり開発をしていると、「他の人はどんなテーマを使っているんだろう？」と気になることが多いと思います。しかし他人のWordPressサイトのテーマを調べる方法は以外に知らない人も多いはず。
そこで本記事では2つの手法でWordPressテーマを調べる方法を解説していきます。初心者の方はツールを使う方法、開発者の方はソースコードから調べていただくのがいいかと思います。
- WordPressテーマをツールを使って調べる方法
- WordPressテーマをソースコードから調べる方法
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
他サイトのWordPressテーマを調べておきたい理由
以下の理由から、他サイトのWordPressテーマを調べておくことはとても重要になります。
- 競合分析と市場理解
- SEOとパフォーマンスの最適化
- デザインの改善
順番に解説します。
競合分析と市場理解
他サイトのWordPressテーマを調べることで、競合他社がどのようなデザインや機能を採用しているのかを把握できます。これにより業界のトレンドやベストプラクティスを理解し、自分のサイトに活かすことが可能です。
例えばブログで使われるテーマと、製造業サイトで使われるテーマは明確に異なります。業種ごとに便利な専用WordPressテーマが存在していたりするので、リサーチしておくことで、Web制作者は大幅な時短が可能になったりします。
SEOとパフォーマンスの最適化
使用されているテーマがSEOにどのように影響しているかを知ることは、自分のサイトの検索エンジン最適化において重要です。
特にページ速度やモバイルフレンドリーなデザインはSEOに大きく影響します。他サイトがどんなWordPressテーマを使ってこれらを実現しているかを学ぶことで、自サイトのパフォーマンス向上につながりますし、WordPressの勉強をしている人はテーマ研究で実力を伸ばすことが可能。
デザインの改善
他サイトのテーマを分析することで、ユーザーエクスペリエンス（UX）やデザイン面でのインスピレーションを得ることができます。
直感的なナビゲーションや魅力的なビジュアルデザインは、WordPressテーマ独自のものを使っているケースが大半なので、もし既存テーマならテーマ選びの参考になります。
また、Web制作を独学している人は、既存テーマを研究することでWordPressテーマ制作の際の導線設計・デザインに約だったりしますね。
ここからは実際のWordPressテーマの調べ方を解説していきます。
手法①：WordPressテーマをツールを使って調べる方法【簡単】
WP-Searchを利用する
WordPressのテーマを調べられるツールにはいくつか種類がありますが、ぶっちゃけWP-Searchを使っていればいいと思います。
題材として東京フリーランスというサイトを勝手に使わせていただきますが、URLを入力するだけで、、、
このようにWordPressテーマだけでなく、サーバーやプラグインまで調べることが可能です。
WP-Searchが一番UIが見やすく、日本語対応されているため、これだけで完結しますね。ウェブ制作会社ベイジのように、WordPressの独自テーマだとしても調べることができます。
しかし一部WordPressサイトはテーマ情報を調べられません。しょーごログも無理でした。
基本的にテーマによってはソースコード上にテーマ情報を出さないコードになっているので、WordPressテーマの判断が不可能なのだと思います。
その他のツール一覧
おまけ程度ですが、WP-Search以外の候補ツールもいくつか挙げておきます。
手法②：WordPressテーマをソースコードから調べる方法【少し難しい】
ソースコードからWordPressテーマを調べる方法は少し高度ですので、基本的に制作・開発者向けになります。
まずはデベロッパーツール（検証ツール）を開いてください。
Win：Ctrl + Shift + I
Mac：Command + Option + I
デベロッパーツールを開いたら、デベロッパーツール上でコマンドで検索欄を出して、「themes」と検索してください。
すると、ソースコードの中でthemesの部分にフォーカスが当たります（themesとはWordPressにおけるテーマファイル一式が入っているフォルダ名を指します）
ここのURLを見ることで、使用しているWordPressテーマ名を見ることが可能です。この画像の場合は「Lionmedia」というテーマのようです。
ちなみにしょーごログの場合はソースコードを見てもテーマは分かりません。別に隠しているわけではなく、JINというテーマを使ってるんですが、このテーマはなぜか見えなくしてるんですよね笑
その他に以下の方法も存在します。
- style.cssとソースコード検索して探す（テーマの情報は大抵style.cssに書いてある）
- デベロッパーツールの「Sources」からwp-contentフォルダを探す
しかし、themesと検索して見つからなかった時点でこれらを隠蔽している可能性大なので、基本的にthemesが出てこなかったら諦めるのが懸命です。
WordPressテーマを調べて自分のサイト制作・運営に活かそう！
WordPressテーマを調べることで、WordPressサイト制作に勉強・研究に役立つのはもちろん、実案件でも競合研究に役立ちます。
本記事ではWordPressテーマの調べ方としてツールを使う方法と、ソースコードを検索する手法の2つをお伝えしましたが、正直WP-Searchを使っていればWordPressテーマ調査は十分です。
デイトラWeb制作コースに通っている人で上級編をやっている人や、しょーごログのWeb制作ロードマップを進めている人は、この機会に色んなサイトを研究してみると後半のWordPress課題がしやすくなるかと思います。
ちなみにWordPressテーマのおすすめは、とりあえずSWELLでOKです。正直私はJINから乗り換えたいです笑
SWELL – シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ
また、WordPressの自作テーマ開発を実践練習できるコーディング課題も出しているので、Web制作を勉強している人はこちらも参考になるかと思います。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
