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

2021.05.112024.09.18

この記事は約6分で読めます。

記事内に広告が含まれています。

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

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

完成イメージ
導入方法
まとめ

完成イメージ

こんな感じです。

導入方法

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; ?>