WordPressにBootstrapを導入方法の手順4〜functions.php編

この記事は、「WordPressにBootstrapを導入方法の手順について書いてみました3」の続きです。

 

みなさんこんにちは。今日は、WordPressの初期処理で使用するfunctions.phpファイルの説明を書いていきたいと思います。このファイルではPHP言語を使用します。なかなか難しいかと思いますが、最初は要所要所を抑えつつ、理解していくといいと思います。

頑張りましょうね。

 

1. function.phpの説明

• このファイルは、WordPressの初期化処理で、スタイルシートやjsファイルをプログラムで読み込むのに使用します。htmlファイルの中に<link>タグを使用してスタイルシートやjsファイルを読み込む処理を記述することも出来ますが、外部ファイルfunctions.phpでその処理をしたほうがメンテナンス性が良くなります。読み込むファイルが変更になったり、バージョンが変わったりした場合には、functions.phpの中の記述だけを修正すれば良く、html自体はそのままですみます。
• 保存する場所は、〈wp-content/themes〉の下に作成したテーマ用サブフォルダです。
• 〈wp-content/themes〉配下に作成したオリジナルテーマのフォルダの中にstyle.cssとindex.phpファイルを保存すると、WordPressが自動的にこのテーマをオリジナルテーマとして有効化にし、認識します。
• function.phpは、保存されているフォルダのテーマにのみ機能し、他のテーマには影響を与えません。
• functions.phpは、多くの違った処理を記載することが出来ます。

2. functions.phpを編集する

まずは、function.phpを作成して、
〈/（ブログのドメイン）/public_html/wp-content/themes/mynewtheme〉フォルダにアップします。

function.phpの中身は以下のような内容になります。

(1) mybootstrap_enqueue_styles関数の説明

　wp_register_style関数の使い方

WordPressのテーマにCSSスタイルファイルを読み込みます。

構文

wp_register_style( $handle, $src, $deps, $ver, $media );

　引数の説明

引数名	データタイプ	必須項目	説明	初期値値
$handle	string	◯	スタイルシートのハンドルネーム
$src	string	◯	スタイルシートのURL	”
$deps	array		このスタイルシートが依存するスタイルシートのハンドルネーム配列	array()
$ver	string|bool|null		記載すると、cssのURLの最後にバージョン番号が付きます。無しの場合、WordPressのバージョン番号が付きます。バージョン番号を付与しない場合は、NULLを書きます。	false
$media	string		スタイルシートに適用するメディアを指定する	all

※	handle	名前、あだ名、ニックネームなどの意味があります。
※	$src	スタイルシートの完全なURL、または、WordPressのルートディレクトリーからのスタイルシートの相対パス。
※	$deps	登録するスタイルシートの前にlinkタグで読み込まれなくてはいけないベースになるスタイルシートのニックネーム配列になります。依存先のスタイルシートが無い場合、値はfalseにします。
※	$ver
※	$meida	適用するメディアを指定します。 media属性は、リンク先の文書または読み込むリソースを、どのメディアに適用するのかを指定します。media属性の値は適切なメディアクエリでないといけません。省略時は、allが自動的にセットされます。特に指定する必要がない場合は、指定する必要はありません。

 

 

　get_template_directory_uri()

テンプレートのあるディレクトリ URIを取得します。

　wp_enqueue_style関数の使い方

WordPressに対してCSSを wp_register_style() で登録したあとに、CSSスタイルファイルをキューに追加するのに使用します。

　構　文

wp_enqueue_style( $handle, $src, $deps, $ver, $in_footer );

　引数の説明

引数名	データタイプ	必須項目	説明	初期値
$handle	string	◯	スタイルシートのハンドル
$src	string	◯	スタイルシートのURL	”
$deps	array		このスタイルシートが依存するスタイルシートのハンドルの配列	array()
$ver	string|bool|null		記載すると、cssのURLの最後にバージョン番号が付きます。無しの場合、WordPressのバージョン番号が付きます。バージョン番号を付与しない場合は、NULLを書きます。	false
$in_footer	bool		true: スタイルが</body>の直前で読み込まれる。false: スタイルが</head>の直前で読み込まれる。	false

(2) mybootstrap_enqueue_scripts関数の説明

mybootstrap_enqueue_scriptsの処理は、mybootstrap_enqueue_stylesよりも簡単です。

なぜなら、scriptsの方では、jQueryはWordPressでデフォルトでインストールされているので、ここでは、jQueryをregister（登録）する必要はありません。

そこで、直ぐに、ハンドル配列 $dependencies に array(‘jquery’) を配列の形でセットして、wp_enqueue_scriptでWordPressに対してオリジナルのテーマをキューに追加する処理を実行しています。

　wp_enqueue_script関数の使い方

WordPressに対してスクリプトをキューに追加します。

　構　文

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

　引数の説明

引数名	データタイプ	必須項目	説明	初期値
$handle	string	◯	スタイルシートのハンドル
$src	string	◯	スタイルシートのURL	”
$deps	array		このスタイルシートが依存するスタイルシートのハンドルの配列	array()
$ver	string|bool|null		記載すると、cssのURLの最後にバージョン番号が付きます。無しの場合、WordPressのバージョン番号が付きます。バージョン番号を付与しない場合は、NULLを書きます。	false
$in_footer	bool		true: スタイルが</body>の直前で読み込まれる。false: スタイルが</head>の直前で読み込まれる。	false

(3) add_actionの説明

特定のアクションに関数をフックします。フックする関数の定義の後に、add_actionを記述します。

特定のアクションとは、WordPressには予め決まったアクションが有り、その複数のアクションの中で、自作した関数の実行を登録するアクションのことです。

言い換えれば、画面のプログラミングなどで、イベント・ドリブンのプログラミング開発をしますが、add_actionは、それと似たものです。actionドリブンのプログラミングと言えば良いでしょうか。

そのアクションの一覧は、こちらです。自分がしたい処理に適切なアクションを使います。今回のスタイルやJSのファイルの登録・キュー追加の処理は、’wp_enqueue_scripts’ というアクションを使用します。

　構　文

　引数の説明

 

引数名	データタイプ	必須項目	説明	初期値
$hook	string	◯	オリジナル関数名がフックされるWordPressのデフォルトのアクション名
$function_to _add	string	◯	（WordPressのデフォルトのアクションに）追加するオリジナルの関数名。
$priority	integer		アクションに追加している関数の実行順を整数で指定する。同じ数で指定した場合、アクションに追加された順に実行。	10
$accepted_args	integer		フックした関数がアクションから受け入れる引数の数	1
hook; 入力・出力などに伴うデータの流れを監視して、通常と違う独自処理を行うために予約する仕組み

 

★この記事を書くのに以下のサイトを参考にしました。

• Bootstrap3.3.5でテーマを作るための基本設定
• How to Develop a WordPress Theme Using Bootstrap (Part 1)
• 関数リファレンス/wp register style