ワードプレスオリジナルテーマ作成の手順
いきなりワードプレスサイトを制作するのは難易度が高いので、静的サイトを用意しワードプレス化する方法でワードプレスサイトを構築していきます。
初めての場合は、シンプルな静的サイトを用意するのがベター。
テンプレートファイルを用意しテーマを反映させる
1.ワードプレスにテーマを反映させるのに最低限必要なファイルが、index.phpとstyle.css。
この２つのファイルがあれば、テーマとして反映させることができます。
実は意外とシンプル。
style.cssに次の内容を記述すると、オリジナルテーマとして認識されます。
/*
Theme Name: //テーマの名前
Description://テーマの説明
Version: //バージョン
Theme URI: //テーマのurl
Author: //作者名
*/その他、必要に応じて以下のようなファイルを用意します。
ワードプレスはhtmlファイルではなくphpファイルで作成していきます。
静的サイトをワードプレス化していくので、htmlをphpに書き換えて制作することにします。
header.php
footer.php
page.php
single.php
archive.php
404.php
2.さらに、作業を始める前にやっておきたいこと。デバックモードを有効にします。
これを有効にしておくと、エラーがある場合、ブラウザ上にエラーを表示してくれるので必須です。
define('WP_DEBUG',true);すでに記述されている場合は、falseをtrueに書き換えることでデバックモードを有効にすることができます。
ファイルを分割する
ワードプレステーマを作成するのにまず必要なのが、ファイルの分割と、css,javascriptの反映です。
まずは、ファイルの分割から。
ファイルの共通部分であるheader部分とfooter部分を、index.phpから除いて、それぞれheader.phpとfooter.phpを作成します。
index.phpのheader部分とfooter部分は、テンプレートタグ（インクルードタグという）で書き換えます。
・置き換えるタグ
<?php get_header(); ?>
<?php get_footer(); ?>header.phpとfooter.phpを編集する
つぎに、header.php、footer.phpをテンプレートタグで置き換えていきます。
//header.phpの編集
<html <?php language_attributes(); ?>>
<?php bloginfo('charset'); ?>
<?php bloginfo('description'); ?>
<?php wp_head(); ?> //※1 必須
<?php body_class(); ?> //※2
<?php wp_body_open(); ?>
//footer.phpの編集
<?php wp_footer(); ?> //※1 必須※1.このタグを記述することで、管理バーが現れます。プラグインの不具合などにも影響するので、必ず記述します。
※2.bodyにclassを自動で付与してくれるので、つけておきます。あると便利。
スタイルを認識させる
cssやjavascriptを認識させるのにも、絶対パスに置き換える方法と関数を使う方法とがありますが、後者が推奨されているので、関数を使って認識させていきます。
アクションフックでcssを読み込ませる
function add_stylesheet() {
wp_enqueue_style(
'style',
get_template_directory_uri() .'/css/style.css',
array(),
'1.0');
}
add_action('wp_enqueue_scripts', 'add_stylesheet');
wp_enqueue_style()はcssを機能させるための関数で、wp_enqueue_script()はjsを認識させるための関数です。
functions.phpに定義することで一元管理できるので、管理上もこちらがおすすめ。
なお、jqueryはwordpressに組み込まれているので、それを使えるので便利です。
cssファイルがうまく読み込めるとスタイルが反映されます。
この段階ではスタイルが反映されても、画像がうまく出力されません。
画像を出力できるようにテンプレートタグを書き換えていきます。
画像を絶対パスで置き換え、出力する。
<?php echo esc_url(get_template_directory_uri()); ?>img src=”ここに記述/img.png”
imgタグにテンプレートタグを組み込みます。スラッシュを忘れただけでうまく出力できないことはよくあることなので、間違えずに記述します。
スタイルと画像が認識されたので、ここまでくるとようやくそれっぽく見えてきます。
echoは忘れがちですが、echoがないと出力ができないので、これも注意です。
esc_url()は、urlをエスケープした文字を返してくれる関数で、セキュリティ上必要。
そのまま出力されると問題のある文字を加工してくれるようなものと考えておけばよいかと思います。
タグが長くて大変ですが、何度が繰り返すうちに自然と書けるようになります。
この辺は手順通りサクサク進めることができます。
その他やっておくことまとめ
・home_url()
home_url(‘/’)、home_url(‘/pagename’)とすることで、urlを出力してくれます。
esc_url()でエスケープしておく。セキュリティ上必要です。
・alt代替テキストを動的に置き換える
alt=”<?php bloginfo(‘name’); ?>”
・他の共通部分をテンプレート化する
これは後々やっていきますが、忘れないようにあらかじめ残しておきます。
CTAは各ページ共通なのでtemplateに入れておきます。
<?php get_template_part('template/cta'); ?>テンプレート化しておくことで使いまわしができ、作業効率がアップします。
