2022.2.6 更新
本日はページをスクロール時にソーシャルボタンがそれに合わせてついて来てくれる、
share barというプラグインを装備してみます。
固定型と比べますと、ソーシャルメディアからのアクセス流入数が１０％改善されたという報告もあるそうですよ。
目次
- 1.Sharebarをインストールする
- 2.Sharebarに「はてなブックマーク」ボタンを追加する
- 3.Sharebarのカスタマイズ
- 4.Sharebarとワードプレス関数 get_excerpt の干渉？によるバグの消し方
1.Sharebarをインストールする
ダッシュボードからプラグイン＞新規追加で検索フォームにSharebarと入れて検索します。
最初の方に出てきますので、インストールし有効化します。
2.Sharebarに「はてなブックマーク」ボタンを追加する
はてなブックマーク等、リストに無いボタンを追加する方法をご説明します。
設定＞Sharebarへ行き、Available Buttonsから表示させたいボタンにチェックを入れればOKなのですが、ラインナップに無いけれども入れておきたいはてなブックマークを追加作成してみます。
別ウィンドウで、はてなブックマークのページを開きます。
画像1
1.の、ボタンを設置するページの情報を入力、のURLとタイトル欄は空白にしておきましょう。
ここを指定してしまうとユーザーが個別の記事をブックマーク出来なくなります。
2.のボタンのタイプを選択します。
3.に表示されたコードをコピーして、ワードプレスに戻ります。
Add New Buttonをクリックします。
画像2
Name:名前とPosition:表示位置を入力したら
Enabled?にチェックを入れます。
Big Button, Small Buttonそれぞれに先ほどコピーしたコードをペーストすればOKです。
画像3
一覧に戻るとちゃんとはてぶボタンが出来上がっています！
表示させたいボタンにチェックを入れたら、リストの下にあるUpdateボタンを押します。
画像4
はてぶのボタンが出来ました♪
もし、チェックを入れていないのに必要の無いボタンが表示されている様なら、
ボタンの一覧表に戻って、表示させたく無いボタンの右端のActionsからEditへ行き、
Enabled?のチェックを外せばOKです。
3.Sharebarのカスタマイズ
さて、デフォルトでは各種ボタンの大きさがまちまちなので、ずれていたり枠に収まりきれなかったりで
少々調整が必要です。
Sharebar設定画面の右上に表示されているSettingsから設定します。
widthを調整する
このサイトでは
Left Offset を 74 に変更
Sharebar Width を 100 に変更
settingで背景色やボーダー色を変えて付箋風にカスタマイズしてみました。
カラーピッカーが便利ですね！
画像5
これでもまだ、facebookの表示がずれているので、個別に調整します。
facebookボタンのEditから、それぞれのボタンのソースの中の
overflow:hidden;width:○○px;height:○○px;の数値を変えて微調整します。
画像6
4.Sharebarとワードプレス関数get_excerptの干渉？によるバグの消し方
ところで、Sharebarを有効化したことで、思わぬバグが出てしまいました。
サイトのトップページの「最新情報」のテキストの最初の部分に
TweetEmail TweetEmai…
なる文字列が何故か表示される様になってしまったのです。
どうやら最新情報欄に使っているワードプレスの関数、get_excerptと干渉している様なので、get_excerptをget_contentで代用して問題を回避したあと、さらに以下の様にcssを書き足しました。
（詳細はこちら→2013/4/26勉強会の議事録”Sharebarとget_excerptの干渉を回避する”）
#topBanner section a:after {
clear: both;
content: "";
display: block;
height: 0;
}a:afterは疑似要素です。
これに
content: “”; → タグが書かれていた場合は””(ブランク＝空白)
として、タグを表示させない様にしました。
応急処置ですがこれでバグは表示されなくなりました。
使用するプラグインが増えてくると、互いに干渉してバグが出ることがあるんですね。
調べるのは大変ですが、こういった場合の対処法を試行錯誤しながら解決することで勉強にもなります。
それではまた次回、お疲れさまでした。