Publicación a través del front-end: editar y eliminar

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

Hoy, continuaremos con nuestra miniserie para insertar publicaciones a través del front end, pero en esta parte estaremos viendo exclusivamente cómo editar y eliminar publicaciones a través del front-end. Hablaremos sobre cómo mostrar todas nuestras publicaciones, editarlas y eliminarlas. Así que, ¡preparémonos y empecemos!

Introducción

Ya estamos en la segunda parte de nuestra miniserie, si no has leído la primera parte, te aconsejo que lo hagas porque vamos a continuar desde donde lo dejamos. Nuestro objetivo después de completar esta miniserie debería permitirle al usuario enviar las publicaciones a través del front-end, además de editar y enviar las publicaciones a la papelera; todo sin estar en el panel de WordPress. Estos métodos se pueden usar tanto en un tema como en un plugin y ser muy adaptables para lograr que las presentaciones sean muy avanzadas y complejas.

La demostración y los archivos de descarga son un tema simplificado que ha sido creado solo para los fines de este tutorial.

Así que abre tu editor de texto favorito y ¡comencemos!

Paso 1 Mostrar nuestras publicaciones

Comenzaremos mostrando todas nuestras publicaciones de manera más efectiva, esto nos dará una mejor gestión de nuestras publicaciones y nos permitirá realizar acciones en cada publicación. Como estamos usando un tema para desarrollar esto, crearemos una plantilla de página llamada template-view-posts.php. Además, al asignar la plantilla a esta página, crearemos una nueva página a través de nuestro panel de WordPress Páginas -> Agregar nueva -> Atributos de página.

Ya que tenemos nuestra plantilla de página y nuestra página creada en nuestro tema de WordPress, podemos comenzar a generar todas nuestras publicaciones. Vamos a crear una tabla muy simple para generar toda la información necesaria. Empieza creando una tabla con algunos encabezados, así:

1
2
3	<table>
4
5	<tr>
6	<th>Post Title</th>
7	<th>Post Excerpt</th>
8	<th>Post Status</th>
9	<th>Actions</th>
10	</tr>
11
12	<tr>
13	<td></td>
14	<td></td>
15	<td></td>
16	<td></td>
17	</tr>
18
19	</table>

Ahora que tenemos la tabla en su lugar, podemos empezar a llenar las filas de la tabla con la información respecto a nuestras publicaciones. Primero, comenzaremos haciendo un bucle personalizado de WordPress para asegurarnos de que estamos obteniendo todas las publicaciones y todos los estados de las publicaciones, ya que queremos poder ver qué publicaciones están pendientes, los borradores, las publicadas o incluso las enviadas a la papelera. Para ello, insertamos el siguiente código:



<?php
$query = new WP_Query( array(
	'post_type' => 'post',
	'posts_per_page' => '-1',
	'post_status' => array(
		'publish',
		'pending',
		'draft',
		'private',
		'trash'
	)
) );
?>

Este es nuestro objetivo de la consulta con todos los parámetros personalizados que configuramos. Puedes leer sobre todos los diferentes parámetros que podemos configurar desde el Codex de WordPress. Luego, ejecutaremos nuestro bucle de WordPress justo después de nuestros encabezados de la tabla, así:

1
2
3	<?php
4	if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
5
6	<tr>
7	<td></td>
8	<td></td>
9	<td></td>
10	<td></td>
11	</tr>
12
13	<?php endwhile; endif; ?>

¡Genial! Tenemos nuestra tabla, y nuestro bucle configurado de WordPress. Ahora solo tenemos que ingresar la información que está relacionada con los encabezados de nuestra tabla. Reemplaza nuestras celdas vacías de la tabla con el siguiente código:

1
2
3	<tr>
4	<td><?php echo get_the_title(); ?></td>
5	<td><?php the_excerpt(); ?></td>
6	<td><?php echo get_post_status( get_the_ID() ) ?></td>
7	<td><a href="#">Edit</a> <a href="#">Delete</a></td>
8	</tr>

El código que acabamos de insertar primero empieza con la salida del título de nuestra publicación, y el siguiente elemento genera un extracto de nuestra publicación. Luego obtenemos el estado actual de la publicación y pasamos el ID de la publicación a esta función y finalmente, ingresamos dos enlaces Editar y Eliminar, los usaremos más adelante como nuestras acciones.

Paso 2 Edición de nuestras publicaciones

Excelente, estamos avanzando. Hemos configurado nuestro tema para ver todas nuestras publicaciones a través del front-end. A continuación, vamos a editar la publicación. Empezamos creando otra plantilla de página llamada template-edit-posts.php. Además, crearemos una nueva página a través de nuestro panel de WordPress Páginas -> Agregar nueva -> Atributos de página y le asignaremos la plantilla a esta página.

Antes de comenzar a editar esta plantilla, volvamos a nuestro archivo template-view-posts.php y asegurémonos de que estamos pasando el ID de la publicación a la URL donde recuperaremos el ID de nuestra página de edición. Hacemos esto usando la función de WordPress: add_query_arg. Vamos a insertar el siguiente código justo antes de nuestro enlace Editar:



