【Chapter4】オリジナルテーマ開発の基礎

概要と目標テーマ開発の基本を知り、
オリジナルテーマを反映させよう。

いよいよ、WordPressのオリジナルテーマを作成していく。
まずは、テーマ制作の基本学習しましょう。

今回のゴール

RERUN

完成イメージ HTML + CSS + JSのコーディングは、
すでに出来ている。

今回は、WordPressのテーマ開発部分に焦点を合わせるため、
HTML + CSS + JSによるコーディングはすでに完成している状態から始める。
コーディングデータは、「wordpress-lessons」の中の「dummy-html」フォルダにある。

完成イメージ

RERUN

新しいウインドウで表示する

WordPressの構成ファイル「wp-content」以外、
基本は触らない。

WordPressは様々ファイルから構成されている。
基本的には「wp-content」フォルダ内以外触ることはない。

デバッグモードを有効化エラーは画面に表示する。

WordPressでテーマやプラグインの開発を行う際、エラーが発生すると画面が真っ白になる。
デバッグモードを有効化することで、エラーが表示されるようになる。

デバッグモードを有効化してみよう

「wp-lesson」 › 「wp-config.php」ファイルを開く
84行目あたりを下記のコードに変更する

wp-lesson/wp-config.php

define('WP_DEBUG', true);

/* 編集が必要なのはここまでです ! WordPress でのパブリッシングをお楽しみください。 */

上書き保存
これでエラーや警告がブラウザ上に表示されるようになる

本番環境での注意: 本番環境では必ずデバッグモードを有効化しないようにする。
エラーメッセージや警告メッセージは攻撃者にとってヒントとなる可能性がある。

テーマフォルダの作成テーマを保存する場所は、
決まっている

WordPressのテーマは、「wp-content」内の「themes」フォルダに配置する。
なお、テーマには最低限「index.php」と「style.css」が必要となる。

テーマフォルダを作ってみよう

「wp-lesson」 › 「wp-content」 › 「themes」フォルダ内に「dummy」フォルダを作成する
「wordpress-lessons」 › 「dummy-html」フォルダ内にある、「index.html」と「style.css」をコピー
「wp-lesson」 › 「wp-content」 › 「themes」 › 「dummy」フォルダ内にペースト
ペーストした、「index.html」のファイル名を「index.php」に変更

テーマの有効化管理画面から、テーマを有効化できる。

「themes」フォルダ内に必要なファイルを配置したら、
管理画面からテーマを有効化できる。

テーマを有効化してみよう

管理画面にアクセス
（http://localhost/wp-lesson/wp-admin/index.php）
「外観」 › 「テーマ」に移動

「dummy」の「有効化」ボタンをクリック
サイトにアクセス
（http://localhost/wp-lesson/）
「有効化されていることを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

スタイルが全く効いていないが問題ない。

style.cssの編集style.cssは、
単なるCSSファイルじゃない。

WordPressにおいて「style.css」は単なるCSSファイルではない。
CSSを書くだけではなく、正しくテーマを認識されるために必須なファイルになっている。
なお、「style.css」は、テーマフォルダの直下に配置する必要がある。

ヘッダーコメントを記述してみよう。

「style.css」の冒頭にコメントを記述することで、
テーマの詳細画面でテーマの情報を表示させることができる。

項目	説明
Theme Name	テーマ名
Theme URI	テーマの詳細情報が書かれているURL
Author	テーマの開発者名や組織名
Author URI	開発者や組織のURL
Description	テーマの簡単な説明
Version	バージョン
License	テーマのライセンス
License URI	ライセンスのURL
Text Domain	翻訳用のテキストドメイン
Tags	テーマを検索するためのタグ

「dummy」フォルダ内にある「style.css」ファイルを開く
下記のヘッダーコメントを記述する

dummy/style.css

@charset "UTF-8";
/*
Theme Name: Dummy
Author: Shibata Hironori
Description: WordPressの授業で使うサンプルテーマ
Version: 1.0
Text Domain: dummy
*/

上書き保存
管理画面にアクセス
（http://localhost/wp-lesson/wp-admin/index.php）
「外観」 › 「テーマ」に移動
「Dummy」の「詳細」をクリック
詳細情報を確認

サイトのサムネイル: サイトのサムネイルは、テーマフォルダの直下に「screenshot.png」というファイル名で画像を保存すると認識される。

テーマ開発の準備必要なファイルをコピーしたり、
作ったりする。

これからテーマ開発を行うにあたり必要な「画像ファイル」、「JSファイル」をコピーしたり、
テーマ開発に欠かせない「functions.php」を作成しておく。

必要なファイルをコピーしよう。

まずは、画像ファイル、JSファイルなどをテーマフォルダ内コピーする。

「wordpress-lessons」 › 「dummy-html」 › フォルダ内にある「assets」フォルダをコピー
「dummy」フォルダ内に貼り付ける

