スクロールすると追尾してくるSNSシェアボタンを設置する(Luxeritas特化)

この記事は約3分で読めます。

Luxeritas, WordPressカスタマイズ

本記事では、WordPress無料テーマLuxeritasに、スクロールしても追尾してくる(スティッキー)タイプのSNS拡散ボタンを設置する方法を紹介します。
Luxeritas特化の方法なのが売りとなっています。

設置方法は極めて簡単。
Luxeritasとデザインの統一性を持たせたものを設置できます。
基本コピペ一発同然ですので、是非お試し下さい。

スティッキータイプのSNSシェアボタンには最終的にサイトへの導線を太くする効果があります。
これはマスメディア各社の記事ページの多くが採用している通り。
ぜひ設置すべきです。

なお、Luxeritasにはスクロール固定ウィジェットスペースもありますが、ここでは無視します。

完成図

本サイトでは吹き出し(シェア数)を入れていません。
どうせ大半がゼロですし。
以下は、これを前提に話を進めます。

設置手順

スクロール固定シェアボタン用のファイルを作る

親テーマから「sns.php」ファイルを抜き出し、「snsside.php」とリネーム。

sns-bottomsでファイル内を検索すると二つ出てきますので、二番目の方のID名を変更します。

echo '<div id="sns-bottoms">', "\n";

echo '<div id="sns-sticky">', "\n";

終わったら、子テーマ直下にアップロードします。

single.phpを編集する

子テーマに親テーマのsingle.phpをコピペ、上の方にある次の箇所を編集します。

get_header();

?>
<article>

get_header();

?>
<?php if (!wp_is_mobile()) :?>
<?php get_template_part( 'snsside' ); ?>
<?php endif; ?>
<article>

テーマの設定を変更する

外観→カスタマイズ→SNS シェアボタン (1)を選びます。
画像の通り設定します。

「ホワイト」はカラータイプでも構いません。
ただホワイトの方がうるさくなくて、いいのではないかと思います。
(視線位置横にカラータイプを設置すると記事を読むのに集中できないので)

CSSを編集する

次のコードを貼り付けます。

#sns-sticky {
width:85px; /*ボックス全体の横幅*/
margin-left:-80px; /*横の位置調整*/
position:fixed;
bottom:205px; /*下の位置調整*/
}
#share2 ul li {
float: left;
width: 100%;
margin-bottom: 9%;
}
#share2 ul li > a {
overflow: hidden;
position: relative;
display: block;
width: 100%;
margin: 0 auto;
padding: 0.9em 0.5em; /*ボタンの余白で大きさを調整*/
font-size: 90%;
text-align: left;
}

このコードは「ままはっく」様の記事に載っていたものを元にしました。

……というか、LuxeritasのCSSと重複しそうな部分や必要なさそうな部分を削っただけです。

これで完成です。

まとめ

解答者の写真

かなり手抜きなカスタマイズだけど、ちゃんと動くわよ
あれこれカスタマイズしてるといつの間にかソースが膨れあがるから、テーマを変えないなら使い回せるものは使い回した方がいいと思う
テーマとデザインに統一性持たせることにもなるしね

よかったら試してみて