<?php
$edit_post = add_query_arg( 'post', get_the_ID(), get_permalink( 61 + $_POST['_wp_http_referer'] ) );
?>

El código que acabamos de insertar, primero establece el nombre del parámetro, y luego, obtenemos el ID de la publicación, después obtenemos el ID de nuestra plantilla de página de edición y agregamos nuestro argumento de URL personalizado. Usaremos esto para recuperar la información en nuestra plantilla Editar.

Por último, enviaremos esto a nuestro enlace de edición, haciéndolo de la siguiente manera:

1
2
3	<a href="<?php echo $edit_post; ?>">Edit</a>

Ya que lo tenemos configurado para cuando el usuario haga clic en Editar, irá a nuestra Plantilla de edición con el ID de la publicación. Volveremos a nuestro archivo template-edit-posts.php y comenzaremos a insertar nuestro código.

Copiaremos nuestro Formulario desde nuestro archivo template-insert-posts.php e insertaremos esto en nuestra Plantilla de Edición. Estamos copiando el siguiente código en nuestra plantilla de edición, y eliminamos todos los valores de nuestras entradas y del área de texto, haciendo nuestro formulario de la siguiente manera:



<form action="" id="primaryPostForm" method="POST">

	<fieldset>

		<label for="postTitle"><?php _e( 'Post\'s Title:', 'framework' ); ?></label>

		<input type="text" name="postTitle" id="postTitle" value="" class="required" />

	</fieldset>

	<?php if ( $postTitleError != '' ) { ?>
		<span class="error"><?php echo $postTitleError; ?></span>
		<div class="clearfix"></div>
	<?php } ?>

	<fieldset>
				
		<label for="postContent"><?php _e( 'Post\'s Content:', 'framework' ); ?></label>

		<textarea name="postContent" id="postContent" rows="8" cols="30"></textarea>

	</fieldset>

	<fieldset>
		
		<?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>

		<input type="hidden" name="submitted" id="submitted" value="true" />
		<button type="submit"><?php _e( 'Add Post', 'framework' ); ?></button>

	</fieldset>

</form>

Una vez tenemos nuestro formulario de página de edición configurado, necesitaremos usar el bucle de WordPress para revisar todas nuestras publicaciones y encontrar solo las publicaciones que coincidan con el ID de la publicación que se pasó a nuestra URL. Haremos esto ejecutando el bucle de WordPress en la parte superior de nuestro archivo:



<?php $query = new WP_Query( array( 'post_type' => 'post', 'posts_per_page' => '-1' ) ); ?>

<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

<?php

	/*
		We will be inserting all of our information inside of here
	*/

?>

<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

Para que el bucle de WordPress se asegure de que solo estamos recuperando la información de la publicación específica, vamos a insertar el siguiente código que asegura que estamos obteniendo el ID de la publicación correcta, dentro de nuestro bucle:



if ( isset( $_GET['post'] ) ) {
	
	if ( $_GET['post'] == $post->ID )
	{
		$current_post = $post->ID;
	}
}

Lo que acabamos de insertar es para obtener el parámetro de la URL y probarlo con el ID de la publicación, y cuando haya encontrado una coincidencia asignaremos ese ID a nuestra variable current_post. Después de esto, insertaremos un código para obtener la información con respecto a nuestra publicación, inserta el siguiente código justo debajo de nuestra función current_post:

1
2
3	$title = get_the_title();
4	$content = get_the_content();

Nuestro código final debería verse así:



if ( isset( $_GET['post'] ) ) {
	
	if ( $_GET['post'] == $post->ID )
	{
		$current_post = $post->ID;
		$title = get_the_title();
		$content = get_the_content();
	}
}

Esto es genial, estamos avanzando. Ahora que tenemos toda nuestra información, solo necesitamos insertarla en nuestros valores de formulario, esto es simple, ya que simplemente asignaremos los valores en ambos campos. Junto con esto actualizaremos el nombre de nuestro botón a Actualizar Publicación. El siguiente código es nuestro formulario actualizado con el formulario rellenado con el título y el contenido de la publicación de edición:



<form action="" id="primaryPostForm" method="POST">

	<fieldset>

		<label for="postTitle"><?php _e( 'Post\'s Title:', 'framework' ); ?></label>

		<input type="text" name="postTitle" id="postTitle" value="<?php echo $title; ?>" class="required" />

	</fieldset>

	<?php if ( $postTitleError != '' ) { ?>
		<span class="error"><?php echo $postTitleError; ?></span>
		<div class="clearfix"></div>
	<?php } ?>

	<fieldset>
				
		<label for="postContent"><?php _e( 'Post\'s Content:', 'framework' ); ?></label>

		<textarea name="postContent" id="postContent" rows="8" cols="30"><?php echo $content; ?></textarea>

	</fieldset>

	<fieldset>
		
		<?php wp_nonce_field( 'post_nonce', 'post_nonce_field' ); ?>

		<input type="hidden" name="submitted" id="submitted" value="true" />
		<button type="submit"><?php _e( 'Update Post', 'framework'); ?></button>

	</fieldset>

