Primer pada Ajax di WordPress Frontend: benar-benar melakukannya

() translation by (you can also view the original English article)

Dalam seri ini, kita membahas bagaimana menerapkan Ajax di WordPress frontend. Dalam post pertama dalam seri, kami memeriksa bagaimana Ajax bekerja pada high-level, meninjau bagaimana memperkenalkan Ajax ke Dashboard WordPress, dan meninjau kait dua tersedia untuk menggabungkan Ajax ke WordPress.

Pada titik ini, itu adalah waktu untuk benar-benar membangun sesuatu yang akan menunjukkan bagaimana kita dapat menggunakan Ajax di WordPress frontend. Untuk melakukan ini, kita akan menulis kita sendiri plugin yang memastikan bahwa kita mengikuti praktik terbaik WordPress sepanjang jalan.

Pada akhir artikel ini, kita akan memiliki sebuah plugin yang sepenuhnya bekerja dengan kode sumber yang tersedia untuk umum di GitHub. Dengan mengatakan bahwa, mari kita mulai.

Perencanaan itu keluar

Jika Anda telah membaca salah satu artikel saya sebelumnya, maka Anda tahu bahwa saya selalu suka untuk memulai proyek-proyek saya merencanakan apa yang akan kita lakukan. Proyek ini tidak berbeda.

Dalam contoh ini, kita akan memperkenalkan kotak centang yang memungkinkan pembaca yang login ke WordPress situs untuk memeriksa off posting blog yang mereka sudah baca. Dengan cara ini, mereka akan hanya melihat post yang belum mereka baca sejak login ke situs.

Untuk membangun ini, kita akan menggunakan beberapa hal:

Instalasi baru Wordpress
WordPress tema Unit Test untuk menyediakan kami dengan banyak contoh konten
Twenty Eleven tema (karena begitu banyak tersedia)
Account pengguna yang memiliki peran 'Subscriber'

Setelah Anda memiliki setup lingkungan, berikut adalah rencana aksi yang kita akan diikuti untuk plugin kami:

Kita akan menciptakan sebuah plugin baru di direktori plugins yang dinamai I've Read This (dalam direktori ive-read-this)
Pada setiap posting, kami akan memperkenalkan sebuah kotak centang dan label yang memungkinkan pengguna untuk menandakan bahwa mereka sudah membaca post ini
Setelah post telah ditandai sebagai telah dibaca, pilihan akan hilang dari view

Mengerti? Silahkan login sebagai pengguna yang Anda buat dengan 'Subscriber' peran dan mari kita mulai!

Membuat I've Read This

Setelah Anda punya data pengujian yang diimpor, Anda setup akan terlihat seperti ini:

Dari sini, kita sudah siap untuk memulai menulis plugin.

Stubbing Plugin

Sebelum kita benar-benar menulis kode apapun, saya ingin pergi ke depan dan stub file plugin. Ini berarti bahwa kita akan setup direktori, struktur dasar plugin dan setiap direktori yang kami mungkin perlu untuk menggunakan plugin dependensi.

Karena kami akan memberikan light styling juga file JavaScript untuk memulai request Ajax, di sini 's apa struktur direktori dasar akan terlihat seperti. Direktori lang opsional, walaupun saya mempertimbangkan penerapan terbaik:

Sekarang, mari kita stub teks yang diperlukan untuk plugin.php. Catatan bahwa ini akan menjadi ahanya kecuali sebuah kerangka. Ini akan menjadi terutama bertanggung jawab untuk meletakkan dasar bagi apa yang kita akan membangun kemudian dalam artikel:


<?php
/*
Plugin Name: I've Read This
Plugin URI: http://github.com/tommcfarlin/ive-read-this/
Description: A simple plugin for allowing site members to mark when they've read a post.
Version: 1.0
Author: Tom McFarlin
Author URI: http://tommcfarlin.com/
Author Email: tom@tommcfarlin.com
License:

  Copyright 2012 Tom McFarlin (tom@tommcfarlin.com)

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License, version 2, as
  published by the Free Software Foundation.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

*/

class IveReadThis {

  /*--------------------------------------------*
	 * Constructor
	 *--------------------------------------------*/

	/**
	 * Initializes the plugin by setting localization, filters, and administration functions.
	 */
	function __construct() {

		load_plugin_textdomain( 'ive-read-this', false, dirname( plugin_basename( __FILE__ ) ) . '/lang' );

		// Register site styles and scripts
		add_action( 'wp_enqueue_scripts', array( &$this, 'register_plugin_styles' ) );
		add_action( 'wp_enqueue_scripts', array( &$this, 'register_plugin_scripts' ) );

	} // end constructor

