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

by
Cocoon
（更新: 2024年9月18日）

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

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

天満川鈴 WRITTEN BY 天満川鈴

完成イメージ

こんな感じです。

 

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を使えるようにする | きもおた・わーどぷれす。
http://kimoota.net

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 noopener noreferrer"><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 noopener noreferrer"><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 noopener noreferrer"><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以外のテーマも使っているようでしたらやってみてください

天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

X 🦋 CodePen Amazon
RECOMMENDED INFRASTRUCTURE
ConoHa WING 公式サイトへ

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。

私がConoHaを使い続ける、嘘偽りない理由です。

公式サイトで詳細を見る
× 閉じる