Bootstrapを利用したWordPressテーマ設計の秘訣 – Capital P

WordPress受託業界では、HTML+CSS+JSが完全に組まれたモックアップを渡されてそれをWordPressテーマにするということが多くある。最近ではKunoichi MarketというWordPressのマーケットプレースを作ってもいるので、汎用テーマを作る機会も多い。

そんな中、CSSフレームワークを利用したモックアップがWordPressのマークアップに適さないというケースが多々ある。今回はBootstrapを例に挙げ、CSSフレームワークを採用する際のティップスを紹介しよう。

秘訣1. コンパイルしよう

Boostrapのみならず、多くのCSSフレームワーク・ライブラリではCDN版が用意されているため、URLを書くだけで簡単に導入できる。

<?php
// Bootstrapを読み込み
wp_enqueue_style( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', [], '4.4.1' );

これだと始めるのは簡単なのだが、変数の上書きができないため、あとから読み込んだCSSでスタイルを打ち消すような作業が必要になる。

この無駄を省くため、必ずSCSSなどでコンパイルして使うようにしよう。たとえば、Bootstrapには変数上書きのための仕組み（_variables.scss）が用意されており、ボーダーの角丸径、カラースキーム、文字組み、スペーシングなどかなりの部分を上書きすることができる。!defaultとされている変数はそれより前に同名の変数が存在していれば上書きされる。

# カラースキーマ
$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;
# ボーダーの角丸
$border-radius:               .25rem !default;
$border-radius-sm:            .2rem !default;
$border-radius-lg:            .3rem !default;

Bootstrapの場合、例えばボーダーの角丸なら、「全体的な角丸 => ボタンの角丸」という具合に幾つもの変数が上書き可能な形で用意されているので、多くの場合は変数の変更だけでデザインは可能なはずだ。

npm経由でインストールする場合、テーマのディレクトリ構造をこのようにすると良いだろう。

my-theme
└ assets
 └ scss
   ├ my-style.scss # この中でBootstrapを読み込み
   └ my-theme # ディレクトリを一個掘って、この中にコンポーネントやカスタム設定を読み込み
└ node_modules
 └ bootstrap # このディレクトリにbootstrapが入る

上記のような構成にしておくと、インクルードパスの設定によってBootstrapのファイル自体も置き換えることができる。

また、重要なポイントなのだが、npmなどでインストールし、SCSSとしてコンパイルでき、変数を上書きできるというのはBootstrapだけの特徴ではなく、ほとんどすべてのCSSフレームワークがそうである。たとえば筆者が自身のサイトのテーマに採用したUIKitもそうだし、Zurb FoundationやMaterializeなどの有名どころはだいたいSCSSでのコンパイルに対応している。

SCSSならmixinなどの強力なヘルパーも使えるので、CDN経由でCSSを読み込んで上書きせずにSCSSでカスタムビルドCSSを作るようにしよう。

秘訣2. WordPressのマークアップを@extendで尊重する

Bootstrapにはヘルパークラスがあり、.img-fluidなら画像がレスポンシブに、.py-5なら上下パディングが大きめに、.text-centerならテキストが中央寄せに、といった具合になる。BootstrapはOOCSSの影響下にあるので、これ自体は悪いことではない。たとえば、ボタンのマークアップは次のようになる。

<!-- メインカラーで大きめのアウトラインボタン -->
<button class="btn btn-outline-primary btn-lg">ボタン</button>

しかし、WordPressにはWordPressでボタンを出力するブロックがあり、たとえばそれは次のようになる。

<!--
  ユーザーの操作によっては .is-style-outline がつくこともあるし、
  .has-text-align-center がつくこともある。
-->
<div class="wp-block-button">
    <a href="#" class="wp-block-button__link">ボタン</a>
</div>

もちろん、PHPでフィルターフックをかけたり、まったく新しいボタンブロックを作ることで、前者のマークアップを強制することもできる。しかし、単にデザインの問題だけでコードをいじることは費用対効果の面でまったくオススメしない。特に「新しいブロックを作る」というのは、ユーザーにとってはエディターに「デザイン的にイケているボタンとイケてないボタンがある」という大変不便な状況になる。

たとえば上記のボタンブロックはSCSSの @extend を使えば簡単に変更できる。

.wp-block-button {
  &__link {
    @extend .btn;
    @extend .btn-primary;
    // is-style-outline だったら、アウトラインに
    .is-style-outline & {
      @extend .btn-outline-primary;
    }
  }
}

もちろん、スタイルのバッティングなどがありえるので、詳細度の調節は必要だが、大半のスタイルはうまくあたるはずだ。なんにせよ、フィルターフックをかけてまでHTMLを変更せず、@extendで乗り切ることを意識しよう。

秘訣3. 変更し難い要素があることを知る

上記の秘訣を踏まえた上で、そもそもWordPressはCMSであり、そのコンテンツはユーザー・サードパーティー（e.g. プラグイン）が作成・設定する。したがって、細部までマークアップが施された「完璧な」HTMLが生成されることを前提とせずにコーディングすべきである。WordPressではたとえば次のような部分が勝手に出力される部分にあたる。

投稿本文（ブロック）

投稿本文はユーザーが入力する。CMSとしてのWordPressを全体にした場合、この「ユーザー」にはHTMLおよびCSSに関する知識がないことを前提にしておこう。

赤で囲った部分はユーザーが色々入力するので、完璧なマークアップを期待することは難しい。

特にプラグインが生成するブロックはテーマ側のCSSの事情を知る由もないので、テーマ側でデザインを吸収すべきだ。

メニュー

メニューはテンプレートタグwp_nav_menuが出力する「入れ子になったUL」であり、その典型的なマークアップは次のようになる。

<nav class="p-global-nav" role="navigation" aria-hidden="false">
　　<ul id="menu-%e3%83%88%e3%83%83%e3%83%97%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-1" class="c-navbar">
　　　　<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home page_item page-item-7 menu-item-18 c-navbar__item">
　　　　　　<a href="https://capitalp.jp/" aria-current="page">
　　　　　　　　<span>ホーム</span>
　　　　　　</a>
　　　　</li>
　　　　<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19 c-navbar__item">
　　　　　　<a href="https://capitalp.jp/about-us/">
　　　　　　　　<span>Capital Pについて</span>
　　　　　　</a>
　　　　</li>
    </ul>
</nav>

もちろん、これらのマークアップをwp_nav_menuの引数およびフィルターフックで変更することもできるのだが、基本的にはフィルターフックを使わずにデザインすること（つまり、liタグやaタグのクラスをカスタマイズしないこと）が望ましい。単純なリスト要素の入れ子であることを前提に、CSSだけでデザインすることをオススメする。

ウィジェット

ウィジェットはWordPressコアおよびプラグインが生成する。したがって、生成されるHTMLは予見することが難しい。ウィジェットのコンテナはテーマがregister_sidebarで登録するので、ある程度コントロール可能だ。

register_sidebar( [
    'name'          => 'サイドバーウィジェット',
    'id'            => 'sidebar-widgets',
    'description'   => 'サイドバーに表示されます',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">', // ウィジェットのラッパー
    'after_widget'  => '</aside>',
    'before_title'  => '<h3 class="widget-title">', // ウィジェットタイトル
    'after_title'   => '</h3>',
] );