BootstrapをWordPressの投稿の特定の領域に適用

WordPressの投稿の中でBootstrap (v5.0.2)を使用するため、特定のdiv要素の中だけでBootstrapを使用する方法を試してみました。

1. 最初にこのブログの新規投稿を作成する際、Classic EditorでTextタブを選択し、下記のようなテキストを入力して確認してみました。

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

<a href="#" class="btn btn-primary">Bootstrapのボタン</a>

Previewボタンを押して確認してみたところ、下記のように表示されました。他のページと異なり、ロゴの下のLeafWindowの文字等が青い下線付きの文字に変換されてしまいました。

2. そこで、Webで検索し、特定のdiv要素の中だけBootstrapを適用する方法を試すことにしました。手順を以下に記します。

2.1. Bootstrapのページからbootstrap.min.css (v5.0.2)をダウンロードし、bootstrap-v5.0.2.min.cssという名前で保存します。

2.2. bootstrap-v5.0.2.min.css を bootstrap-v5.0.2.min.scss としてコピーします。

$ cp bootstrap-v5.0.2.min.css bootstrap-v5.0.2.min.scss

2.3. 下記の内容のファイル bootstrap-v5.0.2.scss を作成します。

.bootstrap-v5-0-2 {
  @import "bootstrap-v5.0.2.min"
}

2.4. 下記のコマンドでbootstrap-v5.0.2.scssをコンパイルします。

$ node-sass bootstrap-v5.0.2.scss bootstrap-v5.0.2.css

$ sudo apt install npm
$ sudo npm install -g node-sass

$ sudo npm cache clean -f
$ sudo npm install -g n
$ sudo npm install -g npm
$ sudo npm config set user 0
$ sudo npm config set unsafe-perm true
$ sudo npm install -g node-sass

2.5. node-sassコマンドで生成したbootstrap-v5.0.2.cssを適当なディレクトリにコピーします。私は私の環境のWordPressディレクトリ (/var/www/html/wordpress-05/) に下記のディレクトリ (external-css/bootstrap-v5.0.2/) を作成し、bootstrap-v5.0.2.cssをコピーしました。

$ cp bootstrap-v5.0.2.css /var/www/html/wordpress-05/external-css/bootstrap-v5.0.2/

3. 特定の領域のみにBootstrapが適用されるかの確認

3.1. Classic EditorのTextタブのテキスト領域に下記のテキストを入力しました。class=”bootstrap-v5-0-2″属性を記述したdiv領域内のhtml要素にのみBootstrapが適用されることを期待しています。

<link rel="stylesheet" href="https://www.leafwindow.com/wordpress-05/external-css/bootstrap-v5.0.2/bootstrap-v5.0.2.css">

<div class="bootstrap-v5-0-2">
    <a href="#" class="btn btn-primary">Bootstrapのボタン</a>
</div>

3.2. 今度はロゴの下のLeafWindowの文字等、他の要素に影響を与えることなくBootstrapが適用されるのを確認しました。