Agregar publicaciones al front-end de un sitio usando AJAX

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

WordPress básicamente se divide en dos partes, la sección frontal donde las personas pueden venir y leer publicaciones o artículos en el sitio. La otra es la sección de administración de WordPress desde la cual se pueden crear publicaciones y páginas. Esto funciona muy bien si WordPress se utiliza como un sitio de blogs general. Pero como WordPress se usa para diferentes tipos de sitios, a veces se hace necesario dar al usuario una forma de crear publicaciones desde la parte frontal del sitio sin obligarlo a ingresar en la sección de administración de WordPress.

Pero como WordPress se usa para diferentes tipos de sitios, a veces se puede ser necesario para el usuario una forma de crear publicaciones en la parte frontal del sitio sin obligar a ingresar en la sección de administración de WordPress.

Paso 1 Creando el Plugin

Para crear un complemento, cree un archivo ajaxpostfromfront.php en su carpeta wp-content / plugins / ajaxpostfromfront. Para crear un complemento en WordPress tenemos que agregar el encabezado del complemento de la siguiente manera:

/*
Plugin Name: Ajax post from front
Plugin URI: 
Description:Allows to post from front end
Author: Abbas Suterwala
Version: 
Author URI: 
*/

También definiremos algunas constantes con nombre para nuestra URL base del complemento y la ruta del complemento de la siguiente manera:

