2019年版【賢威8】SNSボタンのカスタマイズ

プラグインを使わないでソーシャルボタンを表示する。

賢威8になってから、SNSボタンの表示が簡単になりました。

それでも、デフォルトの状態だと、表示されないSNSがあったり、見栄えが良くなかったりします。

プラグインを使用せずに、SNSボタンの見栄えをよくするためのカスタマイズ方法です。

SNSボタンの文字色、背景色を変更する

デフォルトでは目立たなかった賢威のソーシャルボタンに色を付けます。

これが、

こんな感じに。

(子テーマ)base.cssに以下のコードを追加する。

/* SNSボタン */
/* twitter */
.sns-btn_wrap > .sns-btn_tw a{
background-color: #55acee;
color: #fff;
}
/* facebook */
.sns-btn_wrap > .sns-btn_fb a{
background-color: #315096;
color: #fff;
}
/* はてな */
.sns-btn_wrap > .sns-btn_hatena a{
background-color: #008fde;
color: #fff;
}

プラグイン不要。これならママもOKさ。

スポンサーリンク

POCKET、LINEのSNSボタンも追加するには

上に続き、POCKETやLINEのソーシャルボタンを追加して、画面を華やかにします(違う)

(子テーマ)base.cssに以下のコードを追加する。
(以下、行中に全角の「<」や「>」が含まれます)

/* Pocket */
.sns-btn_wrap > .sns-btn_pocket a{
background-color: #EE4256;
color: #fff;
}
/* LINE */
.sns-btn_wrap > .sns-btn_line a{
background-color: #00c300;
color: #fff;
}

(親テーマ)archive.phpに以下のコードを追加する。
(35行目あたり)

<div class=”sns-btn_pocket” data-url=”<?php echo esc_attr( get_term_link( $term_id ) ); ?>” data-title=”<?php the_archive_title(); ?>”>
<div class=”sns-btn_line” data-url=”<?php echo esc_attr( get_term_link( $term_id ) ); ?>” data-title=”<?php the_archive_title(); ?>”>

(親テーマ)index.phpに以下のコードを追加する。
(36行目あたり)

<div class=”sns-btn_pocket” data-url=”<?php get_page_link(get_the_ID()); ?>” data-title=”<?php single_post_title(); ?>”></div>
<div class=”sns-btn_line” data-url=”<?php get_page_link(get_the_ID()); ?>” data-title=”<?php single_post_title(); ?>”></div>

(親テーマ)\keni\module\keni-setting\keni-setting.phpに以下のコードを追加する。
(487行目あたり)

<div class=”sns-btn_pocket”</div>
<div class=”sns-btn_line”></div>

(親テーマ)template-parts\part-sns.phpに以下のコードを追加する。
(5行目あたり)

<div class=”sns-btn_pocket” data-url=”<?php the_permalink(); ?>” data-title=”<?php the_title(); ?>”></div>
<div class=”sns-btn_line” data-url=”<?php the_permalink(); ?>” data-title=”<?php the_title(); ?>”></div>

ほら、賑やかになった。(違うって)

LINEで送るを直す

スマホで見ると「LINEで送る」の文字列が長すぎて、段々に表示されてしまいますのでこれを直します。

(親テーマ)js\utility.jsの以下のコードを修正する。
(590行目あたり)

/* $(this).append(‘LINEで送る‘); */
$(this).append(‘LINE‘);

直りました。

スポンサーリンク

FeedlyのSNSボタンを表示する。

最近注目している、Feedlyのソーシャルボタンを表示します。

(親テーマ)archibe.phpに次の行を追加
31行目あたり

<div class=”sns-btn_feedly” data-url=”” data-title=”</div>;

(親テーマ)base.cssに次の行を追加

4228行目あたり

.sns-btn_wrap > .sns-btn_feedly a{
color: #87c040;
}
.sns-btn_wrap > div .icon_feedly{ margin-right: 5px;}
.icon_feedly::before{ display: inline-block; width: 20px; height: 20px; background: url(./images/icon/icon_feedly.png); background-size: cover; vertical-align: bottom; content: “”;}

5842行目あたり

.entry-list_style02 .sns-btn_feedly

5860行あたり

.entry-list_style02 .sns-btn_feedly i{
color: #87c040;
}

(親テーマ)index.phpに次の行を追加

39行目あたり

<div class=”sns-btn_feedly” data-url=”” data-title=”<?php single_post_title(); ?>”>

(親テーマ)js/utility.jsに次の行を追加

593行目あたり

/* feedly */
$(‘.sns-btn_feedly’).each(function () {
var $count_html,
target_url = $(this).data(‘url’) || pageurl;
$(this).append(‘feedly‘);
});

アイコンは自前で作成してください。
公式HPの画像から適当な大きさのICONファイルを作ります。

または私が作ったものがこれですので、よろしければダウンロードを。



それを賢威親テーマの/images/iconフォルダに。

icon_line.pnpというのだけ存在していますのでそこに。

これで完成かな。おつかれさまでした。