いいねボタンと定型文でブログをカスタマイズ!
ブログをしばらく書いていると、いろいろカスタマイズしたくなるもの。
この『かえるトラベル』も、いろいろなカスタマイズをしています。
今回は、そんなカスタマイズの中から 記事の最後に『いいねボタン』と、『いいねお願いします』という定型文を、自動で設置する方法を紹介します。
こんな感じに仕上がります。
この記事の本文の一番下にも、ボタンと文章がありますので見てみて下さい。
※現在は表示していません
いいねボタンはハートマークなど4種類から選べます。
その上の文章は、自由に変えられますので、自分のブログにあわせてカスタマイズしてください!
それでは早速やっていきましょう!
カスタマイズの手順
このカスタマイズの手順は大きく
- いいねボタンの設置
- 定型文の設置
の2つがあります。
はじめに、いいねボタンの設置からやっていきます。
Step1 いいねボタンを設置する
今回、いいねボタンを自動設置するために使うのが、『WP ULink』というプラグインです。
TwitterやInstagramで見かけるいいねボタンを設置できます。
利用者も多く、カスタマイズもしやすいプラグインです。
それでは、手順を画像付きで解説していきます。
『WP ULink』をインストール
プラグインをワードプレスにインストールし、有効化します。
『WP ULink』を設定
ダッシュボードのメニューにある『WP ULink』をクリック
『一般設定』の設定
『Content Types』
- Enable NotificationsをONにするかOFFにするか選ぶ
ONにすると、相手がいいねボタンを押したときにメッセージが表示されます
※このブログはONにしています
- ボタンのタイプを選ぶ
※このブログは?ボタンにしています - 自動表示をオンにする
※オンにすることで、記事に自動でボタンが表示されます - ボタンの表示場所を選ぶ
記事のどの部分にボタンを設置するか選べます
記事の一番下に表示したいので、『コンテンツの下部』にします - Automatic Display Restrictionの設定
自動表示したくないページをここで設定します。
四角い入力ボックスをクリックすると、ページを選ぶことができます。
※このブログはすべてのページを選んでいます - Post Types Filterの設定
投稿と固定ページ、どこで表示したいのか選べます。
今回は投稿で表示したいので『Post』のみを選択します。
『翻訳』の設定
※場合によっては『Translations』と表示されることもあります
- 『いいね通知メッセージ』の設定
いいねボタンが押されたときに表示するメッセージを入力します
※デフォルトは『ありがとう!これいいねにしました。』となっています
※このブログでは『高評価ありがとうございます』としています - 『良くないね通知メッセージ』の設定
いいねが取り消されたときに表示するメッセージです
※デフォルトでは『すみません!これよくないねしました』
※このブログでは『高評価を取り消しました』としています
最後に青色の『保存』ボタンを押して終了!!
一度ブログを確認してみてください。
記事本文の一番下に、いいねボタンが設置されたしょうか。
もし説明がよくわからなかったり、もっと細かくカスタマイズしたいという方は、こちらの記事がとても分かりやすいです。
Step2 定型文の表示
続いて、さっき設置したいいねボタンがのすぐ下に、定型文を設置します。
今回使うプラグインは『PRyC WP: Add custom content to post and page (top/bottom)』です。
定型文などを自動で設置するためのプラグインです。
それでは始めていきましょう。
プラグインのインストール
プラグインをワードプレスにインストールし、有効化します。
定型文を入力
ダッシュボードの『設定』にある、『PRyC WP: Add custom content』をクリックします。
そのページの『Bottom content settings:』の中の、『Content (bottom):』の大きな枠に、記事下で表示したい文章などを入力します。
文章などは、HTMLというプログラミングコードで入力します。
※このブログの場合は『この記事を『いいね』と思った方は、左下のGoodボタンを押していただけると嬉しいです』という文章のHTMLコードを入力しています。
普通の文章などをHTMLに変換する方法を知りたい方は、下のボックスをクリックしてください。
(クラシックエディタでの方法を紹介します)
- ここをクリック!
最後に、ページ左下の『変更を保存』を押して完了!
さいごに
無事にできたでしょうか。
もしわからない点があったら、コメント欄で気軽に言ってください。
答えられる範囲で回答します。
今回のカスタマイズで参考にした2つの記事を紹介しますので、そちらも参考にしてみてください。
最後まで読んでいただきありがとうございました!
それでは、よいブログライフを!