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というのだけ存在していますのでそこに。

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