ブログをするのに便利なWordPressですが、もちろんその中でもアフィリエイトがメインの方も多いのではないでしょうか?よく「アフィリエイト乙」みたいな意味のわからないコメントを頂いたりもしますが、有益な記事を書いたり見たりした上でその代償で僅かなアフィリエイト(人によっては多額)を得る事は非常に理に叶っている事だと思います。誰も損していないし嫌な思いもしていない。「ユーザーは良い情報を手に入れ」「サイトオーナーは収入を得て」「企業主は広告から顧客を獲得する」という素晴らしいシステムだと思います。
まぁ、前置きはここまでにしてどんなブログをするにしろ、「どこに広告を置くのか?」や「どのようにアクセスを稼ぐか?」という事はアフィリエイトの成功に大きく影響します。せっかく記事を一生懸命書くなら、効果的なデザインで公開したいものです。
WordPress(ワードプレス)でアフィリエイトを行う上でSEO的な事も含めネット上には沢山の優良な記事があります。しかしながら情報は散在し、またそれなりの経験を積まないとプラグイン等を含めたカスタマイズは意外と敷居が高いものです。
※下記に記載する9つの設定はもちろん細かいチューニングを実装済みのシンプルなWordPressテンプレート(スティンガー)を公開しております
アフィリエイトにも効果的なWordPressテーマ「Stinger]
[cf "gad"]
WordPressで必ずしておきたい9つの設定
1効果は20倍!?広告の位置で収入はこんなに変わる
まずは根本的な事ですが広告の配置というものはアフィリエイトをする上で非常に重要です。いかにそれによって収入が変わるかはMoreAccess!MoreFun!の管理人、永江一石さんの【メモ!】あらら、びっくり。入れる位置でこれだけ変わる、Googleのアドセンスを見て頂ければわかりやすいのではないでしょうか?なんと20倍の差があったそうです。
まずは「右上」これは鉄則です。
2どこまでも追いかける追尾型広告で機会損失を防ぐ
「ロケットニュース」や「痛いニュース」などでも見る、追尾型の広告スペースも非常に効果的です。ユーザーの視線をどこまでも追いかけてきます。ユーザーが広告に目を向けるのは読み始めと読み終わりなのでぜひ、取り入れておきたい機能です。当サイトでも右サイドバーで「ワンピースのフィギア」のアフィリエイト画像で使用しいます。これはjQueryで実装されています。(※このような追尾式の広告をGoogleは認めていません。他のアフィリエイトを利用しましょう。)
javascript
(function($) { $(document).ready(function() { /* Ads Sidewinder by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder */ var main = $('#main'); // メインカラムのID var side = $('#side'); // サイドバーのID var wrapper = $('#ad1'); // 広告を包む要素のID var w = $(window); var wrapperHeight = wrapper.outerHeight(); var wrapperTop = wrapper.offset().top; var sideLeft = side.offset().left; var sideMargin = { top: side.css('margin-top') ? side.css('margin-top') : 0, right: side.css('margin-right') ? side.css('margin-right') : 0, bottom: side.css('margin-bottom') ? side.css('margin-bottom') : 0, left: side.css('margin-left') ? side.css('margin-left') : 0 }; var winLeft; var pos; var scrollAdjust = function() { sideHeight = side.outerHeight(); mainHeight = main.outerHeight(); mainAbs = main.offset().top + mainHeight; var winTop = w.scrollTop(); winLeft = w.scrollLeft(); var winHeight = w.height(); var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false; pos = !nf ? 'static' : (winTop + wrapperHeight) > mainAbs ? 'absolute' : 'fixed'; if (pos === 'fixed') { side.css({ position: pos, top: '', bottom: winHeight - wrapperHeight, left: sideLeft - winLeft, margin: 0 }); } else if (pos === 'absolute') { side.css({ position: pos, top: mainAbs - sideHeight, bottom: '', left: sideLeft, margin: 0 }); } else { side.css({ position: pos, marginTop: sideMargin.top, marginRight: sideMargin.right, marginBottom: sideMargin.bottom, marginLeft: sideMargin.left }); } }; var resizeAdjust = function() { side.css({ position:'static', marginTop: sideMargin.top, marginRight: sideMargin.right, marginBottom: sideMargin.bottom, marginLeft: sideMargin.left }); sideLeft = side.offset().left; winLeft = w.scrollLeft(); if (pos === 'fixed') { side.css({ position: pos, left: sideLeft - winLeft, margin: 0 }); } else if (pos === 'absolute') { side.css({ position: pos, left: sideLeft, margin: 0 }); } }; w.on('load', scrollAdjust); w.on('scroll', scrollAdjust); w.on('resize', resizeAdjust); }); })(jQuery);
コンテンツを#main、広告を表示するサイドバーを#side
広告スペースを#ad1としてあります。
参考サイト:ライブドアみたいにスクロールしたらサイドバーの広告を固定する
3貼るだけ!SNSボタンで拡散チャンスを逃さない
今や、情報はTwitterやFacebook、はてな等のソーシャルメディアで拡散されるのが常なので、必ず設定しましょう。
WordPressで自作のボタンで制作する場合は以下のようになります。
<a href="http://twitter.com/home?status=<?php wp_title(' '); ?> <?php the_permalink() ?>"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="twitter" /></a>
※Shereで代用
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank"> <img src="<?php bloginfo('template_directory'); ?>/images/fb.png" alt="fb" /></a>
はてブ
<a class="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加" href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" data-hatena-bookmark-title="<?php wp_title(' '); ?><br /><?php if(wp_title(' ', false)) { echo ' | '; } ?><br /><?php bloginfo('name'); ?>" data-hatena-bookmark-layout="simple"><img src="<?php bloginfo('template_directory'); ?>/images/hatena.png" alt="hatena" /></a><script charset="utf-8" type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js"></script>
Google+
<a href="javascript:(function(){window.open('https://plusone.google.com/_/+1/confirm?hl=ja&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'_blank');})();"><img src="<?php bloginfo('template_directory'); ?>/images/gplus.png" alt="gplus" /></a>
※画像リンクは修正して下さい。
4長すぎるURLを自動で最適化する。
パーマリンクを「/%category%/%post_id%/」や「/%category%/%postname%/ 」などに変更している方は多いと思うのですが、投稿の際にちゃんと設定しないと日本語が変換され非常に長いURLになってしまいます。これは、他から紹介を受ける上でもアドバンテージとなります。以下のコードをfunctions.phpに記載する事で、変更記載の無いパーマリンクは自動でpost-idに最適化されます。
function auto_post_slug( $slug, $post_ID, $post_status, $post_type ) { if ( preg_match( '/(%[0-9a-f]{2})+/', $slug ) ) { $slug = utf8_uri_encode( $post_type ) . '-' . $post_ID; } return $slug; } add_filter( 'wp_unique_post_slug', 'auto_post_slug', 10, 4 );
参考サイト:WordPress の投稿スラッグを自動的に生成する
5スマートフォン表示は簡単にCSSで切りかえる
今や、スマートフォンユーザーは圧倒的なシェアを持っています。表示を最適化する事はアフィリエイトに大きな効果をもたらしますが、その際には注意が必要です。それは、スマートフォン用ではなくPC用のアドセンスを表示するようにする事です。なのでデザインはCSSで切り替え、スマートフォンにはサイズを変更したCSSで対応するのが良いでしょう。 以下のコードをヘッダーに記載し、読み込むCSSを切り替えます。
<?php if(strpos($_SERVER['HTTP_USER_AGENT'],'ipod')!==false || strpos($_SERVER['HTTP_USER_AGENT'],'iPhone')!==false || strpos($_SERVER['HTTP_USER_AGENT'],'Android')!==false){ ?> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/smart.css" type="text/css" media="all" /> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/smartbase.js"></script> <?php }else{ ?>
WordPressを使ったWebサイトにSEO施行する際に役立つっぽいカスタマイズハック
6自動関連記事の表示で、ページビューを増やす
関連記事の表示は、ユーザーの誘導はもちろん、コンテンツのSEOを高める上でも効果的です。以下の設定をする事でプラグインを使用せずに「タグ」で判定する関連記事の表示ができます。
funtions.php
<h4>関連する記事</h4> <ul> <?php related_post_list(5); ?> </ul> */ function related_post_list($show_num) { global $post; $tags = wp_get_post_tags($post->ID); $tagIDs = array(); if ($tags) { $tagcount = count($tags); for ($i = 0; $i < $tagcount; $i++) { $tagIDs[$i] = $tags[$i]->term_id; } $args=array( 'tag__in' => $tagIDs, 'post__not_in' => array($post->ID), 'showposts'=>$show_num, 'caller_get_posts'=>1 ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { while ($my_query->have_posts()) { $my_query->the_post(); echo '<li><span>'; the_time('Y年m月d日'); echo '</span><a href="'; the_permalink(); echo '" title="'; the_title_attribute(); echo '">'; the_title(); echo '</a></li>'; } wp_reset_query(); }else { echo '<li>関連する記事は見当たりません。</li>'; } } } //関連記事表示2画像あり add_theme_support('post-thumbnails'); add_image_size('rel_tmn', 100, 100); // 関連記事用 縮小モード
表示部分
<h4>関連記事</h4> <div> <?php $original_post = $post; $tags = wp_get_post_tags($post->ID); $tagIDs = array(); if ($tags) { $tagcount = count($tags); for ($i = 0; $i < $tagcount; $i++) { $tagIDs[$i] = $tags[$i]->term_id; } $args=array( 'tag__in' => $tagIDs, 'post__not_in' => array($post->ID), 'showposts'=>5, 'caller_get_posts'=>1 ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { while ($my_query->have_posts()) : $my_query->the_post(); ?> <div> <div> <a href="<?php the_permalink();?>"><?php the_post_thumbnail('rel_tmn'); ?></a></div> <div> <h4> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> <p><?php echo mb_substr(get_the_excerpt(), 0, 35); ?>...</p> <p><a href="<?php the_permalink() ?>">続きを見る</a></p> </div> </div> <?php endwhile; wp_reset_query(); ?> <?php } else { ?> 関連する記事は見当たりません。 <?php } } ?> </div>
WordPressでプラグインなしで関連する記事を一発で呼び出す関数をfunctions.phpに記述してみる
7ぱんくずとページナビを配置する
ぱんくず
<div class="kuzu"> <div class="breadcrumbs"> <a href="<?php bloginfo('url'); ?>">TOP </a> > <?php $cat = get_the_category(); echo get_category_parents($cat[0], true, ' > '); ?> </div> </div><!--/kuzu-->
参考サイト:WordPress のブログサイトでパンくずリストを表示するコード
ページナビ
functions.php
function pagination($pages = '', $range = 4) { $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == '') { global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>"; if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link (1)."'>« First</a>"; if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link ($i)."' class=\"inactive\">".$i."</a>"; } } if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next ›</a>"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>"; echo "</div>\n"; } }
挿入部分のコード
<div class="kuzu"> <div class="breadcrumbs"> <a href="<?php bloginfo('url'); ?>">TOP </a> <?php $cat = get_the_category(); echo get_category_parents($cat[0], true, ' > '); ?> </div> </div><!--/kuzu-->
参考サイト:WordPressにプラグイン無しでページネーションを設置する方法
8各ページのタイトルをユニークに設定
サイトにとって「タイトル」はSEOの要です。以下のコードを設定する事でプラグインを使用せずに、重複しないタイトルを設定する事ができます。
<title> <?php if ( is_home() ) { ?><?php bloginfo('name'); ?> <?php } elseif ( is_search() ) { ?>検索結果:<?php echo the_search_query(); ?> | <?php bloginfo('name'); ?> <?php } elseif ( is_single() ) { ?><?php wp_title(''); ?> | <?php bloginfo('name'); ?> <?php } elseif ( is_page() ) { ?><?php wp_title(''); ?> | <?php bloginfo('name'); ?> <?php } elseif ( is_category() ) { ?>「<?php single_cat_title(); ?>」一覧 | <?php bloginfo('name'); ?> <?php } elseif ( is_month() ) { ?><?php the_time('Y年F'); ?>の記事 | <?php bloginfo('name'); ?> <?php } elseif ( is_tag() ) { ?>「<?php single_tag_title();?>」一覧 | <?php bloginfo('name'); ?> <?php } else { ?>404エラー | サイト名<?php } ?> </title>
9アーカイブをインデックスさせない
WordPressは自動で「カテゴリー」や「タグ」など様々なアーカイブを自動で生成します。これらに自動で「no index」を埋め込んで重複コンテンツによるマイナスを防ぎます。 以下をヘッダーに記載して下さい。
<?php if (is_home()) { ?> <?php } else if ( is_archive() ) { ?> <meta name="ROBOTS" content="NOINDEX, FOLLOW" /> <?php } else { ?> <?php } ?>
要約すると、
・いかに「広告」を効果的に配置して
・拡散しやすい仕組みを用意して
・検索にかかりやすいタグの配置 を意識する事
が重要です。 コンテンツが大事なのはもちろんですが、読みやすくする事は 同じくらい重要だと思います。
上記の事項や まだまだ他にある細かいチューニングを 実装済みのシンプルなアフィリエイトしやすいWordPressの無料テンプレート(スティンガー)を 公開しておりますので宜しければご利用下さい
アフィリエイトにも効果的なWordPressテーマ「Stinger]
上記のテンプレートで
検索キーワード1,980,000 件 「痩せる方法」で1位
などの多数の実績も出しています。詳しい効果は記事にしております。