Tutorial de WordPress: Cómo crear un complemento de testimonios

Artículo escrito por:
  • WordPress
  • Actualizado: Ago 12, 2013

Entonces, aquí estamos para nuestro segundo tutorial semanal en WordPress. Hemos aprendido a crear un sitio WP de desplazamiento infinito y plugin de cambio de página en el pasado. Hoy aprenderemos un poco más sobre los tipos de publicaciones personalizadas y cómo cargar sus datos.

Esta función es realmente importante en su sitio, ya que le permite mostrar a las personas que lo recomiendan. Los testimonios son una gran prueba social de su genialidad. Y no necesitas complementos complejos ni mucho código para lograr esto, ya que verás que con un par de archivos puedes crear una presentación atractiva para tus testimonios.

¡Comencemos entonces!

Zip e Instalar

Si tiene prisa por comprobar esto, puede descargar e instalarlo.

Deberá agregar algunos datos luego, agregando algunos testimonios utilizando los nuevos testimonios que puede ver en su panel de control:

lista de testimonios

Luego puedes usar el código corto para cargar eso:

[testimonials rand = 0 max = 5]

Cuando hayas agregado ese código, verás algo como esto en tu página:

principales testimonios

Ahora veremos cómo crear y explorar esto (agregando más funciones y cambiando la apariencia).

Lo esencial

Como hemos dicho antes, deberás agregar el encabezado de metadatos, crea el archivo de complemento y llama a tus scripts. En pocas palabras, creará una nueva carpeta bajo su wp-content / plugins con el nombre de su complemento, y luego creará un archivo con el mismo nombre que la carpeta para que sea su archivo principal de complemento.

Una vez que haya hecho esa copia y pegar de la siguiente manera:

<? php / * Nombre del complemento: Testimonios Descripción: Mostrar testimonios de clientes. Versión: 1.0 Autor: Web Revenue Blog Licencia: GPL2 * / // en cola de comandos y función de estilos plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('flexslider', plugins_url ('js / jquery.flexslider-min.js', __FILE__), array ('jquery'), '2.2', false); wp_enqueue_script ('testimonials', plugins_url ('js / testimonials.js', __FILE__), array ('jquery'), '1.0', false); wp_enqueue_style ('flexsliderCSS', plugins_url ('css / flexslider.css', __FILE__), false, '2.2', 'all'); wp_enqueue_style ('testimonialsCSS', plugins_url ('css / testimonials.css', __FILE__), false, '1.0', 'all'); } add_action ("wp_enqueue_scripts", "plugin_scripts");

Esto es lo que estamos haciendo:

  • Decirle al WP cuál es el nombre de nuestro complemento, autor, qué hace
  • Creación de una función, donde insertamos scripts normales (como jQuery) y scripts personalizados (como flexslider), y hojas de estilo
  • Decirle al WP que cargue la función de secuencias de comandos en su llamada de secuencias de comandos predeterminada, para que realmente se carguen en las páginas

Todo está muy bien, pero no olvides crear los archivos bajo / js y / css. Solo puede descargarlos en nuestro contenido de demostración para que no tenga que cavar mucho para encontrar los archivos de flexslider.

Ahora que tenemos todas las cosas básicas en su lugar, podemos comenzar la parte divertida.

El tipo de mensaje personalizado

Por defecto, WordPress tiene tipos de publicaciones, páginas y publicaciones comunes de 2. Pero también tiene muchos tipos de publicaciones internas (como archivos adjuntos), por lo que la definición de "tipo de publicación" es: Todos los tipos de datos que necesita almacenar.

Como nuestro complemento creará una nueva funcionalidad, WP no tiene un lugar integrado para almacenar eso, por lo que necesitamos crearlo. No tengas miedo pequeño saltamontes, es bastante simple, puedes usar este código:

