AsaDesign

レシピサイトを作る(header.php)

参考書：
水野史人『WordPressユーザーのためのPHP入門』

  • HTMLの先頭からbodyの少しあとまでの部分を管理する。

今回はヘッダーにナビゲーションやロゴを配置しないので、画面上に表示されるものは無し

function.phpの完成コード

<?php 
function theme_scripts() {

  // CSS読み込み&出力
  wp_enqueue_style('theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));

  // JavaScript読み込み&出力
  wp_enqueue_script(
  'theme_scripts-fadein',
  get_theme_file_uri( '/js/fadein.js' ),
  array(),
  wp_get_theme()->get('Version'),
  true );
}
//適切なタイミングで実行
add_action( 'wp_enqueue_scripts', 'theme_scripts' )

適切なタイミングでファイルを読み込ませるため、

ファイルを読み込むための関数theme_scripts()をアクションフックwp_enqueue_scriptsに登録している。

header.phpの完成コード

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <?php wp_head(); ?>
</head>

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

  <div class="container">
    <main>

html出力結果(ざっくり)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サイト名</title>
  <link rel='stylesheet' id='theme-style-css' href='https://~~.com/wp-content/themes/テーマ名/style.css?ver=1.4' type='text/css' media='all' />
  <script src="https://~~/wp-content/themes/テーマ名/js/fadein.js?ver=1.4 id=theme_scripts-fadein-js"></script>
</head>

<body class="home blog">
  <div class="container">
    <main>

解説

1. 言語属性と文字コード

①language_attributes()

WordPressの言語情報を取得して表示する。
日本語でのみ表示するテーマであればそれほど意味はないが、公式配布のテーマでは使用されている。

出力例

<html lang="ja">

②bloginfo(“name/description/charset”)

ブログの情報を出力する。

出力例

<meta charset="UTF-8">

Webサイトのタイトル / Webサイトの説明 / Webサイトの文字コード などを出力できる。

2. wp_head()とwp_body_open()は必須

どちらもアクションフックを登録する関数。

①wp_head()

function.phpに記載のスタイルシートやjavascript、ページのタイトルを出力する。

出力例

<title>サイト名</title>
...
<link rel='stylesheet' id='theme-style-css' href='https://~~.com/wp-content/themes/テーマ名/style.css?ver=1.4' type='text/css' media='all' />
...
</head>

②wp_body_open()

<body>タグの直後にJavaScriptを出力したい時に使う。
そうでなくても必ず書く。(プラグインが正常に動作しなくなる原因になるため)

3. body関連の出力

①body_class()

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

出力例

<body class="home blog">

ページごとに異なるclassを出力する。

4. function.php

CSSファイルとJavaScriptファイルを、適切なタイミングで読み込むための記述。

①wp_enqueue_style()

CSSファイルを読み込む。
プロパティはハンドル名, URL(false), 依存関係(空の配列), バージョン(false), メディア(all)

ちなみに複数ファイルを読み込む時は「wp_register_style()」を使用する。
【ワードプレス】wp_enqueue_styleで、3つ以上のCSSを読み込む場合の書き方。

wp_enqueue_style('theme-style',get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));

出力例

<link rel='stylesheet' id='theme-style-css' href='https://~~.com/wp-content/themes/テーマ名/style.css?ver=1.4' media='all'>

②wp_enqueue_script()

JavaScriptファイルを読み込む。
プロパティはハンドル名, URL(false), 依存関係(空の配列), バージョン(false), 読み込み位置(false)

「読み込み位置」はwp_footer関数でscript要素を出力するかどうかを指定する。

wp_enqueue_script(
  'theme_scripts-fadein',
  get_theme_file_uri( '/js/fadein.js' ),
  array(),
  wp_get_theme()->get('Version'),
  true );

出力例

<script src="https://~~/wp-content/themes/テーマ名/js/fadein.js?ver=1.4 id=theme_scripts-fadein-js"></script>

③wp_enqueue_scripts()

上二つ専用のアクションフック。適切なタイミングで実行してくれる。
(wp_enqueue_styleのアクションフックは存在しない)

function tneme_scripts() {
  wp_enqueue_style(...);
  wp_enqueue_script(...);
}

add_action('wp_enqueue_scripts', 'theme_scripts');