Webシステム開発 雑記帳 /

これは便利!SNSボタンを好きな場所に入れる方法 [WordPress小ネタ]

WP Social Bookmarking Light プラグインを使って、SNSボタンを設置しているブログをよく見かけます。
多くのワードプレスユーザーに支持されているだけあって、とっても使いやすい高性能なプラグインです。

FaceBook、Twitter、LINE、など、多くのシェアボタンをサポートしていますし、
設置に必要なタグも自動でHTMLに出力してくれるので、楽してSNSボタンの設置ができます。
私も、ワードプレスでブログを作る場合には、迷わずこのプラグインを使います。

多くの現場でお世話になっているWP Social Bookmarking Lightですが、
デザインによっては、SNSボタンを自分の好きな場所に入れたいときがあります。

例えば WP Social Bookmarking Light プラグインを使って、以下のような場所にSNSボタンをおきたい場合です。

dummy05  

このプラグインは、SNSボタンの表示位置も、設定画面から記事本文の上下を指定できたり、
CSSで本文との間隔(margin)を調整できたりするので、デザインに合わせて表示位置の調整が可能です。

通常ですと、記事本文を中心とした上下(設定画面で選択)のいずれかに、SNSボタンが表示されることになります。

dummy06

SNSボタンを設置してみて、うまくデザインに馴染むといいのですが、
SNSボタンを、下のような投稿日エリアなどの空いたスペースに設置したい時などは少し工夫が必要です。

dummy07  

その場合、テーマファイルのシェアボタンを設置したい箇所へ以下のコードを書き込むことで、
本文エリア以外の任意の場所へ、SNSボタンを表示されることが可能になります。

 

下の例は、個別記事(single.php)の一部に、上記コードを埋め込んだ例です。

SNSボタンもデザインの一部とお考えのデザイナーさんに、是非使ってもらいたいWPの小ネタでした!

 

この記事を書いた人

堀孝文

PAGE TOP