Web拍手はyaWeb拍手にしました

先日からweb拍手をどうするか悩んでいましたが、結局yaWeb拍手にしました。
最初の記事の繰り返しになりますけど

  • 外部サービスを使わない
  • 日本語環境に適したもの
  • 出来れば自前の拍手ボタンを使いたい

この条件を満たすのがyaWeb拍手ということになりました。
拍手の設置場所は記事内でもサイドバーでもよかったんですけど、記事内にSocial Bookmarking LightとRelated Postsを実装したら(個人的な感覚で)拍手の置場がなくなったので、サイドバーに置くことにしました。
yaWeb拍手はサイドバーウィジェットがデフォルトで付いてくるので、実装自体は簡単でした。
しかし拍手のほかにランキングやら何やら、とにかくクリックして外部へ行くリンクも一緒に置こうと思ったのが今回の課題となりました。これは私がBlogを作るたびに繰り返す作業になると思うので、備忘録代わり書いておきます。

プラグインのインストールはいつもどおりなので割愛します。ダッシュボードのプラグイン>新規追加からYet Another WebClap for WordPressで検索すれば出てきます。
拍手プラグインのほかに用意するものは以下の通り。
ウィジェットでPHPを記入するためのPHPプラグインを有効化しておく。
 ウィジェットだけならPHP Code Widget
 投稿記事でも使いたいならExec-PHP (二年以上更新がなくて不安なら上記で
拍手ボタン用画像をアップロードしておき、URLを控えておく。(画像を使わないならここは不要

お礼ページを作る

プラグインを有効化したら、固定ページを新規作成してお礼ページに設定します。
お礼ページに拍手用ショートコード[webclap]を記入。
このあと設定でお礼ページのスラッグが必要になるので、判りやすいようパーマリンクをwebclapに書き換えておきます。
拍手のコメント欄だけでは味気ないのでショートコードの下に画像を貼り付けましたが、好みで上にしたり文章にしたり、文章と画像の間にコメント欄を置いても楽しいと思います。
ここでは実験的に実装したので、お礼ページに使った固定ページそのもののコメント欄もありますが、不要な場合は閉じてください。

ショートコードで設置する

お礼ページを作ったら外観>ウィジェットでテキストウィジェットにショートコードを記入します。
拍手ボタンのショートコードは[webclap_button url=”お礼ページのスラッグ” image=”拍手ボタンの画像URL” text=”画像が表示されない(使わない)場合の文字”]([]は大文字にしてあります)
記事以外でショートコードを使う場合は‹?php echo( do_shortcode( ‘[ショートコード]’ ) ); ?›です。
上記を踏まえてテキストウィジェットに
‹?php echo( do_shortcode( ‘[webclap_button url=”webclap” image=”http://example.jp/wp-content/uploads/20XX/05/clap.jpg” text=”Clap!”]’ ) ); ?›
と記入すれば、Web拍手が実装できます。
ちなみにimageに画像IDを指定しても画像が表示されませんでした。
表示されない場合は、ウィジェットエリアでショートコードが使えるよう、functions.phpに
add_filter(‘widget_text’, ‘do_shortcode’);
と追記してください。

関数で設置する

作者サイトにはwebclap_button($url, $text, $image)で設置できるとあるので
‹?php webclap_button($url=”http://example.jp/webclap”, $text=”Clap!”, $image=”http://example/wp-content/uploads/20XX/05/clap.jpg”) ?›
と記入すれば設置できます。
関数が判ればコチラの方が楽だと思います。
web拍手ウィジェット

上記で設置した拍手ボタンの下に、ランキングバナーを貼り付けました。
最初は全体をdivで囲って改行せずにfloat:leftを指定したけど並ばず(今考えると当然
昔リストを横並びにしたときと同じ要領で‹p class=”wtrank”›‹/p›でバナータグを囲んで、テーマのstyle.cssに
wtrank{
display: block;
height: 33px;
float: left;

を指定して強制的に左詰めにしました。
ついでに右にmarginを10px指定して、バナーの間を空けました。
ウィジェットCSS
並んだのはいいけどウィジェットエリアからバナーがはみ出したので、全体をdiv class=”wt”で囲って下だけpaddingを指定して見た目を整えました。
優先しているほかの要素を弄ればどうにかなると思うんですけど、時間と気力と知識が足りませんでした。

ほかのサイトでお礼画像をランダムで表示させている方がいたんですが、使われているプラグインが古いので見送りました。
拍手お礼ページの画像がslimbox2でポップアップしない理由は、画像のリンクをなしにしているからです。
こんな面倒なことをしなくても、デフォルトのweb拍手ウィジェットをそのまま使えば簡単にweb拍手が実装できます。
それから、上記のコードは一部大文字ですのでそのままコピペしても使えません。申し訳ないです。

テキストウィジェットで実装するメリットは、ほかに何か付け足せることだと思います。今回は拍手ボタンの右に「お礼1種類」の文字と、ランキングバナーを貼り付けました。
ひとつのテキストウィジェット欄に複数のプラグインを表示させることも可能になるので、カスタマイズの幅が広がりますね。

スポンサードリンク
Pocket
LINEで送る

Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • スポンサードリンク