ローカル開発環境でワードプレスオリジナルデザインを開発しよう５function.phpでJSとCSSを設定【HTML, CSS, JavaScript, PHP, WordPress初心者】

前回は、ワードプレステーマ開発シリーズで前回はよく使う基本コードについてまとめました。しかしながら、現状ではただのHTMLしか表示されないのでfunction.phpを通して、CSS、JSを当てて行こうと思います。

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の場合は５番目の引数をfalseにしないとheadでjsが読み込まれてしまい反応しないので必ずfalseにする。

JavaScriptモジュール化

１つ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');

４番目の配列に従属する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!!!

sgw

フロントエンド

XFacebook

カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。