Published on

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

目次

    見た目を整えるCSSの雛形・テンプレート「bulma」をwordpressで使う方法を紹介します。

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

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

    bulma公式サイト

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

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

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

    headerで読み込ませる方法

    簡単なのは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なのか確認できます。

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

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