WordPressオリジナルテーマの作り方③（functions.phpとは）

前回の記事でトップページをパーツごとに分ける作業は完了しました。

今回はfunctions.phpというテンプレートファイルについて説明していきたいと思います。

1 functions.phpとは
2 cssやjsを読み込む

functions.phpとは

functions.phpとは各ページのコンテンツを表示させるものではなく、分かりやすく言うとWordPress全体のプラグインのような働きをするものです。

オリジナルテーマを作る場合は有料テーマを使っているとお馴染みのあるアイキャッチなども最初は表示されていません。

そこでこのfunctions.phpにアイキャッチを使えるようにする機能を追加していくといったことが可能です。

なのでこのfunctions.phpもほぼ必須ファイルとなります。

ここではまず最初に書くべきことを説明します。

cssやjsを読み込む

前回の記事でcssやjsをheader.php（headタグ）から読み込むことも出来ますが・・・

と書きましたが、一般的にはこのfunctions.phpから読み込みます（Wordpressが推奨しています）

これを追記しないとcssが適用されていないhtmlだけが表示されるので、ここでcssなどを読み込むことでようやく正常な表示がされることになります。

それではそのfunctions.phpでcssやjsを読み込むコードを書いていきます。

functions.php

<?php
/* CSSとJavaScriptの読み込み */
function my_script_init()
  { wp_enqueue_script( 'script-name', get_theme_file_uri('/js/main.js'), array( 'jquery' ), '1.0.1', true );
    wp_enqueue_style( 'style-name', get_theme_file_uri('/css/style.css'), array(), '1.0.1' );
  }
  add_action('wp_enqueue_scripts', 'my_script_init');
?>

これでOKです。コードを見れば分かると思いますが、

wp_enqueue_scriptがjsを読み込む関数

wp_enqueue_styleがcssを読み込む関数

です。

その後のget_theme_file_uri() は前回画像を表示させるために書いた関数と同じ、テーマのディレクトリ（フォルダ）までのパスを出力させるものです。

その後はcssであれば同じ階層にあるcssフォルダの中にある、style.cssを読み込むということになります。

これでfunctions.phpからcssやjsを読み込むことが出来たので、前回の記事で作成したheader.phpからcssを読み込む一行は削除しましょう。

header.php

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>タイトル</title>
    <link rel="stylesheet" href="css/style.css" /> //この一行を削除
    <?php wp_head(); ?>
  </head>
  <body>
    <header>
      ヘッダーテキスト
    </header>

ここでは書きませんが、footer.phpの</body>タグ直前にあるであろうjsの読み込み部分も削除します。

そして注意点が3点あります。

第一引数の名前は重複させない

この第一引数というのはscript-nameやstyle-nameの部分になります。

ここはそのままですがスタイルの名前を書くところで自由に決めていいのですが、以下のようにcss同士、js同士で同じ名前を付けると動かなくなります。

functions.php

<?php
/* CSSとJavaScriptの読み込み */
function my_script_init()
{
wp_enqueue_style('lightbox', get_theme_file_uri('/css/lightbox.css'), array(), '1.0.1', 'false');
wp_enqueue_script('script-name', get_theme_file_uri('/js/top.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となります。

またlight.boxも2つありますが、これはwp_enqueue_scriptとwp_enqueue_styleなのでOKです。

以前これのせいでかなりハマったことがあるのでご注意下さい。

そして上記のコードから分かる通り、ファイルの種類が増えれば追記していくことが可能です。

また最後にある false と true の違いですが、