Bootstrapをワードプレステーマに適応させるにはfunctions.phpへの追記がオススメです。
まずは完成系を記載します。
ここではBootstrapのCSS、テーマのCSS、そしてオリジナルのCSSの３つが使えるようにfunctions.phpに記載して指定しています。
ポイントはワードプレスの関数を使ってCSSの順番を指定している点です。
wp_enqueue_style( $handle, $src, $deps, $ver, $media )
これはスタイルシートを適用させるための関数です。
最初の
wp_enqueue_style
これはbootstrapというハンドルネームで
bootstrap.min.cssまでのパスを記載しています。
そして、
$depsはarray()で初期値に設定。
get_template_directory_uri()
get_template_directory_uri()は有効化している
テンプレート ディレクトリのURIを取得します。
この場合テーマの/components/bootstrap/dist/css/bootstrap.min.cssにアクセスします。
またそれぞれ、
バージョンとメディアを$ver, $mediaにセットしています。
２つ目のwp_enqueue_styleではハンドルネームをtheme-styleとし、テーマのスタイルシートをセットしています。
get_stylesheet_uri()
get_stylesheet_uri()は有効化されているテーマのスタイルシートを指定する関数です。
今回はその後の
array('bootstrap')で順番を指定します。
bootstrapハンドルネームがキューされたあとにキューする、という指定です。
3つ目のwp_enqueue_styleではハンドルネームをoriginal-styleとし、get_template_directory_uri()で/bootstrap/colorblock.cssにアクセスしています。
その後のarray('theme-style')で順番指定。
theme-styleがキューされたあとにキューする、という指定になります。
これで順番としては
1.BootstrapのCSS、2.テーマのCSS、3.オリジナルのCSSとなります。
つまり、Bootstrapと被っているセレクタは上書きされていくことになり、最終的には自分で作ったオリジナルCSSで調整します。
この辺りはBootstrapを
Sassでダウンロードすれば、オリジナルCSSにそのSassの一部をインクルードして使うことが出来るので、より細かな調整ができます。
add_action( 'wp_enqueue_scripts', 'colorblock_scripts' );
アクションフックに対して、自作関数を登録するには、この
add_actionを使います。
wp_enqueue_scriptsはフックの名前で、colorblock_scriptsは作成した関数です。
このadd_actionでそれぞれのCSSを紐づけしていわけです。
add_actionについてはCodexが参考になります。
get_template_directory_uri()の親テーマ、子テーマの関係性
親テーマでget_template_directory_uri()を使った時と子テーマで使った時とではどのように違うのでしょう。
親テーマと子テーマ、どちらも同じ結果を返します。
get_stylesheet_directory_uri()とは
get_template_directory_uri()のほかにget_stylesheet_directory_uri()があります。
これはテーマまたは子テーマのスタイルシートディレクトリのURIを取得する関数です。
get_template_directory_uri()とどう違うのかと言うと
親テーマで使った場合には親テーマのテーマディレクトリURLを出力し、子テーマで使った場合には子テーマのテーマディレクトリURLを出力します。
get_stylesheet_directory_uri()は先ほどの
get_stylesheet_uri()とは違いますので、気を付ける必要があります。
今回の記事タイトル
ワードプレステーマにBootstrapを使う方法
