WordPressオリジナルテーマ制作手順-③functions.php を解説-

2022-07-272022-07-29

前回の記事では、Wordpressオリジナルテーマ制作のうち、トップページの制作手順を解説しました。
これまでに以下の作業を行いました。

WordPressオリジナルテーマ制作に必要なファイルの準備
トップページ制作

今回はWordpressオリジナルテーマ制作において「心臓」と呼べるfunctions.phpファイルについて解説します。

functions.phpとは？

ここでは、functions.phpの役割などを改めて解説しておきます。
functions.phpはテーマに必須のファイルです。

WordPressに標準で備わっている機能を有効化したり、必要なファイルを読み込んだり、機能をカスタマイズしたりするために必要なファイルで、心臓といっても過言ではないほど重要なファイルです。
functions.phpの特徴を以下にまとめました。

テーマとセットでwp-content/themesのテーマ用ディレクトリへ配置できる
functions.phpで定義した変数はグローバル変数となりテンプレートとして利用できる
テーマのテンプレートより早く読み込まれるためテーマの初期化処理ができる
WordPress組み込みやPHP関数が呼び出せる
テーマで使う独自関数が定義できる
ダッシュボード(編集画面のページなど)やテンプレート(公開ページ)の表示より早く読み込み実行できる
WordPress機能を変更するフィルターやアクション定義ができる
現在有効化されているテーマのディレクトリにあるときだけ実行されて、そのテーマのみ機能される

functions.phpはこれからWordpressオリジナルテーマを制作するにあたり、何かと便利な特徴が多いのも魅力です。
また、functions.phpでは以下のことが可能になります。

固定ページのページネーション設置
投稿画面でのビジュアルモード非表示
WordPress管理画面ログインページのカスタマイズ
WordPressループのメインクエリ検索条件カスタマイズ
ウィジェットやアイキャッチ画像の設定
サイト内検索結果のカスタマイズ
ショートコード作成
投稿での自動タグ挿入防止
投稿画面における任意の場所へのショートコード挿入
サイト内検索結果内容の絞り込み

functions.phpには多くの機能を拡張できることがお分かりいただけるかと思います。
今回は、functions.phpで以下の事を行います。

顕在化していない機能の有効化
CSSとJavaScriptsの読み込み
メニューの有効化
ウィジェットの有効化

最初にコードエディタを開いて新規ファイルを作成します。
作成完了したら以下のコードを記述しましょう。

<?php

そして「functions.php」という名前でテーマのルートフォルダ（index.phpやsingle.phpなどがある場所）に保存しましょう。

ここでの注意点としては、functionsの「s」を忘れないことです。
準備が完了したらfunctions.phpに必要なコードを記述していきます。

基本的な設定

具体的な作業を進める前に、基本的な設定を済ませておきましょう。
最初に「add_theme_support()」関数でテーマの基本設定を行います。

<?php
  function my_setup(){
    add_theme_support(‘post-thumbnails’); // アイキャッチ画像を有効化
    add_theme_support(‘automatic-feed-links’); // 投稿とコメントのRSSフィードのリンクを有効化
    add_theme_support(‘title-tag’); // titleタグ自動生成
    add_theme_support(‘html5’, array( // HTML5による出力
      ‘search-form’,
      ‘comment-form’,
      ‘comment-list’,
      ‘gallery’,
      ‘caption’,
    ));
  }
  add_action(‘after_setup_theme’, ‘my_setup’);

このコードをfunctions.phpに貼り付けるだけで設定完了です。

ブログ記事などでアイキャッチは迷わず設定するしている方も多いかと思いますが、このコードで基本的な設定を完了させないと正常表示されません。

そのため、この後解説する作業前に必ず設定を完了させておきましょう。

記述上の注意点

functions.phpを記述する上での注意点にも触れておきます。

直接何かのファイル出力しない

functions.phpはテンプレート(公開ページファイル)より早く読み込まれる特徴があります。
そのため、以下のような直接何かのファイルを出力する記述は行わないので注意しましょう。