	/**
	 * Registers and enqueues plugin-specific styles.
	 */
	public function register_plugin_styles() {

		wp_register_style( 'ive-read-this', plugins_url( 'ive-read-this/css/plugin.css' ) );
		wp_enqueue_style( 'ive-read-this' );

	} // end register_plugin_styles

	/**
	 * Registers and enqueues plugin-specific scripts.
	 */
	public function register_plugin_scripts() {

		wp_register_script( 'ive-read-this', plugins_url( 'ive-read-this/js/plugin.js' ), array( 'jquery' ) );
		wp_enqueue_script( 'ive-read-this' );

	} // end register_plugin_scripts

} // end class

new IveReadThis();
?>

Pada titik ini, Anda dapat benar-benar mengaktifkan plugin di WordPress plugin dasbor, meskipun tidak benar-benar akan terjadi. Jika Anda bangun untuk itu, pergi ke depan dan melakukan itu sekarang - Anda akan dapat menonton plugin yang datang untuk hidup saat kami bekerja di atasnya.

Memperkenalkan sebuah kotak centang pada setiap post

Karena kita akan memperkenalkan sebuah kotak centang pada setiap post yang memungkinkan pengguna untuk beralih apakah atau tidak mereka sudah membaca post, kita harus memperhitungkan berikut:

Kami perlu memastikan bahwa kotak centang hanya ditampilkan ketika pengguna log in
Kotak centang harus di bagian bawah post di halaman satu posting karena itulah mana pengguna akan menandai bahwa mereka pernah membaca post

Kita dapat mencapai kedua dengan menambahkan fungsi berikut:


/**
 * Adds a checkbox to the end of a post in single view that allows users who are logged in
 * to mark their post as read.
 *
 * @param	$content	The post content
 * @return				The post content with or without the added checkbox
 */
public function add_checkbox( $content ) {

	// We only want to modify the content if the user is logged in
	if( is_user_logged_in() && is_single() ) {

		// Build the element that will be used to mark this post as read
		$html = '<div id="ive-read-this-container">';
			$html .= '<label for="ive-read-this">';
				$html .= '<input type="checkbox" name="ive-read-this" id="ive-read-this" value="0" />';
				$html .= __( "I've read this post.", 'ive-read-this' );
			$html .= '</label>';
		$html .= '</div><!-- /#ive-read-this-container -->';

		// Append it to the content
		$content .= $html;

	} // end if

	return $content;

} // end add_checkbox

Membaca komentar dengan hati-hati karena mereka harus menjelaskan persis apa yang terjadi; Namun, jika Anda tidak jelas, jangan ragu untuk meninggalkan komentar.

Selanjutnya, kita perlu menambahkan baris berikut di konstruktor sehingga filter the_content tersebut menjadi:

1
2	// Setup the action for rendering the checkbox
3	add_filter( 'the_content', array( &$this, 'add_checkbox' ) );

Akhirnya, mari kita tambahkan sedikit style hanya untuk memberikan kotak centang yang agak unik tampilan dan nuansa dalam konteks Twenty Eleven tema. Dalam plugin plugin.css file, tambahkan kode berikut:


#ive-read-this-container {
	margin: 	1em 0 1em;
	background:	#eee;
	border:		1px solid #ccc;
	padding:	0.25em;
}

Sekarang, jika Anda masuk ke instalasi WordPress dan menavigasi ke bagian bawah satu post, Anda harus melihat sesuatu seperti gambar berikut:

Pada titik ini, kita sudah siap untuk mulai menulis beberapa JavaScript.

Membuat request: Setup Handler klik untuk kotak centang

Hal pertama yang perlu kita lakukan adalah untuk setup JavaScript sehingga hanya menjalakan jika wadah "'ve Read This" pada halaman. Ada berbagai cara untuk melakukan ini, tetapi karena kita memuat JavaScript pada setiap halaman, kemudian kita akan menggunakan JavaScript untuk memeriksa keberadaan "'ve Read This" kotak centang yang kami menulis ke halaman.

Untuk melakukannya, tambahkan kode berikut untuk plugin.js. Komentar kode harus jelas. Jika tidak, meninggalkan komentar!


(function ($) {
	$(function () {

		// If the "I've Read This Container" is on this page, let's setup the event handler
		if(1 === $('#ive-read-this-container').length) {
		} // end if

	});
}(jQuery));

Dalam kode yang Anda lihat di atas, apa pun yang kita menempatkan dalam bergantung hanya akan dijalankan jika "'ve Read This" wadah elemen hadir.

Dalam kasus ini, kita tahu bahwa kita perlu mengirim ID dari post ke server. Karena user tersebut login, kita akan mampu mendapatkan ID pada sisi server.

Jadi, langkah berikutnya adalah untuk mendapatkan ID dari post yang kita berada di. Untungnya, Twenty Eleven menyedikan jumlah posting di elemen article ID. Kita hanya perlu untuk mengurai keluar.

