WebCanta

初心者のための徹底ガイド-Web制作

会員ログイン
テーマ開発

HTMLデータをWordPress化し、オリジナルテーマを構築します。#1/4

HTMLをWordpress化する方法
はじめに
概要
HTMLデータをWordpress化する方法を解説いたします。Wordpress化するメリットは、SEOに特化した様々なプラグインが使用できることや、プログラミングの知識がなくても編集や更新が容易になることなど、様々なメリットがあります。以下の手順で、Wordpressの環境を簡単に構築することができる「local」というアプリを使用して実装します。開発環境の構築はこちらを参照してください。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
疑問を持つ読者のイラスト読者

HTMLデータをWordPress化し、オリジナルテーマを構築します。は、最初にどこを理解するとよいですか？

著者・木村のプロフィール写真木村

WordPress標準機能、プラグインの機能、テーマ側の処理を分けて考えると、どこを変更すべきか判断しやすくなります。

話を聞く読者のイラスト読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

著者・木村のプロフィール写真木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

 

HTMLサイト

HTMLサイトでは、HTMLデータをWordPress化し、オリジナルテーマを構築します。#1/4を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

今回Wordpress化するための、以下のようなシンプルなテストサイトを作成しました。サンプルコードはこちらです。

Local

Create anew siteで新規サイトを立ち上げます。ここではtestとしております。 Go to site folderでthemasまで開き、そこに新たにテーマ名を記述し、テキストエディタで開きます。 外観のテーマを確認すると、壊れたテーマとなっています。 壊れたテーマ テーマを正常な状態にするには以下の必須ファイルが必要になります。 style.css index.php 作成できたテーマを有効化します。
 

HTMLサイトで押さえたいポイント

HTMLサイトは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

WordPress化

WordPress化では、HTMLデータをWordPress化し、オリジナルテーマを構築します。#1/4を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

構築方法は様々ですが、以下のようにsettingフォルダにデータを格納しておくと便利です。そして、index.htmlデータをindex.phpに添付します。 HTMLデータは反映されましたが、CSSが反映されていません。これにはWordpressの関数を使用していきます。

get_template_directory_uri()関数

この関数は、現在のテーマのディレクトリのURIを取得するために使用されます。Wordpressは階層が深いため、このような関数を使用してファイルまでのパスを取得します。testサイトのcssはdistフォルダに格納されていますので、まずはこのフォルダをテーマの直下に移動する必要があります。 なお、この関数は取得のものであり、表示するにはechoが必ず必要になります。
 

WordPress化で押さえたいポイント

WordPress化は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

必須の関数

必須の関数では、HTMLデータをWordPress化し、オリジナルテーマを構築します。#1/4を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

get_header()

header.phpを作成し、その中にhead内の記述及び、wp_head()を記述します。

get_footer()

footer.pphを作成し、その中にwp_footer()を記述します。

便利な関数

language_attributes() この関数は、現在のページの言語属性を出力します。 body_class() 現在のページのbody要素に適用されるクラスを出力します。なおbody_classの使い方についてはこちらを参照ください。 サイトにAdmin Barが表示されれば完了です。お疲れ様でした。なお、サイトが表示されない場合はこちらのテーマを参照ください。
 

実装前に確認しておきたいこと

ここでは、HTMLデータをWordPress化し、オリジナルテーマを構築します。を実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。

作業の目的と変更範囲を決める

WordPress標準機能、プラグインの機能、テーマ側の処理を分けて考えると、どこを変更すべきか判断しやすくなります。 サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。

元の状態へ戻せるようにする

テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。

よくあるつまずきと確認方法

HTMLデータをWordPress化し、オリジナルテーマを構築します。が期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。

変更が反映されない場合

保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。

公開前の最終確認

ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。

実務で使うための進め方

HTMLデータをWordPress化し、オリジナルテーマを構築します。を実務で使うときは、完成形を一度に作ろうとせず、最小のサンプルで動作を確かめてから既存ページへ組み込みます。確認できた処理を少しずつ広げると、記事の例と自分の環境に差があっても調整しやすくなります。

小さなサンプルから試す

新しいコードや設定は、関係する要素だけを置いた小さなページで試します。期待する結果、実際の結果、変更した箇所を短く記録すると、途中で別の方法を試した場合にも比較できます。動作を確認できた後で、既存の命名規則やファイル構成へ合わせて移してください。

既存の実装と重複していないか確認する

同じ目的のCSS、JavaScript、プラグイン設定がすでに存在すると、指定の上書きや処理の二重実行が起きることがあります。検索機能や開発者ツールを使い、同じクラス名、関数名、フック、設定項目がないかを先に確認しましょう。

保守しやすい状態を保つ

実装時に動くだけでなく、数か月後に見直せる状態にしておくことも大切です。採用した理由と確認方法を短く残しておけば、仕様変更や担当者の交代があっても安全に更新できます。

変更理由を短く記録する

コメントや作業メモには、コードの内容をそのまま説明するのではなく、なぜその処理が必要なのかを書きます。参照した公式情報や動作確認日も残すと、仕様が変わったときに見直す判断材料になります。秘密情報や個人の環境だけで使えるパスは記録へ含めません。

定期的に動作を見直す

ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。 ブラウザー、WordPress、プラグイン、外部サービスを更新した後にも同じ項目を確認すると、変更による影響を早めに見つけられます。

まとめ

  • WordPressは階層が深いため注意する
  • テーマまでのパスは関数を使用する
  • テーマを有効化するには、style.cssとindex.phpが必要
  • テーマを構築するには上記の必須の関数が必要

関連する記事

MEMBER COMMENTS

コメント（0件）

会員ログイン後にコメントできます

記事への質問や感想をコメントで共有できます。無料会員登録後もこの記事へ戻れます。

会員ログイン 無料会員登録