[WordPress] Bulmaの使用でタグアーカイブの表示が崩れる

CSSフレームワークのBulmaでテーマを作成しました。フレームワークと言ってもBootstrapなどと違い、CSSを一枚読み込むだけです。使用方法は公式サイトに詳しいですが、WordPressでBulmaを使用する際にハマったポイントと解決方法をまとめておきます。

環境
  • PHP7.0
  • WordPress4.8.1
  • Bulma5.0

タグアーカイブの表示が崩れる

タグアーカイブ一覧ページの表示が崩れてしまいます。

原因

BulmaのエレメントであるTagの適用方法がclass="tag"となっています。これは、WordPressの<body <?php body_class(); ?>>で、タグアーカイブページ表示時に付与されるクラス名と同じものです。従って、<body class="tag">Tagが適用されてしまい、表示崩れが起こります。

解決方法

.tag breaks WordPressにあるように現在は修正されたようですが、ver 5.0では崩れたままなので修正します。方法は.tag breaks WordPressで示されているようにCSSを修正するか、body_class()で付与されるクラス名を修正するかです。

body_class().tagを付与しないよう修正します。

functions.php
add_filter('body_class', function ($classes) {
    
    $args = array_filter($classes, function ($var) {
        return ($var !== 'tag');
    });
    
    return $args;
}, 10, 1);

表示崩れは解決しましたが、この方法では副作用がありそうなので、素直にBulmaのCSS(Sass)を修正するほうがよさそうです。

bulma/sass/elements/tag.sass
// .tag
.tag:not(body)

Prism.js 表示が崩れる

ソースコードのハイライトにPrism.jsを用いていますが、タグページと同じくクラス名の重複により表示が崩れてしまいます。解決方法はPrism.jspluginであるCustom Classを使用してクラス名を書き変えるか、CSSを修正するかです。Prism.jsの記事で書いたように、重くなるのは避けたいので、BulmaのCSS該当部分を上書きすることにしました。下記のコードはPrism.jsで選択した言語やプラグインによって変わる可能性があるので、環境に合わせて変更してください。

style.css
code[class*="language-"] .tag,
code[class*="language-"] .number {
    align-items: stretch;
    background-color: transparent;
    border-radius: 0;
    display: inline;
    font-size: 1em;
    height: auto;
    justify-content: flex-start;
    line-height: normal;
    padding: 0;
    white-space: pre;
    margin-right: 0;
    min-width: auto;
    text-align: left;
    vertical-align: baseline;
}

まとめ

どちらの問題も名前空間(プレフィックス)が無いことが原因です。https://github.com/jgthms/bulma/pull/511を見る限り自分で対応するしかないようです。今後、同問題が起きる可能性を考えるとWordPressなどのCMSではBulmaの使用は避けようと思いました。

フレームワークとしてはCSSのみとお手軽ですが、Sassが用意されており、カスタマイズも簡単にできます。

CONTENTS
  1. タグアーカイブの表示が崩れる
    1. 原因
    2. 解決方法
  2. Prism.js 表示が崩れる
  3. まとめ