//functions.php
echo "Hello!";

このように記述すると、HTMLの”Hello!”が<!DOCTYPE html>より早く出力されて、HTML の出力が以下のように変わってしまいます。

Hello!<!DOCTYPE html>
<html lang="ja">
<head>

ページに値を出力する時は数を作成して、その関数をページで実行させましょう。

//functions.php
function my_echo() {
  echo “Hello!”;
}

//テンプレート（index.php など）で実行
<p><?php my_echo(); ?></p>

function_exists()

functions.phpは独自関数が定義できるので、定義した関数はテンプレートファイルで呼び出せます。
関数を子テーマ(親テーマの直下にあるテーマ)で上書きできるよう設定するには、以下のようなコードでfunction_exists()で関数を定義しましょう。

if ( ! function_exists( ‘my_function’ ) ) {
  //my_function が定義されていない場合は my_function を定義
  function my_function() {
    // 処理
  }
}

親テーマで定義されてた関数を子テーマ側で上書きしようとしても、「既にその関数は定義済み」などのエラーが発生しません。

「function_exists()」は指定関数が既に定義されているかが確認できるPHP関数です。

PHP組み込み関数やユーザー定義関数から引数で指定した名前の関数を検索して、仮にその関数が存在していた場合はtrueを返して存在しなければfalseを返します。
ただ、この関数は「include_once」「echo」などの言語構造はfalseを返します。

function_exists()の活用方法

function_exists()はさまざまな活用方法があるので併せて解説しておきます。

プラグイン(拡張機能)をインストールしプラグイン関数をテーマに記述する時にfunction_exists()を使うと、そのプラグインをアンインストールした場合でも「その関数は定義されていません」などのエラーが回避できます。

if ( function_exists( ‘plugin_function’ ) ) {
  //plugin_function が定義されている場合は実行
  plugin_function();
}

以下のようなコードを記述すると、その関数が存在しない場合はテンプレートにdiv要素も出力しないように設定できます。

<?php if( function_exists(‘my_plugin_func’) ): ?>
  <div class=”plugin”>
    <?php my_plugin_func(); ?>
  </div>
<?php endif; ?>

顕在化していない機能の有効化

WordPressには標準機能がさまざまあります。
ただ、「標準機能を使う」とハッキリと示さないと有効化しない機能があります。

記事表示に欠かせない「アイキャッチ画像」は、functions.phpに何も記述していない状態で記事作成画面を確認しても、アイキャッチ項目がありません。

functions.phpでアイキャッチ画像を有効化すると、記事作成画面にアイキャッチ画像の設定箇所が表示されます。

このようにfunctions.phpに必要なコードを記述して、WordPress標準機能を有効化させていきます。以下の関数が機能有効化に必要です。

add_theme_support()

add_theme_support()はWordPressに標準搭載されている特定の機能をテーマで有効化させる関数で、引数に有効にしたい機能名を設定すると完了です。以下の関数は先程解説したアイキャッチ画像を有効化させる場合に使います。

add_theme_support('post-thumbnails');

ここからは最低限必要な機能をまとめて有効化させていきます。以下にコードをまとめました。

<?php
  function my_setup(){
    add_theme_support(‘post-thumbnails’); // アイキャッチ画像を有効化
    add_theme_support(‘automatic-feed-links’); // 投稿とコメントのRSSフィードのリンクを有効化
    add_theme_support(‘title-tag’); // titleタグ自動生成
    add_theme_support(‘html5’, array( // HTML5による出力
      ‘search-form’,
      ‘comment-form’,
      ‘comment-list’,
      ‘gallery’,
      ‘caption’,
    ));
  }
  add_action(‘after_setup_theme’, ‘my_setup’);

コメントにそれぞれのコードの意味を記述しているのでコードと併せてご確認ください。
「add_action()」は特定のアクションに関数をフックする関数で、第1引数にはフックされるアクション・第2引数にはフックする関数名を記述すると完成です。

