1. Home
  2. クリエイターズMAGネット
  3. WordPress テーマとプラグインを徹底解説 第3回 WordPressテーマ作成(2)

WordPress テーマとプラグインを徹底解説 第3回 WordPressテーマ作成(2)

こんにちは!瀬口理恵です。
前回の記事ではWordPressテーマをオリジナルで制作するための準備、テーマ認識の方法までお話しました。
今回は更にテーマ作りをしていきます。

①静的HTMLのトップページの拡張子を.htmlから変えindex.phpにする
②新たにコメントを書いたstyle.cssを用意する
③テーマ名をつけたフォルダにそれらを格納し、サーバー上のWordPressテーマを置く場所へアップロードして認識させる

ここまで出来ている状態からのスタートです!

オリジナルテーマを有効化してみると?

自分で作ったテーマをいざ有効化!
サイトを確認してみると、cssなど読み込まれていない崩れたページが出てくると思います。
ここで崩れているのは当然なので焦る必要はありません。
WordPressテーマ内の各ファイルへのパスに、相対パスは使用できないからです。※CSSの中は除く
まず見た目がきちんと表示されるように調整していきましょう。

css、jsをfunctions.phpで管理する

以前まではヘッダー内の<head></head>の中にbloginfo()を使ってcssjsを読み込ませていましたが、現在非推奨となっています。
動作はしますが、これからWordPressを実装するならば、推奨されている方法で記述していきましょう。

テーマ内に新たにfunctions.phpファイルを作成します。
functions.phpはテーマファイル郡の中でもデザインやレイアウトを扱うものではなく、WordPressの機能や制御を専門に行うファイルで、全てphpで書きます。

まずcssを読み込ませてみましょう。

(例)

[code lang="php"]
function register_stylesheet() {
    wp_register_style('style', get_template_directory_uri().'/style.css');
    wp_register_style('reset', get_template_directory_uri().'/css/reset.css');
    wp_register_style('base', get_template_directory_uri().'/css/base.css');
}
function add_stylesheet() {
    register_stylesheet();
    wp_enqueue_style('style', '', array(), '1.0', false);
    wp_enqueue_style('reset', '', array(), '1.0', false);
    wp_enqueue_style('base', '', array(), '1.0', false);
}
    add_action('wp_enqueue_scripts', 'add_stylesheet')
[/code]

register_stylesheet()で、テーマで使用するcssファイルを登録しています。
上記の例ではstyle.cssと、cssフォルダに入ったreset.cssbase.cssの合計3ファイルですね。

その次のfunction add_stylesheet()〜で読み込ませる順番を指定します。
wp_enqueue_styleでファイルの重複を防いで、意図した順番で読み込むように制御しています。

そして最後のadd_actionとは、アクションフックと呼ばれるものです。
WordPressで扱うフックには他にフィルターフックがあり、どちらも特定のタイミングで意図した関数を呼び出すことができます。

フックを使うことでカスタマイズの幅がより広がりますので、詳しくはCodexを参照してみてください。
http://wpdocs.osdn.jp/プラグイン_API

フックについてはWordPressを始めたての方は少し難しい内容ですので、最初から全て理解する必要はありません!
実際に動かしてみながら徐々に慣れていくので良いでしょう。

次に、同じような方法でjsも読み込んでいきます。

(例)

[code lang="php"]
function register_script(){
    wp_register_script('test', get_template_directory_uri().'/js/test/test.min.js');
    wp_register_script('xxx', get_template_directory_uri().'/js/xxx.js');
}
function add_script(){
    register_script();
    wp_enqueue_script('test', '', array(), '1.0', false);
    wp_enqueue_script('xxx', '', array(), '1.0', false);
}
add_action('wp_print_scripts','add_script');
[/code]

css読み込み時と流れは同じです。register_stylesheet()ではなくregister_script()を使いましょう。
add_script()〜で読み込み順を指定、最後にアクションフックを記述します。

パーツテンプレート化する

WordPressはページに応じてテンプレートを出し分けて出力、表示させています。
例えばTOPページはfront-page.php、投稿記事はsingle.php、固定ページはpage.phpのテンプレートファイルを使うといった具合です。
どのページではどのテンプレートが使われるのか、読み込み優先順位はどうなっているのかを把握することはとても大切です。
Codexで詳細解説がされているので是非目を通してみてください。

https://wpdocs.osdn.jp/テンプレート階層

下記のようなレイアウトをサンプルに考えてみましょう。

トップページのイメージです。
header.phpsidebar.phpfooter.php
この3つは、サイトのどのページを表示しても同じ共通部分です。
共通部分はパーツテンプレート化して、同じものを読み込むようにしていきます。

header.phpを新規で作成し、今あるトップページのindex.php(front-page.php)からヘッダーの記述のみをコピペします。
コーディングの際にソースコード内にコメントを残しておくと分かりやすいですね。
その際、</head>の前に<?php wp_head(); ?>の記述をしておきましょう。
footer.phpも同じ要領で作り、</body>の直前に<?php wp_footer(); ?>の記述を追加します。

wp_head()」と「wp_footer()」の記述は見た目に変化はありませんが、プラグインの動作不良などトラブルを避けるためにお約束として書いておきましょう。
他にもサイトの構成によって繰り返し表示させる部分は別途パーツ化するとスマートです。

今回はphpコードやWPタグ、WordPressテンプレートルールなど少し複雑な内容となりましたが、技術的な情報はCodexを参照するのが勉強になります。

検索でヒットするものの中には古い情報もあるため、新しい情報を得るようにしてください。

次回最終回は、WordPressループやプラグインについてお話したいと思います!

瀬口理恵

ライター:瀬口理恵

約7年間制作会社などでウェブデザイナー、ディレクターとして過ごし、2010年に独立。ウェブサイト制作、アプリUIデザインなどを手がける。女性向けデザインが得意。
隔週火曜のUstream番組「rie’sCafebar」パーソナリティーとして放送中。著書に「美しいウェブサイトの作り方」(SBクリエイティブ)。

Latest Posts

クリエイターズMAGネットの最新記事

最新記事一覧へ
クリエイター・エンジニアの
転職サポートはこちら‼︎
無料登録