記事を読んでもらったあと、あなたはユーザーにどんな行動を取ってもらいたいですか？
- 関連記事に誘導
- キラーページに誘導
- 商品を買ってもらう
- アフィリエイトのリンクを踏んでもらう
人それぞれ違うと思いますがリンクを踏んでもらいたいのは共通してるかと思います。
今回、このようなカスタマイズ依頼がありました。
ということで作りました。
この記事がデモページになってます。
画面をスクロールして下の方に行くとボタンが表示されるようになっています。
- 位置：自由に変更可能
- 表示タイミング：自由に変更可能
- 表示するもの：記事ごとに変更可能
このページはAmazonアソシエイトのリンクを…
このページはキラーページへのリンクを…
など自由に変更可能です。
コピペでできるようになってるのでHTML、CSSなど分からなくてもOKです。
記事終わりにボタンを固定表示させる方法
手順は以下の通りです。
- STEP1CSSコピペstyle.cssにコードをコピペします。
- STEP2PHPコピペfunction.phpにコピペします。
- STEP3HTMLコピペ記事に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：PHPをコピペ
functions.phpに下記コードをコピペしてください。
function p_fixed_button_func() {
echo <<< EOM
<script>
jQuery(window).scroll(function(){
if (jQuery(window).width() <= 767) {//ブラウザ画面が767pxより小さい時
if(window.pageYOffset > jQuery(document).height()-jQuery(window).height()-3000){
jQuery('.fixed-wrap').fadeIn(300);
}else{
jQuery('.fixed-wrap').fadeOut(300);
}
} else {//ブラウザ画面が767pxより大きい時
if(window.pageYOffset > jQuery(document).height()-jQuery(window).height()-2500){
jQuery('.fixed-wrap').fadeIn(300);
}else{
jQuery('.fixed-wrap').fadeOut(300);
}
}
});
</script>
EOM;
}
add_action( 'wp_footer', 'p_fixed_button_func' );WordPressのテーマによって上手く動かない場合があります。その場合はご連絡ください。
JINを利用している方は下記コードを20行目と21行目の間に挿入してください。
jQuery(function() {
jQuery('#sidebar').after(jQuery('.fixed-wrap'));
});表示するタイミングを各自変更する必要があります。
変更する場所はコードの3000、2500と書いてあるところです。
この数値はサイトの下からの距離になります。
3000がPC、タブレット。
2500がスマホの数値になっています。
フッターのサイズに合わせて数値を変更してください。
STEP3：HTMLをコピペ
あとは記事にHTMLを入力するだけです。
<div class="fixed-wrap"> ここに表示させたいものを入力 </div>
これだけ！
これを記事の一番下に入れればOK！
AddQuicktagに登録しておけばいつでも使えます。
全てのパターンを想定していないので「表示が崩れた！」「位置がおかしい！」「大きさおかしい！」などあれば、ご連絡ください。
コメント
ぽんひろさん
初めまして。
面白いカスタマイズですね。
HTMLやCSSが詳しくないので「すごいな！」と思いながら興味深く拝見させていただきました。
ちなみに参考までに教えていただきたいのですが、ぽんひろさんの使われているイノシシのイラストはどうやって作っているのですか？
私のサイトでもこのカスタマイズを取り入れたいのですが、せっかくならオリジナリティのあるイラストを作成したいと思っています。
参考までに教えていただければ幸いです。
＞タマオさん
ありがとうございます！
イラストは自作しているわけではなくフリー素材です。
こちらのサイトです！
https://stampo.fun/
ぽんひろさん
回答ありがとうございます。
サイト参考にさせていただきます。
初めまして。
こちらの記事を参考に、ボタンを導入することができました。
とても助かりました。ありがとうございます。
そこで一つご相談なのですが、一つの記事でこの手のボタンを複数違う位置に表示させるにはどのようにすればよろしいでしょうか…？
例えば、記事の中盤ぐらいでは真ん中に〇〇のボタンを、記事の終盤では左に△△のボタンを表示させる、といった感じです。
ご教授いただけると幸いです。よろしくお願いします。
解決しました。お騒がせしてすいません。
＞おはようポテトさん
返信遅くなりまして申し訳ございません。
解決されたようで良かったです！
3つのテーマで試してみましたが、どれも動作しませんでした。
3テーマーの全て表示すらされないのですが、ＪＩＮとSANGOにしか利用できないのでしょうか？
お忙しいと思いますが、返信頂けると幸いです。
＞かんばーらさん
返信遅くなって申し訳ございません！
functions.phpの編集方法に変更したので、こちらで試してみてください！
返信遅れて申し訳ありません。
既に自己解決していましたが、ご丁寧に対応ありがとうございました。
便利なプログラムなので、数多くの方が利用すると思うので助かる人も多いと思います。
これからも参考にさせてもらいますので、よろしくお願いします。
この度は本当にありがとうございました。
ぽんひろさん、はじめまして。
いつも記事を参考にさせていただいております。
こちらのボタンを導入しようとコピペしているのですがボタンが表示されません。
テーマはcocoonです。
ためしにJIN用の
$(function() {
$(‘#sidebar’).after($(‘.fixed-wrap’));
});
こちらのコードをfunctionPHPに追記しても機能しません。
お手すきの際にご返信いただけると幸いです。
＞しゅんさん
返信遅くなりまして申し訳ございません。
何かしら間違えている箇所があると思うのですが、
見てみないと原因の特定は難しそうです。
初めまして。
此方のコードのカスタマイズでご相談なのですが
2つのボタンを表示させた上で
font awesome 5のアイコンを別々に設置し、尚且つアイコンの下にそれぞれ文字を入れるという事は可能でしょうか？
https://ponhiro.com/cocoon-mobile-toc/
イメージとしては此方の目次の追従のような丸いボタンですが、違う点は表記にfont awesomeを使い、その下に文字を入れる感じです。
完成形としてアイコンは左端に適当な間隔で横に整列してる感じです。
お手隙の際に返信して頂ければ幸いです。
長々と失礼致しました。
解決しました
すいません
ありがとうございます。
ページに彩りが出てきて楽しくなってきました。
＞NAOさん
こちらこそありがとうございます！
嬉しいです！
ぽんひろさん、はじめまして。
PHPを入れると、「致命的なエラーをチェックするためにサイトと通信できないため、PHP の変更は取り消されました。SFTP を使うなど、他の手段で PHP ファイルの変更をアップロードする必要があります。」と表示されてしまいます。
何か対策などはあるでしょうか？
お手すきの際にお返事いただけると幸いです。
よろしくお願いいたします。
解決しました！お騒がせしいたしました・・・・。
いつもお世話になっております。
こちらCocoonから使用させていただいているのですが、今回Swellで実装したところ機能しなかったのですが何かお心当たりはありますでしょうか？
あともし可能でしたらUseful Blocksプラグインにも導入していただけると非常に助かります。
お忙しいところ申し訳ございませんがよろしくお願いいたします。