本記事では、WordPress無料人気テーマLuxeritasに、スクロールしても追尾してくる（スティッキー）タイプのSNS拡散ボタンを設置する方法を紹介します。
設置方法は極めて簡単、かつLuxeritasとデザインの統一性を持たせたものを設置できます。
スティッキータイプのSNSシェアボタンには最終的にサイトへの導線を太くする効果があります。
これはマスメディア各社の記事ページの多くが採用している通り。
なお、Luxeritasにはスクロール固定ウィジェットスペースもありますが、ここでは無視します。
【2020/02/11 v3.7用に修正しました】
完成図
設置手順
スクロール固定シェアボタン用のファイルを作る
親テーマから「sns.php」ファイルを抜き出し、「snsside.php」とリネーム。
次の箇所を修正します。
echo '<div id="sns-bottoms">', "\n";
↓
echo '<div id="share2">', "\n";
終わったら、子テーマ直下にアップロードします。
single.phpを編集する
子テーマに親テーマのsingle.phpをコピペ、上の方にある次の箇所を編集します。
global $luxe, $_is, $awesome;
get_header();
$fa_pencil = 'fa-pencil-alt';
$fa_file = 'fa-file-alt';
if( $awesome['ver'][0] === '4' ) {
$fa_pencil = 'fa-pencil';
$fa_file = 'fa-file-text';
}
?>
<article>
↓
global $luxe, $_is, $awesome;
get_header();
$fa_pencil = 'fa-pencil-alt';
$fa_file = 'fa-file-alt';
if( $awesome['ver'][0] === '4' ) {
$fa_pencil = 'fa-pencil';
$fa_file = 'fa-file-text';
}
?>
<?php if (!wp_is_mobile()) :?>
<?php get_template_part( 'snsside' ); ?>
<?php endif; ?>
<article>
テーマの設定を変更する
外観→カスタマイズ→SNS シェアボタン (1)を選びます。
画像の通り設定します。
「ホワイト」はカラータイプでも構いません。
ただホワイトの方がうるさくなくて、いいのではないかと思います。
（視線位置横にカラータイプを設置すると記事を読むのに集中できないので）
CSSを編集する
次のコードを貼り付けます。
#share2{
width:85px;margin-left:-5pc;position:fixed;bottom:130px
}
#share2 li{
float:left;width:100%;margin-bottom:5%
}
#share2 li>a{
position:relative;display:block;width:100%;margin:0 auto;padding:.9em .5em;font-size:90%;text-align:left
}
「ままはっく」様の記事に載っていたものを元にし、Luxeritas本体と重複する箇所や必要ない箇所を削除しました。
コピペでOK！スクロールしてもついてくるオリジナルソーシャルボタンをブログに設置する方法 | ままはっく
スクロールしてもついてくる追尾型のソーシャルボタンをオリジナルで作成して設置する方法を紹介。CSSでシェアしたくなるようなボタンを実装。WordPressカスタ...
mama-hack.com
テーマ本体のCSS設定を流用する分だけ軽量化が図れます。
これで完成です。
注意点
下部SNSの設定がそのまま反映されます。
横と下部で設定を変えたい場合はsnsside.phpを各自の用途に応じて編集してください。
（例えば横だけシェア数を消したければ、シェア数カウントのコードを削る）
まとめ
かなり手抜きなカスタマイズだけど、ちゃんと動きます
あれこれカスタマイズしてるとサイズが膨れあがるから、テーマを変えないなら使い回せるものは使い回した方がいいです
テーマとデザインに統一性持たせることにもなるしね
あれこれカスタマイズしてるとサイズが膨れあがるから、テーマを変えないなら使い回せるものは使い回した方がいいです
テーマとデザインに統一性持たせることにもなるしね
