IT道 |「va-social-buzz」改行した時、ページ送りの下に「いいね!」BOXを移動する

2017年12月3日

こんにちは「じぇっつ兄(@jetskyou)」です。またも今回も個人的に困った問題を解決したので、記録します。

最近、有名なブログでよく見られる記事の最後に大きくサムネイル画像と「いいね!」のボックスを配置しているデザイン。

これは「va-social-buzz」というプラグインを使っているのですが、記事を改行を入れた場合、これが ページ送り(ページネーション)の上に配置されてしまい次のページがあることが非常に分かりづらいのです。

これをページ送りの下に移動させる方法を記載します。

「va-social-buzz」をページネーションの上に移動させる。

1)最初がこの状態。次のページへのリンクが、「いいね!BOX」の下にあるのが分かりにくいですね。

2)記事を表示している「single.php」のページネイションは以下のようになっています。

つまり「va-social-buzz」<?php the_content();?>の最後に自動で挿入されるので、その下にあるページ送りより上に配置されてしまいます。

3)そこで以下のようにページ送りの下に、何でもいいのでクラス名をつけたDIVタグを配置して、そのクラスに対して以下のjQueryでvs-social-buzzを移動させます。

<script>
jQuery(function () {
jQuery('.va-social-buzz').insertAfter('.option-footer');
});
</script>
<div class="option-footer"> </div>

4)これで「いいね!BOX」が移動します。

ついでに、「vs-social-buzz」で自動で挿入される「シェアする」「ツィートする」を消しましょう。

先ほどのjQueryに以下のソースを追加してます。

jQuery('.vasb_share').hide();

これで理想通りの表示が出来ました。

ではでは。

この記事が気に入ったら
いいね ! しよう

Twitter で