小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

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

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

本稿では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、はてな、Pocketなら、この記述が残るでしょう。
削るのが面倒でしたら、一旦全部消して、このコードをまるっとコピペしてください。

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

<?php if ( false && is_google_plus_share_button_visible($option) )://Google+ボタンを表示するか ?>
<a href="<?php echo esc_url(get_google_plus_share_url()); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="share-button google-plus-button google-plus-share-button-sq" target="_blank" rel="nofollow"><span class="social-icon icon-googleplus"></span><span class="button-caption"><?php _e( 'Google+', THEME_NAME ) ?></span><span class="share-count googleplus-share-count"><?php echo get_google_plus_count(); ?></span></a>
<?php endif; ?>

<?php if ( is_pocket_share_button_visible($option) )://pocketボタンを表示するか ?>
<a href="https://getpocket.com/edit?url=<?php echo get_permalink(); ?>" class="share-button pocket-button pocket-share-button-sq" target="_blank" rel="nofollow"><span class="social-icon icon-pocket"></span><span class="button-caption"><?php _e( 'Pocket', THEME_NAME ) ?></span><span class="share-count pocket-share-count"><?php echo get_pocket_count(); ?></span></a>
<?php endif; ?>




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

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

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

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

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

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

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

スポンサーリンク

まとめ

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

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

アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Cocoon
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました