会社ホームページをWordPress化する方法

2025 3/31

2025年3月31日 2025年3月31日

1. WordPressの準備

サーバー・ドメインの用意
- レンタルサーバーを契約し、WordPressが動作可能な環境を用意します。
- ドメインを取得し、サーバーと紐付けます。
WordPressのインストール
- レンタルサーバーの管理画面や自動インストール機能を使ってWordPressをインストールします。

2. テーマを作るための基本知識

WordPressのテーマは、以下のファイルを中心に構成されます。

style.css
テーマの基本CSSやテーマ情報を定義するファイル。
functions.php
テーマ内で必要な機能を定義したり、プラグインのような挙動を追加したりするファイル。
header.php / footer.php / sidebar.php
ヘッダー・フッター・サイドバーを切り出して管理するファイル。
index.php, page.php, single.php など
投稿ページ・固定ページ・一覧ページなど、テンプレートの中身を管理するファイル。

HTMLとCSSのファイルを、WordPressのテンプレート階層にあわせて切り分け、必要に応じてPHPコードを挿入し、動的にコンテンツを表示させるようにします。

3. 既存HTML/CSSのデザインをWordPressに組み込む

3-1. オリジナルテーマとして構築する場合

WordPressテーマ用のフォルダを作成
- wp-content/themes ディレクトリ内に新しいフォルダを作ります（例：my-company-theme）。
style.cssにテーマ情報を追記/* Theme Name: My Company Theme Theme URI: https://example.com/ Author: 自分の名前や会社名 Author URI: https://example.com/ Description: 会社用のオリジナルテーマ Version: 1.0 */
- これを書かないと、WordPressでテーマとして認識されません。
HTMLをテンプレートファイルに分割する
- たとえば、全ページで共通となる<head>～</head>やヘッダ部分をheader.phpに、フッターをfooter.phpにまとめます。
- トップページはfront-page.phpまたはhome.phpに、固定ページ用はpage.phpに、ブログ記事用はsingle.phpにといったように、用途ごとにPHPファイルを作成します。
- 作成済みのHTMLからWordPressのテンプレートタグ（<?php the_title(); ?>や<?php the_content(); ?>など）を差し込む形で作り変えるのが一般的です。
CSSやJSを正しく読み込むようにする
- CSSやJavaScriptを読み込む際は、functions.phpでwp_enqueue_style()やwp_enqueue_script()を使うと、WordPress推奨の方法で読み込めます。
- 例： function my_company_scripts() { wp_enqueue_style( 'my-style', get_stylesheet_uri() ); wp_enqueue_script( 'my-script', get_template_directory_uri() . '/assets/js/script.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'my_company_scripts' );
WordPressの管理画面からテーマを有効化
- 管理画面の「外観 → テーマ」で、新規に作成したテーマを有効化します。

3-2. 子テーマとして構築する場合

デザインをすべて1から組み込み直すのが大変な場合や、ベースとなるテーマが既にあり、それをカスタマイズしたい場合に便利です。

親テーマを決めてインストール
- 有名なテーマ（例：Twenty Twenty-Threeなど）のデザインや機能をベースにする場合、まずはそのテーマをインストールします。
子テーマ用のフォルダを作成
- wp-content/themes配下に、親テーマ名-childのようなフォルダを作ります（例：twentytwentythree-child）。
style.cssとfunctions.phpを用意して子テーマとして認識させる/* Theme Name: Twenty Twenty-Three Child Template: twentytwentythree */
- Template の値は親テーマのフォルダ名と合わせます。
独自のHTML/CSSを盛り込む
- 子テーマのstyle.cssや追加のassetsフォルダなどで、独自デザインのファイルを読み込みます。
- 親テーマのテンプレートファイルを上書きしたい場合は、同名のファイルを子テーマに置くだけでWordPressが優先して読み込んでくれます。
- ただし、大幅にレイアウトを変える場合は、親テーマが提供しているheader.phpやfooter.phpをコピーしてきて必要な箇所を修正する、という方法を取るとよいでしょう。

4. サイト運用の流れとポイント

固定ページの作成
- 会社概要ページやサービス紹介ページなど、「ほぼ更新しないページ」を固定ページとして追加します。
- WordPress管理画面の「固定ページ → 新規追加」から投稿可能です。
お問い合わせフォームなどの機能追加
- Contact Form 7、Flamingoなどのプラグインを使ってお問い合わせフォームを作ります。
- 会社サイトでは必須の機能となる場合が多いです。
ブログ記事の運用
- 会社のニュースやブログコンテンツとして「投稿」を使います。
- トップページやブログ一覧ページに最新投稿を掲載できるようにしておくと、サイトの更新頻度を高めることができます。
SEO・セキュリティを意識した設定
- プラグイン（All in One SEO Pack、Yoast SEOなど）を導入してタイトルタグやメタディスクリプションを管理するとよいです。
- セキュリティ系プラグイン（Wordfence、iThemes Securityなど）を使って不正アクセス対策を行うことも重要です。
運用開始後のメンテナンス
- テーマ・プラグイン・WordPress本体の更新を定期的にチェックして最新版にしておきます。
- バックアッププラグイン（UpdraftPlusなど）の利用も検討し、万が一に備えてこまめにバックアップを取りましょう。

5. デザインをWordPress化する際のTips

テンプレート階層の理解
どのページがどのテンプレートを呼び出すかのルールを理解すると、効率よくHTML/CSSを当てはめられます。
再利用しやすいパーツ化
共通部分（ヘッダーやフッター、サイドバーなど）は積極的に別ファイルに分割し、get_header();やget_footer();で呼び出す形にすると修正の手間が大幅に減ります。
開発環境と本番環境を分ける
ローカル環境やテスト環境でまずカスタマイズを行い、問題がないことを確認してから本番環境に反映するのがおすすめです。