WordPressを使うためには、必要な準備がある
世の中には無料のもの、有料のものを含め
たくさんのWordPressテーマが存在します。
既存のテーマを使うと誰でもすぐにブログを作成することができるので非常に便利です。
テーマ開発者の方々には感謝しかありません。
しかし以下のような理由から、
既存テーマを利用しない（できない）方もいらっしゃるでしょう。
- 「制作実績として見せたいので、自作テーマでブログを構築したい」
- 「仕事で静的サイトにWordPressを組み込むことになった」
勉強のために、仕事のために、
自作のWordPressテーマでブログやオウンドメディアを作成する機会があります。
こういった状況では多くの場合、一からテーマを作成することになるでしょう。
このようなケースでは、最低限の設定をしておかないとWordPressの機能が利用できない、エラーが出る、などの不具合が発生しかねません。
でも、自作テーマの作成に夢中になりすぎて設定するのを忘れやすいんですよね…
具体的には5種類のテンプレートタグを書いていきます。
それでは設定を見ていきましょう！
1 wp_head、wp_footer
wp_head
WordPressは目に見えないところでいろんな処理を行ってくれています。
その結果ページが生成されるのですが、
その処理の中で、<head>タグ内に挿入するためのHTMLタグが生成されています。
それらを出力するためのテンプレートタグがwp_headです。
記述場所は</head>タグの真上になります。
<?php wp_head(); ?>
</head>この記述を忘れるとプラグインで生成されたmetaタグやlinkタグが反映されないなどの不具合が発生します。
必ず記述しましょう！
wp_footer
こちらのテンプレートタグは、
プラグインを実行するために必要なスクリプトや、
ツールバーを表示するためのスクリプトを出力してくれます。
スクリプトが出力されるので、</body>の直前に記述します。
<?php wp_footer(); ?>
</body>このテンプレートタグを記述し忘れると、
プラグインが実行されなかったり、
ツールバーが表示されないなどの不具合が起こります。
これら二つのテンプレートタグは必ずで記述しましょう！
2 get_header、get_footer、get_sidebar
これらのテンプレートタグはそれぞれ下記ファイルを読み込んで出力してくれます。
- header.php（headタグ内のコードをまとめたファイル）
- footer.php（</body>タグの直前で読み込むスクリプトをまとめたファイル）
- sidebar.php（サイドバーを構成する要素をまとめたファイル）
headタグ内の情報やJavaScriptの外部ファイルなどのスクリプトは全ページ共通であることが多いので、
慣例として別ファイルとしてまとめます。
これらのファイルを読み込んでくれるのが先述したテンプレートタグです。
それぞれ必要な場所にタグを記述しましょう。
例）
<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(); ?>
</head>
<body>
......
<?php get_sidebar(); ?>
......
......
<?php get_footer(); ?>
</body>3 wp_body_open
GTMタグやFacebookのスクリプトなど、<body>タグの直後に挿入したいタグを出力してくれます。
<body class="<?php body_class(); ?>">
<?php wp_body_open(); ?>4 language_attributes
htmlタグに設定するlang属性を出力してくれるテンプレートタグです。
WordPressの管理画面で登録している「サイトの言語」に合わせた値を出力してくれます。
文字化け対策として設定しておきましょう。htmlタグに記述します。
<html <?php language_attributes(); ?>>出力結果）
<!-- 日本語設定 -->
<html lang="ja">
<!-- English(United States)設定 -->
<html lang="en-US">ちなみに！
私がやりがちなミスなのですが、lang属性の値の部分にテンプレートタグを記述してしまうことがあります。
こんな感じです。
<html lang="<?php language_attributes(); ?>">しかしこれだとコードがおかしくなってしまいます。
なぜならlanguage_attributesテンプレートタグは、lang属性も含めて出力するからです。
なのでlang属性の値の部分に記述すると、コードがおかしくなってしまうのです。
<html lang="<?php language_attributes(); ?>">
<!-- 出力結果 -->
<html lang="lang=" ja""="">こうなると閉じタグエラーなどの不具合が発生してしまい、
レイアウト崩れなどの原因になってしまいます。
勘違いしがちなので押さえておきましょう！
5 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">こちらのテンプレートタグはおまけのような位置づけですが、
ページごとに異なったスタイルをあてたり、JavaScriptを実行したりするのに便利です。
指定しておいて損はありません！
またこちらのテンプレートタグもlanguage_attributesと同様に、class属性ごと出力するので、class属性の値の部分に記述してはいけません。
忘れがちなので気を付けてくださいね！
まとめ
ようやく自作テーマのカスタマイズに取り組むための下準備が完成しました！
最初は覚えることが多くて大変だと思います。
私も最初はめちゃめちゃWordPressが苦手でした。
業界に入りたての頃は先輩におんぶに抱っこで
ひーひー言いながらWordPressの構築をしていたものです…
少しでもあの頃の私と同じような境遇にいる方のお役にたてたら嬉しいです。
以上です！
Comments