今回はWordPressオリジナルテーマの作り方【第3回】functions.php編となります。
前回までに以下の事をやってきました。
前回の記事でトップページからヘッダーとフッターを分ける作業は完了しました。
今回はfunctions.phpというテーマファイルについて説明していきたいと思います。
効率よくWordPress制作したい人はこちら
WordPressオリジナルテーマの作り方：functions.phpの書き方
functions.phpとは各ページのコンテンツを表示させるものではなく、WordPress全体のプラグインのような働きをするものです。
例えばオリジナルテーマは既存テーマには普通にあるアイキャッチの設定画面も表示されません。
そこでこのfunctions.phpにアイキャッチを使えるようにする機能を追加していくといった感じになります。
もちろん必要に応じてどんどんコードを追記していくので、この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にコピペすればOKです。
特にアイキャッチは普通にあると思ってる方が多いと思いますが、ここで設定しないと表示されないので忘れずに設定しておきましょう。
CSSやJavaScriptを読み込む
CSSやJavaScriptはheader.php（headタグ）から読み込むことも出来ますが・・・
一般的にはこのfunctions.phpから読み込みます（Wordpressが推奨しています）
それではそのfunctions.phpでCSSやJavaScriptを読み込むコードを書いていきます。
<?php
/* CSSとJavaScriptの読み込み */
function my_script_init()
{ // WordPressに含まれているjquery.jsを読み込まない
wp_deregister_script('jquery');
// jQueryの読み込み
wp_enqueue_script( 'jquery', '//code.jquery.com/jquery-3.6.0.min.js', "", "1.0.1");
wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.1', true );
wp_enqueue_style( 'style-css', get_template_directory_uri() . '/css/style.css', array(), '1.0.1' );
}
add_action('wp_enqueue_scripts', 'my_script_init');これでOKです。少し解説します。
wp_enqueue_scriptが、JavaScriptを読み込む関数（7～8行目）
wp_enqueue_styleが、CSSを読み込む関数（9行目）
になります。
- 7行目はjQuery本体
- 8行目は自作したjsファイル
- 9行目は自作したcssファイル
なので、自作したファイルのファイル名はご自身の環境に合わせて変更して下さい。
get_template_directory_uri() は前回画像を表示させるために書いた関数と同じ、テーマのディレクトリ（フォルダ）までのパスを出力させるものです。
上記のコードはfunctions.phpとcssやjsフォルダが同じ階層にある場合なので、もし階層が違っていたらご自身の環境に合わせて下さい（同じ階層にあるというのはこのような状態です）
これでfunctions.phpからCSSやJavaScriptを読み込むことが出来たので、前回の記事で作成したheader.phpからCSSを読み込む一行は削除しましょう。
header.phpはこうなります。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<link href="style.css" rel="stylesheet" /> // この行を削除
</head>
<body <?php body_class(); ?>><?php wp_body_open(); ?>
<header>ヘッダー</header>8行目を削除ですね。
同じようにfooter.phpの</body>タグ直前にあると思われるjsの読み込み部分も削除します（前回の記事にはありません）
あといくつか注意点があります。
WordPressに含まれているjquery.jsを読み込まない
通常、静的サイトでjQueryを使用するにはjQuery本体を読み込む必要があります。
jQuery本体を読み込む方法はこちらを参考にして下さい。
ただWordPressにはjQueryが標準で用意されているので、本体を読み込む必要はありません。
しかしWordPressが用意しているjQueryは標準のjQueryとは書き方が少し異なるので、ここでは5行目でWordPressが用意しているjQueryの読み込みをキャンセルし、7行目で自分が使いたいjQueryを読み込んでいます。
第一引数の名前は重複させない
この第一引数というのは以下のscript-nameやlightboxの部分になります。
ここの名前は自由に決めていいのですが、css同士、js同士で同じ名前を付けると動かなくなります。
<?php
/* CSSとJavaScriptの読み込み */
function my_script_init()
{
wp_enqueue_style('lightbox', get_theme_file_uri('/css/lightbox.css'), array(), '1.0.1');
wp_enqueue_script('script-name', get_theme_file_uri('/js/main.js'), array( 'jquery' ), '1.0.1', true);
wp_enqueue_script('lightbox', get_theme_file_uri('/js/lightbox.js'), array( 'jquery' ), '1.0.1', true);
wp_enqueue_script('script-name', get_theme_file_uri('/js/access.js'), array( 'jquery' ), '1.0.1', true);
}
add_action('wp_enqueue_scripts', 'my_script_init');上の例ではwp_enqueue_scriptの第一引数でscript-nameが2つあるのでNGとなります（6行目と8行目）
またlightboxも2つありますが、これはwp_enqueue_scriptとwp_enqueue_styleなのでOKです。
以前これでかなりハマったことがあるのでご注意下さい。
そして上記のコードから分かる通り、ファイルの種類が増えれば追記していくことが可能です。
また最後にあるtrueですが、
- false → </head>の前に書かれる
- true → </body>の前に書かれる
という違いになります（デフォルトはfalse）
全角スペースを入れない
これがあると誰もが恐れる
画面真っ白
という状態になりかねません。
もし画面が真っ白になったらfunctions.phpに全角スペースがないか確認してみましょう。
まとめ：functions.phpはプラグインの様に機能を追加するもの
このfunctions.phpには案件によっていろいろ追記していく事になると思うので、慣れておきましょう。
functions.phpに書くと便利な機能は、以下のコーディング&WordPressメモまとめ集にコピペ出来るように掲載しています。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
（平均スコア）