Mari kita lakukan sekarang:


// We use the change attribute so that the event handler fires
// whenever the checkbox or its associated label are clicked.
$('input[name="ive-read-this"]').change(function (evt) {

	// We can retrieve the ID of this post from the <article>'s ID. This will be required
	// so that we can mark that the user has read this particular post and we can hide it.
	var sArticleId, iPostId;

	// Get the article ID and split it - the second index is always the post ID in Twenty Eleven
	sArticleId = $("article").attr('id');
	iPostId = parseInt(sArticleId.split('-')[1]);

});

Pada titik ini, kita sudah siap untuk men-setup request Ajax. Kita akan menggunakan jQuery's $.post metode untuk melakukan hal ini dan kita akan menggunakan WordPress' standar ajaxurl untuk menangani respon kita.

Penanganan Event: menandai posting sebagai telah dibaca

Mari kita pergi ke depan dan menulis kode yang akan mengirimkan ID dari post seluruhnya. Kita akan khawatir tentang respon nanti dalam artikel ini, maka "TODO" komentar dalam kode.


// Initial the request to mark this this particular post as read
$.post(ajaxurl, {

	post_id:	iPostId

}, function (response) {
	// TODO
});

Pada titik ini dalam pembangunan, sumber JavaScript penuh akan terlihat seperti ini:


(function ($) {
	$(function () {

		// If the "I've Read This Container" is on this page, let's setup the event handler
		if(1 === $('#ive-read-this-container').length) {

			// We use the change attribute so that the event handler fires
			// whenever the checkbox or its associated label are clicked.
			$('input[name="ive-read-this"]').change(function (evt) {

				// We can retrieve the ID of this post from the <article>'s ID. This will be required
				// so that we can mark that the user has read this particular post and we can hide it.
				var sArticleId, iPostId;

				// Get the article ID and split it - the second index is always the post ID in Twenty Eleven
				sArticleId = $("article").attr('id');
				iPostId = parseInt(sArticleId.split('-')[1]);

				// Initialise the request to mark this particular post as read
				$.post(ajaxurl, {

					post_id:	iPostId

				}, function (response) {
					// TODO
				});

			});

		} // end if

	});
}(jQuery));

Bagi Anda yang telah bekerja melalui kode contoh sebagai Anda membaca artikel, Anda akan segera melihat bahwa browser Anda melempar kesalahan konsol:

Exception ReferenceError: ajaxurl tidak didefinisikan

UPS! Dan ini adalah di mana kita perlu untuk memastikan benar termasuk Perpustakaan Ajax WordPress'.

Termasuk Perpustakaan Ajax WordPress' pada Frontend

Untuk melakukan ini, kita akan perlu untuk hook ke action wp_head. Menambahkan baris kode berikut dalam konstruktor plugin:

1
2	// Include the Ajax library on the front end
3	add_action( 'wp_head', array( &$this, 'add_ajax_library' ) );

Selanjutnya, tambahkan fungsi berikut. Ini adalah apa benar-benar bertanggung jawab untuk memasukan Perpustakaan Ajax:


/**
 * Adds the WordPress Ajax Library to the frontend.
 */
public function add_ajax_library() {

	$html = '<script type="text/javascript">';
		$html .= 'var ajaxurl = "' . admin_url( 'admin-ajax.php' ) . '"';
	$html .= '</script>';

	echo $html;

} // end add_ajax_library

Sekarang, jika Anda mencoba untuk mengeksekusi kode, Anda seharusnya tidak memiliki masalah. Pada titik ini, kami siap untuk terus berjalan.

Menangani Evebt: menandai posting sebagai telah dibaca

Sekarang bahwa kita punya reqyest yang dikirim ke server, kita dapat menulis kami sisi server event handler. Ini adalah bagaimana handler harus beroperasi:

Periksa bahwa nilai posting ID masuk diatur dan bahwa itu adalah nilai numerik (ini adalah sangat dasar spoof perlindungan, tapi ia bekerja untuk semua maksud dan tujuan).
Selanjutnya, Coba perbarui meta pengguna saat ini menggunakan ID dan post ID.
Jika gagal update, kita akan mengembalikan -1; Jika tidak, kita akan mengembalikan 1. Kami akan menangani nilai-nilai ini dalam respon handler di JavaScript.

Pertama, kita akan menambahkan hook dalam konstruktor plugin:

1
2	// Setup the event handler for marking this post as read for the current user
3	add_action( 'wp_ajax_mark_as_read', array( &$this, 'mark_as_read' ) );

Selanjutnya, kami akan benar-benar menerapkan handler:


/**
 * Uses the current user ID and the incoming post ID to mark this post as read
 * for the current user.
 *
 * We store this post's ID in the associated user's meta so that we can hide it
 * from displaying in the list later.
 */
