Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Creative Coding

Publicación a través del Front-End: Insertar

by
Read Time:8 minsLanguages:

Spanish (Español) translation by Juan Franco (you can also view the original English article)

Hoy, comenzaremos la miniserie sobre cómo insertar publicaciones a través del front-end. Cubriremos una variedad de aspectos diferentes en este tutorial, comenzando con la validación de formularios e insertando publicaciones. Entonces, ¡preparémonos y comencemos!


Introducción

Nuestro objetivo después de completar esta miniserie debe permitir al usuario enviar publicaciones a través del front-end, junto con la edición y el envío de la publicación a la papelera; todo ello sin estar en el Dashboard de WordPress. Estos métodos se pueden usar en un tema o en un complemento muy adaptables para lograr presentaciones muy avanzadas y complejas.

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

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


Paso 1 Creación de un formulario

Comenzamos creando un formulario que permitirá al usuario ingresar los detalles con respecto a la creación de una publicación. Mientras construimos esto en un tema, comencemos por crear una nueva plantilla de página y llamémosla template-insert-posts.php. Luego comenzaremos a construir nuestro formulario e insertaremos algunas etiquetas y campos de entrada para el título de la publicación y el área de texto para el cuerpo:

Lo que acabamos de crear es un formulario muy sencillo que tiene una entrada de texto para que el usuario introduzca el título y un área de texto para el contenido del post.

Ahora que tenemos nuestros fundamentos establecidos, tendremos que realizar alguna validación de formulario para asegurarnos de que estamos obteniendo el contenido correcto y no tener ataques maliciosos contra nuestros envíos.


Paso 2 Validación del formulario

Utilizaremos dos formas diferentes de validación. Utilizaremos el jQuery Validation Plugin, junto con la validación tradicional de PHP. Comencemos con el lado jQuery de la validación primero e inicialicemos nuestro script de validación. Nos aseguraremos de registrar y pondremos en lista los scripts dentro de nuestras funciones.php archivo. Junto con esto, crearemos un archivo JavaScript en blanco donde manejaremos todos nuestros jQuery personalizados; recuerde registrar y poner en lista este archivo para la inicialización. Esto debería verse algo como esto:

Genial, hemos registrado y enlistado todos nuestros scripts necesarios. Ahora abriremos nuestro archivo jQuery personalizado y comenzaremos a inicializar nuestro complemento de validación jQuery; abriremos nuestro archivo JavaScript en blanco y escribiremos la siguiente línea de código para crear nuestra validación jQuery:

Todo lo que hemos hecho aquí es obtener el ID de nuestro formulario y aplicar el método de validación a este. Ahora que tenemos esto en su lugar, volveremos a nuestro archivo template-insert-posts.php y nos aseguraremos de haber puesto la clase requerida en los campos de entrada que son obligatorios.

Toda la validación de jQuery está en su lugar, pasemos a la validación de PHP.

Nuestra validación debe garantizar que ingresamos un título, y si la validación de jQuery falla, entonces volverá a la validación de PHP. Hacemos esto creando primero una variable PHP para almacenar el mensaje de error y luego creando algunas pruebas condicionales.

Inicialmente probamos si el usuario ha enviado el formulario, y luego probamos si nuestra variable de mensaje de error PHP está en blanco. Necesitamos insertar el siguiente código que hace esto justo encima de nuestro <?php get_header(); ?>:

Nuestra validación de PHP está en su lugar, nos aseguraremos de que el valor que estamos enviando es el mismo valor que el usuario ha ingresado, y lo hacemos insertando el siguiente código en nuestro campo de entrada postTitle:

También tenemos que hacer lo mismo para nuestra área de texto, pero funciona de manera ligeramente diferente; en lugar de establecer un valor, insertamos el siguiente código dentro de nuestras etiquetas de área de texto postContent:

Finalmente, debemos asegurarnos de que estamos enviando nuestro mensaje de error, y lo hacemos comprobando si nuestra variable de mensaje de error está vacía. Si nuestra variable no está vacía, entonces la salida del mensaje no generará nada. El siguiente código logra esto:

