スクロールしたら出てくるシェアボタン【プラグインなし】

公開日2022/01/20 最終更新日2022/02/06

ブログ書いてSNSにリンクをアップしたりしてるけど、なかなか見てもらえないな。
もっとみんなに見てもらえる方法ないかな？

ブログ記事のページから直接リンクをシェアできる方法があるよ！

自分が見たブログを家族や友人に簡単にシェアできる機能ってことですか？！

その通り！jQueryを使って簡単に実装できるんだ！
これを実装すればブログ記事を見てくれた人が家族や友人に紹介してくれてたくさんの人に見てもらえる可能性が上がるね！実際にWordPressで実装する手順を解説していくね！

Contents

footer.php

<?php if (is_single()) : ?>
    <!-- footer-share -->
    <div class="footer-share">
        <div class="inner">
            <div class="footer-sns-head">この記事がいいね!と思ったらシェア！</div>
            <nav class="footer-sns-buttons">
                <ul>
                    <li><a class="m_facebook" href="https://www.facebook.com/share.php?u=<?php the_permalink(); ?>" rel="nofollow" target="_blank">
                            <img src="<?php echo get_template_directory_uri() ?>/img/icon-facebook.png" alt="">
                        </a></li>
                    <li><a class="m_twitter" href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" rel="nofollow" target="_blank">
                            <img src="<?php echo get_template_directory_uri() ?>/img/icon-twitter.png" alt=""></a>
                    </li>
                    <li><a class="m_line" href="https://social-plugins.line.me/lineit/share?url=<?php the_permalink(); ?>" rel="nofollow" target="_blank">
                            <img src="<?php echo get_template_directory_uri() ?>/img/icon-line.png" alt=""></a>
                    </li>
                    <li><a class="m_hatena" href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" target="_blank">
                            <img src="<?php echo get_template_directory_uri() ?>/img/icon-hatena.png" alt=""></a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
<?php endif; ?>

最初の<?php if (is_single()) : ?>はsingle.php（投稿ページ）を開いているときに以下を表示するという意味です。
表示したいページに合わせて変更してください。
</footer>以降</body>までの間に記述しましょう。

シェアするSNSのリンクボタンを作る

上記のコードではFacebook、Twitter、LINE、はてなブックマークのリンクボタンを作っています。

ここの記述の仕方はこちらのサイトを参考にさせていただきました。
とてもわかりやすくて私が説明するよりも断然分かりやすいのでぜひ見に行ってください。

jQuery

jQuery(window).on('scroll', function($){
    if(200 < jQuery(this).scrollTop()){
        jQuery('.footer-share').addClass('m_fixed_sns');
        jQuery('body').addClass('m_fixed_sns');
    }else{
        jQuery('.footer-share').removeClass('m_fixed_sns');
        jQuery('body').removeClass('m_fixed_sns');
    }
});

ページトップから200pxスクロールすると表示されるように指定しています。
ページトップから200pxスクロールするとfooter-shareとbodyにm_fixed_snsというクラスを付与するという意味です。
else以降の意味はtop0px~200pxのときは付与したクラスを無くすという意味です。

あとはcssで付与したクラスに対してデザインを当てていくだけですね！