賢威8 でのシェアボタンはデフォルトで
Twitter, Facebook, はてなブックマーク の3つになっています。
？ Google+ もあるよ！？ っていう方、バージョンが古いので最新版にアップデートしましょう。
2020年3月くらいのアップデートによって速度も早くなっているのでメリットが大きいと思います。
Pocket, LINE, Pinterest を追加
このブログはすでにこのカスタマイズを行っています。
賢威8 では子テーマを作ってカスタマイズすることを推奨しています。
こちらを御覧ください。
まず、子テーマに js ディレクトリを作ります。
その中に「賢威8」本体の js ディレクトリから
utility.js をコピーして 入れます。
コードはこちら
どこをカスタマイズしたかわかるように本来のコードの上下に /** ここからカスタマイズ **/ と /** ここまでカスタマイズ **/ を入れています。
最新版になって utility.js に変更があった場合はこの部分をコピーして新しいものと切り替えてあらためて貼ってください。
このあたりもやりやすくしたいんですが、jsの中ってカスタマイズ前提で作ると余計なコードが多くなってしまうので悩ましいんですよね。
本題に戻って… こちらを utility.js の はてなブックマークのコードのあとに貼ります。
具体的にはこのあとです。
〜〜 前略
/* はてブ */
$('.sns-btn_hatena').each(function () {
var target_url = $(this).data('url') || pageurl,
target_title = $(this).data('title') || pagetitle;
$(this).append('<a target="_blank" href="http://b.hatena.ne.jp/add?mode=confirm&url=' + target_url + '&title=' + target_title + '"><i class="f-hatena" aria-hidden="true"></i></span></a>');
});
}
上の続きで下記を貼り付けます。
/** ここからカスタマイズ **/
/* Line */
$('.sns-btn_line').each(function () {
var $count_html,
target_url = $(this).data('url') || pageurl;
$(this).append('<a href="http://line.me/R/msg/text/?' + target_url + '"><i class="fab fa-line"></i><span>LINE</span></a>');
});
/* Pocket */
$('.sns-btn_pocket').each(function () {
var $count_html,
target_url = $(this).data('url') || pageurl,
target_title = $(this).data('title') || pagetitle;
$(this).append('<a href="http://getpocket.com/edit?url=' + target_url + '&title=' + target_title + '" onclick="window.open(this.href, \'PCwindow\', \'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes\'); return false;"><i class="fab fa-get-pocket" aria-hidden="true"></i><span>Pocket</span></a>');
});
/* Pinterest */
$('.sns-btn_pinterest').each(function () {
var $count_html,
target_url = $(this).data('url') || pageurl,
target_title = $(this).data('title') || pagetitle;
$(this).append('<a href="https://pinterest.com/pin/create/button/?url=' + target_url + '" onclick="window.open(this.href, \'PCwindow\', \'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes\'); return false;"><i class="fab fa-pinterest" aria-hidden="true"></i><span>Pinterest</span></a>');
});
/** ここまでカスタマイズ **/その後、子テーマの functions.php に下記を追記します。
add_filter( 'keni_get_sns_html', 'set_keni_get_sns_html', 10, 3 );
function set_keni_get_sns_html( $ret, $link_str, $title_str ) {
$ret .= <<<EOF
<div class="sns-btn_pocket" data-url="{$link_str}" data-title="{$title_str}"></div>
<div class="sns-btn_line" data-url="{$link_str}" data-title="{$title_str}"></div>
<div class="sns-btn_pinterest" data-url="{$link_str}" data-title="{$title_str}"></div>
EOF;
return $ret;
}こちらは入れ物を用意しているイメージです。
デフォルトでは3つのところにあと3つPocket,LINE,Pinterest の枠を作っている感じになります。
functions.php の方は デフォルトで入れていないんですが、入っていたとしても PHPの閉じタグ（ ?> ） より上に入れるようにしてください。
そんなもんねえよ！っていう場合はダイジョブっす。
うまくいくと…こうなります
トップページ
トップページの カードタイプ
記事での表示
お試しください！
おまけ … シェアカウントの表示について
現在 Twitter については カウントの表示が出来ませんが、Facebook、はてなブックマークについてはカウント表示ができます。
ただし！
表示すると、いちいちカウントを取得しに行くので表示がおそくなります。
表示しない場合と比べてみると結構違うので試してみてください。
カウント表示しても…恥ずかしいのでこのブログでは表示してません（笑）