</form>

Como puedes ver en el código, hemos asignado nuestro valor de entrada Título de la publicación para generar la variable del título, y dentro de nuestra área de texto hemos generado nuestra variable de contenido, pero como notaste, cuando hacemos clic en Actualizar publicación, no sucede nada, esto se debe a que aún no hemos manejado esto y lo haremos ahora.

Tendremos que volver a nuestro archivo template-insert-posts.php y vamos a copiar nuestra validación del formulario PHP a nuestra plantilla de edición. Ya que hemos copiado la validación del formulario, haremos algunos cambios e insertaremos código. Necesitamos recuperar la variable current_post en nuestra validación de formulario, y lo hacemos estableciendo una variable global e insertamos esto por encima de nuestra validación:

1
2
3	global $current_post;

Después, haremos una modificación en nuestra matriz post_information. A medida que estamos actualizando nuestra publicación, tenemos que asegurarnos de que va a actualizar la publicación correcta y no todas las publicaciones, lo hacemos insertando un parámetro ID en nuestra matriz de post_information. Hacemos nuestra matriz de la siguiente manera:



$post_information = array(
	'ID' => $current_post,
	'post_title' =>  wp_strip_all_tags( $_POST['postTitle'] ),
	'post_content' => $_POST['postContent'],
	'post_type' => 'post',
	'post_status' => 'pending'
);

Por último, haremos una última modificación que garantizará que estamos actualizando la publicación y no insertando una nueva publicación. Hacemos esto simplemente cambiando la función que usamos, en lugar de usar wp_insert_post, usaremos wp_update_post. Haciendo nuestro código final de la siguiente manera:

1
2
3	$post_id = wp_update_post( $post_information );

Y eso es todo lo que debemos hacer para editar las publicaciones a través del front-end. Por último, en esta parte de la miniserie veremos cómo eliminar publicaciones.

Paso 3 Eliminar nuestras publicaciones

Ahora hay muchas formas diferentes de eliminar las publicaciones, y ha habido muchas discusiones diferentes sobre cuál es el mejor método para lograrlo, para algunas personas este es probablemente el método incorrecto, pero creo que funciona perfectamente bien en esta situación. Usaremos la función get_delete_post_link.

Pasaremos esta función a nuestro Enlace de Eliminación, junto con el ID de la publicación, así:

1
2
3	<a href="<?php echo get_delete_post_link( get_the_ID() ); ?>">/Delete</a>

Y es así de simple eliminar las publicaciones a través del front-end. Simplemente ampliaremos esto un poco para asegurarnos de que no tendremos ningún error y notificaremos un poco más al usuario que estamos eliminando una publicación. Hacemos esto insertando una función de confirmación muy simple a nuestro onclick, de la siguiente manera:

1
2
3	<a onclick="return confirm('Are you sure you wish to delete post: <?php echo get_the_title() ?>?')" href="<?php echo get_delete_post_link( get_the_ID() ); ?>">Delete</a>

Por último, ajustaremos una condición alrededor de nuestro enlace de eliminación, para asegurarnos de que solo podemos eliminar una publicación si el estado actual de la publicación no está ya en la Papelera. Hacemos esto de la siguiente manera:



<?php if( !(get_post_status() == 'trash') ) : ?>

	<a onclick="return confirm('Are you sure you wish to delete post: <?php echo get_the_title() ?>?')"href="<?php echo get_delete_post_link( get_the_ID() ); ?>">Delete</a>

<?php endif; ?>

¡Y eso es todo! Puedes enviar publicaciones a la Papelera. En caso de que tengas curiosidad sobre el método alternativo de cómo eliminar publicaciones, lo explicaré muy brevemente.

El método es muy simple para editar publicaciones, pasando el ID de la publicación a la URL junto con la adición de un parámetro delete y verificando si el valor de este parámetro es verdadero, y si es verdadero, aprobar la función wp_trash_post al enlace. Esto es muy simple y muy eficaz, pero en nuestra situación actual la función get_delete_post_link funciona perfectamente bien.

Conclusión

¡Esa es la Parte 2 completa! Ahora podemos insertar publicaciones, editar y eliminar publicaciones a través del front-end. Hemos tratado mucho contenido hasta ahora, y en la siguiente parte profundizaremos un poco más.

Dentro de la siguiente parte, veremos los campos personalizados y más.

Me gustaría darte un ENORME gracias por dedicarle tiempo a leer mi tutorial, espero haberte ayudado. No dudes en dejarme comentarios y haré todo lo posible para ayudarte y responderte; si no, puedes comunicarte conmigo directamente a través de mi sitio web: www.VinnySingh.co o en Twitter @VinnySinghUK

¡Mantente atento y no te pierdas la parte 3!