当ブログ「アフィリ課」のスマホ訪問者は全体の約30%ですが、Googleアナリティクスが解析したスマホからのアフィリエイト制約率はアクセスに比例するほどの数字ではありません。
当ブログはレスポンシブWebデザインなので、グローバルメニューやサイドメニューなどのUIが端末の閲覧幅により可変します。特にスマホ閲覧ではサイドバーが本文の下部に回り込み、フッターと連続したメニュー構成になります。
大概のレスポンシブサイトの左右カラムは当ブログと同様に反応するか、サイドメニュー自体をCSSで非表示にしています。
そのため、スマホユーザーは表示領域の狭さと相まって、ページ下段に場所を移したサイドバー掲載のおすすめ商材メニューを目にする機会が極端に減ってしまいます。それはアナリティクス解析の直帰率の高さからも容易に想像することができます。
スマホ環境には、こうした内部リンクからの成約を妨げる要因があり、スマホユーザーの行動を制限してしまいます。管理者の私かコアなファンでない限り、フッター付近のおすすめ商材リンクバナーまで辿り付くアクションはそう簡単に取って貰えません。
本来であればおすすめ商材は、さりげなくではありますがスマホのファーストビュー（アクセス時の初期表示領域）に表示したいものです。
ただし、ヘッダーに推奨商材をはめ込んだ、アフィリエイト報酬欲しさ丸出しの露骨な掲載スタイルは採りたくないので、なかなか良い案が浮かばず、しばらく放置していました。
何か良いアイデアはないものかと漠然と思っていたところ、Googleのスマホ検索結果にヒントがありました。
あるアーティストを検索した際、アルバムCDのサムネイル画像とキャプションがカルーセルパネルで表示されていたのです。
カルーセルとは、メリーゴーランドがクルクルと同じ場所で回転するように、Webページの定位置で複数の画像が横にスクロールする機能を指します。ギャラリー風スライドショーといえば簡単にイメージできるでしょうか。
自動で動くスライドショーと違うのは、スマホユーザーが指でスワイプして画像が横にスクロールする点です。
スマホの狭い画面で勝手に動く、スクロール機能や画面下部に貼りついたオーバーレイ広告などは、ユーザーがページに集中する妨げとなり、敬遠されがちです。ユーザビリティ上も、好ましくないというアンケート結果が出ているため、スクロールはユーザーに任せることにしました。
カルーセルパネルは狭いエリアに複数のコンテンツを表示させることができるため、スマホにとってベストな選択であると判断し、早速作業に取り掛かりました。
WordPressのカルーセルプラグインがないので「Owl Carousel 2」を利用
先ずWordPressのプラグインを探しましたが、私の希望を満たすものはありませんでした。
あまり用途がないのでしょうか、そもそもカルーセル機能を持つプラグイン自体見つかりません。
今回のスマホ用カルーセルパネルの要点は次の通りです。
- WordPressへの設置
- レスポンシブ対応（この時点ではパソコン表示も視野に入れていた）
- Google検索結果で見たようにカルーセルパネルの左右にある画像の端が少し見え、スクロールを促すもの
- （カルーセルだから当たり前だが）無限ループするもの
あれこれ悩み、結局は「Owl Carousel 2」というjQueryスクリプトを利用することにしました。
「Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.」というサブタイトルが付いた無償jQueryプラグインです。
Owl Carousel 2
今回は上記のスマホ用カルーセルパネルの要点を満たした「stagePadding」タイプを採用しました。
このサイトからソースをダウンロードします。
この記事を書いている時点では「Owl Carousel Source - 2.0.0-beta.2.4」が最新です。
トップページのDownloadボタンよりダウンロードファイルがリンクされています。
ダウンロードファイルを解凍し、次の3ファイルを抜き出します。
- dist/owl.carousel.min.js
- dist/assets/owl.carousel.min.css
- dist/assets/owl.theme.default.min.css
WordPressへの書き出し
CSSファイル
WordPressテーマのheader.phpに次のCSSを追加します。
CSSファイルの格納ディレクトリは適時変更してください。
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/owlcarousel/owl.theme.default.min.css">
カルーセル表示ファイル
カルーセルを表示したい場所に次のコードを追記します。
トップの場合は、トップ用ファイル（home.phpなど）。カテゴリ一覧はcategory.phpかarchive.phpなど。詳細ページはsingle.phpになります。
<article id="carousel-box" class="latestPost">
<p><strong>おすすめ教材</strong></p>
<div class="owl-carousel front-view-content">
<?php
$args=array( 'showposts'=>10, 'orderby'=>rand, 'cat' =>1);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="item"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(150,150), array("class" => "carousel-img")); } ?>
<p class="carousel-title"><?php echo get_post_meta($post->ID,'carousel-title',true); ?></p></a></div>
<?php endwhile; wp_reset_postdata(); ?>
<?php } ?>
</div>
</article>
クラス名は適時変更してください。
ただし、ハイライトしている3行目の「owl-carousel」は下記のjsファイルの「$('.owl-carousel')」と連動しますので、同じクラス名にしてください。
5行目の配列のパラメーターは次の通りです。
- 'showposts'=>10（表示数。例は10件。）
- 'orderby'=>rand（ソート対象。例はランダム表示。
そのほか、date、title、modified、ID、comment_countなどあり。省略時はpost_date（投稿日時）が適用） - 'cat' =>1（表示したいカテゴリ番号）
指定カテゴリで除外したい投稿がある場合は、'post__not_in' => array(投稿ID)を指定します。
10行目で記事に設定したアイキャッチ画像を呼び出しています。
11行目の<?php echo get_post_meta($post->ID,'carousel-title',true); ?>は、スマホ用の短めのタイトルを設定したカスタムフィールド項目を表示させています。カスタムフィールドが分からない場合は、ページタイトルを表示する<?php the_title(); ?>などに変更してください。
jsファイル
JavaScriptファイルを読み込みます。
header.phpに記入した際、当アフィリ課ではjQueryが競合したため、footer.phpの</body>直前に記入しました。
また、WordPressのテーマによってはjQueryを既に読み込んでいる場合がありますので、1行目から4行目までは不要な場合もあります。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')
</script>
<script src="<?php bloginfo('template_directory'); ?>/owlcarousel/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
stagePadding: 20,
loop:true,
margin:10,
responsive:{
0:{
items:3
},
600:{
items:5
},
}
})
});
</script>
JSファイルの格納ディレクトリは適時変更してください。
ここで使用したカルーセル表示をコントロールするオプションは次の通りです。
- stagePadding: 20,（両端画像のはみ出し幅）
- loop:true,（無限ループ）
- margin:10,（画像間の幅）
- responsive（レスポンシブ対応。表示幅が0から600pxまでは画像3個、600px以上は5個を表示）
その他のオプションはOwl Carousel 2 公式サイトの「Options」から確認することができます。
CSSファイル
上記で使用したcss例です。
#carousel-box{
height:210px;
}
.owl-carousel .item a{
text-decoration: none;
}
.owl-carousel p.carousel-title{
color: #000;
font-size: 12px;
line-height: 1.1em;
}
.carousel-img{
display:block;
margin: 0 auto;
border: 0 none;
}
functions.php（スマホのみ表示の場合）
カルーセル表示はスマホ向けとしてパソコンでは非表示としました。
当ブログはレスポンシブWebデザインのため、CSSで対応することも可能ですが、functions.phpに下記コードを追加して、プログラムでスマホのみの表示としました。
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
上記で設定した各ファイルをis_mobile関数で囲みます。
<?php if(is_mobile()) { ?>
//スマホで表示したい内容
<?php } else { ?>
//PC・タブレットで表示したい内容。何もない場合は空白。
<?php } ?>
これで完成です。
表示デモを見たい場合は、当サイトのトップページをスマホで見てください。
なお、当ブログはキャッシュ系のプラグインをインストールしているので、カルーセル内の推奨商材はリアルタイムでランダム表示しません。