1	define('APFSURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
2	define('APFPATH', WP_PLUGIN_DIR."/".dirname( plugin_basename( __FILE__ ) ) );

Esto nos ayudará a usarlos fácilmente cuando sea necesario en el complemento. También cree una carpeta js en su carpeta ajaxpostfromfront y agregue un archivo apf.js en ella. Por lo tanto, la estructura de carpetas del complemento sería la siguiente:

Ahora pondremos en cola los scripts enganchándolos al gancho de acción 'wp_enqueue_scripts' y encolaremos nuestro archivo javascript y lo localizaremos para almacenar la URL de WordPress ajax que usaremos para nuestras llamadas ajax.

function apf_enqueuescripts()
{
  wp_enqueue_script('apf', APFSURL.'/js/apf.js', array('jquery'));
	wp_localize_script( 'apf', 'apfajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', apf_enqueuescripts);

Si todo ha ido bien hasta ahora, podremos ver nuestro complemento en la lista de complementos y deberíamos activarlo.

Paso 2: Comprender las funciones de WordPress para crear una nueva publicación

WordPress tiene un amplio conjunto de API o funciones que están expuestas a realizar tareas para complementos. Tiene funciones para todo tipo de tareas como crear una publicación, crear una página, comentarios, etc. En este complemento vamos a utilizar la función de WordPress wp_insert_post.

wp_insert_post toma en una matriz la información diferente requerida para crear una publicación en WordPress. Toma diferentes parámetros como el título de la publicación, contenido de la publicación, estado de la publicación, etc. También incluye el conjunto de categorías que se asociarán con la publicación. También contiene algunos otros parámetros como post password y extracto de post etc.

Para obtener una lista completa de los parámetros, puede visitar la página wp_insert_post en el Códice de WordPress.

Paso 3 Creando la interfaz de usuario para crear una publicación desde el extremo frontal

A continuación, vamos a crear la interfaz de usuario para nuestra publicación desde el complemento front-end. Para esto vamos a escribir la siguiente función:

function apf_post_form()
{
	?>

	<form id="apfform" action="" method="post"enctype="multipart/form-data">

		<div id="apf-text">

			<div id="apf-response" style="background-color:#E6E6FA"></div>

			<strong>Title </strong> <br/>
			<input type="text" id="apftitle" name="apftitle"/><br />
			<br/>

			<strong>Contents </strong> <br/>
			<textarea id="apfcontents" name="apfcontents"  rows="10" cols="20"></textarea><br />
			<br/>

			<a onclick="apfaddpost(apftitle.value,apfcontents.value);" style="cursor: pointer"><b>Create Post</b></a>

		</div>
	</form>

	<?php
}

En la función, primero crearemos un formulario utilizando la etiqueta <form> . En esto crearemos un div con la ID apf-response que se actualizará con el mensaje que proviene de la respuesta AJAX que obtendremos. Luego, hemos creado un cuadro de texto para el título y un área de texto para el contenido de la publicación.

A continuación, creamos un enlace llamado 'crear publicación' que llama a una función javascript apfaddpost que realizará una llamada AJAX para crear la publicación. Veremos la implementación de la llamada AJAX en los pasos a continuación.

En caso de que llamemos a la función apf_post_form en los archivos de tema, la verá de la siguiente manera. En mi tema lo acabo de llamar antes del bucle principal.

Paso 4: Creación de un widget para mostrar la interfaz de usuario en el extremo frontal

Ahora vamos a crear un widget para nuestra publicación desde el complemento frontal. Este widget mostrará la interfaz de usuario para la publicación desde el frente que creamos. A continuación se muestra el código para el widget.

class AjaxPostFromFrontWidget extends WP_Widget {
	function AjaxPostFromFrontWidget() {
		// widget actual processes
		$widget_ops = array('classname' => 'AjaxPostFromFrontWidget', 'description' => 'Lets you create post from front end' );
		$this->WP_Widget('AjaxPostFromFrontWidget','AjaxPostFromFrontWidget', $widget_ops);
	}

	function form($instance) {
		// outputs the options form on admin
		$defaults = array( 'title' => 'Ajax Post From Front' );
		$instance = wp_parse_args( (array) $instance, $defaults );

		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php echo 'Title:'; ?></label>
			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" />
		</p>
		<?php
	}

	function update($new_instance, $old_instance) {
		// processes widget options to be saved
		$instance = $old_instance;
		$instance['title'] = strip_tags( $new_instance['title'] );

		return $instance;
	}
	
	function widget($args, $instance) {
		// outputs the content of the widget
		extract( $args );

		$title = apply_filters('widget_title', $instance['title'] );
		echo $before_widget;
		if ( $title )
			echo $before_title . $title . $after_title;
		echo '<ul>';
		echo apf_post_form();
		echo '</ul>';
		echo $after_widget;
	}
}

En el constructor le damos el nombre de la clase y la descripción del widget. En la función de formulario actualmente, solo mostramos un campo que es el título que se mostrará para el widget. Actualizamos el campo de título en la función de actualización.

En la función del widget obtenemos el título guardado en la instancia del widget y lo mostramos. Luego llamamos a la función apf_post_form que mostrará el formulario que creamos en el paso anterior.

Registraremos el widget de la siguiente manera:

function apf_widget_init() {
	// Check for the required API functions
	if ( !function_exists('register_widget') )
		return;

	register_widget('AjaxPostFromFrontWidget');
}
add_action('widgets_init', 'apf_widget_init');

Ahora podemos arrastrar y soltar nuestro nuevo widget en la barra lateral.

Una vez que el widget se coloca en la barra lateral, debería poder ver el formulario en la página de inicio en la barra lateral de la siguiente manera:

Paso 5 Creando una publicación vía AJAX desde el extremo frontal

Ahora vamos a crear una función para manejar la solicitud AJAX de crear la publicación. La función para manejar la solicitud AJAX es la siguiente:

function apf_addpost() {
	$results = '';

	$title = $_POST['apftitle'];
	$content =	$_POST['apfcontents'];

	$post_id = wp_insert_post( array(
		'post_title'		=> $title,
		'post_content'		=> $content,
		'post_status'		=> 'publish',
		'post_author'       => '1'
	) );

	if ( $post_id != 0 )
	{
		$results = '*Post Added';
	}
	else {
		$results = '*Error occurred while adding the post';
	}
	// Return the String
	die($results);
}

En esta función obtenemos los valores del título y el contenido de la variable $ _POST. Con esos valores, utilice la función wp_insert_post de WordPress para crear la publicación. La función wp_insert_post devuelve el ID de publicación recién creado si tuvo éxito y cero si falla. Entonces, usando ese valor, enviamos un mensaje de éxito o error desde AJAX.

Para registrar esta función con el sistema WordPress AJAX llamaremos lo siguiente:

1	// creating Ajax call for WordPress
2	add_action( 'wp_ajax_nopriv_apf_addpost', 'apf_addpost' );
3	add_action( 'wp_ajax_apf_addpost', 'apf_addpost' );

Una vez que nuestro controlador AJAX haya terminado, solo tenemos que hacer la solicitud AJAX desde nuestro código javascript de la siguiente manera:

function apfaddpost(posttitle,postcontent) {

	jQuery.ajax({

		type: 'POST',

		url: apfajax.ajaxurl,

		data: {
			action: 'apf_addpost',
			apftitle: posttitle,
			apfcontents: postcontent
		},

		success: function(data, textStatus, XMLHttpRequest) {
			var id = '#apf-response';
			jQuery(id).html('');
			jQuery(id).append(data);

			resetvalues();
		},

		error: function(MLHttpRequest, textStatus, errorThrown) {
			alert(errorThrown);
		}

	});
}

function resetvalues() {

	var title = document.getElementById("apftitle");
	title.value = '';

	var content = document.getElementById("apfcontents");
	content.value = '';

}

En la función apfaddpost solo hacemos una solicitud AJAX pasando el título de la publicación y el contenido de la publicación. Una vez que se recibe la respuesta, solo mostramos el mensaje devuelto por el controlador AJAX en la div apf-response. Después de eso restablecemos los valores en el formulario.

Después de hacer clic en crear publicación, la publicación se creará y el mensaje se verá de la siguiente manera:

Paso 6: Agregar la opción de permitir que solo los usuarios registrados inicien sesión

Ahora agregaremos la funcionalidad para permitir que el administrador elija si no desea que los usuarios que no han iniciado sesión para crear publicaciones.

Para esto, actualizamos el apf_post_form como sigue para tomar un argumento $ allowNotLoggedInuser. En ese caso, cuando el usuario no ha iniciado sesión, no mostrará el formulario pero mostrará un mensaje para iniciar sesión.

function apf_post_form($allowNotLoggedInuser='yes') {
	if ( $allowNotLoggedInuser == 'no' &&  !is_user_logged_in() ) {
		echo "Please Login to create new post";
		return;
	}
	?>

	<form id="apfform" action="" method="post"enctype="multipart/form-data">

		<div id="apf-text">

			<div id="apf-response" style="background-color:#E6E6FA ;color:blue;"></div>

			<strong>Title </strong> <br/>
			<input type="text" id="apftitle" name="apftitle"/><br />
			<br/>

			<strong>Contents </strong> <br/>
			<textarea id="apfcontents" name="apfcontents"  rows="10" cols="20"></textarea><br />

			<br/>

			<a onclick="apfaddpost(apftitle.value,apfcontents.value);" style="cursor: pointer"><b>Create Post</b></a>

		</div>
	</form>

	<?php
}

También actualizaremos el widget para mostrar una opción más en la función de formulario para mostrar un campo de selección preguntando si está permitido que los usuarios que no han iniciado sesión publiquen. También actualizaremos los valores en la función de actualización. En la función de widget ahora leemos el valor que se estableció en el widget y luego lo pasamos a la función apf_post_form.

El código del widget actualizado debería verse así:

class AjaxPostFromFrontWidget extends WP_Widget {
	function AjaxPostFromFrontWidget() {
		// widget actual processes
		$widget_ops = array('classname' => 'AjaxPostFromFrontWidget', 'description' => 'Lets you create post from front end' );
		$this->WP_Widget('AjaxPostFromFrontWidget','AjaxPostFromFrontWidget', $widget_ops);
	}

	function form($instance) {
		// outputs the options form on admin
		$defaults = array( 'title' => 'Ajax Post From Front','allow_not_logged_users' => 'no' );
		$instance = wp_parse_args( (array) $instance, $defaults );

		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php echo 'Title:'; ?></label>
			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" />
		</p>

		<p>
			<label for="<?php echo $this->get_field_id( 'allow_not_logged_users' ); ?>">allow_not_logged_users:</label>
			<select id="<?php echo $this->get_field_id( 'allow_not_logged_users' ); ?>" name="<?php echo $this->get_field_name( 'allow_not_logged_users' ); ?>" class="widefat" style="width:100%;">
				<option <?php if ( 'no' == $instance['allow_not_logged_users'] ) echo 'selected="selected"'; ?>>no</option>
				<option <?php if ( 'yes' == $instance['allow_not_logged_users'] ) echo 'selected="selected"'; ?>>yes</option>
			</select>
		</p>

		<?php
	}

	function update($new_instance, $old_instance) {
		// processes widget options to be saved
		$instance = $old_instance;

		$instance['title'] = strip_tags( $new_instance['title'] );
		$instance['allow_not_logged_users'] = $new_instance['allow_not_logged_users'];
		return $instance;
	}

	function widget($args, $instance) {
		// outputs the content of the widget
		extract( $args );
		$allow_not_logged_users = isset( $instance['allow_not_logged_users'] ) ? $instance['allow_not_logged_users'] : 'no';

		$title = apply_filters('widget_title', $instance['title'] );
		echo $before_widget;
		if ( $title )
			echo $before_title . $title . $after_title;
		echo '<ul>';
		echo apf_post_form($allow_not_logged_users);
		echo '</ul>';
		echo $after_widget;
	}
}

Ahora desde el widget podemos elegir la opción de permitir o no usuarios registrados como se ve a continuación.

Ahora, en caso de que la opción esté configurada en no y alguien visite la página de inicio sin iniciar sesión, verá el siguiente mensaje para iniciar sesión y publicar.

Paso 7: Agregar la opción de agregar categorías para publicar a través del widget front-end

Ahora agregaremos la funcionalidad para agregar categorías a la publicación que estamos creando desde el extremo delantero. Para lograr esto primero, obtendremos la lista de todas las categorías y las mostraremos como casillas de verificación en la interfaz de usuario.

Para ello agregamos el siguiente código a la función apf_post_form.

<strong>Contents </strong> <br/>
<textarea id="apfcontents" name="apfcontents"  rows="10" cols="20"></textarea><br />

<?php
	$categories = get_categories(array('hide_empty'=> 0));
	foreach ( $categories as $category ) {
		echo "<input type='checkbox' name='apfcategorycheck' id='apfcategorycheck' value='$category->term_id' />";
		echo $category->cat_name;
		echo '<br>';
	}
?>
<br/>

<a onclick="apfaddpost(apftitle.value,apfcontents.value,apfcategorycheck);" style="cursor: pointer"><b>Create Post</b></a>

El código anterior solo obtiene la lista de todas las categorías y las muestra como casillas de verificación. Ese valor se pasa a nuestra función javascript apfaddpost como un parámetro adicional.

En la función apfaddpost obtenemos los valores que se verifican y los pasamos en la llamada AJAX de la siguiente manera:

function apfaddpost ( posttitle,postcontent,postcategory ) {

	var postCatergoryArray = new Array();

	for ( var i=0; i < postcategory.length; i++ ) {
		if ( postcategory[i].checked ) {
			postCatergoryArray[postCatergoryArray.length] = postcategory[i].value;
		}
	}

	jQuery.ajax({

		type: 'POST',

		url: apfajax.ajaxurl,

		data: {
			action: 'apf_addpost',
			apftitle: posttitle,
			apfcontents: postcontent,
			apfcategory:postCatergoryArray
		}
	});

Necesitaremos actualizar el controlador AJAX de la siguiente manera para tomar el conjunto de identificadores de las categorías y luego pasarlo a la función wp_insert_post, para que la publicación recién creada tenga las categorías apropiadas.

function apf_addpost() {
	$results = '';

	$title = $_POST['apftitle'];
	$content =	$_POST['apfcontents'];
	$category = $_POST['apfcategory'];

	$post_id = wp_insert_post( array(
		'post_title'		=> $title,
		'post_content'		=> $content,
		'post_status'		=> 'publish',
		'post_category'		=> $category,
		'post_author'       => '1'
	) );

	if ( $post_id != 0 ) {
		$results = '*Post Added';
	}
	else {
		$results = '*Error occured while adding the post';
	}
	// Return the String
	die($results);
}

Ahora si vemos el widget se verá como sigue:

Y la publicación creada tendrá esas categorías seleccionadas asociadas como se ve a continuación.

Conclusión

WordPress es una plataforma extensible. Podemos extender WordPress para agregar una funcionalidad diferente para que la plataforma de WordPress se pueda usar para diferentes tipos de sitios en lugar de solo blogs. Al igual que en este complemento, hemos agregado la funcionalidad de crear publicaciones desde el front-end, WordPress se puede extender de diferentes maneras. Muy feliz la codificación de WordPress!

1	function apfaddpost(posttitle,postcontent) {
2
3	jQuery.ajax({
4
5	type: 'POST',
6
7	url: apfajax.ajaxurl,
8
9	data: {
10	action: 'apf_addpost',
11	apftitle: posttitle,
12	apfcontents: postcontent
13	},
14
15	success: function(data, textStatus, XMLHttpRequest) {
16	var id = '#apf-response';
17	jQuery(id).html('');
18	jQuery(id).append(data);
19
20	resetvalues();
21	},
22
23	error: function(MLHttpRequest, textStatus, errorThrown) {
24	alert(errorThrown);
25	}
26
27	});
28	}
29
30	function resetvalues() {
31
32	var title = document.getElementById("apftitle");
33	title.value = '';
34
35	var content = document.getElementById("apfcontents");
36	content.value = '';
37
38	}