お問い合わせフォームプラグインを使って簡単ないいねボタンを作ります。ボタンを押されるとメールで通知が来ます。

目次 [ close ]
  1. Contact form 7プラグインを有効にする
  2. コンタクトフォームの編集
    1. フォーム
    2. メール
  3. 記事の下部にコンタクトフォームを設置
  4. デザインを変更する

Contact form 7プラグインを有効にする

管理画面→wpXブログ設定→プラグイン設定→Contact Form 7の有効化をクリック

こうすることで管理画面のメニューに「お問い合わせ」が出てきます。

コンタクトフォームの編集

管理画面→お問い合わせ→コンタクトフォーム1をクリックして、編集画面に入ります。

フォーム

[submit class:like-submit "いいね"]

メール

題名を次のように変更する。

[_site_title] "[_post_title]"にいいねが送信されました

メッセージ本文を次のように変更する。

[_site_title] "[_post_title]"にいいねが送信されました
[_post_url]
-- 
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

記事の下部にコンタクトフォームを設置

  • 管理画面→外観→ウィジェットをクリックして、ウィジェットの編集画面に入る。
  • 「記事下部」の「＋」ボタンをクリック
  • 「Contact Form 7」を選択し、さらに先程作ったフォームを選択。
  • 更新ボタンを押す。

デザインを変更する

管理画面→外観→カスタマイズ→追加CSSで次のCSSを追記する。（画像は予めメディアにアップロードしておく）

.like-submit {
	padding: 8px 16px 8px 40px;
	background-color: #FFFFFF;
	border: 2px lightgray solid;
	border-radius: 16px;
	background-image: url("../wp-content/uploads/heart.png");
  background-size: 16px 16px;
  background-repeat: no-repeat;
	background-position: 16px 10px;
}

そうするとこの記事の下にあるようないいねボタンがつきます。