functions.phpを使うと様々な機能を追加できるようになります
- サムネイル画像を記事に追加
- ナビメニューの追加
- サイドバー
- タイトルタグの変更
などの機能を追加できる様になります。
中でもWordPressではCSSやJava Scriptなどの外部ファイルをfunctions.phpで読み込むことが推奨されています。
ですので今回はfunctions.phpでの外部ファイルの読み込み方をみていきます。
1.functions.phpの作り方
- functions.phpファイルを作成する
- 書き出しを書いておく
- 必要に応じて中身を書く
- STEP1functions.phpファイルを作成する
sを忘れないように！ - STEP2書き出しを書く
このファイルにはphpしか書いていかないので書き出しのみ書いて、閉じタグは書か無くても構いません。 - STEP3必要なコードを記入する今は何も書く必要はありませんがこれからは<?php 以下にコードを書いていきます。
簡単だね！
2.functions.phpからCSSを読み込む
外部ファイルを読み込む方法には共通点があって
- functions.phpでWordPress関数を読み込む
- 元のリンクを削除またはコメントアウトする
必要があります。
では順番に見ていきます。
functions.phpでCSSを読み込むためには以下のWord Press関数というものを記入します。
wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/ファイル名.css' , array(), '1.0.0',);※この雛形を使われる場合はパスは構造に合わせて、「ファイル名」をお使いの名前に変えて使ってください。
wp_enqueue_style($handle, $src , $depth, $ver);“enqueue”はエンキューと呼びます。
()内のパラメータには以下のものが入ります。
| パラメータ | 内容 |
|---|---|
| $handle | スタイルシートのハンドル名(必須) を記入し名前は基本的に自由 |
| $src | スタイルシートのパスや外部のスタイルシートのURL |
| $depth | このスタイルシートより前に読み込まれる必要があるスタイルシート。ない場合は空欄でも可(省略可) |
| $ver | スタイルシートのバージョン(省略可) |
基本的には$handleのところのパラメータ名はわかりやすいものにしてURLを記入すればOKです。
記入が終わったらheader.phpに書かれているCSSのリンクを削除します。
再読み込みをして表示が変わらなければ完了です。
3.functions.phpからFont Awesomeを読み込む
外部スタイルシートでよく使うものの例としてFont Awesomeを使う場合はがありますが、Font Awesomeの場合は以下のコードをfunctions.phpに書きます。
wp_enqueue_style('icon', 'https://use.fontawesome.com/releases/v5.10.2/css/all.css');※FontAwesomeのバージョンは適宜変えてください。
こちらも記入が終わったら、header.phpにあるFont Awesomeのリンクを削除します。
4.functions.phpからJavaScriptを読み込む
JavaScriptもWordPress関数で読み込みます。
wp_enqueue_script($handle, $src, $depth, $ver);| パラメータ | 内容 |
|---|---|
| $handle | JavaScriptファイルのハンドル名(必須) |
| $src | JavaScriptファイルのパス |
| $depth | このJavaScriptファイルより前に読み込まれる必要があるJavaScriptファイル。ない場合は空欄でも可(省略可) |
| $ver | JavaScriptファイルのバージョン(省略可) |
パラメータも似たような感じですね。
こちらもCSSの時と同じように書きます。
wp_enqueue_script('script-name', get_template_directory_uri() . '/js/ファイル名.js', array(), '1.0.0',);書き終えたらfooter.phpのJava Scriptファイルを削除します。
ついでにjQueryを読み込む場合です。
もしかしたらjQueryが動かないかもしれません
$(function(){
$(window).click(function(){
alert('hi');
})
});Word Pressでは他の機能との衝突を防ぐため”$”を使ってjQueryが書かれていると動きません。
解決策としては
①”$”を全て”jQuery”にする
jQuery(function(){
jQuery(window).click(function(){
alert('hi');
})
});②jQuery(function($){});で全てを囲む
jQuery(function($){
$(function(){
$(window).click(function(){
alert('hi');
})
});
});量にもよりますが②の方が簡単ですのでおすすめです。
できたらarray()の引数に’jquery’とすれば動くようになります。
wp_enqueue_script('script-name', get_template_directory_uri() . '/js/ファイル名.js', array('jquery'), '1.0.0',);最後になりますがCSSとJavaScriptを以下の様にまとめて関数にして書く方法もあります。
function my_styles() {
wp_enqueue_style('style-name', get_template_directory_uri() . '/css/ファイル名.css' , array(), '1.0.0',);
wp_enqueue_script('script-name', get_template_directory_uri() . '/js/ファイル名.js', array(), '1.0.0',);
}
add_action('wp_enqueue_scripts', 'my_styles');この中に先程のFontAwesomeだったり、自作の関数を入れても良いです。
function my_files() {
wp_enqueue_style('style-name', get_template_directory_uri() . '/css/ファイル名.css' , array(), '1.0.0',);
wp_enqueue_style('icon', 'https://use.fontawesome.com/releases/v5.10.2/css/all.css');
wp_enqueue_script('script-name', get_template_directory_uri() . '/js/ファイル名.js', array(), '1.0.0',);
}
add_action('wp_enqueue_scripts', 'my_files');5.まとめ
1.functions.phpを作成する
2.外部ファイルを読み込む
function my_files() {
wp_enqueue_style('style-name', get_template_directory_uri() . '/css/ファイル名.css' , array(), '1.0.0',);
wp_enqueue_style('icon', 'https://use.fontawesome.com/releases/v5.10.2/css/all.css');
wp_enqueue_script('script-name', get_template_directory_uri() . '/js/ファイル名.js', array(), '1.0.0',);
}
add_action('wp_enqueue_scripts', 'my_files');
コメント