この記事は、「WordPressにBootstrapを導入方法の手順について書いてみました3」の続きです。
みなさんこんにちは。今日は、WordPressの初期処理で使用するfunctions.phpファイルの説明を書いていきたいと思います。このファイルではPHP言語を使用します。なかなか難しいかと思いますが、最初は要所要所を抑えつつ、理解していくといいと思います。
頑張りましょうね。
目 次
スポンサードリンク.(Sponsored Link)
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php function mybootstrap_enqueue_styles() { wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' ); $dependencies = array('bootstrap'); wp_enqueue_style( 'mybootstrap-style', get_stylesheet_uri(), $dependencies ); } function mybootstrap_enqueue_scripts() { $dependencies = array('jquery'); wp_enqueue_script('bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true ); // trueとしてbodyタグのクロージングの前で読み込むように設定 } add_action( 'wp_enqueue_scripts', 'mybootstrap_enqueue_styles' ); add_action( 'wp_enqueue_scripts', 'mybootstrap_enqueue_scripts' ); ?> |
(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が自動的にセットされます。特に指定する必要がない場合は、指定する必要はありません。 |
Sponsored Link
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’ というアクションを使用します。
構 文
1 |
add_action( $hook, $function_to_add, $priority, $accepted_args ); |
引数の説明
引数名 | データタイプ | 必須項目 | 説明 | 初期値 |
$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
スポンサード・リンク (Sponsored Link)....