こんにちは。アトリエKW 代表の渡邉響子です。

2021年５月に正式リリースされた Bootstrap Ver.5 の使い方などを紹介しています。

こんな方へおすすめ

これから Bootstrap5 を使った WordPress のテーマを自作したいと思っている方
Bootstrap3 は使ったことがあるけれど、4 を飛ばして Bootstrap5 に変えようかなという方

2021年5月に、Bootstrap のバージョン5が正式にリリースされました。
Bootstrap5 は、以前のバージョンにはなかったグリッドの間を調整するクラスが追加になったり、グリッド自体も柔軟になっており、自分でいちいちスタイルシートを書かなくてもかなりきれいにレイアウトできてしまうという魅力があります。

私自身、今まで Bootstrap のバージョン 3 でブログを作ってきましたが、自分のサイトを作り直すことになり、この際バージョンアップをすることにしました。

実は今読んでいただいているこのブログは Bootstrap5 を使っています。

そのときに分かった問題はいろいろあり・・・・数えればキリがありませんが、そのことはまた別の機会に書くとして・・・

そろそろ、Bootstrap5 を WordPress に導入してみたいなと思う方の参考になれば幸いです。

Short Cut

方法はわかってるんだけど、wp_enqueue 関数でうまくできなかったんだ！というところまでたどり着けている方は、「wp_enqueue関数を使う場合の注意点」のところまで読み飛ばしてください。

Bootstrap5 導入の前に知っておくこと

導入前に、知っておくべきことがあります。

導入前に知っておくべきこと

