KUSANAGI MAGAZINEで「きもおたわーどぷれす。」が紹介されました! クリックで公式サイトが開きます。

Cocoonのサイドバースクロール追従エリアにSNSシェアボタンを設置する

この記事は約6分で読めます。
記事内に広告が含まれています。

本稿ではCocoonのサイトバースクロール追従エリアにSNSシェアボタンを設置するカスタマイズを紹介します。
PCからの訪問者はどんどん減っていますが、それでも拡散の仕掛けはきっちり用意しておきたいところです。
完全コピペでいけます。

なお、本稿の方法ですとCSSは必要ありません。
記事下部シェアボタンのCSSがそのまま適用されます。

スポンサーリンク

完成イメージ

こんな感じです。

 

CocoonSNSシェアサイドバー

スポンサーリンク

導入方法

PHPインクルードの準備をする

次のコードを子テーマのfunctions.phpに貼りつけて下さい。

function Include_my_php($params = array()) {
extract(shortcode_atts(array(
'file' => 'default'
), $params));
ob_start();
include(STYLESHEETPATH . "/myphpfiles/$file.php");
return ob_get_clean();
}
add_shortcode('myphp', 'Include_my_php');

詳しく知りたい方は、こちらをお読みください。

WordPressの記事やテキストウィジェットの中でPHPを使えるようにする
テキストウィジェットにPHPの実行コード書いても動かないよ~それWordPressの仕様だからだけどPHPファイルをテキストウィジェットにインクルードしちゃえば...

PHPファイルを作る

cocoon-master/libにある「sns-share.php」をローカルに移します。
「sns-side-share.php」にリネームします。
(名前はなんでもいいです)

中のファイルを見て、不要なSNSの箇所を削ります。
一般的なTwitter、Facebook、はてななら、この記述が残るでしょう。
削るのが面倒でしたら、一旦全部消して、このコードをまるっとコピペしてください。

<?php //シェアボタン
/**
* Cocoon WordPress Theme
* @author: yhira
* @link: https://wp-cocoon.com/
* @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
*/
if ( !defined( 'ABSPATH' ) ) exit; ?>
<?php if ( is_sns_share_buttons_visible($option) ):
//var_dump($option) ?>
<div class="sns-share<?php echo esc_attr(get_additional_sns_share_button_classes($option)); ?>">


<div class="sns-share-buttons sns-buttons">
<?php if ( is_twitter_share_button_visible($option) )://Twitterボタンを表示するか ?>
<a href="<?php echo esc_url(get_twitter_share_url()); ?>" class="share-button twitter-button twitter-share-button-sq" target="_blank" rel="nofollow"><span class="social-icon icon-twitter"></span><span class="button-caption"><?php _e( 'Twitter', THEME_NAME ) ?></span><span class="share-count twitter-share-count"><?php echo get_twitter_count(); ?></span></a>
<?php endif; ?>

<?php if ( is_facebook_share_button_visible($option) )://Facebookボタンを表示するか ?>
<a href="<?php echo esc_url(get_facebook_share_url()); ?>" class="share-button facebook-button facebook-share-button-sq" target="_blank" rel="nofollow"><span class="social-icon icon-facebook"></span><span class="button-caption"><?php _e( 'Facebook', THEME_NAME ) ?></span><span class="share-count facebook-share-count"><?php echo get_facebook_count(); ?></span></a>
<?php endif; ?>

<?php if ( is_hatebu_share_button_visible($option) )://はてなボタンを表示するか ?>
<a href="<?php echo esc_url(get_hatebu_share_url()); ?>" class="share-button hatebu-button hatena-bookmark-button hatebu-share-button-sq" data-hatena-bookmark-layout="simple" title="<?php echo esc_attr(get_the_title()); ?>" target="_blank" rel="nofollow"><span class="social-icon icon-hatena"></span><span class="button-caption"><?php _e( 'はてブ', THEME_NAME ) ?></span><span class="share-count hatebu-share-count"><?php echo get_hatebu_count(); ?></span></a>
<?php endif; ?>

</div><!-- /.sns-share-buttons -->

</div><!-- /.sns-share -->
<?php endif; ?>

終わったら、子テーマの「tmp」フォルダ内にPHPファイルをアップロードします。

【2024年9月18日追記】
Pocketが動かなかったので削除しました。
動作チェックしたつもりだったのですが申し訳ございません。

ウィジェットにショートコードを記入

サイドバーの設置したい場所にテキストウィジェットかカスタムHTMLウィジェットを入れます。
次の記述をします。

[myphp file='sns-side-share']

これで設置されているはずです。

スポンサーリンク

まとめ

当たり前だけどCocoonのコードを流用してるわけだからCocoonでしか動かないからね!

ただし、どのテーマでもアイデアそのものは活かせます
SNSシェアボタンのブロックを抜き出してウィジェット化すればいいだけ
もしCocoon以外のテーマも使っているようでしたらやってみてください

サイトを始めたい・引っ越したい方へ

おすすめレンタルサーバー「ConoHa WING」
Webサーバー処理速度 国内最速!
サイト管理・カスタマイズのタイパも抜群!
自動化AIのWEXALによって他社より負担を減らせます
各種キャンペーン施策によりコスパも抜群!
ConoHaに初めて入会かつ12か月以上のWINGパックなら
下のボタン経由で契約すると最大5000円の割引が受けられます

この記事を書いた人

素人の備忘録です。
素人がゆえにトラブルにぶつかりまくってきたので、同じように困った方の役に立てたらいいなと思ってます。
8年来のKUSANAGI推し。

元公安調査庁職員、発達障害(ADHD)

天満川 鈴をフォローする
Cocoon

This website stores cookies on your computer. These cookies are used to provide a more personalized experience and to track your whereabouts around our website in compliance with the European General Data Protection Regulation. If you decide to to opt-out of any future tracking, a cookie will be setup in your browser to remember this choice for one year.

Accept or Deny

タイトルとURLをコピーしました