今回の内容はSNSやマッチングアプリで使われているいいねボタンの機能を作っていきたいと思います。
ワードプレスなら手軽にWebアプリを作れるんだということをもっと世の中に広めていきたいですね。
ボタンをクリックした時、ajaxを使って値をデータベースに保存するだけなので、システムは大した内容ではありません。
wordpressでajaxを使いたいって人の参考にもなるんじゃないでしょうか。
[business_backbone]
いいね機能の仕様確認
ワードプレスのユーザー登録部分に関しては、以前にブログ記事にしてありますので、そこは省きます。
今回は、各ユーザーに設置されたいいねボタンを押した時に、いいねの数といいねボタンを誰が押したのか、さらに、自分が過去にいいねボタンを誰に押したのかがわかる仕様となります。
さらに、一度いいねをしたユーザーには2回目を押すことはできない。
- いいねされた数
- 誰がいいねをしたか
- 自分が誰にいいねをしたか
- 一人のユーザーには一度しかいいねできない
いいねとか文章にしてると混乱してきますね。
一般的なSNSやマッチングアプリに搭載されているいいね機能と思ってもらって問題ありません。
ユーザーリストを作成
まずは機能の土台となるユーザーリストの出力です。
//ユーザー一覧
public function the_user_list()
{
print '<div class="card-columns">';
$args = array(
'role' => 'subscriber',
);
$users = get_users($args);
foreach ($users as $v) {
$desc = nl2br(get_the_author_meta('description', $v->data->ID));
$user_img_id = get_the_author_meta('user_img_id', $v->data->ID);
$user_coutn = get_the_author_meta('like_count', $v->data->ID);
if (!$user_coutn) {
$user_coutn = 0;
}
$img = wp_get_attachment_image($user_img_id, 'midium', false, array('class' => 'w-100 h-auto'));
print <<< EOT
<div class="card">
{$img}
<div class="card-body position-relative">
<p class="card-title h4">{$v->data->display_name}</p>
<div class="card-text">{$desc}</div>
<div data-user-id="{$v->data->ID}" class="w-100 btn btn-primary mt-3 js-like-button"><span class="num">{$user_coutn}</span>人にいいねされています！</div>
</div>
</div>
EOT;
}
unset($v);
print '</div>';
}名前と画像とプロフィール情報の下にボタンを設置します。
ユーザーIDが必要なので、ボタンのdata属性に入れておきます。
data属性の値をajaxで利用します。
wordpressでajaxを使う準備
ワードプレスではajaxの使い方が決められています。
データをadmin_url(‘admin-ajax.php’)い送らないといけません。
さらに、nonceの設定も必要なのでこの2つをjsの変数として設定しておきます。
やりかたはいろいろありますが、wp_localize_scriptというワードプレスの関数を利用するのが一番良いでしょう。
次に、ボタンクリックした時に動かすjsを作成し読み込みます。
jqueryの読み込みと、wp_localize_scripの設定を組み合わせると、以下のような形で読み込みます。
add_action('wp_enqueue_scripts', 'theme_name_scripts');
function theme_name_scripts()
{
//jqueryの読み込み
wp_enqueue_script('jquery');
//外部ファイルjs読み込み
wp_enqueue_script('script-name', get_template_directory_uri() . '/assets/js/functions.js', array(), null, true);
//wp_localize_scriptの設定
$args = array(
'ajaxurl' => admin_url('admin-ajax.php'),
'ajaxnonce' => wp_create_nonce('ajax-nonce'),
);
wp_localize_script('script-name', 'set_ajax_object', $args);
//外部ファイルjsの実行
if (function_exists('wp_add_inline_script')) {
$tag = 'link_button();';
wp_add_inline_script('script-name', $tag, 'after');
}
}外部ファイルのjsで’link_button()という関数を作っていますので、最後インラインで実行させてます。
いいねボタンをクリックした後の処理
jqueryをつかてajaxの処理を書きました。
やっぱjqueryって簡単でいいですよね。
function link_button() {
jQuery(document).on('click', '.js-like-button', function () {
var _this = jQuery(this);
var user_id = jQuery(this).attr('data-user-id');
jQuery.ajax({
type: 'POST',
url: set_ajax_object['ajaxurl'],
data: {
'action': 'set_classes',
'user_id': user_id,
'func' : 'like_button',
'ajaxnonce' : set_ajax_object['ajaxnonce'],
},
success: function (response) {
_this.children('.num').html(response);
}
});
return false;
});
}urlとajaxnonceにはwp_localize_scriptで設定した値を利用しています。
actionにはデータを処理する関数を設定しますここでは、set_classesという関数に値を渡し、今後ajaxの処理が増えることを想定して、’func’ : ‘like_button’という設定値で実行関数を分岐させました。
$AjaxClass = new AjaxClass();
add_action('wp_ajax_set_classes', 'set_classes');
add_action('wp_ajax_nopriv_set_classes', 'set_classes');
function set_classes()
{
global $AjaxClass;
if (wp_verify_nonce($_REQUEST['ajaxnonce'], 'ajax-nonce')) {
if ($_POST['func'] == 'like_button') {
$user_id = $_POST['user_id'];
$like_count = $AjaxClass->set_like_butto($user_id);
print $like_count;
}
}
die();
}wp_verify_nonceでセキュリティチェックをし、class化させたajaxで行う処理を実行させていきます。
ユーザーのメタデータへの保存処理はこちら。
//likeボタンの実行
public function set_like_butto($user_id)
{
$this->user_id = $user_id;
$this->like_count = get_the_author_meta('like_count', $this->user_id);
$this->current_user_id = get_current_user_id();
$this->set_like_pushed();
return $this->like_count;
}
//likeされたユーザー
public function set_like_pushed()
{
$like_pushed = get_the_author_meta('like_pushed', $this->user_id);
if (!is_array($like_pushed)) {
$like_pushed = array();
}
if (!in_array($this->current_user_id, $like_pushed)) {
$like_pushed[] = $this->current_user_id;
update_user_meta($this->user_id, 'like_pushed', $like_pushed);
$this->set_like_pressed();
}
}
//likeしたユーザー
public function set_like_pressed()
{
$like_pressed = get_the_author_meta('like_pressed', $this->current_user_id);
if (!is_array($like_pressed)) {
$like_pressed = array();
}
if (!in_array($this->user_id, $like_pressed)) {
$like_pressed[] = $this->user_id;
update_user_meta($this->current_user_id, 'like_pressed', $like_pressed);
$this->set_like_count();
}
}
//likeカウント
public function set_like_count()
{
$this->like_count = get_the_author_meta('like_count', $this->user_id);
$this->like_count = $this->like_count + 1;
update_user_meta($this->user_id, 'like_count', $this->like_count);
}今回の内容はテーマにしてまとめましたので、興味ある方はダウンロードしてください。
次に作ろうと思っているのは、ユーザー同士がメッセージのやり取りをする機能ですね。
ここができればすぐマッチングアプリとしての完成もうすこしかなと思います。
コメント