【WordPress】 Bulmaの使用でタグアーカイブの表示が崩れる
CSSフレームワークのBulmaを使用してWordPressテーマを作成しました。フレームワークと言ってもBootstrapなどと違い、CSSを一枚読み込むだけです。使用方法は公式サイトに詳しいですが、WordPressでBulmaを使用する際にハマったポイントと解決方法をまとめておきます。
- PHP
- 7.0
- WordPress
- 4.8.1
- Bulma
- 5.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を付与しないよう修正します。
add_filter('body_class', function ($classes) {
$args = array_filter($classes, function ($var) {
return ($var !== 'tag');
});
return $args;
}, 10, 1);表示崩れは解決しましたが、この方法では副作用がありそうなので、素直にBulmaのCSS(Sass)を修正するほうがよさそうです。
- .tag
+ .tag:not(body)Prism.jsの表示が崩れる
ソースコードのハイライトにPrism.jsを用いていますが、タグページと同じくクラス名の重複により表示が崩れてしまいます。解決方法はPrism.jsのpluginであるCustom Classを使用してクラス名を書き変えるか、CSSを修正するかです。
Prism.jsの記事で書いたように、重くなるのは避けたいので、BulmaのCSS該当部分を上書きすることにしました。下記のコードはPrism.jsで選択した言語やプラグインによって変わる可能性があるので、環境に合わせて変更してください。
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の使用は避けようと思いました。