【初心者コーダー向け】WordPressオリジナルテーマづくり PART1

HTMLで作成された既存のウェブサイトをオリジナルのテーマ(テンプレート)にする手順。専門的な難しい用語は使わず、できるだけシンプルにわかりやすく説明した記事です。デザイナーやコーダーの方々が初めてWordpress構築の依頼を受けたときに役立ちますように!

まず準備するもの

自分でデザインしたウェブサイトのコーディングファイル一式をひとつのフォルダに入れておきます。フォルダ名はサイトやテーマの名前などで適当に。ワードプレスのテーマとして最低限必要なファイルはindex.phpとstyle.cssです。なので、index.htmlを複製して、index.phpという名前に変えたものも用意しましょう。これらは同じ階層に入れておいてくださいね。

style.cssの冒頭にテーマ情報を追記する

WordPressにテーマとして認識してもらうために、CSSファイルの冒頭に下記の内容を追記します。テーマ名は必須ですが、他は省略してもOKです!

ここまで終わると、管理画面>外観>テーマからオリジナルのテーマが選択できるようになっているはず。ちなみに、テーマのスクリーンショットを撮ってscreenshot.pngという名前で同じフォルダ内に入れておくと、テーマの選択画面でスクリーンショットの画像が表示されるようになります。。

CSSとJSを読み込む

CSSやJSファイルの情報はheaderに書いても読み込めますが、functions.phpで読み込んだ方がイイコト沢山ありますよ:)

HTMLファイルに書かれたCSSとJSのファイル情報を削除

ダブってしまうといけないので先に消しておきましょ。jQueryはデフォルトで勝手に読み込んでくれるのでこれも不要です!

functions.phpでCSSとJSを読み込む設定

テーマフォルダ内に新しくfunctions.phpというファイルをつくり、下記のようにコードを書きます。例のコードでは、6〜7行目で2つのCSS(style1.cssとstyle2.css)を登録して、12〜13行目でそれぞれ登録したCSSの読み込みを実行しています。JSは21行目でscript.jsを登録して、26行目で読み込みを実行。このような書き方を応用すると、条件分岐(if)でページごとに読み込むファイルを変えたりできるのです。

大事なところだけ解説

wp_register_style()

wp_register_style('登録名', パス, array('依存ファイルの登録名'), バージョン番号, media属性);
登録名 ※必須
何でもOKですが、他とかぶると上手く読み込まれないので特有なものが良いです。
パス ※必須
cssというフォルダの中にstyle.css が入っているなら、get_template_directory_uri().’/css/style.css’ と表記します。
依存ファイルの登録名
先に読み込ませたいCSSがあれば、その登録名を表記。
バージョン番号
適当に1.0とかで。特に入れない場合はNULL。
media属性
通常はall

条件分岐 

例えば全てのページでsample1.cssを、投稿ページ(single.php)ではsample2.cssを読み込みたい場合は、10~14行目を次のように記述します。

is_singleの部分を適宜変更してくださいね〜。条件分岐タグについてはCodexをご参照ください!

wp_register_script()

wp_register_script('登録名',パス, array('依存ファイルの登録名'), バージョン番号, 出力場所);
出力場所
wp_head()で表示する(false)か、wp_footer()で表示する(true)かを選べます。デフォルトはfalse。

CSSと同じ内容は割愛します〜。異なるのは一番最後のパラメーター「出力場所」。これをtrueにすると</body>の直前で出力されるようになります。JSは後から読み込んだ方がサイトの表示スピードUPになるのでこの方がベター◎ですね!

index.phpの中身をパーツごとに分割する

上の図のようにindex.phpの<header>, <footer>, <aside>をそれぞれ独立させて ‘header.php’, ‘footer.php’, ‘sidebar.php’ というファイルをつくります。ではまずはサンプルコードから。※ループの解説は後程!

header.php

footer.php

 

header.phpに必ず入れるべきテンプレートタグ

