snsuesita1-top

コピペでOK!ついつい押したくなるWordPress用オリジナルソーシャルボタン

いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ

↑みなラボのページに「いいね!」はコチラから↑(>∀<)ノ☆ 


こんにちは!や~べ~です。

まだまだ暑い日が続きますね~^^

今年は、台風の進路も変わっていて、色んな場所で雨を降らせたりしているので、用心が必要ですねっ!

 
さて今回は、コピペでOK!ついつい押したくなるWordPress用オリジナルソーシャルボタン、ということで記事を書いていきたいと思います。

 
コピペでこんな感じ↓のソーシャルボタンが設置できます。

ソーシャルボタン設置の様子

 
コードはほとんど「ままはっく」のまなしばさんのものを使っていますが、横並びに変更したり、少し手を加えています。

 
それでは、内容に入っていきます。

※Twenty Fourteenテーマでの実施内容になります。

 

スポンサーリンク

コピペでOK!ついつい押したくなるWordPress用オリジナルソーシャルボタン

まずは、SNSのシェアカウントを取得する「SNS Count Cache」というプラグインを有効化しましょう!

シェア数のカウントにキャッシュを利用できるため、結果的にサイトの表示速度が速くなると言われています。

 
「SNS Count Cache」の詳細はコチラ↓の製作者まるぼんさんの記事をご覧ください。

[試] 表示速度改善のその先へ!進化するWordPressプラグイン SNS Count Cache
https://marubon.info/intro-update-wordpress-plugin-sns-count-cache-3-5403/

sikousakugo1

 
プラグインの追加方法が分からない場合はコチラを参考にして下さい。

「WordPressプラグインのインストール方法」をあえてまとめる
http://share-lab.net/wp-plugin-install1

 

スポンサーリンク

HTMLコード

プラグインを有効化したら、コードを書いていきましょう!

っとその前に、

 

編集の前に!

テーマの編集をする前には、必ずバックアップをとっておきましょう!

簡単なバックアップの取り方は↓の記事を参考にして下さい。

簡単!BackWPupでWordPressをバックアップする方法
http://share-lab.net/backwpup1

 
併せて、簡易的なサイトの復旧方法↓も参考にしてみて下さい。

WordPressバックアップを使ってサイトを復旧する方法
http://share-lab.net/wp-restoration1

(特に、function.phpを編集する時は注意して下さい。編集を失敗すると、画面が真っ白になってブラウザからアクセス出来なくなります。その時は、FTPソフトで復旧します。↑の記事に復旧方法を解説しています。)

 
では、内容の続きです。

content.phpに下のコードをコピペしてください。(Twenty Fourteenの場合)

※他のテーマでは、single.phpなどの記事を出力するPHPファイルにコピペして下さい。

 
みなラボの場合は、<div class=”entry-content”>のすぐ下あたりと、</div><!– .entry-content –>のすぐ上あたりの2か所にコピペしています。

これで記事の上下にオリジナルソーシャルボタンが表示されます。

コード↓
 

 
トップページ等に表示される不具合があったので、IF文を追加して、記事ページの時だけ表示させるように修正しています。

 
15行目の「自分のツイッター@アカウント」というところは、自分のTwitterアカウントを入れてください。(@を含まないように入れる)

ツイート内容に含みます。いらない場合は消してください。

31行目のFeedlyの部分にも「自分のサイト」のURLを入れてください。%2までの部分です。

例:みなラボの場合は、コード内の「自分のサイト」の部分を削除して、share-lab.netを入れる。

スポンサーリンク

CSSコード

続いて、CSSの編集です。

style.cssに下のコードをコピペして下さい。

style.cssの下の方に、「Media Queries」とありますので、その直前あたりに記入して下さい。

Media Queriesの設定の無いテーマの場合は、文末で問題ないです。

 

 
横幅など適宜調整して使って下さい!

 
参考にさせていただいたサイト

 
コピペでOK!スクロールしてもついてくるオリジナルソーシャルボタンをブログに設置する方法
http://mama-hack.com/scroll-snsbox

mamahac-sns1

 
【CSS】display:inline-block;で要素を横並びにする方法(前半はHTML5におけるボックスの話)
http://scene-live.com/page.php?page=54

sannk-scene1

 
【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法
http://delaymania.com/201404/web/list-inline-block/

sannk-delay1

 

まとめ

コピペでOK!ついつい押したくなるWordPress用オリジナルソーシャルボタン、ということで記事を書かせていただきましたが、いかがでしたでしょうか?

HTMLやCSSが分からなくても、コピペならばやれると思います。

コピペをベースに自分好みにアレンジしてくことが、WordPressやHTML、CSSを理解することに繋がると思います。

簡単にオリジナルのソーシャルボタンを追加できると思いますので、せひ試してみてみくださいねっ!

 
じゃあ、今回はここまでっ!!

ではではっ!(´∀`*)ノシ

 

ランキング

 
↓ランキング参加してます!よろしければ、クリックで応援して下さいっ!

にほんブログ村

 
↓こちらもお願いしますっ!

人気ブログランキングへ
 

 

最後までお読みいただいて、ありがとうございます。

もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです!どうぞ、よろしくお願いいたします!m(_ _)m

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで『みなラボ』をフォローしよう!

Feedly、RSSはこちら!!

follow us in feedly

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です