SWELL カスタマイズ｜SNSシェアボタンをクリックした時のウィンドウサイズを最大にする
SWELLのSNSシェアボタンの挙動がとても使いにくい。
なぜそう感じるかというとSNSシェアボタンをクリックした時に開くウィンドウサイズが小さく必要なボタンが見えないからです。
はてなブックマークは『ブックマークする』ボタンを2回クリックしないとブックマークされないがSWELLのウィンドウサイズだと2回目が見えない。
SWELLのソースコードを確認したところ、javascriptでウィンドウサイズを指定している記述がありました。
この記事では、SWELLのSNSシェアボタンをクリックした時に開くウィンドウサイズの指定を削除するカスタマイズをご紹介します。
SNSシェアボタンのクリックでなぜ小さいウィンドウが開くのか？
SWELLのSNSシェアボタンのHTMLは、parts\single\share_btns.phpで生成されます。
そのコードの中で以下のような記述があり、windowサイズを指定するonclick属性が追加されています。
// --- 省略
$share_btns = [
'facebook' => [
'check_key' => 'show_share_btn_fb',
'title' => __( 'Facebookでシェア', 'swell' ),
'href' => 'https://www.facebook.com/sharer/sharer.php?u=' . urlencode( $share_url ),
'window_size' => 'height=800,width=600',
],
'twitter' => [
'check_key' => 'show_share_btn_tw',
'title' => __( 'Twitterでシェア', 'swell' ),
'href' => 'https://twitter.com/share?',
'window_size' => 'height=400,width=600',
'querys' => [
'url' => $share_url,
'text' => $share_title,
],
],
'hatebu' => [
'check_key' => 'show_share_btn_hatebu',
'title' => __( 'はてなブックマークに登録', 'swell' ),
'href' => '//b.hatena.ne.jp/add?mode=confirm&url=' . urlencode( $share_url ),
'window_size' => 'height=600,width=1000',
],
// --- 省略
// onclick
if ( isset( $data['window_size'] ) ) :
$window_size = $data['window_size'];
$onclick = "javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,${window_size}');return false;";
$btn_attrs .= ' onclick="' . $onclick . '"';
endif;
// --- 省略
このonclick属性を追加しなければ、別ウィンドウがブラウザサイズと同じで開くはずです。
SNSシェアボタンからonclick属性を削除するカスタマイズ
子テーマを作って、テンプレートパーツをコピーして修正すればいいのですが、SNSシェアボタン周りは結構変更が入りますから、いじりたくありません。
そこで、onclick属性をjavascriptで削除することにします。
このコードは全てのSNSシェアボタンからonclick属性を削除します。
add_action('wp_footer',function(){
?>
<script>
var sns_elements = document.querySelectorAll('.c-shareBtns__btn');
for (var i = 0; i < sns_elements.length; i++) {
sns_elements[i].removeAttribute('onclick');
}
</script>
<?php
});特定のボタンだけonclick属性を削除したい場合は、セレクタ部分を修正します。
add_action('wp_footer',function(){
?>
<script>
var sns_elements = document.querySelectorAll('.-hatebu .c-shareBtns__btn');
for (var i = 0; i < sns_elements.length; i++) {
sns_elements[i].removeAttribute('onclick');
}
</script>
<?php
});まとめ
SWELLはユーザーの嗜好で変わりそうな部分も思いっきりハードコーディングされていることが多いです。
本来ならテーマ側でウィンドウサイズを調整できるオプションを用意するか、ウィンドウサイズを調整しないモードを用意してくれればいいのですが、期待も出来ませんからjavascriptでカスタマイズ出来る時はユーザーが対応するしかなさそうです。
コメント