絶対に忘れてはいけないのは、6行目の<?php wp_head(); ?>と、8行目の<?php body_class(); ?>です。これらのタグを入れ忘れると、プラグインが動かなかったり、Wordpress特有のコードが出力されなくなるので注意してくださいね。

<?php wp_head(); ?>

</head>の直前に入れることで外部CSSやJSを読み込んだり、メタタグなど様々なコードが自動的に出力される。

<?php body_class(); ?>

<body>タグの中に入れることで、ページによって様々なクラス名をbodyに出力する。任意のクラス名を追加することも可能。

サイト名や概要(キャッチフレーズ)などを書き換える

サイト情報はbloginfo()というテンプレートタグで書き換えます。詳細は後述しますが、パラメータの中には非推奨とされているものがありますのでご注意を!タグの詳細はCODEXへどうぞ〜。また、トップページへのリンクはhome_url(‘/’)というタグを使います。

サンプル

出力結果

ワンポイント

if文で条件分岐をすれば、次のようにページごとの出力を変えることができます。下の例では、トップページ(front-page)ではキャッチフレーズとサイト名を、その他のページではページタイトルとサイト名を出力しています。

サンプル

出力結果

条件分岐(if)

<?php if(○○なら) : ?>
○○のときに実行する内容
<?php else : ?>
○○以外のときに実行する内容
<? php endif; ?>
<?php if(○○なら){
○○のときに実行する内容;
}else{
○○以外のときに実行する内容;
} ?>

if文の書き方を2つ挙げましたが、言っていることはどちらも全く同じなのです。WordpressのようにHTMLとPHPが混在するときは、上のようにコロンで区切って書く方法が読みやすく適しています。参考までに!

非推奨テンプレートタグについて

参考書や他の記事などでbloginfo(‘template_url’)というテンプレートタグでパスを書き換えていることがありますが、現在は非推奨タグとなっています。今後はget_template_directory_uri()を使うようにしましょう!

2018.5.10現在のbloginfo系 非推奨タグ一覧

これらはそれぞれ、下記のタグを使います。

画像の相対パスを絶対パスに修正する

WordPressでは相対パスが使えないので絶対パスにしますが、そのときに使われるテンプレートタグがこちら。

get_template_directory_uri()

テーマフォルダの場所(URL)を出力する。

サンプル

出力結果

上のサンプルではget_template_directory_uri()を更にesc_url()というタグで囲っていますが、これはエスケープ(無害化)といってセキュリティ上の安全を確保のためのものです。URLをecho(表示)するときのお約束だと思ってください!

footer.phpに必ず入れるべきテンプレートタグ

footer.phpでは、7行目の<?php wp_footer(); ?>を忘れずに入れてくださいね!

<?php wp_footer(); ?>

</body>の直前に入れることで外部JSを読み込んだり、Javascriptなどのコードが自動的に出力される。

sidebar.phpでウィジェットをつかう

ウィジェットとはWordpressで予め用意されている部品のようなもので、検索フォームやアーカイブ、カレンダーなどを、管理画面から簡単に追加したり並べかえたりすることができます。ウィジェットを使うには、まずfunctions.phpに下記のコードを書いて登録しましょう。

ウィジェットを登録すると、管理画面の「外観」欄に「ウィジェット」という項目が出てくるので、そこからウィジェットの内容を編集します。

編集が終わったら、sidebar.phpには下のようなコードを書いて完了です!

sidebar.php

index.phpに各パーツを組み込む

分割が終わると、index.phpには<main>の内容だけが残っている状態になりますね。ここに、先程つくったパーツheader.php footer.php sidebar.phpを組み込んで表示できるようにします。パーツを組み込むときは、get_パーツ名();という形で書きます。ここまで終わったら、index.phpを複製してhome.phpと名前を変更してください。このhome.phpがトップページとして使われるファイルになります!

index.php→home.php

これでオリジナルテーマの基盤ができました!次回から、作成したファイルをさらにWordpressらしくカスタマイズしていきます:)