【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

WordPressのレスポンシブ化に便利な2つのカスタマイズタグ

WordPressのレスポンシブ化に便利な2つのカスタマイズタグ
WordPressをGumbyに対応させるカスタマイズ方法
photo credit: thisismyurl via photopin cc

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

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

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

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

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

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

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

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

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

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

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

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

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

wp_nav_menuに追加するコード

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

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

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

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

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

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

register_sidebarに追加するコード

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+