saidober-sns-top1

コピペでOK!WordPress用サイドバー固定オリジナルソーシャルボタン

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

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


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

 
今回は、コピペでOK!WordPress用サイドバー固定オリジナルソーシャルボタン、ということで記事を書いていきたいと思います。

 
コピペでサイドバーにこんな感じのソーシャルボタンが固定できます。

こんな感じになります!

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

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

 

スポンサーリンク

コピペでOK!WordPress用サイドバー固定オリジナルソーシャルボタン

まずは、プラグインを有効化しましょう!

 

「SNS Count Cache」

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

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

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

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

sikousakugo1

 

「PHP Code Widget」

続いて、ウィジェット内でPHPコードを使用できるようになるプラグイン「PHP Code Widget」を有効化しましょう!

こちらのプラグインは特に設定の必要はありません。のちほど使い方を解説します。

 

「Standard Widget Extensions」

続いて、サイドバーを固定できるプラグイン「Standard Widget Extensions」を有効化しましょう!

設定方法等はコチラをご覧ください↓

スクロールとともにサイドバーがついてくる – Standard Widget Extensions 使い方
http://wordpresscollege.org/plug-in/standard-widget-extensions/

wordpress-college1

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

「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ソフトで復旧します。↑の記事に復旧方法を解説しています。)

 
では、内容の続きです。

ダッシュボードの外観⇒ウィジェットから、「メインサイドバー」に先ほどの「PHP Code Widget」を適用していきます。

※「メインサイドバー」とは、Twenty Fourteenの左側のサイドバーの事です。他のテーマの方などは、ソーシャルボタンを設置したい場所を選んで、そこへ適用して下さい。

↓のように画面左の利用できるウィジェットのリストの中に「PHP Code」という、ウィジェットがあると思いますので、それを「メインサイドバー」のところへドラッグ&ドロップします。

 
ドラッグ&ドロップして、コードをコピペする。

 
この「PHP Code」ウィジェット内では、HTMLコードだけでなくPHPコードも使用できるようになります。

そこに、下のコードをコピペして下さい。

 

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

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

27行目の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

 

まとめ

コピペでOK!WordPress用サイドバー固定オリジナルソーシャルボタン、ということで記事を書かせていただきましたが、いかがでしたでしょうか?

記事の横で固定できるので、記事を読んでもらっている間にいつでもシェアボタンを押してもらえる環境をつくることができます。

記事を読んでいる方がいつ「シェアしたい!」と思っても、これで大丈夫ですねっ!^^

 
ウィジェットにもPHPコードが使える「PHP Code Widget」は、ページ毎に振り分けて表示させる時にも使えるので導入して損はないと思います。(PHPでIF文を書けば、条件で出し分けできます^^)

コピペで即導入できるので、せひ使ってみてくださいね!

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

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

 

おすすめのオンラインスクール

 
『TECH ACADEMY オンラインブートキャンプ』

 
TECH ACADEMY オンラインブートキャンプとは、

Webアプリケーションスキル(Ruby on Rails)、PHP、WordPressなどのWeb開発周辺スキル習得のコースを中心に、iPhoneアプリ、Androidアプリ、Unityなどのオリジナルアプリ開発コースや、WebデザインやWebマネジメント、さらにはWindows Excelのスキルを習得できるコースもラインナップされている、プログラミングをこれから始めてみようと思っている方から、エンジニアを目指している方までの幅広い方々にとって非常に心強い『プログラミング系オンラインスクール』です。

 
WordPressを使って自分のオリジナルWebサイトを構築しようとする場合、何かしらのプログラミング言語の基礎が分かっていれば、インターネットで検索した情報をフルに活用すれば、独学でもサイトを構築することは可能だと思います。

自分もこのタイプで、独学でサイトのカスタマイズを行っているのですが、現在のサイトのカタチに持っていくまでに、非常に多くの時間が掛かってしまっています。

もっと早い段階で、この『TECH ACADEMY オンラインブートキャンプ』を知っていて、受講するだけの予算が確保できていたのなら、短時間でかなりレベルの高いのスキルを習得できていたのではないかと思います。

 

 
 
 
 
 

っと、ちょっと気になるなぁと思ったそこのあなた!!

もっと詳しく内容を知りたいと思ったら、、、

 
↑『TECH ACADEMY』公式サイト上部のメニューバーに表示されている、『無料説明会』から無料説明会動画を見ることが出来ますよぉ!^^

 
受講希望のコースを選択し、

メールアドレス(GmailでもOK!^^)かSNSアカウントを入力すると、希望コースの無料説明会動画を見ることができます。

 
受講申し込みを検討する際に気になる、「受講終了時点の成果目標」「習得できるスキル」「具体的な学習方法」などの解説と、短期間で高い学習目標に到達することが可能となる裏付けについて、丁寧に説明されています。

『無料説明会』のページには、カリキュラムの詳細も紹介されています。

その他『説明会動画特典』として、受講料が割引になる特典も準備されてるようですよ♪^^

 

 
 
 
 
 

気になるんだけど、少し試してみないと分からないよなぁ~なんて思ってるあなたには、、、

 
『一週間のブートキャンプ無料体験』もありますよっ♪

 

 
ぜひ体験してみて下さいね♪(*^▽^*)

 
 
 
 
 

 

オススメのレンタルサーバー

 
『XSERVER』

みなラボもこの『XSERVER』を使っています!^^
プランによっては最安月額900円(税別)で、200GBのサーバー容量を確保できます!

継続更新は、クレジット引き落としで自動更新出来て楽チン!

サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心!

サーバーをコントロールするの為のインタフェースとなる「サ-バーパネル」の操作性も抜群!

もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪



 

ランキング

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

にほんブログ村

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

人気ブログランキングへ
 

この記事を読んでいる人はこちらの記事も読んでいます。(※広告も含む。)

 

 

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

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

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

最新情報をお届けします

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

Feedly、RSS、Push7はこちら!!

follow us in feedly

コメントを残す

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