ワードプレステーマ開発シリーズで前回はよく使う基本コードについてまとめました。今回はそこで生まれたHTMLに対して設定とCSS、JSを当てて行こうと思います。こちらのCSS設定ではワードプレス自体にCSSを読み込ませたのですが、テーマ自体がこのCSSを認識しておらず色を変えてもテーマに反映されません。

wp_footerとwp_head

header.phpとfooter.phpに下記の関数を書き込みます。

<header>
    <?php wp_head(); ?>
    <?php echo 'header'; ?>
</header>
<footer>
    <?php echo 'footer'; ?>
    <?php wp_footer(); ?>
</footer>

これでfunctions.phpが読み込めるようになります。

functions.phpを使ってCSSを読み込む

注意としてfunctionsのSを忘れないようにしましょう。すごい初心者の時これに気づかずずっとさまよってました。

function add_styles()
{
    wp_enqueue_style('main', get_template_directory_uri() . '/style.css', "", '01');
}
add_action('wp_enqueue_scripts', 'add_styles');
テーマフォルダのパスを取得
get_template_directory_uri();
フック

と呼ばれるものです。違う記事でしっかり解説しますがとりあえずは

add_action('呼び出すタイミング', '呼び出す関数');

と覚えて下さい。

functions.phpを使ってJavaScriptを読み込む

function add_styles()
{
    wp_enqueue_style('main', get_template_directory_uri() . '/style.css', "", '01');
}
add_action('wp_enqueue_scripts', 'add_styles');

//追加
function add_scripts()
{
    wp_enqueue_script('smart-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '20160608', true);
}
add_action('wp_print_scripts', 'add_scripts');
現在のフォルダ構成
  • assets/main.js
  • header.php
  • index.php
  • footer.php
  • functions.php
  • style.css
function add_styles()
{
    wp_enqueue_style('main', get_template_directory_uri() . '/style.css', "", '01');
}
add_action('wp_enqueue_scripts', 'add_styles');

//ここから追加
function add_scripts()
{
    wp_enqueue_script('main', get_template_directory_uri() . '/src/assets/js/main.js', array('jquery'), 'ver1', false);
}
add_action('wp_print_scripts', 'add_scripts');

CSSと同じく関数にパラメーターを渡して定義できる。JSの場合は5番目の引数をfalseにしないとheadでjsが読み込まれてしまい反応しないので必ずfalseにする。

JavaScriptモジュール化

1つJavaScriptを増やしてみます。

  • assets/main.jsとmain2.js
  • header.php
  • index.php
  • footer.php
  • functions.php
  • style.css

そして下記のようにfunctions.phpを変更。

function add_styles()
{
    wp_enqueue_style('main', get_template_directory_uri() . '/style.css', "", '01');
}
add_action('wp_enqueue_scripts', 'add_styles');

//ここから変更
function add_scripts()
{
    wp_enqueue_script('main', get_template_directory_uri() . '/src/assets/js/main.js', array('jquery'), 'functions', false);
    wp_enqueue_script('main2', get_template_directory_uri() . '/src/assets/js/main2.js', array('main', 'jquery'), 'functionCalls', false);
}
add_action('wp_print_scripts', 'add_scripts');

4番目の配列に従属するJSファイル名(第一引数)を指定するとファイルがバラバラでも繋がってる状態になる。例えば下の例今回だとmain.jsで関数を定義してmain.2で呼び出すことができる。

console.log("main1");

function myFunction() {
  return "function";
}
console.log("main2");
console.log(myFunction());

コンソール結果を見るとしっかり呼び出される。

//main1
//main2
//function

WP用jQueryを使う

jQueryの書き方

ワードプレスには表記の違うjQueryが標準装備されてるので書き方が異なる。

jQuery(function($) {
  $("header").css({background: "pink"});
});

他のjQueryプラグインを使う場合

jQueryプラグインを使う場合は上記ワードプレスjQueryを使用しない方がいいので

wp_deregister_script('jquery');

で使えないようにして

wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), '3.3.1');

上記のようにwp_enqueue_scriptでcdnもしくは自分で、ダウンロードしたjqueryを呼び出します。

wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), '3.3.1');

結果今関数add_scriptは下記のようになります。


function add_scripts()
{
    if (!is_admin()) {
        wp_deregister_script('jquery');
    }
    wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', "", "var2.1.4jQuery", false);
    wp_enqueue_script('main', get_template_directory_uri() . '/src/assets/js/main.js', array('jquery'), 'functions', false);
    wp_enqueue_script('main2', get_template_directory_uri() . '/src/assets/js/main2.js', array('main', 'jquery'), 'functionCalls', false);
}
add_action('wp_print_scripts', 'add_scripts');

ちなみに

if (!is_admin()) {}

でアドミンでは動かないようにしてるのは管理画面やプラグインででワードプレスのjQueryが使われてるみたいだからです。
これで通常と同じような感じでJavaScriptのプラグインを使うことができるようになります。

まとめ

ファイル構成が同じなら下のコピペすれば動きますw

<?php
function add_styles()
{
    wp_enqueue_style('main', get_template_directory_uri() . '/style.css', "", '01');
}
add_action('wp_enqueue_scripts', 'add_styles');

function add_scripts()
{
    if (!is_admin()) {
        wp_deregister_script('jquery');
    }
    wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', "", "var2.1.4jQuery", false);
    wp_enqueue_script('main', get_template_directory_uri() . '/src/assets/js/main.js', array('jquery'), 'functions', false);
    wp_enqueue_script('main2', get_template_directory_uri() . '/src/assets/js/main2.js', array('main', 'jquery'), 'functionCalls', false);
}
add_action('wp_print_scripts', 'add_scripts');

それではSeeeee Yaaaaaa!!!

WordPresspテーマ開発におすすめの参考書