既存のWordPressサイトを”参考”にして、HPを自作方法。10WEB?知らない子ですね～
はじめに（導入）
競合他社のHPを真似したいと思っても、「何から始めればいいのか分からない」「オリジナルデザインを作るのが難しそう」と感じる人は多いのではないでしょうか。実は既存のWordPressサイトを参考にすることで、意外と簡単にオリジナルのテーマを作ることができます。
本記事では、既存のWordPressサイトを参考にしながら、自作テーマを作成する方法を詳しく解説します。特定のサイトを丸ごとコピーすることも可能です。※自己責任でお願いします
初心者でも実践しやすいよう、具体的な手順を紹介するので、ぜひ最後まで読んで実際に試してみてください。
事前準備
自作テーマを作る前に、必要なツールや環境を準備しましょう。WordPressのローカル環境を構築し、スムーズに作業を進めるために、以下のツールをインストール準備してください。
必要なツール
自作テーマの作成には、以下のツールを使用します。
Visual Studio Code（VScode）：コードエディタ。PHPやCSSの編集に使用 （使い慣れているものがあればそれでも可）
Local（WordPressのローカル環境構築ツール）：オフラインでWordPressサイトを動作させるために使用
Save All Resources（Chrome拡張機能）：Webサイトのデータ（HTML、CSS、画像など）を保存するツール
IsItWP：サイトがWordPressで作られているかを判別するオンラインツール
Localを使ったWordPress環境のセットアップ
Localのインストール
公式サイト（https://localwp.com/）からダウンロードし、インストールする。
新しいサイトを作成
Localを起動し、「Create a New Site」をクリック。
任意のサイト名を入力し、「Continue」を選択。
「Preferred」環境を選択し、「Continue」をクリック。
WordPressの管理者情報（ユーザー名・パスワード）を設定し、「Add Site」をクリック。
WordPressの管理画面にログイン
作成したサイトの「Admin」ボタンをクリックし、ログインする。
天下のGMO様が私より詳しく導入方法を説明しているブログ↓
以上で、ローカル環境が整いました。次に、参考にするサイトを選び、データを取得する手順を説明します。
参考にするサイトを選ぶ
自作テーマを作成するにあたり、まずは参考にするサイトを選びます。ただし、どのサイトでも良いわけではなく、いくつかのポイントを押さえて選ぶ必要があります。
参考サイトがWordPressで作られているか確認する
WordPressのサイトを参考にする場合、そのサイトがWordPressで作られているかを確認する必要があります。これにはIsItWPというオンラインツールを使用します。
※WordPressで作成されていなくても、マネ”参考”できるのですが今回は初心者向けですのでWordpressサイトに限定します。
IsItWPの使い方
IsItWPの公式サイト にアクセスする。
検証したいサイトのURLを入力し、「Analyze Website」ボタンをクリックする。
サイトがWordPressで作られている場合、その情報が表示される。
参考サイトを選ぶポイント
参考サイトを選ぶ際には、以下の点に注意してください。
シンプルな構造のサイトを選ぶ
初心者がテーマを作成する際は、シンプルなデザインのサイトを選ぶと理解しやすくなる。
デザインやレイアウトが好みに合っているか
最終的に作成するサイトの方向性と合っているかを確認する。
参考サイトのデータを取得する
参考にするサイトが決まったら、サイトのデータを取得します。これにはSave All ResourcesというChrome拡張機能を使用します。このツールを利用することで、HTML、CSS、JavaScript、画像などのリソースを一括でダウンロードできます。
Save All Resourcesを使ったデータのダウンロード手順
Chromeに拡張機能をインストールする
Chromeウェブストアから「Save All Resources」を検索し、追加する。
参考サイトのページを開く
ダウンロードしたいページを開き、ページの読み込みが完了するのを待つ。
Save All Resourcesを実行する
Chromeのツールバーから拡張機能のアイコンをクリックし、「Save All Resources」を選択する。
「Save All」ボタンを押すと、サイト内のリソースがすべて保存される。
保存されたファイルの確認
ダウンロードフォルダ内にHTML、CSS、JavaScript、画像ファイルなどが格納されていることを確認する。
著作権に関する注意点
この方法で取得したデータは、あくまでも学習目的で使用する必要があります。取得したサイトのデザインやコードをそのまま使用するのは、著作権の侵害にあたる可能性があるため注意が必要です。データを参考にしつつ、オリジナルのテーマとしてアレンジを加えることを前提に進めましょう。
著作権に引っかかりそうなものだけ変えてとかは考えないように！
コードも完コピするとバレます。まぁちょっと変えればばれないですが
次は、ダウンロードしたデータを基にWordPressテーマを作成する手順を解説します。
WordPressテーマとして組み込む
ダウンロードしたデータをもとに、WordPressの自作テーマを作成します。WordPressのテーマは、特定のフォルダ構造やファイル形式に従って作成する必要があります。
ダウンロードしたファイルの確認
wp-content/pluginsの内容をチェック
取得したデータのフォルダ内に「wp-content/plugins」が含まれている場合、そのサイトで使用されているプラグインが確認できる。
自作テーマで必要な機能を実装する際に参考にする。
必要なファイルを整理する
ダウンロードしたHTML、CSS、JavaScript、画像ファイルを確認し、不要なものを削除する。
WordPressのテーマファイルとして適用しやすい形に整理する。
WordPressテーマの基本構造
WordPressのテーマを作成するには、最低限以下のファイルが必要となる。
index.php：トップページのテンプレート
style.css：デザインのスタイルシート
header.php：ヘッダー部分のテンプレート
footer.php：フッター部分のテンプレート
functions.php：テーマの機能を定義するファイル
HTML/CSSをWordPressに適用する
ダウンロードしたHTMLをindex.phpに変換
取得したHTMLをもとに、WordPressのテンプレートタグを埋め込む。
例：<title><?php bloginfo('name'); ?></title> でサイト名を動的に表示。
CSSをstyle.cssに適用
ダウンロードしたCSSを整理し、WordPressのスタイルシートとして適用する。
必要に応じて、管理画面から変更可能なスタイルを設定する。
ヘッダー・フッターを分割してheader.php、footer.phpを作成
header.php には <head> やナビゲーションメニューを配置。
footer.php にはコピーライトやフッターメニューを記述。
functions.phpで追加機能を設定
テーマの基本設定やカスタムメニュー、ウィジェットの有効化などを行う。
例：add_theme_support('menus'); でメニュー機能を有効化。
この作業が完了すると、基本的なテーマの形が整う。次は、作成したテーマを適用し、動作確認を行う。
テーマを適用して動作確認
作成したテーマをWordPressに適用し、正しく動作するか確認します。ローカル環境でテストすることで、修正が必要な箇所を洗い出しやすくなります。
テーマの適用手順
テーマフォルダをWordPressのテーマディレクトリにコピー
作成したテーマフォルダを「wp-content/themes」ディレクトリに移動する。
管理画面からテーマを有効化
WordPressの管理画面にログインし、「外観」→「テーマ」を開く。
作成したテーマが一覧に表示されていることを確認する。
テーマを選択し、「有効化」ボタンをクリックする。
トップページを開いてデザインを確認
ヘッダーやフッターが正しく表示されているか確認する。
CSSが適用されているかチェックする。
プラグインの動作確認
wp-content/pluginsの内容を確認
参考サイトで使用されていたプラグインがある場合、管理画面の「プラグイン」メニューから同じものをインストールする。
有効化し、設定を適用する。
プラグインとテーマの互換性を確認
カスタム投稿タイプやウィジェットが正しく動作するかチェックする。
必要に応じてfunctions.phpに追加のコードを記述し、調整を行う。
レイアウト崩れや動作不良の修正
デベロッパーツールを活用
Chromeのデベロッパーツール（F12キー）を使用し、エラーの有無を確認する。
CSSやJavaScriptの適用状態をチェックする。
エラーログの確認
Localのエラーログを確認し、PHPエラーが発生していないか確認する。
デザインの微調整
必要に応じてstyle.cssを修正し、レイアウトを調整する。
メディアクエリを使用し、レスポンシブデザインを適用する。
動作確認と修正が完了したら、本番環境にテーマを導入するステップに進む。
本番環境に導入して完成
ローカル環境で作成したテーマの動作確認が完了したら、本番環境に適用します。本番環境への導入は慎重に行い、必要に応じてバックアップを取ることが重要です。
本番環境への導入手順
レンタルサーバーの準備
WordPressがインストールされているサーバーを用意する。
FTPクライアント（FileZillaなど）やサーバーの管理画面にアクセスできるようにする。
ローカル環境のデータを本番環境にアップロード
作成したテーマフォルダを「wp-content/themes」ディレクトリにアップロードする。
必要なプラグインがある場合、「wp-content/plugins」にアップロードし、管理画面から有効化する。
管理画面でテーマを有効化
WordPressの管理画面にログインし、「外観」→「テーマ」から作成したテーマを選択し、有効化する。
サイトを表示し、レイアウトやデザインが崩れていないか確認する。
動作確認と最終調整
各ページを開いてデザインやコンテンツの表示が正しいかチェックする。
スマートフォンやタブレットでもレイアウトが崩れていないか確認する。
必要に応じてCSSやテンプレートファイルを微調整する。
バックアップとトラブル対策
本番環境に適用する前に、必ずバックアップを取ることが重要です。特に、既存のサイトを運営している場合、トラブルが発生すると復旧が難しくなるため、バックアップを取得しておくと安心です。
プラグインを活用する方法
「UpdraftPlus」や「BackWPup」などのバックアッププラグインを使用する。
データベースとテーマファイルを定期的にバックアップする。
手動でバックアップを取る方法
FTPクライアントを使用して、「wp-content」フォルダをダウンロードする。
phpMyAdminからデータベースをエクスポートする。
これで本番環境への導入が完了し、オリジナルのWordPressテーマが適用された状態になる。最後に、記事全体のまとめと今後のステップについて解説する。
まとめ
この記事では、既存のWordPressサイトを参考にしながら自作テーマを作成する方法について解説しました。参考サイトの選定からデータの取得、WordPressテーマへの組み込み、動作確認、本番環境への導入までの流れを紹介しました。
おさらい
事前準備
VScode、Local、Save All Resources、IsItWPなどのツールを準備。
参考サイトを選ぶ
IsItWPを使って、WordPressで作られたサイトかどうかを確認。
サイトのデータを取得
Save All Resourcesを使用して、HTML、CSS、JavaScript、画像などのリソースをダウンロード。
WordPressテーマとして組み込む
ダウンロードしたファイルを整理し、WordPressのテーマ構造に合わせて適用。
動作確認と調整
Local環境でテーマを適用し、デザインや機能をチェック。
必要に応じてCSSやテンプレートを修正。
本番環境に導入
FTPクライアントを使用してサーバーにアップロードし、動作確認を行う。
バックアップを取得し、トラブルに備える。
今後のステップ
自作テーマをさらに発展させるために、次のような取り組みを行うとよい。
オリジナルデザインを加える
参考サイトをそのまま再現するのではなく、オリジナルのデザインやレイアウトを加えて差別化する。
機能を拡張する
カスタム投稿タイプやカスタムフィールドを導入し、柔軟なコンテンツ管理を実現する。
レスポンシブ対応を強化する
スマートフォンやタブレットでの表示を最適化し、より使いやすいデザインにする。
SEO対策を行う
metaタグの最適化や構造化データの追加を行い、検索エンジンでの評価を向上させる。
この手順を繰り返し実践することで、WordPressテーマのカスタマイズスキルを高めることができる。今回の方法を活用しながら、自分だけのオリジナルテーマを作成してみよう。
次回は実践形式で実際に参考サイトを用意し、導入するまでを画像付きで説明していきます。
いいなと思ったら応援しよう！
