ソーシャルメディアからの集客を加速するでっかいソーシャルボタンの付け方
このページにも付いているソーシャルボタン。
これを付ける為のプラグインの作成を行います。
プラグイン作成の基礎知識はこのサイトの「自作プラグインのススメ WordPress をより深く、安全にカスタマイズする為に」を参考にして下さい。
javaScript の取得
jqueryのプラグイン jquery.socialbutton を使います。
jQuery本体は本家から、jquery.socialbuttonプラグインはこちらのこちらからダウンロードして利用下さい。
ダウンロードした js ファイルを「/wp-content/」の下に「js」フォルダを作成し、アップロードします。
プラグインへの記述
ワードプレスがロードされ、ヘッダー部分が呼ばれた時に上記でダウンロードした js ファイルも読み込まれるようにします。
ワードプレスの関数 add_action() を利用します。
add_action() は add_action(アクションする場所,動かす関数名) と記述します。
今回はヘッダが呼ばれた時に動かすので、wp_head で関数を動かす記述を「my-plug-in.php」に記述します。
function my_plug_in_read_js(){ echo "<script type='text/javascript' src='/wp-content/js/jquery-1.7.1.min.js'></script>"; echo "<script type='text/javascript' src='/wp-content/js/jquery.socialbutton-1.8.1.js'></script>"; } add_action('wp_head','my_plug_in_read_js');
※/wp-content/js/ は、ルートに WordPress をインストールしている場合、ディレクトリを切っている場合は、適宜書き換えをお願いします。
WordPress は、色々な人が独自に開発出来るようになっている為、同じ JavaScript を沢山読んでしまうケースがあります。それを避けるため、wp_enqueue_script() という関数が用意され、同じ JavaScript を呼ばないで済むようになっています。今回は説明を簡単にする為に wp_enqueue_script() は使っていません。
記述したら、ページを読み込みし直し、ソースを閲覧して「jquery.socialbutton」が読まれている事を確認します。
ボタンの選定
利用したいボタンの JavaScriptを記述します。
このサイトの場合、ツイート、Google+ 、FaceBook なので、「socialbutton.js」を作り、以下を記述し「/wp-content/js/」以下に配置します。
jQuery(function() { jQuery('#twitter').socialbutton('twitter', { button: 'vertical', }); jQuery('#google_plusone').socialbutton('google_plusone', { lang: 'ja', size: 'tall' }); jQuery('#facebook_like').socialbutton('facebook_like', { button: 'box_count' }); jQuery('#facebook_share').socialbutton('facebook_share', { button: 'box_count' }); });
配置が終りましたら、「my-plug-in.php」に一行追記します。
function my_plug_in_read_js(){ echo "<script type='text/javascript' src='/wp-content/js/jquery-1.7.1.min.js'></script>"; echo "<script type='text/javascript' src='/wp-content/js/jquery.socialbutton-1.8.1.js'></script>"; echo "<script type="text/javascript" src="/wp-content/js/socialbutton.js"></script>"; } add_action('wp_head','my_plug_in_read_js');
表示させる DIV の設置
投稿の上もしくは下にボタンを配置します。
配置が終りましたら、「my-plug-in.php」に以下を追記します。
function my_plug_in_view_socialbutton($content){ $css = "<style type='text/css'>\n <!-- \n .shareblock { \n margin:5px 0; \n } \n .shareblock div { \n float:left; \n margin-right:5px; \n } \n .clearfix:after { \n clear:both; \n content:"." \n display:block; \n height:0; \n visibility:hidden; \n } \n .clearfix { \n min-height:1px; \n } \n .clear { \n clear:both; \n } \n --> \n </style>\n\n"; $btnstr = "<div class='shareblock clearfix'>\n <div id='twitter'></div><!-- //ツィッター// -->\n <div id='google_plusone'></div><!-- //google+// -->\n <div id='facebook_like'></div><!-- //facebook like// -->\n <div id='facebook_share'></div><!-- //facebook share// -->\n </div>\n"; $rtn = $css.$btnstr.$content; return $rtn; } add_action('the_content','my_plug_in_view_socialbutton');
HTML 的にはあまり正しくないですが、CSS を直接記述してしまいます。
これにより投稿の上にソーシャルボタンのでかい奴が表示されます。
また、
<?php echo my_plug_in_view_socialbutton('')?> <div style="clear: both;"></div>
この記述をするとテーマ内で何時でも使えるので、好きな場所にソーシャルボタンの配置が可能となります。
最終的なプラグインファイルのソース
function my_plug_in_read_js(){ echo "<script type='text/javascript' src='/wp-content/js/jquery-1.7.1.min.js'></script>"; echo "<script type='text/javascript' src='/wp-content/js/jquery.socialbutton-1.8.1.js'></script>"; echo "<script type='text/javascript' src='/wp-content/js/socialbutton.js'></script>"; } add_action('wp_head','my_plug_in_read_js'); function my_plug_in_view_socialbutton($content){ $css = "<style type='text/css'>\n <!-- \n .shareblock { \n margin:5px 0; \n } \n .shareblock div { \n float:left; \n margin-right:5px; \n } \n .clearfix:after { \n clear:both; \n content:"." \n display:block; \n height:0; \n visibility:hidden; \n } \n .clearfix { \n min-height:1px; \n } \n .clear { \n clear:both; \n } \n --> \n </style>\n\n"; $btnstr = "<div class='shareblock clearfix'>\n <div id='twitter'></div><!-- //ツィッター// -->\n <div id='google_plusone'></div><!-- //google+// -->\n <div id='facebook_like'></div><!-- //facebook like// -->\n <div id='facebook_share'></div><!-- //facebook share// -->\n </div>\n"; $rtn = $css.$btnstr.$content; return $rtn; } add_action('the_content','my_plug_in_view_socialbutton');
※このサイトはこのページの方式では付けていません。
コメント