// la magia negra para crear la función de tipo de publicación create_post_type () {register_post_type ('testimonials', // nueva matriz de tipo de publicación ('labels' => array ('name' => __ ('Testimonials'), 'singular_name' => __ ('Testimonial')), 'public' => true, / * El tipo de publicación es para uso público. Esto se incluye en la parte frontal y en wp-admin. * / 'Support' => array ('title ',' editor ',' thumbnail ',' custom_fields '),' hierarchical '=> false)); }

Aquí solo estamos usando la función register_post_type () para decirle a WP "Hola amigo, necesitamos almacenar este tipo de datos, por favor, prepárate para recibirlos".

También le decimos que este tipo de datos se denominan "testimonios", que deberían estar disponibles para el acceso público (para que realmente creen un nuevo elemento de menú en su panel de control), los campos que necesitamos, y si es jerárquico. o no (como las páginas que tenemos las páginas padre e hijo).

Entonces necesitamos llamarlo cada vez que cargamos WordPress. Este gancho lo hará:

add_action ('init', 'create_post_type');

Los campos personalizados

Ahora nuestro tipo de publicación personalizada tiene el título (nombre de la persona), el contenido (el testimonio de la persona), una imagen (imagen destacada), pero le falta un enlace, ya que si la persona es lo suficientemente buena como para hablar de usted, al menos debe vincular a su sitio, ¿verdad?

Podríamos hacer esto con los campos personalizados habituales, pero es mucho mejor tener un campo "cerrado", donde el usuario no necesita escribir el nombre del campo, y también donde puede agregar algunas reglas de validación.

En primer lugar, debemos crear un nuevo metabox, que son los paneles que tiene en su área de edición posterior, cada pequeño panel es un metabox. Esta función lo creará y lo llamará:

// agregando la función de campo de meta caja URL add_custom_metabox () {add_meta_box ('custom-metabox', __ ('Link'), 'url_custom_metabox', 'testimonials', 'side', 'low'); } add_action ('admin_init', 'add_custom_metabox');

La función add_meta_box () requiere estos parámetros:

  1. ID - El identificador único para ello. Puede usar cualquier cosa aquí como "unicorn-eating-rainbow" o "testimonial-link". Cualquier cosa que pueda ser usada internamente.
  2. Título - ¿Qué se mostrará al usuario? Aquí es importante usar la función __ (), es la función que permite a los usuarios de idiomas extranjeros traducir su complemento con archivos .po (sin editar archivos de complementos)
  3. Devolución de llamada: la función en la que tiene el contenido real del metabox
  4. Tipo de publicación: en nuestro caso, queremos que sea visible solo para testimonios
  5. Contexto - Donde en la página quieres mostrarlo
  6. Prioridad: si debe ser anterior a otros elementos de la misma posición o después de ellos.

Ahora necesitamos crear la función url_custom_metabox (), ya que la hemos llamado.

// HTML para la función de área de administración url_custom_metabox () {global $ post; $ urllink = get_post_meta ($ post-> ID, 'urllink', verdadero); // validando! if (! preg_match ("/ http (s?): ///", $ urllink) && $ urllink! = "") {$ errors = "Esta URL no es válida"; $ urllink = "http: //"; } // envía un mensaje de URL invlid y agrega http: // al campo de entrada if (isset ($ errors)) {echo $ errors; }?> <p> <etiqueta para = "siteurl"> URL: <br /> <input id = "siteurl" size = "37" name = "siteurl" value = "<? php if (isset ($ urllink) ) {echo $ urllink;}?> "/> </label> </p> <? php}

Ok, ahora traduciendo esto al inglés simple:

  • Se llama la variable global $ post, por lo que podemos saber cuál es el POSTID del elemento actual
  • Cargamos el valor actual para la URL.
  • Validamos si el valor que insertó el usuario es válido. Si hay al menos una ocurrencia de "http" o "https", el valor es correcto, de lo contrario es válido y necesitamos usar el valor predeterminado
  • Luego mostramos los errores, si hay alguno.
  • Ahora comenzamos el HTML real, agregando el valor predeterminado en el campo de entrada como lo tenemos en el PHP

Después de este punto, debemos guardar lo que el usuario está enviando. Usaremos el enlace "save_post", por lo que cada vez que WordPress guarde una publicación, llamará a esta función:

