Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

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

f:id:sgwshu:20190204111143j:plain
こんにちは、ワードプレス記事復活です。

復習はこちらから

開発環境編
www.fran-shushoku.com
CSS設定編
www.fran-shushoku.com
フォルダ構成編
www.fran-shushoku.com
コード編
www.fran-shushoku.com


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

現在作っているサイトはこんな感じです。
コンテントを自動作成するプラグインを入れてるのでこんな感じで表示されます。
f:id:sgwshu:20190204105352p:plain
www.fran-shushoku.com

head内とfooter下にwp_footerとhead関数を書き込みます(ルール)

header.php
<?php
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sample</title>
  <?php wp_head(); ?>
</head>
?>
footer.php
      <footer>
        footer
      </footer>
      <?php wp_footer(); ?>
  </body>
</html>

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

functions.phpを使ってjsファイルを読み込む

注意としてfunctionsのSを忘れないようにしましょう、よく忘れて読み込めないことがあるので(笑)

使うwpコード

Jsを指定

wp_enqueue_script( $名前, $パス, $配列で依存してるファイル指定(名前で), $バージョン, $true指定でフッターに );

テーマフォルダのパスを取得

get_template_directory_uri();

フック

と呼ばれるものです。違う記事でしっかり解説しますがとりあえずは
add_action('呼び出すタイミング', '呼び出す関数');
と覚えて下さい。

現在のフォルダ構成
  • assets=>js(sample.js, sample_2.js)
  • header.php
  • index.php
  • footer.php
  • functions.php
  • style.css

JavaScript

sample.js
console.log("hello world");
console.log(func());
sample_2.js
function func() {
  return "func returned";
}

簡単バージョン

functions.php

<?php
function scripts(){
    wp_enqueue_script('sample1', get_template_directory_uri().'/assets/js/sample.js', array('sample2', 'jquery'), 'ver1', true);
    wp_enqueue_script('sample2', get_template_directory_uri().'/assets/js/sample_2.js', array('jquery'), 'ver1', true);
}
add_action('wp_print_scripts', 'scripts');

3つ目の引数である配列に依存してるjsファイルを書き込むとjsをモジュール化することができます。
なのでsample.jsにて外部ファイルsample_2.jsで定義されてる関数を読み込むことができてconsole.logにて
hello world
func returned
が表示されます。

JSで必要のないものは呼び出さない書き方

functions.php

<?php
function register_script(){
 wp_register_script('sample1', get_template_directory_uri().'/assets/js/sample.js', array('sample2', 'jquery'), 'ver1', true);
 wp_register_script('sample2', get_template_directory_uri().'/assets/js/sample_2.js', array('jquery'), 'ver1', true);
}
function add_script(){
 register_script();
 //登録したjsを呼び出す2つ登録されてるが1つだけ選んで使うことができる(ifで分岐したりできる)
 wp_enqueue_script('sample2', get_template_directory_uri().'/assets/js/sample_2.js', array('jquery'), 'ver1', true);
}
add_action('wp_print_scripts','add_script');

ってな感じで2通りあるのでケースバイケースで。

jQueryを使う

jQueryの書き方

jQuery(function($) {
  console.log("hello");
  $("body").css({background: "red"});
});

ワードプレスのjqueryでは$の変わりにjQueryと表記しないといけないのですが上記のように書くと今後$マークで要素を取得することができます。

jQueryプラグインを使う場合

jQueryプラグインを使う場合はワードプレスjsを使用しない方がいいので
wp_deregister_script('jquery');で使えないようにしてそのあとwp_enqueue_scriptでcdnもしくは自分で、ダウンロードしたjqueryを呼び出します。

<?php
function scripts()
{
    if (!is_admin()) {
        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('sample1', get_template_directory_uri().'/assets/js/sample.js', array('sample2', 'jquery'), 'ver1', true);
    wp_enqueue_script('sample2', get_template_directory_uri().'/assets/js/sample_2.js', array('jquery'), 'ver1', true);
}
add_action('wp_print_scripts', 'scripts');

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

これでワードプレスにJSを認識させることができました。単純にヘッダーに直接ソースとして書き込む方法もあるのですがこちらが推奨されてるみたいなのでとりあえずこっちでやっておきましょう(笑)

それではSeeeee Yaaaaaa!!!