Crear un plugin para marcar posts favoritos

Descubre en este tutorial cómo crear un plugin que permita marcar las entradas favoritas y mostrar un listado de las mismas.

Ya sabes que en Código Genesis puedes marcar tus tutoriales favoritos o más usados para tenerlos a un clic, ¿verdad?

Pues ya son varios los suscriptores que me han preguntado cómo lo hago.

¿A ti también te interesa? Entonces aquí mismo te dejo el código para puedas usarlo o crear tu propia variación.

De hecho, este plugin es una modificación de un código que compartió David Perálvarez en SiliCodeValley (recuerda que si eres suscriptor tienes un descuento).

La idea es sencilla. Se muestra un icono de marcador (arriba a la derecha) solo a los usuarios logueados:

Y una vez que hacen clic, se marca como favorito:

Además, el usuario puede ver todos sus tutoriales guardados en una página dedicada:

¿Empezamos?

Pasos para crear un plugin para marcar posts favoritos

1A. Crea la estructura y el fichero principal del plugin (iconos Font Awesome)

Antes de nada, crea la estructura de carpetas del plugin. Sería algo así:

Una carpeta principal con el nombre del plugin más una subcarpeta llamada CSS y un fichero style.css dentro.

Crea un fichero en la raíz con el mismo nombre que la carpeta principal (en este caso, marcar-favoritos.php) y añade la cabecera del plugin:

<?php
/**
 * Marcar posts como favoritos
 *
 * Plugin Name:       Marcar posts como favoritos
 * Plugin URI:        https://codigogenesis.com/crear-plugin-marcar-entradas-favoritas
 * Description:       Añade el icono de marcador en entradas y muestra listado en un shortcode. Modificación sobre el código del creado por David Perálvarez.
 * Version:           1.0.0
 * Author:            Nahuai Badiola
 * Author URI:        https://codigogenesis.com/
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 * Text Domain:       marcar-favoritos
 */
?>

Y así quedaría la cabecera más el código del plugin:

Dentro del mismo se realizan varias funciones:

• Añadir/eliminar favoritos (asociándolo con los iconos de Font Awesome).
• Crear un shortcode para mostrar las entradas favoritas.
• Encolar los estilos de CSS.

Si tu tema (o un plugin que usas) ya está encolando Font Awesome no tienes que hacer nada más.

Si no es así, tienes dos opciones.

Opción 1: añadir este snippet al fichero anterior:

Opción 2: aplicar la opción 1B a continuación.

Si te interesa el rendimiento web te invito a seguir leyendo.

1B. Crea la estructura y el fichero principal del plugin (iconos SVG)

Si en tu instalación de WordPress no usas Font Awesome (ni el tema ni los plugins) no creo que merezca la pena encolar toda la librería (que pesa +100KB).

Es mejor que descargues los iconos en versión SVG, de Font Awesome u otra librería de iconos, y los guardes dentro de una carpeta del plugin llamada /svg/.

La estructura de carpetas del plugin sería algo así:

En este caso los iconos se llaman bookmark-regular.svg y bookmark-solid.svg. Ya ves que pesan poco más de 300 bytes (la suma 0,7KB), considerablemente menos que la opción de llamar a toda la librería de Font Awesome.

Y así quedaría el código del plugin:

Ya lo tienes, en este caso cargas directamente los iconos SVG en lugar de la librería Font Awesome.

Lo único que tendrías que adaptar es la URL de tu web (en lugar de https://tuweb.com) y el nombre del icono (en lugar de bookmark-regular.svg o bookmark-solid.svg).

2. Crea el style.css

Una vez que tienes toda la parte funcional del plugin necesitas dar los estilos para que el icono se muestre a la derecha del título.

Para ello, crea el fichero style.css con las siguientes líneas:

Obviamente, puedes modificar lo que necesites para ajustarlo a tus necesidades.

Si usas la versión con iconos SVG (opción 1B) utiliza este CSS en su lugar:

Si te fijas, en lugar de usar color: utilizas filter: para dar el color a los iconos. Puedes usar esta herramienta para introducir el color en hexadecimal y que te dé el resultado para aplicar el filtro.

3. Añade el shortcode para mostrar las entradas favoritas

Por último, si quieres añadir una página que muestre los posts favoritos del usuario, añade el shortcode:

[favorite_posts]

Ya lo tienes. Solo te queda enlazar esa página en el menú (o donde quieras) para que el usuario puede acceder de forma sencilla.

Conclusiones

Ahora ya sabes cómo crear un plugin que permita al usuario marcar sus posts favoritos y verlos en formato de lista.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉

Tutoriales relacionados

• https://codigogenesis.com/favoritos/
• https://codigogenesis.com/alianza-ned/