こんにちは、ECプロデュース部の岡本です。

GumbyやTwitterBootstrap,Foundationなど、便利でデザイン性の高いCSSフレームワークが増えてきました。

これらのフレームワークを使ってレスポンシブなWordPressサイトを作ろうと考えられている方も少なくないと思います。

しかしそれらでサイトを作成してもいざWordPress化しようとすると、

「クラス値が指定できない」

「階層が浅くて使えない」

「邪魔なテキストが出力される」

などというトラブルに見舞われることがしばしばあります。

そこで今回はフレームワークを使用する際に知っておきたい「テンプレートタグのカスタマイズ方法」を紹介します。

１、グローバルナビのカスタマイズ

WordPressでグローバルナビを出力する際に使用するタグといえば「wp_nav_menu」です。

しかしデフォルトのまま<?php wp_nav_menu(); ?>のように記述しては、フレームワークについているスタイルが使用できません。

そこでこのテンプレートタグにクラス値やタグを変更できるようなコードを追加します。

wp_nav_menuに追加するコード

<?php 
$custom = array(
//コンテナ
  //ulタグの外側に設定するタグを入力。
  //デフォルトはdiv。falseで無しに設定可
	'container'       => 'div', 
  //コンテナのクラス値を設定
	'container_class' => '',
  //コンテナのIDを設定
	'container_id'    => '',
//リスト
  //ulタグをカスタマイズ。
  //'%3$s'のみでulタグを無しに設定可
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
  //ulタグに設定するクラス値を設定
	'menu_class'      => 'menu',
  //ulタグに設定するIDを設定
	'menu_id'         => '',
//テキスト
  //aタグ内のテキスト前後に追加するテキスト
	'before'          => '',
	'after'           => '',
  //aタグの前後に追加するテキスト
	'link_before'     => '',
	'link_after'      => '',
);
wp_nav_menu($custom); 
?>

テンプレートタグ/wp nav menu – WordPress Codex 日本語版

２、ウィジェットのカスタマイズ

直感的にコンテンツを追加・削除・変更ができて非常に便利なのがWordPressの「ウィジェット」機能です。

ウィジェット機能を使用する際には、<?php register_sidebar();?>を使用します。

そしてここで出力されるコードをカスタマイズする場合、以下の様なコードを使用します。

register_sidebarに追加するコード

<?php
 $args = array(
//コンテナ
  //サイドバー全体のIDを設定
	'id'            => 'sidebar-$i',
  //ウィジェットの前に追加するテキスト（htmlタグ可）
	'before_widget' => '<li id="%1$s" class="widget %2$s">',
  //ウィジェットの後に追加するテキスト（htmlタグ可）
	'after_widget'  => '</li>',
  //ウィジェットタイトルの前に追加するテキスト（htmlタグ可）
	'before_title'  => '<h2 class="widgettitle">',
  //ウィジェットタイトルの後に追加するテキスト（htmlタグ可）
	'after_title'   => '</h2>' 
);
register_sidebar( $args );
?>

Gumbyでカスタマイズしてみる

せっかくなので、以前紹介した「Gumby」の一部をWordPress化させてみましょう。

*Gumbyについてはこちらの記事を御覧ください。

今回使用するタグはナビゲーションパーツ（一部簡略化）です。

<div class="row navbar pretty" id="nav1">
  <!-- Toggle for mobile navigation, targeting the <ul> -->
  <a class="toggle" gumby-trigger="#nav1 > ul" href="#"><i class="icon-menu"></i></a>
  <h1 class="four columns logo">
    <a href="#">
      <img src="/img/gumby_mainlogo.png" gumby-retina />
    </a>
  </h1>
  <ul class="eight columns">
    <li><a href="#">Features</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Customize</a></li>
  </ul>
</div>

この中にWordPressのナビゲーションを追加すると、このようになります。

<div class="row navbar pretty" id="nav1">
  <!-- Toggle for mobile navigation, targeting the <ul> -->
  <a class="toggle" gumby-trigger="#nav1 > ul" href="#"><i class="icon-menu"></i></a>
  <h1 class="four columns logo">
    <a href="#">
      <img src="/img/gumby_mainlogo.png" gumby-retina />
    </a>
  </h1>
  <?php
   $custom = array( 'container' => false, 'menu_class' => 'eight columns');
   wp_nav_menu($custom);
  ?>
</div>

ulの外側にdivタグが不要なので「’container’ => false」で削除、ulには「eight columns」クラスが必要なので「’menu_class’ => ‘eight columns」を記述してます。

するとこの様にdivもなく、「eight columns」をもったグローバルナビが作成されました。

まとめ

いかがでしたでしょうか。

コードをカスタマイズすることで、自由に編集できることこそがWordPressの便利な点です。

デザインを効率化させるレスポンシブフレームワークと組み合わせることで、より良いサイト運営ができるのではないかと思います。