
こんにちは、ECプロデュース部の岡本です。
GumbyやTwitterBootstrap,Foundationなど、便利でデザイン性の高いCSSフレームワークが増えてきました。
これらのフレームワークを使ってレスポンシブなWordPressサイトを作ろうと考えられている方も少なくないと思います。
しかしそれらでサイトを作成してもいざWordPress化しようとすると、
「クラス値が指定できない」
「階層が浅くて使えない」
「邪魔なテキストが出力される」
などというトラブルに見舞われることがしばしばあります。
そこで今回はフレームワークを使用する際に知っておきたい「テンプレートタグのカスタマイズ方法」を紹介します。
1、グローバルナビのカスタマイズ
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 日本語版
2、ウィジェットのカスタマイズ
直感的にコンテンツを追加・削除・変更ができて非常に便利なのが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の便利な点です。
デザインを効率化させるレスポンシブフレームワークと組み合わせることで、より良いサイト運営ができるのではないかと思います。