functions.phpを作成しよう。

「functions.php」は、テーマで使うPHPの関数をまとめて管理するためのファイルで、
自動的に読み込まれる。（管理画面も）
この「functions.php」を使って、コアファルを触らずに、
デフォルトの動作を変更したり、機能を追加したりする。

「wp-lesson」フォルダ内に「functions.php」ファイルを作成する
下記のPHPのコードを記述する

dummy/functions.php

<?php
  echo 'Hello WordPress';

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
「Hello WordPress」が表示されていることを確認
管理画面にもアクセス
（http://localhost/wp-lesson/wp-admin/）
ソースコードに「Hello WordPress」が表示されていることを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

確認できたら、2行目を削除して保存しておく

dummy/functions.php

<?php

上書き保存く

コンテンツ幅の設定埋め込みコンテンツなどの
幅を設定する。

テーマを作成するときは、「function.php」にコンテンツの最大幅を設定する
コンテンツ幅は、「$content_width」という変数に代入する。
この幅は、プラグインや埋め込みコンテンツや投稿内の画像などといったあらゆるところで使われる。

コンテンツ幅を設定してみよう。

今回用意したデザインは、記事の投稿エリアのコンテンツ幅は「776px」のため、
「$content_width」に776を代入する。

「dummy」 › 「function.php」をテキストエディタで開く
下記のPHPのコードを記述する

dummy/functions.php

<?php
/*======================================
  コンテンツ幅
======================================*/
if ( !isset( $content_width ) ) {
  $content_width = 776;
}

上書き保存

タイトルタグの出力タイトルタグを出力させる
機能がある

<title>タグは、<head>タグ内に直接記述することも出来るが、
テーマサポートという機能使って出力することもできる。
今回は、「functions.php」にテーマサポートによるタイトルを出力する記述を行う。
その際、初期設定用の独自関数を作成し、テーマが読み込まれた時に実行するように設定する。

タイトルタグを出力する設定をしてみよう。

「functions.php」に「dummy_setup」という独自関数を作って、
そこに、add_theme_support()関数で、タイトルタグを出力する命令を記述する。

add_theme_support関数・・・テーマやプラグインが特定のテーマ機能をサポートすることを許可する関数

add_theme_support(追加する機能, オプション)
                               省略可

オプション ・・・ オプションを配列形式で指定指定。省略時は「true」となる。

引数の詳細はWordPress Codex 日本語版を参照

「dummy」 › 「function.php」をテキストエディタで開く
下記のPHPのコードを追記する

dummy/functions.php

<?php
/*======================================
  コンテンツ幅
======================================*/
if ( ! isset( $content_width ) ) {
  $content_width = 776;
}

/*======================================
  初期設定
======================================*/
function dummy_setup() {

  /*
    Titleタグ
  ----------------------------------- */
  add_theme_support( 'title-tag' );
}

上書き保存

アクションフックで実行してみよう。

先程の「dummy_setup」という独自関数は、処理を登録しただけで実行はしていない。
WordPressでは、「フック」という仕組みを使って、
任意のタイミングで処理を実行させることができる。
今回は「after_setup_theme」という、テーマが読み込まれた後に実行するというフックを使う。

add_action関数・・・テーマやプラグインが特定のテーマ機能をサポートすることを許可する関数

add_action(実行タイミングのフック名, 実行する関数名)

引数の詳細はWordPress Codex 日本語版を参照

「dummy」 › 「function.php」をテキストエディタで開く
下記のPHPのコードを追記する

dummy/functions.php

<?php
/*======================================
  コンテンツ幅
======================================*/
if ( ! isset( $content_width ) ) {
  $content_width = 776;
}

/*======================================
  初期設定
======================================*/
function dummy_setup() {

  /*
    Titleタグ
  ----------------------------------- */
  add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'dummy_setup' );

上書き保存
この時点では、WordPressが <head>要素内を操作できないので、まだ何も変更されていない。

アクションフックとフィルターフック: 高度なテーマ制作を行うには、WordPressのフック理解が必要となる。
フックは、WordPressのコアファイルを変更することなく、初期設定などの変更が出来る仕組み。
ただし、このフックをきちんと理解出来るようになるには、中級以上のスキルが求められる。
フックには、特定のポイントや特定のイベント発生時に呼び出されるアクションフックと、
データベースの保存時や読み出し時にその値を改良するときに使われるフィルターフックがある。
基本的にはどちらも「functions.php」に独自関数を作成し、アクションフックの場合は、add_action()を、フィルターフックの場合は、add_filter()で、関数を登録する。
アクションフック一覧

wp_head()とwp_footer() 本体やプラグインが使う、
大事な関数。

