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

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

2017-03-12Luxeritas, WordPressカスタマイズ

本記事では、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本体と重複する箇所や必要ない箇所を削除しました。

テーマ本体のCSS設定を流用する分だけ軽量化が図れます。
これで完成です。

注意点

下部SNSの設定がそのまま反映されます。
横と下部で設定を変えたい場合はsnsside.phpを各自の用途に応じて編集してください。
(例えば横だけシェア数を消したければ、シェア数カウントのコードを削る)

まとめ

解答者の写真
かなり手抜きなカスタマイズだけど、ちゃんと動きます
あれこれカスタマイズしてるとサイズが膨れあがるから、テーマを変えないなら使い回せるものは使い回した方がいいです
テーマとデザインに統一性持たせることにもなるしね
 
※当サイトの会話アイコンはカスタムキャストで作成しています。©2018-2019 Custom Cast, Inc.
この記事を書いた人:天満川 鈴

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。

ADHD、精神障害者手帳3級所持。

慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。

「小説家になろう」の底辺作者。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。

Posted by 天満川 鈴