小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

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

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

本記事では、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カスタ...

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

スポンサーリンク

注意点

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

スポンサーリンク

まとめ

解答者の写真
かなり手抜きなカスタマイズだけど、ちゃんと動きます
あれこれカスタマイズしてるとサイズが膨れあがるから、テーマを変えないなら使い回せるものは使い回した方がいいです
テーマとデザインに統一性持たせることにもなるしね
 
ブログやサイトを始めたい・引っ越したい方へ

レンタルサーバーWING。
KUSANAGI&WEXALが使えるVPS。
どちらでも高速でコスパに優れたConoHaで始めるのがおすすめです。
もっと知りたい方はボタンをクリックしてください。
(ボタン経由で入会した場合、1000円分のクーポンがもらえます)

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Luxeritas
スポンサーリンク

コメント

タイトルとURLをコピーしました