WordPressでオリジナルテーマを作る方法【制作のプロが解説】
コンテンツを頻繁に公開するサイトやブログが付帯したサイトを作るときはCMS（コンテンツマネジメントシステム）の利用が適しています。
しかしプログラミング言語のPHPの知識が必要なため、サーバーに直接スクリプトをアップロードする方法より難易度が上がります。
今回はhtmlで作成したサイトをWordpressに移行して運用する方法を解説します。
「人手不足でコンテンツの更新が追いつかない…」「サイトのリニューアルを機に楽な運用方法を取り入れたい」と考えている方はぜひご覧ください。
WordPress化のメリット
htmlをWordpress化するメリットは次のとおりです。
- 更新の負担が減る
- 希望のデザインを簡単に実装できる
- SEO対策になる
それぞれ詳細を解説します。
更新の負担が減る
WordPressに切り替えれば日常的な更新業務は管理画面から記事を投稿するだけで完了します。
いちいちhtmlを追加してサーバーにアップロードする必要がなく、工数の減少による負担軽減を期待できます。
今まではページごとにプログラミング言語を記述し、FTPソフトを介してスクリプトを追加する面倒な処理が発生していました。
WordPressではブラウザ経由で管理画面にアクセスした後、テキストや画像を入力して公開ボタンを押すだけで済みます。
特にブログの投稿やお知らせの更新が頻繁にある場合、サイトの運営にかかる手間が一気に少なくなるでしょう。
希望のデザインを簡単に実装できる
コーディングの知識がなくても、既存のテンプレートを利用して希望のデザインを取り入れられます。
WordPressには無料で利用できるテーマのほか、デザイン性や拡張性に優れた有料テーマが多数あるためです。
スマートフォンの閲覧を想定したレスポンシブデザインもデフォルトで備わっています。
複数のテーマを比較・検討してデモサイトをチェックすれば、ニーズに合致するものが一つは見つかるでしょう。
既製品とはいえヘッダーやフッター、サイドバーなどのパーツデザインも豊富に備わり、後から気に入ったものへ自由に変更できます。
SEO対策になる
WordPressにはデフォルトでSEOのさまざまな設定ができる仕組みが導入されています。例えば以下が該当します。
- 検索結果に表示されるタイトルの設定
- 検索結果に表示される説明文（メタディスクリプション）の設定
- OGP（SNSで記事を拡散する際に使われる画像）の設定
- ナビゲーションの設定
- 階層をもつURL構造の設定
- XMLサイトマップの自動生成
さらにプラグインを追加して検索エンジンの評価を受けやすいオプションを簡単に追加できます。
htmlの状態のままSEO対策を施すと難解なコードを記述する必要があり、経験やノウハウをもつ専門的な人材がいないと対処できません。
またWordpressは数あるCMSのなかでもきめ細やかなSEOの実施に適したツールです。
WordPress自体が備える基本的な機能に加えてSEO対策に特化したプラグインもさまざまです。
検索エンジン経由で集客したいと考える方は真っ先に検討したいCMSの一つだといえます。
WordPressの運用が適しているケース
htmlの管理をやめてWordpressの運用に切り替えたほうがいいケースを紹介します。
- コンテンツの更新頻度が高い
- SEOをマーケティングの主軸に据えたいと考えている
- サイト管理の工数を下げたい
- デザインにこだわったサイトを作りたい
お知らせやブログの投稿をはじめ、頻繁にサイト上のコンテンツを更新するならWordpressがおすすめです。
投稿が容易で管理画面のUIもわかりやすいうえ、カテゴリ・タグ別に記事を見やすく分類する機能が備わっています。
検索エンジンは新鮮な情報を好む傾向があるため、常にコンテンツを最新の状態に保つよう意識するとSEOにも有利です。
作って終わりではなく記事を定期的に更新し続けることが重要です。
気持ちだけに頼ると途中で挫折する可能性が高くなるため「1日1回はブログを新しく公開する」というように業務フローに組みこむと続かなくなる事態を防げます。
【初めてでもわかる】htmlをWordpressにする手順
本題のhtmlをWordpressに移行する手順を紹介します。
1.ローカル環境の構築
はじめに動作確認やバグの修正のために用いるローカル環境を構築しましょう。
ローカル環境とは自分のパソコン上に作った独自の開発環境を表し、開発したテーマの挙動をチェックできます。
インターネット上に公開しないため、万一画面が表示できないバグが発生しても外部に影響を与えずに済みます。
途中でデザインが気に入らないと感じてもテストの時点なら自由に変更して何の問題もありません。
コードを修正しつつリアルタイムで実装がうまくいったか確認できるため、開発の効率性が格段に上がります。
WordPressのローカルの開発環境の構築に適したツールはDockerです。本番環境へのシームレスな移行が可能なスケーラビリティの高い優れたアプリケーションです。
Dockerを用いたWordpressの開発環境の構築方法は次の記事で詳しく解説しています。
2.ディレクトリを準備
htmlを記述した際の一般的なディレクトリ構成は次のとおりです。
次にDocker上にインストールしたWordpressのディレクトリにテーマ用のフォルダを作成します。保存先は「html」→「wp-content」→「themes」です。
後ほどWordpressの管理画面でテーマを有効化することを考えて、テーマの名称をフォルダ名につけたほうが良いでしょう。
3.必要なファイルの準備
はじめにスクリプトを動かすために必要なstyle.cssとindex.phpを準備します。テキストエディタを使用して新しくファイルを作成しましょう。
いきなりindex.phpという聞きなれない言葉を聞いて困惑した方もいるかもしれません。
オリジナルテーマを開発する際はWordPress独自のテンプレート構造について理解が必要です。
WordPressではページの役割に応じて使用すべきひな形が決められています。
主要なテンプレート構造の種類と機能を以下にまとめました。
| テンプレート名 | 概要 |
| index.php | 他のテンプレートが存在しない場合に適用するファイル
使用例：TOPページや投稿一覧ページ |
page.php | 固定ページ用のテンプレート。他と独立してカテゴリやタグをもたないページに使用
例：会社紹介や事業紹介 |
| single.php | 投稿ページ用のテンプレート。ブログ記事のひな形に使用 |
category.php | カテゴリごとに記事を分類して一覧を表示するテンプレート
例：ECサイトの商品一覧やブログ投稿 |
archive.php | 記事の一覧を表示するテンプレート。主にカテゴリ別ではなくすべての記事を出力したいときに使用 |
tag.php | 特定のタグが付された記事を表示するテンプレート |
| sercheform.php | 検索フォームに設置に使用するテンプレート |
search.php | 検索結果の出力に使用するテンプレート |
| privacy-policy.php | プライバシーポリシーページの固定ページ用テンプレート |
index.phpは他に当てはまるテンプレートが存在しないときに使用するひな形です。
ページ1枚のサイトではホームページの役割をもち、他にもブログ投稿の記事一覧を表示したい場面で使用します。
style.cssはすでに作成したスクリプトの内容を書き写せば問題なく機能します。ただし冒頭に以下の記述が必要です。
記載した言葉がWordpressの管理画面上でテーマの名称として認識されます。注意点はTheme Name:の後ろに必ず半角スペースを入れることです。ないとWordpressが認識せずファイルをインストールしてもテーマを表示できません。
4.テーマの動作確認
index.phpにindex.htmlの中身をコピー＆ペーストで移したら、Dockerのテスト環境のURLにアクセスします。
正常に動作すれば管理画面の「テーマ」に制作した独自テーマが追加されているはずです。
他のテーマと同様サムネイル画像が欲しいと感じた方はテーマディレクトリの直下に「screenshot.png」を配置してください。推奨サイズは 1200×900(px) です。
5.パーツごとに分割
テーマを有効化して「サイトを表示」でプレビューするとCSSのスタイリングが効いていない生のhtmlが出力されるはずです。現時点では表示が不完全でも問題ありません。
WordPressの独自テーマを有効にするにはheader.phpとfooter.phpの二つのパーツが必須です。
header.phpの作成方法
基本的にはindex.phpのheadタグとメニュー部分をそのまま移植します。
どこまでheader.phpに含めるべきか厳密なルールはありません。
次にWordpressで正常に表示するためにhtmlのコードをphpバージョンに修正します。以下が修正例です。
上の画像の赤枠で囲った<?php wp_head(); ?>は必須の記述です。
htmlのhead内では自分で作成した、またはCDNを通して外部スクリプトを読み込んでいましたが、header.phpで取得する処理は非推奨のため一旦削除します。
6行目のmeta name＝”descriptionから始まるコードは検索結果に表示されるディスクリプションを生成する箇所です。
上記ではbloginfo()関数を使用して管理画面で設定した内容を出力する仕組みを取り入れています。
bloginfo()関数はWordpressの独自関数の一種です。他にもテーマ作成では以下の関数が頻繁に使われます。
body_class()：ページに応じて別々のクラスを付与できる関数- get_template_part()：独自に作成したテンプレートのパーツを取得・表示する関数
- the_excerpt()：投稿記事の抜粋文を生成する関数。デフォルトの設定は110文字。
- the_content()：投稿した記事の本文をすべて生成する関数。ブログ記事のテンプレート（single.php）で使用する
- the_post_thumbnail()：アイキャッチを表示する関数。()内に因数を埋め込むことで画像サイズの調整が可能
- home_url()：URLを取得・表示する関数。サイト内リンクを張り巡らす際に使用
home_url()関数はセキュリティのリスクを下げるためエスケープ関数（esc_url()）と一緒に記述するケースが一般的です。
footer.phpの作成方法
htmlのfooter以下の部分を切り離してfooter.phpを作成します。
下から三行目の<?php wp_footer(); ?>が必須です。
記述を怠るとページの最後で読み込む必要があるjavascriptのスクリプトが機能しない可能性があります。
最後にヘッダーとフッダーを抜き取ったindex.phpに<?php get_header(); ?>と<?php get_footer(); ?>と記載してください。
- get_header()：テンプレートファイルにheader.phpを読み込ませる関数。通常はbodyタグの直前に使用
- get_footer()：テンプレートファイルにfooter.phpを読み込ませる関数。通常はmainタグの直後に使用
オリジナルテーマの作成時によく使用するテンプレートのパーツは以下が挙げられます。
- sidebar.php：ウィジェットエリアや著者プロフィール、人気記事一覧の表示に使用
- comments.php：コメント欄を表示するテンプレート。投稿ページや固定ページに使用
- searchform.php：検索フォーム用のテンプレート。検索フォームを設置する場合、検索結果画面の作成が必要になる
6.外部スクリプトの読み込み
オリジナルテーマにスタイリングした独自のCSSやテーマのみで使用するアニメーションを記述したjavascriptはfunctions.phpを通して読み込みます。
実はheader.phpやfooter.phpから取得しても表示自体はできるのですが、wordpress本体やプラグインと競合して正しい動作を妨げる場合があります。
またfunctions.phpを経由すればページごとに異なる機能をもたせる柔軟な運用が可能になり、保守性が向上するでしょう。
header.phpやfooter.phpは全ページ共通のテンプレートのため、一部のCSSやjavascriptを読み込ませる細かな運用には向きません。
functions.phpは管理画面の設定をはじめ、テーマ全体にまたがる重要な設定を一元的に扱うテンプレートです。
外部スクリプト以外にもぱんくずリストの表示や管理画面のウィジェットの表示などさまざまな設定ができます。
記述に少しでも間違いがあるとテーマ全体が正常に動かなくなるため、細心の注意が必要です。
使用するのは次の二つの関数です。
- wp_enqueue_style：テーマ内で使用するCSSを読み込ませる関数。読み込み順序やバージョン番号の更新に使う因数あり
- wp_enqueue_script：javascriptの読み込みに使用する関数
上記の画像では複数のスタイルシートをまとめて取得するmy_enqueue_styleという独自の関数を定義しています。
add_action〜は処理を実行するタイミングを決める記述です。
add_action(‘wp_enqueue_scripts’, ‘関数名’);と記載すればオリジナルテーマ内のCSSが一貫して問題なく動作します。
読む込むファイルの指定にはテーマのディレクトリを取得するget_stylesheet_directory_uri()、またはget_template_directory_uri()を使用します。
array()ではスクリプトの読み込み順序を指定できます。
例えばスライダー系のプラグインjQueryのライブラリslick-jsを利用する場合、処理を記述したスクリプトより前に読み込まなくてはいけません。
上記の画像ではmain.jsのarray()引数を使用しています。
7.画像パスの書き換え
最後に画像やアイコンをWordpressの推奨する方法で取得しなくてはいけません。
get_template_directory_uri()関数を使用してテーマのディレクトリを取得した後、相対パスを記載します。
例えばimageフォルダ内のsample01.imgを読み込む際の記載は次のとおりです。
- <img src=”<?php echo get_template_directory_uri(); ?>/image/sample01.img”>
get_template_directory_uriでは/（スラッシュ）まで取得できません。ディレクトリ名を記載する前に書き入れることを忘れないでください。
WordPressの画像は相対パス以外に下記のようにドメインからのルートを示した絶対パスによる指定も可能です。
- <img src=”https://example.com/wp-content/themes/独自テーマの名称/image/sample01.img” alt=””>
しかし絶対パスの指定はドメインの変更があったとき、テーマ内の画像パスをすべて書き換える必要が生じるため、メンテナンスの観点からおすすめできません。
WordPress関数を使うとURLを変える場合でもパスを修正しなくて済みます。
絶対にドメインの引越しをしない確信でもない限り、get_template_directory_uriによる画像の読み込みを推奨します。
WordPressで独自性が高いサイトを作りたいならプロに相談しよう
本記事で紹介した方法はindex.phpのテンプレートを使って単一ページのサイトを構築する方法です。
テンプレート内にheader.phpとfooter.phpを読み込ませ、Wordpress独自の関数を活用して画像パスを取得します。
functions.phpを経由してCSSやjavascriptの外部スクリプトを取得する作業も忘れてはいけません。
実際の現場ではランディングページでもない限り、1ページのみでコーポレートサイトや採用サイトを構築するケースはほぼありません。
ビジネスシーンにも耐えうる質を担保したサイトにするにはより高度なカスタマイズが必要です。
複雑な構成のコーポレートサイトを構築したい、既存サイトにビジネスに合わせた機能を実装したいなど希望する方はぜひ当社にご相談ください。
相談を重視して依頼主の意向に沿う素晴らしい物をお作りします。
コメント