「WordPressの制作実績を作るために、自作テーマでブログを構築したい」
「仕事で静的サイトにWordPressを組み込むことになった」
このように、WordPressをカスタマイズしたい人は多いと思います。
世の中には無料のもの、有料のものを含めたくさんのWordPressテーマが存在します。
既存のテーマを使うと誰でもすぐにブログを作成することができるので非常に便利です。
その反面、「仕事のため」「実績のため」、WordPressの既存テーマでは対応できないケースが多々あるのも事実。
このようなケースでは、最低限の設定をしておかないとWordPressの機能が利用できない、エラーが出る、などの不具合が発生しかねません。
この記事では、WordPressのテーマを自作する際に必須の設定をお伝えします。
具体的には5種類のテンプレートタグを書いていきます。
テンプレートタグとは、WordPressにあらかじめ用意されている、WordPress専用のタグのことです。
ここを押さえておくと、WordPressで表示がおかしくなるような不具合を避けることができます！
それでは設定を見ていきましょう。
1. wp_head、wp_footer
wp_head
wp_headタグは、<head>タグ内に挿入するためのHTMLタグを生成してくれます。
WordPressは目に見えないところでいろんな処理を行ってくれています。
その結果ページが生成されるのですが、その中でもheadタグの情報を出力してくれるテンプレートタグがwp_headです。
wp_headタグの記述場所は</head>タグの真上になります。
<?php wp_head(); ?>
</head>この記述を忘れると、プラグインで生成されたmetaタグやlinkタグが反映されないなどの不具合が発生。
ページの表示崩れや検索結果の表示に影響するので、必ず記述しましょう！
wp_footer
wp_footerタグは、プラグインを実行するために必要なスクリプトや、ツールバーを表示するためのスクリプトを出力してくれます。
スクリプトが出力されるので、</body>の直前に記述します。
<?php wp_footer(); ?>
</body>このテンプレートタグを記述し忘れると「プラグインが実行されない」「ツールバーが表示されない」などの不具合が起こります。
これら二つのテンプレートタグは必ずで記述しましょう！
2. get_header、get_footer、get_sidebar
次に、これらのテンプレートタグはそれぞれ下記ファイルを読み込んで出力してくれます。
| get_header | header.phpを読み込むテンプレートタグ。 header.phpは、 headタグ内のコードをまとめたファイルです。 |
| get_footer | footer.phpを読み込むテンプレートタグ。</body>タグの直前で読み込むスクリプトをまとめたファイルです。 |
| get_sidebar | sidebar.phpを読み込むテンプレートタグ。 サイドバーを構成する要素をまとめたファイル |
headタグ内の情報やJavaScriptの外部ファイルなどのスクリプト、サイドバーのコンテンツは、基本的に全ページ共通です。
よって、それぞれ以下のファイルを作成してまとめます。
- header.php
- footer.php
- sidebar.php
そしてこれらのファイルを、テンプレートタグを使って全ページで読み込むことで、効率的に必要な情報をゲットできるというわけです！
効率的に作業を進めるためにも、保守・運用や修正の手間を省くためにも、まとめられる情報はまとめておきましょう。
ファイルの用意ができたら、それぞれ適切な箇所にテンプレートタグを記述すれば完了です。
例）
<head>
<?php get_header(); ?>
<?php wp_head(); ?>
</head>
<body>
......
<?php get_sidebar(); ?>
......
......
<?php get_footer(); ?>
<?php wp_footer(); ?>
</body>余談ですが、前項で説明したwp_headタグとwp_footerタグも全ページで使用するので、それぞれheader.phpとfooter.phpに入れておくと管理しやすいですよ！
<head>
<?php get_header(); ?>
//header.phpの中に「<?php wp_head(); ?>」という記述をいれたので、「<?php wp_head(); ?>」の記述は削除してOK！
</head>
<body>
......
<?php get_sidebar(); ?>
......
......
<?php get_footer(); ?>
//footer.phpの中に「<?php wp_footer(); ?>」という記述をいれたので、「<?php wp_footer(); ?>」の記述は削除してOK！
</body>3. wp_body_open
wp_body_openタグは、GTMタグやFacebookのスクリプトなど、<body>タグの直後に挿入したいタグを出力してくれます。
<body class="<?php body_class(); ?>">
<?php wp_body_open(); ?>忘れずに記述してください。
4. language_attributes
language_attributesタグは、htmlタグに設定するlang属性を出力してくれるテンプレートタグです。
WordPressの管理画面で登録している「サイトの言語」に合わせた値を出力してくれます。
文字化け対策として設定してください。htmlタグに記述します。
<html <?php language_attributes(); ?>>出力結果）
<!-- 日本語設定 -->
<html lang="ja">
<!-- English(United States)設定 -->
<html lang="en-US">language_attributesタグを使用する際の注意点
language_attributesタグを記述する際に気をつける点を1つお知らせします。
それが「lang属性の値の部分にテンプレートタグを記述してはいけない」という点です。
なぜならlanguage_attributesタグは、属性名なども合わせて出力してくれるからです。
具体的な記述ミスは以下のとおり。
<html lang="<?php language_attributes(); ?>">この記述では、コードの出力結果が以下のようにおかしくなってしまいます。
<html lang="<?php language_attributes(); ?>">
//出力結果
<html lang="lang=" ja""="">これでは閉じタグエラーなどの不具合が発生して、レイアウト崩れが起きてしまいます。
language_attributesタグの記述は、ミスしがちなのでぜひ押さえておいてください！
5. body_class
body_classタグは、ページに特有のクラスを付与してくれるテンプレートタグです。
トップページやアーカイブページ、記事ページなど、それぞれのページに特有で必要なクラスを設定してくれます。
body_classタグはbodyタグに記述します。
<body <?php body_class(); ?>>出力結果）
//トップページ例
<body class="home blog logged-in admin-bar customize-support">
//記事ページ例
<body class="post-template-default single single-post postid-2642 single-format-standard logged-in admin-bar customize-support">特有のクラスを付与することで、ページごとに異なったスタイルをあてたり、プログラムを実行したりするのに便利です！
またこちらのテンプレートタグもlanguage_attributesと同様に、属性名を含めて出力するので、class属性の値の部分に記述してはいけません。
忘れがちなので気を付けてくださいね！
【まとめ】WordPressの自作テーマに必須のテンプレートタグを抑えて不具合をなくそう！
この記事では、WordPressの自作テーマを作成する際に必須のテンプレートタグ5種をお伝えしました。
必須のテンプレートタグを記述しておくことでのメリットは以下のとおり。
- Webページを表示するために最低限必要な情報を網羅できる
- 効率化が図れる
- 不具合を防ぐ
- 保守・運用・修正がラクになる
必須のテンプレートタグを使用すると、不具合が起こらないだけではなく、作業の効率化や簡素化にもつながるんですね。
もしあなたが作成したWebサイトに不具合が起こっているのであれば、今回の記事を参考にチェックしてみてください！
Comments