Ahora que hemos configurado nuestro formulario con validación, podemos pasar a insertar el contenido en una publicación. Sigamos adelante...


Paso 3 Enviar una publicación

Ahora enviaremos los datos de nuestro formulario a una publicación real. Hacemos esto usando la función de WordPress wp_insert_post. Esta función nos permite insertar posts, por lo que estaremos utilizando esto a nuestro favor.

Comenzamos creando primero una variable para contener todos nuestros diferentes elementos. Puede definir un montón de elementos diferentes y puede leer en el Codex de WordPress. Inserte el siguiente código, justo debajo del código de validación del formulario:

El código que acabamos de insertar crea una matriz y asigna valores a los diferentes elementos. Para el elemento post_title, PUBLICAMOS nuestro valor postTitle y PUBLICAMOS nuestro postContent a nuestro elemento post_content.

También configuramos nuestro tipo de publicación para publicar, ya que enviaremos el tipo de publicación predeterminado, pero puede pasar cualquier tipo de publicación personalizada a este campo. Finalmente, estamos configurando el estado de la publicación para que esté pendiente para que el administrador pueda confirmar la publicación antes de publicarla.

Luego ejecutamos la función wp_insert_post y pasamos nuestra matriz con todos nuestros elementos y los datos asignados a ellos.

¡Eso es todo! Ahora podemos agregar publicaciones a través del front-end, pero aún no hemos terminado. Tenemos algunos problemas de seguridad que debemos compensar. Comenzamos insertando un wp_nonce_field. Si no sabes qué es un campo unico, el Codex de WordPress lo explica perfectamente:

El campo unico se utiliza para validar que el contenido del formulario proviene de la ubicación en el sitio actual y no en otro lugar.

Esto nos ayudará contra cualquier problema de seguridad y evitará cualquier ataque malicioso. Todo lo que tenemos que hacer es insertar el siguiente código justo antes de nuestro botón de envío:

Junto con esto, editaremos nuestra validación de formulario para asegurarnos de que solo estamos enviando contenido una vez que se haya confirmado que el campo unico está enviando el contenido desde el sitio web, lo hacemos reemplazando nuestra declaración condicional de validación. Su código final con la validación y el envío de los datos debe ser el siguiente:

Por último, solo por un extra estableceremos una redirección una vez que el usuario haya enviado la información, para que los usuarios no puedan pulsar enviar varias veces y seguir introduciendo los mismos datos en nuestros posts. Lo haremos en un nivel muy básico.

Como wp_insert_post devuelve un ID, lo usaremos a nuestro favor y devolveremos el ID a una variable que usaremos para asegurarnos de que no estamos redirigiendo si no se creó ninguna publicación.

Haremos esto asignando nuestra función wp_insert_post a una variable, de la siguiente manera:

Luego ejecutaremos una instrucción condicional para redirigir solo si tenemos un ID de publicación, luego usaremos la función de redirección de WordPress y pasaremos la home_url a esto. El código que insertará es el siguiente:

Todo hecho...


Conclusión

Esos son los conceptos básicos y los fundamentos sobre cómo insertar publicaciones a través del front-end. ¡Hemos abarcado mucho, creando primero un formulario, validando el formulario y enviando nuestros datos a una publicación pendiente!

Dentro de la siguiente parte, profundizaremos un poco más en la edición y eliminación de publicaciones a través del front-end, lo que se vuelve un poco más complicado, ¡pero puede ser muy útil!

Me gustaría decir un ENORME agradecimiento por pasar el tiempo para leer mi tutorial, espero que haya ayudado. Por favor, siéntase libre de dejar comentarios y haré todo lo posible para ayudarlos y responderlos, si no, siempre puede contactarme directamente a través de mi sitio web: www.VinnySingh.co o Twitter @VinnySinghUK

¡Estar atentos a la Parte 2!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.