Twitterはこちら仕事依頼はこちら

記事終わりにボタンを表示させてクリック率をあげる【記事別に変更可能】

記事終わりにボタンを出してクリック率をあげる
スポンサーリンク

記事を読んでもらったあと、あなたはユーザーにどんな行動を取ってもらいたいですか?

  • 関連記事に誘導
  • キラーページに誘導
  • 商品を買ってもらう
  • アフィリエイトのリンクを踏んでもらう

人それぞれ違うと思いますがリンクを踏んでもらいたいのは共通してるかと思います。

今回、このようなカスタマイズ依頼がありました。

アプリのダウンロードボタンを画面右下に表示し、追従させたい

ということで作りました。

この記事がデモページになってます。

画面をスクロールして下の方に行くとボタンが表示されるようになっています。

このカスタマイズの仕様
  • 位置:自由に変更可能
  • 表示タイミング:自由に変更可能
  • 表示するもの:記事ごとに変更可能

このページはAmazonアソシエイトのリンクを…

このページはキラーページへのリンクを…

など自由に変更可能です。

コピペでできるようになってるのでHTML、CSSなど分からなくてもOKです。

この記事はWordPressユーザーを対象に書いています。
スポンサーリンク

記事終わりにボタンを固定表示させる方法

手順は以下の通りです。

手順
  • STEP1
    CSSコピペ
    style.cssにコードをコピペします。
  • STEP2
    JavaScriptコピペ
    javascriptをコピペします。
  • STEP3
    HTMLコピペ
    記事にHTMLをコピペします。

STEP1:CSSをコピペ

下記コードをコピペしてください。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

/************************************
** 何でも追従機能
************************************/
/* PC(タブレット) */
.fixed-wrap{
  position:fixed;
  z-index:100;
  max-width:180px; /* 最大横幅 */
  display:none;
  bottom:20px; /* 配置場所(画面下からの距離) */
  right:90px; /* 配置場所(画面右からの距離) */
}
.fixed-wrap img{
  width:100%;
  height:auto;
}
/* スマホ */
@media screen and (max-width: 559px) {
  .fixed-wrap{
    max-width:130px; /* 最大横幅 */
    bottom:40px; /* 配置場所(画面下からの距離) */
    left:15px; /* 配置場所(画面左からの距離) */
    right:unset;
  }
}

位置大きさは各自変更してください。

コメントに書いたので何となく意味はわかると思います。最大横幅と書いてあるところが横幅の設定、配置場所と書いてあるところが位置情報の設定になります。

位置や大きさを変えたい場合は数値を変更してください。17行目より上がPCとタブレットで下がスマホの値になっています。

STEP2:JavaScriptをコピペ

常時表示させたい人は必要ないので飛ばしてください。

WordPressのテーマによってコピペする場所が異なります。

子テーマにjavascript.jsとかscripts.jsとかあれば、そこに貼り付けてください。



JINはJavaScriptのファイルが子テーマにないのでHTMLタグ設定の【bodyタグの終わり】に貼り付けてください。

コードを貼り付けるときは<script></script>と自分で入力して間に入れてください。

<script>
ここにコピペ
</script>



SANGOはJavaScriptのファイルが子テーマにないので下記ページを参考にしてください。

公式 カスタマイズでJavaScriptを利用する方法

//スクロールで固定ボタン表示
$(window).scroll(function(){
if ($(window).width() <= 767) {//ブラウザ画面が767pxより小さい時
  if(window.pageYOffset > $(document).height()-$(window).height()-3000){
    $('.fixed-wrap').fadeIn(300);
    }else{
    $('.fixed-wrap').fadeOut(300);

  }
} else {//ブラウザ画面が767pxより大きい時
  if(window.pageYOffset > $(document).height()-$(window).height()-2500){
    $('.fixed-wrap').fadeIn(300);
    }else{
    $('.fixed-wrap').fadeOut(300);

  }
}
});

WordPressのテーマによって上手く動かない場合があります。その場合はご連絡ください。

JINを利用している方は下記コードも併せて入力してください。

$(function() {
    $('#sidebar').after($('.fixed-wrap'));
});
重要(全環境)

表示するタイミングを各自変更する必要があります。
変更する場所はコードの3000、2500と書いてあるところです。
この数値はサイトの下からの距離になります。
3000がPC、タブレット。
2500がスマホの数値になっています。

フッターのサイズに合わせて数値を変更してください。

STEP3:HTMLをコピペ

あとは記事にHTMLを入力するだけです。

<div class="fixed-wrap">
ここに表示させたいものを入力
</div>

これだけ!

これを記事の一番下に入れればOK!

AddQuicktagに登録しておけばいつでも使えます。

全てのパターンを想定していないので「表示が崩れた!」「位置がおかしい!」「大きさおかしい!」などあれば、ご連絡ください。

カテゴリごと、全てのページに一括設定したい

記事ごとではなくカテゴリごと、全てのページに一括設定したい場合はテーマによって異なるので各自対応させていただきます。

希望者は下記ページまで!

ぽんひろへ仕事を依頼する
ご覧いただきありがとうございます。 現在依頼多数のため対応をストップさせていただいております。 大変申し訳ございません。 相談は無料で承ります。料金は変動する可能性があります。 現在引き受けてる仕事 WordP...

導入済みのブログ紹介させてください

「この記事を見て導入したよ!」という方でSNSやブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます!

ご連絡お待ちしております!

コメント

ページトップへ