WordPressテーマ「Cocoon」でBootstrap 5を適用する方法

article
2022.06.30

「Cocoon」テーマを使用している場合、Bootstrap 5を適用させようとしても競合してデザインが崩れる場合があります。

そこで、投稿する記事内にだけBootstrap 5を適用する方法を考えましたのでご紹介します。

なお、Bootstrap 5はCDNで適用することとします。

全記事にBootstrapを適用する方法

前提として、デフォルトで読み込まれるヘッダーの情報(<head>タグ)は、以下のheader.phpに記述されてます。

/wp-content/themes/cocoon-master/header.php

このheader.phpを直接編集すると、サイトデザインが崩れる場合があります。

それでは、記事内にだけBootstrap 5を適用させる方法を紹介します。

ヘッダーファイル(header-single.php)の作成

まずは、Bootstrap5 を適用させたヘッダーファイルを新規作成します。

元のheader.php(上記)をheader-〇〇.phpというファイル名で同一フォルダ下にコピーしてください。(〇〇は任意)

/wp-content/themes/cocoon-master/header-〇〇.php(本記事では、header-single.phpとします。)

作成したheader-single.phpの<head>タグ内にBootstrap 5のCDNを追記します。

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

上記コードの最新バージョンは、Bootstarp 公式ページよりご確認ください。(上記は2022.6.30時点)

作成したヘッダーファイルを全記事に適用

この作業は、Wordpress管理画面から行うことができます。

外観→テーマファイルエディター

編集するテーマを選択→Cocoon

個別投稿(single.php)を編集

if (!is_amp()) {
   //get_header(); ←コメントアウト
	get_header('single'); //header-single.phpの場合
 } else {
   get_template_part('tmp/amp-header');
 }
?>

これで、記事内にのみBootstrap 5が適用されるようになります。

任意の記事にのみBootstrapを適用する方法

投稿を編集する画面の最下部にカスタムJavascriptおよびカスタムCSSを記述する場所があります。

カスタムJavascriptに以下のコードを追記します。

</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>

カスタムCSSで以下のコードを追記します。

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

コードの最新バージョンは、Bootstarp 公式ページよりご確認ください。(上記は2022.6.30)

解説

カスタムJavascript

カスタムJavascriptは、<body>閉じタグの直前に<script>タグを作成する機能です。

<script>タグは自動で生成されるため、文頭に</script>閉じタグ、文末に<script>タグを記述しております。

<script> (←自動生成)
</script>
(Bootstrap 5のJavascript追記文)
<script>
</script> (←自動生成)

自動生成されたタグを閉じるために、文頭、文末に<script>タグを記述しました。

カスタムCSS

カスタムCSSは、<head>タグ内に<style>タグを作成する機能です。

<style>タグは自動で生成されるため、文頭に</style>閉じタグ、文末に<style>タグを記述しております。

<style> (←自動生成)
</style>
(Bootstrap 5のCSS追記文)
<style>
</style> (←自動生成)

自動生成されたタグを閉じるために、文頭、文末に<style>タグを記述しました。

以上となります。

最後まで見ていただきありがとうございました。

ご質問などございましたらお気軽にお問い合わせください。

コメント