public function mark_as_read() {

	// First, we need to make sure the post ID parameter has been set and that it's a numeric value
	if( isset( $_POST['post_id'] ) && is_numeric( $_POST['post_id'] ) ) {

		// If we fail to update the user meta, respond with -1; otherwise, respond with 1.
		echo false == update_user_meta( wp_get_current_user()->ID, $_POST['post_id'], 'ive_read_this' ) ? "-1" : "1";

	} // end if

	die();

} // end mark_as_read

Untuk itu, mari kita kembali TODO luar biasa dalam respon fungsi JavaScript yang kita bekerja pada. Berikut adalah script lengkap:


(function ($) {
	$(function () {

		// If the "I've Read This Container" is on this page, let's setup the event handler
		if(1 === $('#ive-read-this-container').length) {

			// We use the change attribute so that the event handler fires
			// whenever the checkbox or its associated label are clicked.
			$('input[name="ive-read-this"]').change(function (evt) {

				// We can retrieve the ID of this post from the <article>'s ID. This will be required
				// so that we can mark that the user has read this particular post and we can hide it.
				var sArticleId, iPostId;

				// Get the article ID and split it - the second index is always the post ID in Twenty Eleven
				sArticleId = $("article").attr('id');
				iPostId = parseInt(sArticleId.split('-')[1]);

				// Initial the request to mark this this particular post as read
				$.post(ajaxurl, {

					action:		'mark_as_read',
					post_id:	iPostId

				}, function (response) {

					// If the server returns '1', then we can mark this post as read, so we'll hide the checkbox
					// container. Next time the user browses the index, this post won't appear
					if (1 === parseInt(response)) {

						$('#ive-read-this-container').slideUp('fast');

					// Otherwise, let's alert the user that there was a problem. In a larger environment, we'd
					// want to handle this more gracefully.
					} else {

						alert("There was an error marking this post as read. Please try again.");

					} // end if/else

				});

			});

		} // end if

	});
}(jQuery));

Salah satu perubahan lain

Jika pengguna kebetulan menemukan jalan mereka ke halaman posting individu (seperti yang terkait dengan itu), kita harus memeriksa untuk melihat jika mereka sebelumnya telah ditandai untuk dibaca.

Untuk melakukan ini, kita perlu refactor fungsi add_checkbox sehingga memeriksa untuk melihat apakah pengguna masuk dan membaca meta pengguna untuk menentukan apakah post sebelumnya telah ditandai sudah dibaca:


/**
 * Adds a checkbox to the end of a post in single view that allows users who are logged in
 * to mark their post as read.
 *
 * @param	$content	The post content
 * @return				The post content with or without the added checkbox
 */
public function add_checkbox( $content ) {

	// We only want to modify the content if the user is logged in
	if( is_single() ) {

		// If the user is logged in...
		if( is_user_logged_in() ) {

			// And if they've previously read this post...
			if( 'ive_read_this' == get_user_meta( wp_get_current_user()->ID, get_the_ID(), true ) ) {

				// Build the element to indicate this post has been read
				$html = '<div id="ive-read-this-container">';
					$html .= '<strong>';
						$html .= __( "I've read this post.", 'ive-read-this' );
					$html .= '</strong>';
				$html .= '</div><!-- /#ive-read-this-container -->';

			// Otherwise, give them the option to mark this post as read
			} else {

				// Build the element that will be used to mark this post as read
				$html = '<div id="ive-read-this-container">';
					$html .= '<label for="ive-read-this">';
						$html .= '<input type="checkbox" name="ive-read-this" id="ive-read-this" value="0" />';
						$html .= __( "I've read this post.", 'ive-read-this' );
					$html .= '</label>';
				$html .= '</div><!-- /#ive-read-this-container -->';

			} // end if

			// Append it to the content
			$content .= $html;

		} // end if

	} // end if

	return $content;

} // end add_checkbox

Melihatnya beraksi!

Pada titik ini, Anda sudah punya sebuah plugin bekerja:

Anda harus dapat menavigasi ke setiap pos
Jika Anda sudah tidak membacanya, maka Anda harus dapat klik kotak centang dan akan menghilang
Jika Anda memuat ulang halaman, kemudian Anda akan melihat pemberitahuan bahwa post telah ditandai sebagai telah dibaca.

Tidak buruk, kan?

Tentu saja, selalu ada ruang untuk percobaan Anda sendiri dengan ini. Misalnya, Anda dapat bekerja pada tidak termasuk post ini dari loop utama jika mereka telah ditandai sebagai telah dibaca. Pilihan lain akan menambah classname kustom dan styling kemudian posting untuk menunjukkan bahwa pengguna saat ini telah membacanya.

Akhirnya, ingat bahwa Anda dapat mengambil semua kode sumber secara keseluruhan di GitHub.