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

by
Luxeritas
（更新: 2024年10月7日）

本記事では、WordPress無料人気テーマLuxeritasに、スクロールしても追尾してくる（スティッキー）タイプのSNS拡散ボタンを設置する方法を紹介します。
設置方法は極めて簡単、かつLuxeritasとデザインの統一性を持たせたものを設置できます。

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

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

【2020/02/11　v3.7用に修正しました】

天満川鈴 WRITTEN BY 天満川鈴

完成図

設置手順

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

親テーマから「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カスタマイズ初心者もコピペでOKです。STINGER5対応
http://mama-hack.com

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

注意点

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

まとめ

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

天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

X 🦋 CodePen Amazon
RECOMMENDED INFRASTRUCTURE
ConoHa WING 公式サイトへ

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。

私がConoHaを使い続ける、嘘偽りない理由です。

公式サイトで詳細を見る
× 閉じる