Web活のロゴ

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

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

2023.07.26HTMLをWordpress化する方法
はじめに
概要

HTMLデータをWordpress化する方法を解説いたします。Wordpress化するメリットは、SEOに特化した様々なプラグインが使用できることや、プログラミングの知識がなくても編集や更新が容易になることなど、様々なメリットがあります。以下の手順で、Wordpressの環境を簡単に構築することができる「local」というアプリを使用して実装します。開発環境の構築はこちらを参照してください。

スポンサーリンク
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
 

HTMLサイト

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

Local

Create anew siteで新規サイトを立ち上げます。ここではtestとしております。

Go to site folderでthemasまで開き、そこに新たにテーマ名を記述し、テキストエディタで開きます。

外観のテーマを確認すると、壊れたテーマとなっています。

壊れたテーマ

テーマを正常な状態にするには以下の必須ファイルが必要になります。

style.css
index.php

作成できたテーマを有効化します。

 

WordPress化

構築方法は様々ですが、以下のようにsettingフォルダにデータを格納しておくと便利です。そして、index.htmlデータをindex.phpに添付します。

HTMLデータは反映されましたが、CSSが反映されていません。これにはWordpressの関数を使用していきます。

get_template_directory_uri()関数

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

なお、この関数は取得のものであり、表示するにはechoが必ず必要になります。

 

必須の関数

get_header()

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

get_footer()

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

便利な関数

language_attributes()
この関数は、現在のページの言語属性を出力します。

body_class()
現在のページのbody要素に適用されるクラスを出力します。なおbody_classの使い方についてはこちらを参照ください。

サイトにAdmin Barが表示されれば完了です。お疲れ様でした。なお、サイトが表示されない場合はこちらのテーマを参照ください。

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