Internet Explorer は非対応です。
グリッドシステムが Ver.3までと互換性がありません。(Ver.4 と比べるとアッパーコンパチ）

Bootstra5 は古いブラウザへの対応をやめています。どうしても Internet Explorer で見る方を対象にしているサイトを構築する場合には使えません。
またグリッドシステムについては、Botstrap4 までのものと基本的な考え方はいっしょなのですが、ブレークポイントが増え、クラス *-xs, *-sm, *-md, *-lg の扱いが変わります。
バージョン 3 までの Bootstrap で構築した WordPress テーマをそのまま使うことができません。
バージョン 4 までの Bootstrap の場合は、最上位のサイズ xxl が追加になるだけなので、問題はなく使えます。

なにがなんでも Bootstrap5 を導入しなければいけない理由はありません。
これまでの Bootstrap のバージョンでも十分レスポンシブなウェブサイトは作れますから。

それでも導入したいんだ！という方だけ先に進んでください。

Bootstrap5 導入の大まかな流れ

Bootstrap5 公式サイトで確認

まずは、Bootstrap5の公式サイト(英文)で、導入方法をチェック。
うぇ・・英語苦手・・・という方は、日本語に翻訳されているサイトもありますので、そちらを見てもいいと思います。
が、2021年9月現在、ベータ版の情報になっていますので、導入に関しては公式サイトを見て行ってください。

導入に関しては、2種類の方法があります。

ネット上で提供されている Bootstrap5 のスタイルシートファイルと Javascript ファイルをリンクする方法と、すべてのデータをダウンロードして使う方法です。

細かなカスタイマイズをする予定がないのであれば、ダウンロードする必要はありません。
この記事では、楽に導入できるリンクする方法を説明します。

WordPress テーマファイルに貼り付ける

行う内容は、２つ。

Bootstrap5 本体のスタイルシートを読み込むためのメタタグを貼り付ける。
必要となる JavaScript ファイルを読み込むための<script>文を貼り付ける。

Bootstrap5 本体のスタイルシートの読み込みメタタグ

下記の一文を <head> ～ </head> タグの間に貼り付けます。
ほかのスタイルシートを読み込む行よりも先に読み込むように、<head>内の最初のほうに貼り付けてください。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

必要となる JavaScript ファイルの読み込みタグ

必要となる JavaScript ファイルを読み込むタグは、</body> タグの直前に貼り付けます。
全ての Bootstrap5 の機能が使えるようになるバンドル版と、一部のポップアップ表示機能のためのスクリプトと、それ以外を分けたものの2種類が用意されています。

すべての機能を使う場合は、以下の一文を</body>タグの直前に貼り付けます。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

ポップアップの機能は別に使わないなぁという方は、機能が分割されているものを使用してください。
下記のうちの、2行目だけを貼り付ければOKです。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>

よぉし、分かった！
じゃぁ、自前の header.php と、footer.php に貼り付ければいいな！となりそうですが、WordPress には、スクリプトファイル読み込みタグを出力する関数が用意されています。
header.php、fototer.php を編集するのではなく、このスクリプト読み込みのための関数を、function.php に記載していくのが正しい方法です。

具体的には、wp_enqueue_style() 関数と、wp_enqueue_script() 関数を使って記述するのですが、上記で説明した Bootstrap5 のスクリプトの読み込み用のタグには、integrity と crossorigin というプロパティがつけられていて、 wp_enqueue_style() 関数、wp_enqueue_script() 関数そのままでは、きちんとタグを出力できません。

そのためにちょっとした出力タグの書き換え関数を作って対応する必要があります。
ですがここから先は、WordPress のベースの技術となる PHP の知識がちょっとばかり必要となりますので、苦手な方は、とりあえず header.php と footer.php に上記 Bootstrap5 用の読み込みタグを貼り付けで対応でもOKと思います。

ひとまず、header.phpと、footer.php に貼り付ける場合の例をお伝えします。
「いや、私はちゃんと wp_enqueue ~を使うんだ」という、いばらの道を選ぶあなたは、wp_enqueue関数を使う場合の注意点のところまで読み飛ばしてください。

header.php footer.php に貼り付けをする場合

もちろんこの方法はおすすめではありませんよ。でも動きはします。

header.php の例

<!DOCTYPE html>
<html <?php language_attributes('html'); ?>>

<head>
<!-- 文字エンコードを表示させるメタタグ -->
<meta charset="<?php bloginfo('charset'); ?>">

<!-- レスポンシブに対応するために必ず必要なメタタグ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap5 用のメタタグ -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<?php
    wp_head();  // ほかの WordPress に必要な情報を出力するための関数。
?>

</head>
<body>
<!-- 以降ご自分のテーマの HTML を記述 -->

大事なポイントを説明します。

1行目： <!DOCTYPE html> は、このファイルが HTML で書かれていることを示すとともに、HTML のバージョンを指定するタグです。
Bootstrap5 は、HTMLのバージョン5上でしか動きません。
上記例のとおり、記述すれば問題ないです。

4行目：<head>タグ。ここの中にメタタグを記入しますので、お忘れなく。また最後のほうの</head>でくくるのもお忘れなく。

9行目：viewport の設定。これがないとレスポンシブになりません。必ず記述しましょう。

12行目：Bootstrap5 の読み込みタグ。ほかのスタイルシートを読み込む前に読み込ませます。

15行目：wp_head(); は、WordPress が必要とするメタタグを出力する関数です。<?php ～ ?> でくくり、必ず記述しましょう。

footer.php の例

    <!-- footer.php の最後のほう -->
    <?php wp_footer(); ?>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

footer.php の場合は、</body>タグの直前に貼り付けるだけです。
WordPress が必要とする JavaScript 読み込みのためのタグは、 wp_footer() 関数で出力されます。
今回の Bootstrap5 は jQuery に依存しなくなったので、読み込みの順番に気を使う必要はありません。

wp_enqueue関数を使う場合の注意点

きちんと WordPress が用意している wp_enqueue_style() と wp_enqueue_script() を使用する例です。
ただし、Bootstrap5 の読み込みタグのように integrity、crossorigin が不随する場合は、普通に wp_enqueue_style() と wp_enqueue_script() を使うだけでは、きちんと出力してくれません。

wp_enqueue_style() と wp_enqueue_script() で出力されるメタタグを、出力前に文字列置換する関数を作る必要が出てきます。

順を追って説明します。

まず編集するファイルは、テーマフォルダの直下にある、function.php です。

※ function.php は、編集に失敗すると WordPress がまったく動かなくなります。
編集前に別ファイルに保存しておいて、すぐに元に戻せるようにしておきましょう。

function.php の例

function my_theme_scripts() {

// For Bootstrap5
wp_enqueue_style( 'bootstrap5', "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css",null,null);
wp_enqueue_script( 'bootstrap5js', "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js",array('jquery'),null,true);

}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts');

‘wp_enqueue_scripts’ に追加するための、function my_theme_scripts()関数（関数名はなんでもいい）を定義します。その中に、 wp_enqueue_style() と wp_enqueue_script() の構文を記述します。

ここでのポイントは、Bootstrap5 用のメタタグの中から、スクリプトファイルのURLの部分のみ書きこむということです。

Bootstrap5 のリンクタグはよく見ると以下のような構成になっています。
このスタイルシートのほうは、href=以降のダブルクオーテーションで囲まれている中の部分、JavaScript のほうは、src=以降のダブルクオーテーションで囲まれている中の部分だけをwp_enqueue関数の第2引数に描きこみます。

※ CSSスクリプトは wp_enqueue_style() で、JavaScriptは wp_enqueue_script() になることに注意。

<link href="スクリプトファイルのURL" rel="stylesheet" integrity="ハッシュ値" crossorigin="anonymous">

ところで、よく見るとこのメタタグ、スクリプトファイルのURLを示す href に加え、integrity、crossorigin プロパティがあります。

integrity、crossorigin プロパティはについては細かい説明は省きますが、CDN のサイトから読み込むためのセキュリティー上のプロパティで、つけていないとよろしくありません。

ところが、この integrity、crossorigin プロパティを書きだす機能が wp_enqueu関数にはないんです。
これを読んでいらっしゃるみなさんもこれで困ったんじゃないでしょうか？

大丈夫です。これは自作関数をつくることでなんとかなります！

次に wp_enqueue 関数がメタタグを出力する前に integrity、crossorigin を付け足す関数を説明します。

integrity、crossorigin を付け足す関数

以下が、 wp_enqueue 関数がメタタグを出力する前に integrity、crossorigin を付け足す関数です。
この関数では、 WordPress が wp_enqueue関数で出力しようとしているメタタグを引数 $html で受け取り、str_replce() 関数で一部を文字列置換して戻り値として返します。

どのスクリプトでもこの文字列置換をしてしまわないように、引数 $handle で、どのスクリプトなのかを判別して、該当のスクリプト（今回の場合は、bootstrap5 ）なら文字列置換をしますという形になります。

最初の関数は、スタイルシートのメタタグの文字列置換です。
2番目の関数は、JavaScript のメタタグの文字列置換です。

この関数を、function.php の最後のほうに付け足すことで置換が行われます。
（私は、function.php がごちゃごちゃするのが嫌いなので、この関数だけ別ファイルにして、function.php で、request_once() 関数をつかって読み込ませてます）

/*** スタイルシートのメタタグ置換の関数 */
function add_style_attributes( $html, $handle ) {

    if ( 'bootstrap5' === $handle ) {
        return str_replace( " media='all'",
         " integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'", $html );
    }

return $html;
}
add_filter( 'style_loader_tag', 'add_style_attributes', 10, 2 );

/*** JavaScript のメタタグ置換の関数 */
function add_script_attributes( $html, $handle ) {

    if ( 'bootstrap5js' === $handle ) {
        return str_replace( '></script>',
         " integrity='sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ' crossorigin='anonymous'></script>", $html );
    }
   
return $html;
}
add_filter( 'script_loader_tag', 'add_script_attributes', 10, 2 );

CSSスクリプトの場合( add_style_attributes()関数)は、” media=’all'” を見つけたら、” integrity=’sha…(中略)…MI3AhiU’ crossorigin=’anonymous'” に変換するというものです。

JavaScript の場合（add_script_attributes関数）は、’></script>’ を見つけたら、” integrity=’sha3 …(中略)… q2THRZ’ crossorigin=’anonymous’>” に変換するというものです。

add_filter()関数で、WordPress のアクションに登録するのをお忘れなく。

実は、この方法は、なにも Bootstrap5 に限ったことでなく、Font Awesome などのスクリプトを読み込むときにも使えます。
どのように関数を書きかえればいいか考えてチャレンジしてみてください。

まとめ

Bootstrap5 を WordPress で使えるようにする方法を説明しました。
要約すると、Bootstrap5 を使うためのスタイルシートと、JavaScriptファイルを読み込む必要があるということです。
その方法のうち、wp_enqueue関数を使う際は注意が必要でした。

WordPress 初心者のみなさんはのとれるもう一つの方法としては、Bootstrap5 に対応している WordPress テーマを探して使うというのもあると思います。（今のところ１つだけありました！）

おまけ

このスタイルシートとスクリプトを読み込むメタタグですが、HTML5 では、type=’text/css’ や type=’text/javascript’ というプロパティをかかなくてよくなっています。

今回紹介した Bootstrap5 のメタタグにもなかったと思います。

けれども、wp_enqueue関数では、このプロパティを出力してしまいます。
これが気になる方は、function.php に以下の関数を追記してください。

※ ただしWordPress のバージョン5.3 以降でしか動きません。

function my_theme_setup() {
    add_theme_support( 'html5', array( 'script', 'style' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup');

ご注意事項

全ての環境で動作する保証はありません。
ウェブサイト制作関連の技術情報は、当方の動作環境で動作を確認しておりますが、全ての環境で動作を保証するものではありません。
紹介した情報の適用は、自己責任でお願いします。
細心の注意をはらって記事を書いています。ですが記事中の情報を適用したことにより問題が発生することがあるかもしれません。
その場合、当方はその責任をとることができません。
あらかじめご両翼ください

免責事項

アトリエKW 公式 SNS

Twitter アカウント