テーマを作る場合は、<head>タグ内に、wp_head()関数を、
</body>タグの手前に、wp_footer()関数を配置する。
これにより、WordPress本体やプラグインなどが、metaタグや、スクリプト、スタイルを
要素内に追加することが出来る。

`wp_head()`と`wp_footer()`を
記述してみよう。

まずは、画像ファイル、JSファイルなどをテーマフォルダ内コピーする。

「dummy」 › フォルダ内にある「index.php」をテキストエディタで開く
<title>要素を削除して、wp_head()関数を記述する

dummy/index.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <?php wp_head(); ?>
  <link rel="stylesheet" href="assets/css/common.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Quicksand:400,700&display=swap&subset=japanese">
</head>
<body>

</body>の手前に、wp_footer()関数を記述する

dummy/index.php

  </footer>
  <script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="assets/js/app.js"></script>
  <?php wp_footer(); ?>
</body>
</html>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
タイトルが表示されているかを確認。
なお、ソースコードを表示すると、「Yoast SEO」によってコードも追記されている。
（ログインしている場合は、Adminバーも表示されている）

ブラウザでの表示例

RERUN

新しいウインドウで表示する

スタイルの適用テーマで使用するCSSを、
追加する関数がある。

現在スタイルが適用されなくなった理由は、CSSファイルへのパスが成立していないことが原因。
相対パスは現在アクセスしているページからのパスなので、
現在は「wp-lesson/assets/css/common.css」を参照していることになる。
しかし、その場所にCSSファイルが無いためスタイルが適用されていない。
かといって、絶対パスに変更しても、ローカル環境と本番環境ではURLが異なるので、
メンテンス性が低下する。
そこで、WordPressでは、テーマで使用するCSSファイルを安全に追加する関数があるため、
その関数を使いCSSファイルを追加し、スタイルを適用させる方がよい。

スタイルを適用させてみよう！

今回のテーマでは、テーマ直下に配した「style.css」ではなく、「assets」 ›「css」フォルダにある、「common.css」を適用させたい。そこで、wp_enqueue_style()関数を使って、「common.css」を追加する。
なお、テーマフォルダまでのパスはURLを直接記述することは避けて、 get_theme_file_uri()関数を使って、パスを取得する。

wp_enqueue_style (ダブリューピーエンキュースタイル)関数・・・ WordPressが生成したページに CSSファイルを安全に (キューへ)追加する関数

wp_enqueue_style(ハンドル名, ファイルパス, このCSSファイルより前に読み込まれる必要があるCSSファイルの配列, バージョン番号, メディア媒体)
                                                    省略可

メディア媒体 ・・・ 'all'、'screen'、'handheld'、'print' など

引数の詳細はWordPress Codex 日本語版を参照

get_theme_file_uri関数・・・有効化しているテーマフォルダのURIを取得する関数

get_theme_file_uri(ファイルパス)
                      省略可

引数の詳細はWordPress Developer Resourcesを参照

「dummy」 › 「function.php」をテキストエディタで開く
下記のPHPのコードを追記する

dummy/functions.php

/*======================================
  初期設定
======================================*/
function dummy_setup() {

  /*
    Titleタグ
  ----------------------------------- */
  add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'dummy_setup' );

/*======================================
  スタイルの追加
======================================*/
function dummy_scripts() {
  wp_enqueue_style( 'dummy-common', get_theme_file_uri() .'/assets/css/common.css' );
  wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Quicksand:400,700&display=swap&subset=japanese' );
}
add_action( 'wp_enqueue_scripts', 'dummy_scripts' );

上書き保存
「dummy」 › 「index.php」をテキストエディタで開く
<link>要素を削除する

dummy/index.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <?php wp_head(); ?>
</head>
<body>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
スタイルが適用されているかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

style.cssにスタイルを書いた場合

今回は、「common.css」にスタイルを書いたが、もちろんテーマフォルダ直下に配置した「style.css」にスタイルを記述することもできる。
その場合は、 get_stylesheet_uri()という関数で、「style.css」ファイルのURLを取得できる。

dummy/functions.php

