
プラグインを使わないでソーシャルボタンを表示する。
賢威8になってから、SNSボタンの表示が簡単になりました。
それでも、デフォルトの状態だと、表示されないSNSがあったり、見栄えが良くなかったりします。
プラグインを使用せずに、SNSボタンの見栄えをよくするためのカスタマイズ方法です。
SNSボタンの文字色、背景色を変更する
デフォルトでは目立たなかった賢威のソーシャルボタンに色を付けます。
これが、
こんな感じに。
(子テーマ)base.cssに以下のコードを追加する。
/* 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に以下のコードを追加する。
(以下、行中に全角の「<」や「>」が含まれます)
.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_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_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_line”></div>
(親テーマ)template-parts\part-sns.phpに以下のコードを追加する。
(5行目あたり)
<div class=”sns-btn_line” data-url=”<?php the_permalink(); ?>” data-title=”<?php the_title(); ?>”></div>
ほら、賑やかになった。(違うって)
LINEで送るを直す
スマホで見ると「LINEで送る」の文字列が長すぎて、段々に表示されてしまいますのでこれを直します。
(親テーマ)js\utility.jsの以下のコードを修正する。
(590行目あたり)
直りました。
FeedlyのSNSボタンを表示する。
最近注目している、Feedlyのソーシャルボタンを表示します。
(親テーマ)archibe.phpに次の行を追加
31行目あたり
(親テーマ)base.cssに次の行を追加
4228行目あたり
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行目あたり
5860行あたり
color: #87c040;
}
(親テーマ)index.phpに次の行を追加
39行目あたり
(親テーマ)js/utility.jsに次の行を追加
593行目あたり
$(‘.sns-btn_feedly’).each(function () {
var $count_html,
target_url = $(this).data(‘url’) || pageurl;
$(this).append(‘feedly‘);
});
アイコンは自前で作成してください。
公式HPの画像から適当な大きさのICONファイルを作ります。
または私が作ったものがこれですので、よろしければダウンロードを。
それを賢威親テーマの/images/iconフォルダに。
icon_line.pnpというのだけ存在していますのでそこに。
これで完成かな。おつかれさまでした。
こんにちは。
(親テーマ)\keni\module\keni-setting\keni-setting.phpに以下のコードを追加する。
(487行目あたり)
ここがどこに入れればいいか分からないのですが、目印を教えてくださいませんでしょう。
通りすがりさん、こんばんは。
すみません。コメントを頂いたのに全く気付いておりませんでした。
賢威8がβ版から正式版にバージョンアップされて、当記事の情報も古くなってしまったようです。
できるだけ早く修正入れるようにいたしますので、しばらくお待ちください。
(それとももう既に解決されたでしょうか…)
当HPへのご訪問とコメント、ありがとうございました。