[05]テンプレートタグを使ってみよう – WordPressテーマ制作レッスン

このレッスンでは、wp_head()wp_footer()wp_body_open()body_class()といったテンプレートタグを設置してみて、どのような動作をするのかを試してみます。

目次

動画

レッスンの準備

GitHub
Olein-jp/wp-theme-develop-lesson
Olein-jp/wp-theme-develop-lessonContribute to Olein-jp/wp-theme-develop-lesson development by creating an account on GitHub.

このレッスンでは、上記リポジトリのwp-lesson-05というディレクトリにあるファイルを使って学習を進めていきます。

WordPressのルートディレクトリにあるwp-contentの中のthemeswp-lesson-05ディレクトリを設置しましょう。

index.phpを編集していきます

wp_head()について

wp_head()は、wp_headに指定されたアクションを出力する部分です。ブロックエディタのCSSスタイルなど様々なソースコードを出力しています。

</head>の直前に<?php wp_head(); ?>を設置します。

あわせて読みたい
関数リファレンス/wp head - WordPress Codex 日本語版

wp_footer()について

wp_footer()は、wp_footerに指定されたアクションを出力する部分です。JavaScriptなどをこちらから出力することが多いですね。

</body>の直前に<?php wp_footer(); ?>を設置します。

あわせて読みたい
テンプレートタグ/wp footer - WordPress Codex 日本語版

wp_body_open()について

WordPress 5.2.0から導入された比較的新しいアクションフックです。<body>タグの直後に設置することが推奨されています。

WordPress Developer Resources
wp_body_open() | Function | WordPress Developer ResourcesFire the wp_body_open action.

body_class()について

表示しているページの属性に関するCSSクラスを出力してくれます。どんなクラスを出力してくれるかは下のドキュメントを参照してみてください。

<body <?php body_class(); ?>>

このように設置します。

あわせて読みたい
テンプレートタグ/body class - WordPress Codex 日本語版

まとめ

こちらで紹介したテンプレートタグは、テーマ制作する上では必ず設置しなくてはならないと覚えておいていただいて大丈夫なほど大切なものです。ですので、しっかりと動画も参照していただき、動作を確認しておきましょう!

以上でこのレッスンは終わりです。引き続き、WordPressテーマ制作レッスンを進めていきましょう!

この記事が気に入ったら
フォローしてね!

この記事を書いた人

Web制作系フリーランスです。岐阜地域のWordPressやCoderDojoのコミュ二ティ活動に参加しています。最近は映像やカメラにも力を入れています。やんちゃ坊主たちの父親もやっています。

目次
閉じる