function dummy_scripts() {
  wp_enqueue_style( 'dummy-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'dummy_scripts' );

スクリプトの適用テーマで使うJavaScriptも、
functions.phpで追加する。

現在JavaScriptもスタイルと同様の理由で適用されていない。
従って、スクリプトを適用させるにも「functions.php」でJSファイルを追加する必要がある。

スクリプトを適用させてみよう！

今回は、「assets」 ›「js」フォルダにある、「app.js」を適用させたい。
そこで、wp_enqueue_script()を使って、app.jsを追加する。

wp_enqueue_script (ダブリューピーエンキュースクリプト)関数・・・ WordPressが生成したページに JavaScript を追加する関数

wp_enqueue_script(ハンドル名, ファイルパス, このJSファイルより前に読み込まれる必要があるJSファイルの配列, バージョン番号, </body>の手間で読み込むか？)
                                                    省略可

</body>の手間で読み込むか？ ・・・ true(</body>の手間で読み込む) / false(</head>要素内で読み込む)【初期値】

引数の詳細はWordPress Codex 日本語版を参照

「dummy」 › 「function.php」をテキストエディタで開く
下記のコメントやPHPのコードを追記する

dummy/functions.php

/*======================================
  初期設定
======================================*/
function dummy_setup() {

  /*
    Titleタグ
  ----------------------------------- */
  add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'dummy_setup' );

/*======================================
  スタイル・スクリプトの追加
======================================*/
function dummy_scripts() {

  /*
    CSS
  ----------------------------------- */
  wp_enqueue_style( 'dummy-common', get_theme_file_uri() .'/assets/css/common.css' );
  wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Quicksand:400,700&display=swap&subset=japanese' );

  /*
    JS
  ----------------------------------- */
  wp_enqueue_script( 'dummy-app', get_theme_file_uri() .'/assets/js/app.js', ['jquery'], '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'dummy_scripts' );

上書き保存
「dummy」 › 「index.php」をテキストエディタで開く
<script>要素を削除する

dummy/index.php

  </footer>
  <?php wp_footer(); ?>
</body>
</html>

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
<head>要素内に、jQuery本体が、</body>の手前付近に「app.js」が読み込まれていることを確認。
ハンバーガーボタンをクリックしても、ドロワーメニューが開かないことを確認。

ブラウザでの表示例

RERUN

新しいウインドウで表示する

WordPressでjQueryが動かない理由: WordPressがデフォルトで用意しているjQueryは、「no-conflictモード」で読み込んでおり「$」が使えないのが原因。
これは、jQuery以外にも、「$」を変数として利用するJavaScriptのライブラリがあり（prototype.js など）、それらのライブラリとの競合の回避するために、「$」が使えなくなっている。
Avoiding Conflicts with Other Libraries

jQueryのコードを修正 no-conflictモードでも
「$」を動くようにする。

WordPressのデフォルトで用意されているjQueryは、「no-conflict」モードで読み込まれているため「$」が使えない。
そこで、「no-conflict」モードでも「$」が使えるようにコードを修正する。

jQueryのコードを修正しよう。

$(function() {})の「$」を「jQuery」に変更し、引数に「$」を渡せばよい。

「dummy」 › 「assets」 › 「js」の中にある「app.js」をテキストエディタで開く
下記のようにjQueryのコードを修正する

dummy/assets/js/app.js

jQuery(function ($) {
  /* ==============================
    Drawer
  ============================== */
  $('.js-drawer').click(function () {
    $('body').toggleClass('is-drawerActive');

    if ($(this).attr('aria-expanded') == 'false') {
      $(this).attr('aria-expanded', true);
    } else {
      $(this).attr('aria-expanded', false);
    }
  });
})

上書き保存
サイトにアクセス
（http://localhost/wp-lesson/）
ハンバーガーボタンをクリックしたら、ドロワーメニューが開くかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

自分で用意したjQueryを使うことも出来る。

jQueryは、自分で用意したものを使う事もできる。
ただし、その場合は、WordPressデフォルトのjQueryを wp_deregister_script()という関数を使って登録解除し、自分で用意したjQueryを wp_register_script()という関数で登録する必要がある。
ただし、プラグインなどがjQueryを使ったりするので、基本的には、デフォルトで入っているjQueryを使うことが多い。

dummy/functions.php

function dummy_scripts() {
  // 登録解除
  wp_deregister_script('jquery');

  // 登録
  wp_register_script( 'jquery', 'http://code.jquery.com/jquery-1.12.4.min.js', [], '1.12.4', true );

  wp_enqueue_script( 'dummy-app', get_theme_file_uri() .'/assets/js/app.js', ['jquery'], '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'dummy_scripts' );

まとめテーマに必要なファイルを知り、
機能は関数で定義しフックさせる。

WordPressのテーマには、必要なファイルが存在する。
テーマの情報を「style.css」に書いたり、「functions.php」に機能に関する処理を書いたりする。

style.cssは、ただのCSSファイルではない
wp_head() やwp_footerは忘れずに
functions.phpに記述してフックさせて機能を追加できる

Chapter04 オリジナルテーマ開発の基礎

デバッグモードを有効化してみよう

テーマフォルダを作ってみよう

テーマを有効化してみよう

ヘッダーコメントを記述してみよう。

必要なファイルをコピーしよう。

functions.phpを作成しよう。

コンテンツ幅を設定してみよう。

タイトルタグを出力する設定をしてみよう。

アクションフックで実行してみよう。

wp_head()とwp_footer()を記述してみよう。

スタイルを適用させてみよう！

スクリプトを適用させてみよう！

jQueryのコードを修正しよう。

`wp_head()`と`wp_footer()`を
記述してみよう。