HTMLデータをWordPress化し、オリジナルテーマを構築します。#1/4
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が必要
- テーマを構築するには上記の必須の関数が必要