人気CSSフレームワークBulmaをWordPressで使えるようにする

サイトの見た目を決めるのはCSSなんですが、スマホでも自動でサイズを変えてくれたり、コンテンツの幅やカラム、ナビゲーション、タイトル、ボタンなど、見た目を設定する手間を省いて、あらかじめ用意してくれているとても便利なものです。

cssのテンプレートで有名なbootstrapと同じぐらいbulmaは有名になりつつあります。

bulma公式サイト

ボックスやボタンなど色々ありまして、簡単に同じデザインが使えるので便利ですねー。

他にもたくさん使えるものがあるので詳しくはこちらへ

wordpressでbulmaを使うにはcssファイルを読み込む必要があります。

簡単なのはheader.phpの中のheadタグ内に追加する方法です。

header.php

//css読み込み
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">

ローカルで読み込ませたいときはこちらのコードが使えます。

functions.phpで読み込ませる方法

上記のローカルで読み込ませたいbulma.min.cssファイルを子テーマのCSSフォルダに設置した場合、

functionsで読み込ませるには以下のコードでOKです。

function bulma_scripts() {
wp_enqueue_style( 'bulma-style', get_stylesheet_uri()./css/bulma.min.css ); 
}
 add_action( 'wp_enqueue_scripts', 'bulma_scripts' );

あとは、トップページや記事ページなどhtml5の宣言がなければしてください。

//一番最初に表示されるやつ
<!DOCTYPE html>

スマホでも対応させる（レスポンシブ）ため、header.phpの中に以下のタグがなければ追加する。

<meta name="viewport" content="width=device-width, initial-scale=1">

準備はこれだけです。

適応されているか確認するには以下のようなコードで試してみてください。

<section class="section">
    <div class="container">
      <h1 class="title">
        タイトルh1テスト
      </h1>
      <p class="subtitle">
        サブタイトル <strong>Bulma</strong>!
      </p>
    </div>
  </section>

表示が崩れる場合は、CSSが読み込まれていないか、他のCSSと干渉している可能性があります。

お使いのブラウザから、確認したいところを右クリックすると「検証」などの項目があると思います。

「検証」をクリックすると、該当箇所にCSSがきいているか、それはbulmaのCSSなのか、ほかのCSSなのか確認できます。

以上になりますが興味のあるかたは使ってみてください。

[一応、本物のブルマはこちら

人気CSSフレームワークBulmaをWordPressで使えるようにする

目次

headerで読み込ませる方法

functions.phpで読み込ませる方法