スポンサーリンク

WordPressプラグイン「まろやかWEB拍手」をサイドバーウィジェットに設置する方法。

ブログ

こんにちは。

最近、サイドバーに「今日の一言」というコーナーを作りました。
これはタイトルそのままで、その日思ったことを一言で書いているコーナーなのですが、ブログ記事と異なり、読んでくださった方の人数などは分かりません。
でも、「今日の一言」コーナーを読んでくださって、「これはいいな」と思ってくださった方がいらしたときに、WEB拍手を押していただけたらうれしいなと思いまして。

そこでサイドバーのウィジェットにWEB拍手を設置しようと調べたのですが、実はまとまった情報がほとんどなくて。
設置して実際に動作させるまでちょっと苦労したので、どなたかの参考になればいいなと思い、設置までの方法をブログ記事に残すことにしました。

スポンサーリンク

そもそも、「WEB拍手」とは?

そもそもの「WEB拍手」とは、FacebookやTwitterでの「いいね!」のようなものだと思っていただければ良いかと思います。
「この記事はいいな」と感じていただけたときに、ポチッと押していただくボタンです。

WEB拍手は応援の印のようなもので、ブログを書いているわたくし・ちゃにとってとてもうれしいものなのです(´ω`*)

WEB拍手はもともと、ブログのみならずWebサイト全般で利用されていました。
そのためいろいろな形で配布されているのですが、現在も安心して利用できるものが案外少なくて。

WordPressプラグイン、「まろやかWEB拍手」。

そんな中、私が利用させていただいているのは、「まろやかWEB拍手」というWordPressプラグインです。

公式サイトはこちら↓。

まろやかWEB拍手 for WordPress | まろやかPHP
PHP中心のスクリプトやWordPressプラグインを配布しています。

上記の公式サイトからプラグインのZIPファイルをダウンロードした後、WordPressにインストールして使います。

ダウンロードならびにインストール方法はここでは割愛します。

この「まろやかWEB拍手」プラグインの特徴として、「ショートコードを書けば設置できる」という点があり、どこにでも設置しやすい。

ショートコードとは以下のようなものです。

ショートコードは、function.phpに書いたプログラム(関数)をブラケット([ ])で囲った短いコードで呼び出せる機能です。投稿画面とテンプレート両方で呼び出すことができます。

(『[WordPress]便利なショートコードの基本的な書き方と使い方』より)

ただし、サイドバーのウィジェットではショートコードが利用できないようで……

サイドバーのウィジェットでショートコードを利用できるようになりましたので、追記します。

2019年5月18日追記。

サイドバーのウィジェットでショートコードを利用するためには、WordPressのテーマファイル内の「function.php」に以下のコードを追記します。

//ウィジェットでショートコードを使えるようにする
add_filter('widget_text', 'do_shortcode');

「function.php」は、WordPressのダッシュボード(『外観』→『テーマエディター』)からも書き換えできますが、より安全を期する場合はFTPソフトでテーマファイルをダウンロードして、パソコン上で追記することをおすすめします。

PHPコードを書いて「まろやかWEB拍手」を表示させる実験。

公式サイトに、「まろやかWEB拍手をサイドバーで使っている」という方のコメントが残っていました。
以下、一部を引用させていただきます。

現在、記事ごとのフッター/及びサイドバーの2カ所でまろやかWEB拍手を利用しております。
(中略)ショートコードのid欄を空欄にすると、各ページ最後の記事idが取得されているようです。

http://maroyaka.xyz/wp_mwc/comment-page-2/より、中略は当ブログ筆者による)

どうやら、サイドバーで「まろやかWEB拍手」を利用することは可能なようです。
この方はショートコードで「まろやかWEB拍手」を利用されているようですが、私にはなぜかできない(原因不明)。
2019年5月現在、当ブログでも利用できています。

公式サイトをさらに注意深く読むと、こんな記述がありました。

もしくは下記のように直接テーマテンプレートに記述して表示させることも可能です。

<?php MWC()->clap_button(); ?>

<?php MWC()->clap_button(true, ★, ☆, ◆); // オプション有りの場合 ?>

ここで試したのが、WordPressテーマの「sidebar.php」ファイルに「まろやかWEB拍手」のPHPコードを書き込むこと。

書き込んでみたところ表示はされたのですが、サイドバーの一番下に表示され、ウィジェットごとには表示されません。
私がしたいのは、「今日の一言」ウィジェットのみにWEB拍手を表示させることなので、この案は却下しました。

しかし、PHPコードを書き込むことでもWEB拍手は動作させられることを確認。
この実験(?)から、「まろやかWEB拍手」のPHPコードをサイドバーウィジェットに書き込んで利用すれば良いのでは?と思いつきました。

ただ、この方法でも良いのですが、できれば余分なプラグインは追加したくない。
そのため、プラグインを追加することなくショートコードを利用して、「まろやかWEB拍手」をサイドバーに設置する方法を書きますね。

スポンサーリンク

「まろやかWEB拍手」をサイドバーに設置、動作させる手順。

では、実際に「まろやかWEB拍手」をサイドバーのウィジェットに設置、動作させる手順を書いていきます。

サイドバーのウィジェットでショートコードを利用するために「function.php」に追記。

先ほど追記で書いたように、サイドバーのウィジェットでショートコードを利用するためには、WordPressのテーマファイル内の「function.php」に以下のコードを追記します。

//ウィジェットでショートコードを使えるようにする
add_filter('widget_text', 'do_shortcode');

「function.php」は、WordPressのダッシュボード(『外観』→『テーマエディター』)からも書き換えできますが、より安全を期する場合はFTPソフトでテーマファイルをダウンロードして、パソコン上で追記することをおすすめします。

WEB拍手の記事IDを取得するため、非公開の固定ページを作成。

次に、非公開の固定ページを作成します。

なぜこの手順を行うかというと、「まろやかWEB拍手」のショートコードを「今日の一言」ウィジェットに書き込むと、ブログ記事内のWEB拍手がカウントされてしまうため。
WEB拍手は動作するのですが、「ウィジェットを読んでWEB拍手を押してくださったのかどうか分からない」という事態になってしまうのです。

私は、「今日の一言」を読んでくださった方からのWEB拍手は単独でカウントしたい。
そのため、ウィジェットに設置するWEB拍手専用の記事IDを取得する必要があります。

ただ、作成したページを公開すると、そのページでWEB拍手を押される方がいらっしゃるかもしれない。
それだと、ウィジェットのみでのカウントではなくなってしまいます。
そこで、非公開のページを作成したい。

「まろやかWEB拍手」は固定ページに設置することも可能で、固定ページでも投稿ページと同様に記事IDは作成されます。
また、固定ページは投稿ページと異なり、非公開にしたときに目立ちにくい。
(投稿ページの場合、非公開の状態でも管理者から見たトップページに表示されてしまうため、少々邪魔なのです……)

長くなりましたが、上記の理由で、非公開の固定ページを作成します。

作成自体はいたって簡単で、お好きなタイトルで固定ページを新規作成するのみ。
本文は書かなくても大丈夫です。

固定ページの新規作成時に記事IDを確認します。

記事IDはここで確認できます。

タイトル下、「post-●●」の数字部分が記事IDです

タイトル直下の「post-●●」のうち、数字の部分が記事IDです。
この数字を覚えておくか、メモしておきましょう。

記事IDを確認した後、固定ページを非公開にして保存します。

「公開」ボックスの「公開状態」右横の「編集」をクリックし、「非公開」を選択後、更新ボタンをクリックすることで非公開での保存となります。

「まろやかWEB拍手」のショートコードを「今日の一言」ウィジェットに書き込む。

「今日の一言」はテキストウィジェットで作成しています。
ここに、「まろやかWEB拍手」のショートコードを以下のように追記します。

[maroyaka_webclap id=●● text=読んだよ! btn_color=default]

このショートコードについて少し説明しますと。

「id=●●」の「●●」には、先ほど確認した記事IDの数字を書き込みます。
「text=」以降には、「まろやかWEB拍手」に表示させたい文字列を記入します。
「btn_color=」以降には、拍手ボタンの色を記入します。

拍手ボタンの色については、公式サイトで以下のように説明されています。

デフォルトはdefaultで、対応カラーは下記の通りです。

default=白
primary=青
success=緑
info=水色
warning=オレンジ
danger=赤

上記から色を選び、英語でショートコードに記入しましょう。

お疲れ様でした、これでWEB拍手の設置が完了しました!

番外編。PHPコードをサイドバーウィジェットで利用できるようにする手順。

備忘録的に、サイドバーのウィジェットでPHPコードを利用するための手順も以下に書き残しておきますね。

「PHP Code Widget」をインストール、有効化する。

まず、PHPコードをサイドバーウィジェットに書いて動作させるためのプラグイン「PHP Code Widget」をインストール、有効化します。

公式サイトはこちら↓。

PHP Code Widget
テキストウィジェットのように、PHP コードも挿入することができます。

「PHP Code Widget」を有効化すると「PHPコード」というウィジェットが追加されているので、このウィジェットを利用して「今日の一言」コーナーを作り直します。

「PHPウィジェット」をサイドバーに追加し、もともと使っていた「テキスト」ウィジェットから「今日の一言」の文章をコピー&ペーストします。
このとき、「段落を自動的に追加します。」のボックスにチェックを入れておきます。

この段階ではまだWEB拍手は設置しません。

「まろやかWEB拍手」のPHPコードをサイドバーウィジェットに書き込む。

ここで、先ほど作り直した「今日の一言」ウィジェットの編集画面に戻り、文章の後に以下のPHPコードを書き込みます。
●●の部分には、先ほど新規作成した固定ページの記事IDを記入してください。

<?php MWC()->clap_button(true, ●●); // オプション有りの場合 ?>

お疲れ様でした!

まとめ。サイドバーのウィジェットにWEB拍手を設置する手順。

まとめると、

  1. サイドバーのウィジェットでショートコードを利用するために「function.php」に追記。
  2. WEB拍手の記事IDを取得するため、非公開の固定ページを作成。
  3. 「まろやかWEB拍手」のショートコードをサイドバーのウィジェットに書き込む。

という手順で、「まろやかWEB拍手」をサイドバーのウィジェットに設置できます。

この記事がどなたかの参考になれば幸いです(^^)/

6

コメント

タイトルとURLをコピーしました