// guarda la función de datos de campo personalizada save_custom_url ($ post_id) {global $ post; if (isset ($ _ POST ['siteurl'])) {update_post_meta ($ post-> ID, 'urllink', $ _POST ['siteurl']); }} add_action ('save_post', 'save_custom_url');

Aquí solo verificamos si hay algún dato de publicación llamado "enlace de sitio", que es nuestro nombre de campo. Si hay un enlace de sitio, vamos a guardarlo.

Después de que todo esté en su lugar, aquí está cómo se verá su nueva página de testimonios:

nuevo-testimonio

Cargando nuestros datos personalizados

Ahora necesitamos cargar nuestros artículos, y usaremos la función get_posts (), principalmente porque solo tenemos datos simples, por lo que no necesitamos un bucle WP adecuado (eso agregaría muchas llamadas a la base de datos y realmente no lo hacemos). No lo necesito).

Entonces, primero creamos una función para obtener el enlace de nuestro sitio, si hay alguno.

// devuelve la URL para una función de publicación get_url ($ post) {$ urllink = get_post_meta ($ post-> ID, 'urllink', true); devuelve $ urllink; }

Ahora, podemos iniciar la función de shortcode. Una forma sencilla de predeterminar y validar los datos de shortcode es crear los atributos para el bucle como una matriz, por lo que podemos agregar nuevos elementos a medida que los necesitemos, como este:

// registrar el shortcode para mostrar la función de testimonios load_testimonials ($ a) {$ args = array ("post_type" => "testimonials"); if (isset ($ a ['rand']) && $ a ['rand'] == verdadero) {$ args ['orderby'] = 'rand'; } if (isset ($ a ['max'])) {$ args ['posts_per_page'] = (int) $ a ['max']; } // obteniendo todos los testimonios $ posts = get_posts ($ args); // SALIDA HTML} add_shortcode ("testimonios", "load_testimonials");

Como puede ver, tenemos los atributos de shortcode cargados y pasados ​​a la matriz $ args cuando se validan, en el formato que WordPress lo necesita, por lo que podemos cargar publicaciones con ellos.

Ahora necesitamos agregar algún código HTML allí, siguiendo la estructura predeterminada de flexslider. Aquí es cómo se verá:

echo '<div>'; echo '<ul>'; foreach ($ publica como $ post) {// obteniendo la imagen del pulgar $ url_thumb = wp_get_attachment_thumb_url (get_post_thumbnail_id ($ post-> ID)); $ link = get_url ($ post); echo '<li>'; if (! empty ($ url_thumb)) {echo '<img src = "'. $ url_thumb. '" />'; } echo '<h2>'. $ post-> post_title. '</h2>'; if (! empty ($ post-> post_content)) {echo '<p>'. $ post-> post_content. '<br />'; } if (! empty ($ link)) {echo '<a href="'.$link.'"> Visite el sitio </a> </p>'; } echo '</li>'; } echo '</ul>'; echo '</div>';

Espera, pero ¿por qué crearíamos el código HTML dentro de la función PHP? Esto se debe a que, de forma condicional, podemos cargar contenido solo si el usuario ha agregado contenido, por lo que no tendrá etiquetas HTML vacías, a la espera de desordenar su diseño.

¿Qué pasa con la barra lateral?

La mayoría de las personas solo quieren mostrar testimonios en la barra lateral, y este complemento no funcionará muy bien ya que los widgets de texto no procesan códigos cortos. Hay una solución simple para esto, solo agrega esto en tu código:

Add_filter ('widget_text', 'do_shortcode');

Qué es lo siguiente?

Entonces, ¿disfrutaste este tutorial? ¿Qué agregaría como una opción para su código corto testimonial? ¿Tienes alguna idea para futuras publicaciones? Háganos saber usando la sección de comentarios!

Acerca de Rochester Oliveira

Soy un diseñador web y empresario de Itajubá (MG), Brasil. Me encanta escribir sobre temas oscuros y hacer cosas interesantes.