ちなみに、フックとは「処理のキッカケ」などの意味があります。
フックはこの後で少し解説します。

「add_action( ‘after_setup_theme’, ‘theme_setup’ );」は、「after_setup_theme」というfunctions.phpの読み込み直後に実行されるアクションに対して、作成したtheme_setupをフックさせます。

その後はfunction.phpが読み込まれたら即座にtheme_setupが実行されて、WordPress各種機能が有効化される流れです。

フック

必要に応じてフック(フィルターフックやアクションフック)を記述しましょう。

同じフックを使う時はまとめて記述すると管理がしやすくなるのでお勧めです。例として、「after_setup_themeアクションフック」を使う関数を以下にまとめました。

add_theme_support():特定機能を有効化
add_image_size():画像サイズ登録
register_nav_menus() :ナビゲーションメニュー登録
add_editor_style():ビジュアルエディタのスタイルシート設定
set_post_thumbnail_size():アイキャッチ画像のサイズ設定

after_setup_themeは有効なテーマのfunctions.phpファイルが読み込み直後に実行されます。
テーマ設定やオプション初期化時に使われるアクションフックなので、覚えておくと何かと便利です。

ここまでで必要最低限の機能有効化が完了しました。この後はCSSとJavaScriptsの読み込みについて解説していきます。

CSSとJavaScriptsの読み込み

ここでは、CSSとJavaScriptsの読み込みについて解説します。

ここまでの作業ではCSSとJavaScriptが読み込まれていない状態です。
このままの状態では、index.phpなどそれぞれのファイルはスタイルシートが適用されていないまっさらなHTMLが表示されます。

CSSとJavaScriptを読み込ませるためには、functions.phpでスタイルシートで設定が完了したデザインを適用させます。
ここでは以下の関数を使います。

スタイルシートの読み込み:wp_enqueue_style()
JavaScriptなどのスクリプト読み込み:wp_enqueue_script()

「wp_enqueue_style()」はスタイルシートを出力用キューに入れるための関数。
第1引数にはスタイルシートの名前(他のコードと被らない自由な名前で問題ありません)、第2引数にはスタイルシートに繋がるパスを設定しましょう。

「wp_enqueue_script()」はファイルを出力用キューに挿入する関数です。
第1引数にはスクリプトの名前(他のコードと被らない自由な名前)、第2引数にはスクリプトへのパス、第3引数にはスクリプトよりも先に読み込ませるべきスクリプトの名前を指定すれば完了です。

これらの関数を使ったスタイルシートとJavaScriptsファイルを読み込ませるコードは以下です。

