フッターに商品情報を追加する方法!フッターを使えば商品売上が30%増加する!

この記事では、下記のことができるようになります。

できるようになること

  • モバイル専用のフッターが追加できます。
  • フッターに商品・アフィリエイトを追加することができます。
  • フッターをSANGO風にできます。
  • ページごとにフッターを変更できます。
  • 親テーマを修正する方法がわかります。
  • ショートコードを追加する方法がわかります。

この記事は、AmazonのMobile Popoverを参考にしています。

参考 Mobile Popoverアソシエイト・セントラル

米国では、このフッターウィジェットの追加により、商品・アフィリエイト売上が30%アップしたという実績があるものです。

今回はこのフッターウィジェットを参考にショートコードを作成しました。

ページごとに追加できることのほか、Amazonリンク以外にも対応することができる優れものです。

after

フッター 商品・アフィリエイト

※スマホで表示している場合、下部に表示されています。

注意
この記事ではfunction.phpとstyle.cssを修正します。

特にfunction.phpの修正は失敗するとページが真っ白になる可能性があります。

必ずバックアップを取得するようにお願い致します。

1. function.phpに追加する

ショートコードを実装するためにfunction.phpを修正します。

function.phpの修正は失敗するとページが真っ白になる可能性があるため、バックアップの取得をお願いします。

1-1. ショートコードを追加する

function.php
/*************************************************
  フッター商品・アフィリエイトのショートコード追加
**************************************************/
// [footer-item itemname="" itemprice="" itemimglink="" itemlink="" buttontitle=""]
add_shortcode('footer-item', function( $atts = null ) {
    extract(shortcode_atts(array(
        'itemname' => '',
		'itemprice' => '',
		'itemimglink' => '',
		'itemlink' => '',
		'buttontitle' => ''
    ), $atts));
	
	$output = '<div id="footer-remove-button" class="footer-remove-button">▼</div><div class="footer-item-box"><div class="footer-item-img-box"><img class="footer-item-img" src="'. esc_attr($itemimglink).  '" alt="' . esc_attr($itemname). '"></div><div class="footer-item-title-box"><div class="footer-item-title">' . esc_attr($itemname). '</div><div class="footer-item-price">'. esc_attr($itemprice).  '</div></div><div class="footer-item-button-box"><a href="' . esc_attr($itemlink).  '" class="footer-item-button">' . esc_attr($buttontitle).  '</a></div></div>';
	
    return $output;
});
こちらを使用することで、記事を書く際に下記ショートコードが追加できます。
ショートコード
[footer-item itemname="アイテム名" itemprice="¥123,456" itemimglink="https://jaminlifelog.com/wp-content/uploads/2020/05/head.png" itemlink="#" buttontitle="Amazon"]

赤文字を修正し、記事の一番上や一番下など好きなところに、ショートコードを追加することで、フッター広告を表示することが可能になります。

1-2. jQueryでぬるっと表示させる

ブラウザの特定の距離までスクロールされたタイミングで、ぬるっとブラウザに表示させる機能を追加します。

function.php
/***************************
  ぬるっと表示させる
****************************/
function footer_item_show() {
?>
<script>
jQuery(function() {
	var w = $(window).width();
    var x = 767;
    if (w <= x) {
		  var $win = $(window);
		  var init = 0;
$win.on('load scroll', function() {
			var value = $(this).scrollTop();
			if ( value > 100 && init == 0 ) {
 				$('.footer-item-box').attr('style', 'height:70px');
				$('.footer-remove-button').attr('style', 'bottom:65px; height:30px;');
				init = 1;
			}
		});
	}
});
</script>
<?php
}
add_action('wp_footer', 'footer_item_show');

赤文字の100の部分を変更することで、スクロールされた距離を変更することができます。

var initこの関数で、初期描写時のみぬるっと表示させています。(もう少し書き方はあるはず…)

1-3. 矢印クリックで表示・非表示を変更

常に表示させておくことは、ユーザーに不快感を与えかねないため、ボタンで表示・非表示をコントロール可能にします。

function.php
/***************************
  クリックで表示・非表示
****************************/
function footer_item_click() {
?>
<script>
jQuery(function() {
	
	var button = $('#footer-remove-button');
	
	button.on('click', function() {
		if($(".footer-remove-button").text() == "▼") {
			$('.footer-item-box').attr('style', 'height:2px');
			$('.footer-remove-button').attr('style', 'bottom:0px; height:30px;');
			$('.footer-remove-button').text('▲');
		} else {
			$('.footer-item-box').attr('style', 'height:70px');
			$('.footer-remove-button').attr('style', 'bottom:65px; height:30px;');
			$('.footer-remove-button').text('▼');
		}
	});
});
</script>
<?php
}
add_action('wp_footer', 'footer_item_click');

これで、ぬるっと出てきたフッターを表示・非表示できるようにするところまで完成です。

2. style.cssを追加する

CSSに下記を追加します。

style.css
/*-------------------------------------
     footer商品・アフィリエイトCSS
---------------------------------------*/
.footer-remove-button {
  display:none;
}

.footer-item-box {
  display:none;
}

@media only screen and (max-width: 767px){
  .footer-item-box {
    position: fixed;
    display: block;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    z-index: 99;
    transition: .3s ease-in-out;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    border-top: 1.5px solid #6088c6; //自分のサイトの色に変更する
  }

  .footer-remove-button {
    position:fixed;
    display: block;
    text-align: center;
    color: #FFFFFF;
    font-size: 16px;
    width: 40px;
    height: 0;
    bottom: 0;
    right: 5px;
    background: #aec4e5; //自分のサイトの色に変更する
    border-radius: 5px;
    z-index: 98;
    transition: .3s ease-in-out;
  }

  .footer-item-img-box {
    display:inline-block;
    vertical-align: top;
    width: 60px;
    height: 60px;
    margin: 5px;
  }
	
  .footer-item-img {
    width: 60px;
    height: 60px !important;
    object-fit: contain;
  }

  .footer-item-title-box {
    display: inline-block;
    vertical-align: top;
    width: 165px;
    padding: 10px 5px;
  }

  .footer-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
	
  .footer-item-price {
    color: #808080;
    font-size: 14px;
  }

  .footer-item-button-box {
    display: inline-block;
    left:0;
    margin-top: 17px;
  }

  .footer-item-button {
    display: inline-block;
    text-align: center;
    padding: 3px 15px;
    border-radius: 25px;
    text-decoration: none;
    background: #f5f5f5;
    transition: .4s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 130px;
  }
}

赤文字のところは、自分のサイトの色と統一させておくことをおすすめします。

3. まとめ

今回の追加によって、各ページごとのフッターに特定の商品情報を追加することができます。

これにより、商品をダイレクトにユーザーに届けることができることのほか、不要な広告を表示させません。

ユーザーフレンドリーな、フッター広告をぜひ活用してみてください。