function script_init() {
  //Font Awesomeの読み込み
  wp_enqueue_style(‘fontawesome’, ‘https://use.fontawesome.com/releases/v5.8.2/css/all.css’);
  //CSSの読み込み
  wp_enqueue_style(‘my_style’, get_theme_file_uri(‘/assets/css/style.css’));
  //JavaScriptの読み込み
  wp_enqueue_script(‘my_script’, get_theme_file_uri(‘/assets/js/main.js’), array(‘jquery’));
}
add_action(‘wp_enqueue_scripts’, ‘script_init’);

これで完了ですが、以下で少し補足します。

「get_theme_file_uri()」は有効テーマ内のファイルURLを取得する関数。
引数を無しにするとテーマフォルダまでのURLが戻ってきます。
※例：http://ドメイン/wp-content/themes/テーマフォルダ

引数にテーマフォルダ以降のファイルパス設定(スタイルシートやJavaScriptまでのファイルパス)を行なうことで、スタイルシートやJavaScriptのURLが完成します。

ただ、このコードを記述した上でWebサイトを確認しても、この時点ではWebサイトにスタイルシートやJavaScriptファイルは反映されていません。

読み込みが完了したコードを出力すると、それぞれのファイルが反映されます。
反映されているかどうか、しっかり確認することをお勧めします。

Webサイトに反映させる

ここでは読み込んだスタイルシートやJavaScriptをWebサイトに反映させる方法を解説します。
読み込んだスタイルシートやJavaScriptをサイトに反映させるには、以下の関数を使いましょう。

wp_head()

wp_footer()

この2つの関数で、読み込んだスタイルシートなどをheadタグ内など適切な場所で出力されるよう設定する必要があるのです。

ここからは実際にWebサイトに反映させる作業を詳しく解説するので、お好きなコードエディターでindex.phpを開きましょう。

不要なコードを消す

始めに、これまでの作業で不要なコードを消す作業を行ないます。

index.phpのhead内titleタグは、先程解説した「add_theme_support( ‘title-tag’ );」でtitleタグは自動生成されるので消しておきましょう。

head内のFont AwesomeのCSSと自作CSSを読み込むコードも、functions.phpで読み込んでwp_head()で出力するので消しておきましょう。

wp_head()の記述

以下のコードを</head>タグの直前に記述しましょう。

<?php wp_head(); ?>

wp_head()はheadタグ内に必要コードを出力する関数。
wp_head()タグで、headタグ内にfunctions.phpで読み込ませたスタイルシートやスクリプトなどが無事に出力されるのです。

wp_footer()の記述

以下のコードを</body>タグの直前に記述しましょう。

<?php wp_footer(); ?>

wp_footer()もwp_headと同じく、記述個所に必要コードを出力する関数。
wp_footer()の効果により管理画面にリンクバーが表示されるのです。

サイト確認

管理画面から「サイトを表示」をクリックして、WEBサイトを確認してみましょう。

ここまででindex.phpにスタイルシートが適用されて、管理画面へのリンクバーが表示されます。
これでスタイルシートとJavaScriptの読み込み作業は完了です。

メニューの有効化

メニューは、WordPress管理画面の『外観』⇒『メニュー』から設定できる機能です。

メニューはヘッダーやフッター、スマートフォン表示時のドロワーメニューが作成できます。
さまざまなメニューを作成するため、メニューも有効化させる必要があるのです。

メニューの有効化は以下のタグを使って記述していきます。

register_nav_menus()

register_nav_menus()はテーマにナビゲーションメニューが追加できる関数。
複数メニューが登録できるのも特徴。「global」はプログラムの裏側で使われている値で、
「グローバルメニュー」は管理画面で確認できるユーザー用の値です。

引数にはメニューの位置だけではなく、メニュー画面に表示させるラベルも連想配列で記述します。
以下に具体的なコードをまとめました。

引用:関数リファレンス/register sidebar – WordPress Codex 日本語版

/**
 * メニューの登録
 *
 * @codex https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_nav_menus
 */
function my_menu_init() {
register_nav_menus( array(
‘global’  => ‘グローバルメニュー’,
‘utility’ => ‘ユーティリティメニュー’,
‘drawer’  => ‘ドロワーメニュー’,
) );
}
add_action( ‘init’, ‘my_menu_init’ );

記述コードを保存した上で管理画面を更新したら、「外観」の項目内に「メニュー」が表示されます。
連想配列のキーは該当メニューを任意の場所に表示するときに使って、値はメニュー画面内のメニュー設定の「メニューの位置」として表示されます。

具体的なメニューの作成については、次回以降で説明したいと思います。

ウィジェットの有効化

ウィジェットは、WordPress管理画面『外観』⇒『ウィジェット』で設定できる機能です。

ウィジェットで操作したい機能がある場合は、必要な分だけ追加すると安心です。
サイドバーの有効化は以下のタグを使って設定します。

register_sidebar()

register_sidebar()関数を使うと、ウィジェットが複数でも作成できます。
ウィジェットを増やす場合は、id値だけは他と被らないように作成する必要があるので注意しましょう。

以下にregister_sidebar()を使ったコードを記載しています。

引用:関数リファレンス/register sidebar – WordPress Codex 日本語版

/**
 * ウィジェットの登録
 *
 * @codex http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_sidebar
 */
function my_widget_init() {
register_sidebar( array(
‘name’          => ‘サイドバー’,
‘id’            => ‘sidebar’,
‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
‘after_widget’  => ‘</div>’,
‘before_title’  => ‘<div class=”widget-title”>’,
‘after_title’   => ‘</div>’,
) );
}
add_action( ‘widgets_init’, ‘my_widget_init’ );

登録が完了するとウィジェットエリアが追加されます。

使うテーマによって表示画面が異なりますが、上記のコードで記述した項目が表示されます。
それぞれのパラメーターは以下にまとめています。

‘name’:サイドバーウィジェットの名前
‘id’:サイドバーウィジェットのID
‘before_widget’:ウィジェット直前で出力されるタグ
‘after_widget’:ウィジェットの直後に出力されるタグ
‘before_title’:ウィジェットのタイトル直前に出力されるタグ
‘after_title’:ウィジェットのタイトル直後に出力されるタグ

‘before_widget’内にある「%1$s」は、ウィジェット追加時にウィジェットに付与されるid名です。
この場合は「ウィジェット名+番号」になります。
「%2$s」は、追加ウィジェットのクラス名に「widget_ウィジェット」名が付与される意味があります。

例としては、上記の設定でカスタムHTMLのウィジェットを追加すると、idは「custom_html-〇(自動生成された番号)」、クラス名には「widget」「widget_custom_html」が付与される仕組みです。

ウィジェットをサイドバーに表示させるには「dynamic_sidebar()」関数も必要です。
※idの設定値はdynamic_sidebar()で使います。dynamic_sidebar()関数はまた機会があれば解説します。

画像サイズ

画像サイズは、Wordpress管理画面『設定』⇒『メディア』から指定できます。

WordPress管理画面に依存させないほうが、ユーザーが誤ってこの値を変えてもトラブルに発展しません。
そのため、WordPressテーマ独自で使うための画像サイズはfunctions.phpで設定する場合が多いです。

画像サイズ設定で使う関数を以下に記載します。

add_image_size( ‘my_thumbnail’, 420, 300, true );

「my_thumbnail」はプログラム側で使う値。
今回の場合は幅420px・高さ300pxのmy_thumbnail関数を記述しました。
これでトリミング⇒画像作成が完了しました。

ちなみに、この関数を呼び出す時は標準のアイキャッチ画像を出力する時と同じく、引数に先ほど作成したmy_thumbnailを挿入するだけで完了します。

ツールバーの非表示

ツールバーとは編集や記事作成時にページ最上部に固定表示されるメニューバー。

Webサイトの表示やWordPressの更新情報、記事へのコメント通知やプラグインによってはサイトの統計情報等も表示できます。

非表示にするには、functions.phpに以下のコードを記述しましょう。

add_filter('show_admin_bar', '__return_false');

「show_admin_barフィルターフック」を使って、「__return_false」でfalseを返す関数です。
または、show_admin_bar() を使って以下のコードをfunctions.phpに記述しても同じく非表示設定が完了します。

show_admin_bar( false );

まとめ

今回はfunctions.phpファイルの役割や設定方法などを解説しました。
functions.phpに必要なコードを記述することで、
WordPressオリジナルテーマ制作に必要なWordPressの機能が有効化されます。

更には、JavaScriptsやスタイルシートなどの読み込みと出力、サイドバーやメニューの有効化も同時に完了しました。

今回解説した制作手順は、暗記より「概念」「できることだけ」を認識しておくと安心です。
今回解説していないカスタマイザー機能の拡張や、ウィジェットやメニュー(WordPressが独自HTMLタグやクラスで出力部分)の基本デザインなどは、また機会があれば詳しく解説する予定です。

次回はWordpressオリジナルテーマ「固定ページ」の制作手順を解説します。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！