El otro es Lite Speed Cache, pero solo lo uso en servidores LiteSpeed, en clientes que tengo alojados con Raiola Networks, este plugin está totalmente pensado para estos servidores y creo que no tiene rival.

Para otros servidores como Apache, me decanto por WP Fastest Caché, tanto por su facilidad de configuración, como por sus resultados.

Ya es el tercer plugin que reseño en la web, después de W3 Total Cache y WP Super Cache, por lo que para hacer la introducción sobre qué es el cacheo de una web, voy a hacer un copia/pega del post anterior:

¿Qué es cachear una web?

Si tenemos una web en WordPress compuesta por su plantilla y diversos plugins, debemos ser conscientes de que cada vez que un usuario visita una de nuestras páginas comienza una serie de procesos internos en el servidor donde se ejecutan funciones, se realizan consultas a la base de datos y demás tareas hasta que este genera el archivo HTML final el cual es mostrado al usuario.

El cacheo básicamente consiste en guardar temporalmente esos archivos HTML resultantes de cada una de nuestras páginas para ser mostrados al siguiente usuario que solicite la misma página. De esta forma, el servidor no tiene que volver a ejecutar de nuevo todo el proceso para componer la página, acelerando considerablemente la velocidad en la que esta es mostrada al usuario.

Para llevar a cabo esta tarea, vamos a ver cómo configurar el plugin WP Fastest Cache, el cual está muy bien posicionado en el repositorio de WordPress con más de 1.000.000 de instalaciones activas y una valoración promedia de 5 estrellas.

Para hacer la prueba, tengo un WordPress de pruebas en mi servidor, en él tengo instalado Genesis con el tema Simple Genesis, y unos cuantos plugins (WooCommerce, Conditional Discounts for WooCommerce por ORION, Cookie Notice, Pinpoint Booking System y Genesis Connect for WooCommerce).

Haciendo un test con la herramienta Pingdom Tools, sin tener la web cacheada, me da estos resultados:

La verdad es que son buenos resultados, todavía no hay mucho contenido en la página y las plantillas de Genesis son muy ligeras, pero seguro que algo podemos mejorar con el cacheo de la web.

Tras instalar WP Fastest Cache, vamos a su configuración y empezamos activando las primeras opciones:

La primera es activar el sistema de caché, por supuesto.

Precargar: Las páginas no se cachean hasta que no son visitadas por alguien, pero si queremos hacer pre-cacheado de toda la web antes de que empiece a tener visitas, podemos activar esta opción, eso sí, aumentará bastante la carga del servidor y el rendimiento general de la web podría verse afectado mientras dura el proceso.

Usuarios conectados: Esto hará que los usuarios conectados también reciban la versión cacheada de la web, incluso administradores, editores, etc. En webs de membresía donde hay secciones específicas para subscriptores, puede ser un problema mostrarles la versión cacheada, ya que si subimos algún contenido a estas secciones, ellos no lo verán hasta el siguiente ciclo de cacheo.

Móvil: Esta opción solo se activa para webs que tienen 2 versiones (escritorio y móvil), para plantillas responsive que se adaptan al tamaño de pantalla no debe activarse.

Vaciar la caché al añadir o modificar contenidos

Veamos ahora qué opciones tenemos cuando añadimos o modificamos contenido en la web:

Nueva entrada: Cuando redactamos una nueva entrada tenemos la opción de vaciar la caché, ya sea para todo el sitio o sólo para la página de inicio y páginas de archivo.

Yo recomiendo la segunda opción. Cuando publicamos una entrada, mientras dura el ciclo de cacheo actual, esta no será mostrada en la sección de nuestro blog ni en los listados de categorías o etiquetas, ya que estas páginas también se cachean.

Así cuando publicamos una nueva entrada, podremos vaciar la caché de sólo estas páginas para que la nueva entrada sea visible.

Al igual que con las nuevas entradas, también podemos aplicar el mismo procedimiento al actualizar una entrada:

Opciones de minimización

El plugin también permite opciones de minimización. Entre ellas:

• Minimizar HTML y CSS: Reduce el código HTML y CSS eliminando espacios, líneas vacías, comentarios…
• Combinar CSS y JS: Recopila todos los archivos CSS y JS y los reunifica en un único archivo. Esta opción es más delicada con según qué plantillas o constructores visuales como Elementor, Divi, Fusion Builder… Si queremos activar estas opciones, debemos ver cómo se comporta la web una vez aplicados, y si detectamos errores en el diseño o efectos que dejan de funcionar, dejarlo desactivado.

Compresión y caché de navegador

Gzip: Esta función depende de que el servidor soporte la compresión Gzip, si la activamos, reduciremos el tamaño de los archivos HTML enviados por el servidor al navegador del usuario, mejorando la velocidad de carga.

Caché del navegador: Activando esta opción, forzaremos a que el navegador descargue la mayoría de archivos estáticos de las páginas visitadas por nuestros usuarios, tales como imágenes, css, js… De esta forma la próxima vez que visiten la web, el tiempo de carga será considerablemente menor.

Desactivar los emojis: Existe un archivo de emojis que reemplaza expresiones como:

:)  ;)  :(

en emojis gráficos Si no vamos a hacer uso de estos emojis, podemos desactivarlo para ganar en tiempo de carga.

Después de aplicar todas estas opciones, volvemos a hacer un test en Pingdom Tools y nos devuelve:

Como podemos apreciar hay una mejora, no muy significativa porque los datos ya eran buenos, pero si tuvieramos unos datos iniciales peores, como un tamaño de página de 3MB y un tiempo de carga de 3 segundos, la mejora sería mucho más apreciable.

Además, gracias a la caché, el servidor funcionará mucho más desahogado, sin tener que realizar tantos procesos ni consultas a la base de datos en cada visita.

Borrar la caché

En la siguiente pestaña de opciones tenemos la posibilidad de vaciar la caché almacenada en el momento que queramos.

Si hemos modificado algún archivo CSS o JS, podemos regenerar de nuevo el minimizado de CSS/JS para que los cambios surtan efecto.

Otra opción disponible es la de establecer Reglas de límite, pudiendo indicar cada cuánto tiempo debería regenerarse la caché de todo nuestro sitio, o de una página concreta. Aquí depende de la velocidad a la que actualices tu web, si subes contenidos a diario, puedes establecer el límite de caché en unas horas, pero si actualizas de vez en cuando (1 o 2 veces pos semana), puedes mantener la caché unos días sin problema.

Excluir

Desde este apartado podremos excluir manualmente cualquier página o entrada del cacheo.

Compatibilidad con WooCommerce

Páginas de WooCommerce: WP Fastest Caché es totalmente compatible con WooCommerce, tanto la página del Carrito (Cart), Pago (Checkout) o de Mi Cuenta (My Account) son reconocidas y excluidas automáticamente del sistema de cacheo.

Widget de carrito: Si utilizas el método AJAX para actualizar el carrito, el cacheo no debe suponer ningún problema. Pero si usas PHP para actualizar el carrito, este genera una cookie que debemos excluir del cacheo como se muestra en la imagen:

Por último, WP Fastest Cache también es compatible con los principales servicios CDN como Photon o Cloudflare.

El plugin tiene muchas más opciones en su versión PRO, pero para una configuración estándar, su versión gratuita es más que suficiente para la mayoría de los casos.

Y lo mejor es que poco más de 5 minutos, puedes poner en marcha todo el sistema de cacheo de tu web sin detenerte en muchos tecnicismos y funciones avanzadas que no tienes por qué conocer.

Si te ha gustado el artículo, considera compartirlo

En ocasiones necesitamos añadir un enlace dentro del menú principal en el administrador de WordPress, ya sea hacia un sitio externo o a algún lugar dentro de la web principal.

Imaginemos que desarrollamos una web para un cliente, con acceso algo limitado dentro del administrador (permisos de editor o autor), y queremos ponerle un enlace fácil para volver al «front-end» de la web.

Para ello, añadimos este código al archivo de funciones (functions.php) de nuestro tema activo, o bien en nuestro propio plugin de funciones:

//Enlace a personalizado en menú admin
function enlace_menu_admin(){
    add_menu_page('enlace_panel', 'Volver a la Web', 'read', '', '', 'dashicons-text', 1);
}
add_action('admin_menu', 'enlace_menu_admin');

function enlace_menu_admin_funcion(){
    global $menu;
    $menu[1][2] = "https://tudominio.com";
}
add_action('admin_menu', 'enlace_menu_admin_funcion');

Y es que para crear plugins «complejos», con una estructura de directorios y varios archivos de funciones, lo ideal es hacerlo de la forma convencional (subiéndolo al directorio /plugins de tu instalación). Pero existen casos en los que solo necesitas añadir unos cuantos snippets personalizados, como un custom posts, taxonomías, algunos filters…

Para estos casos lo ideal es crear un plugin de funciones «indesinstalable».

Los plugins imprescindibles o Must Use Plugins, son archivos individuales que se alojan en el directorio mu-plugins (sin subdirectorios).

Su declaración es muy sencilla, basta con comentar al principio las etiquetas:

<?php
/*
Plugin Name: Additionals Functions by Gestionatuweb
Author: Dani Sánchez, Gestionatuweb
Author URI: https://danisanchez.net/
Version: 1.0
Description: Funciones adicionales para el proyecto.
*/

Se pueden especificar más tags como Plugin URI, Licence, etc.

Cualquier función que creemos en el mu-plugin, tendrá el mismo efecto que si la creamos en el archivo de funciones del theme (functions.php) o en un plugin corriente, con la diferencia de que este plugin no se puede desinstalar desde el panel de WordPress, ni siquiera por el administrador.

Solo sería posible su eliminación desde el FTP.

Si no conocías esta forma de crear plugins, seguramente te será muy útil en tus futuros proyectos.

Nos vemos en el siguiente post

¿Para qué sirve un campo personalizado?

Por defecto, en una entrada o página de WordPress tenemos dos campos principales para agregar información, el campo de título y el editor donde se redacta el contenido principal. Pero adicionalmente podemos agregar otro tipo de campos para mostrar en secciones especificas de nuestra plantilla o simplemente como información que solo veremos desde el modo de edición.

Por ejemplo, podríamos crear un campo para poner el precio de un vehículo y llamar a ese dato en una ubicación especifica de nuestra plantilla. O podríamos crear un campo personalizado no visible al público, pero que guarde información importante sobre el vehículo, como información del anterior propietario, historial de revisiones etc.

Advanced Custom Field

WordPress tiene su propio sistema de creación de campos personalizados, pero es algo confuso y poco intuitivo, por lo que muchos desarrolladores optamos por utilizar el plugin Advanced Custom Field, que permite crear campos personalizados de múltiples tipos y llamarlos con sencillas funciones.

Una vez instalado, Advanced Custom Field organiza los campos en grupos, por si necesitas crear diferentes campos para varios custom posts o páginas concretas, así que lo primero que haremos será crear un Nuevo Grupo de Campos:

Lo primero será darle un título al nuevo Grupo de Campos, por ejemplo «Detalles Vehículos».

Antes de añadir los campos, vamos a ver algunos ajustes importantes del nuevo grupo de campos, para empezar su ubicación.

Ubicación del grupo de campos

Lo que nos interesa es que este grupo de campos aparezca en el modo de edición de Vehículos, siendo irrelevante que aparezca en otros modos de edición como Entradas o Páginas.

Así que definiremos la ubicación en los Post Type que sean igual a Vehículo:

Ajustes del grupo de campos

En el apartado de Ajustes definiremos el estilo del grupo de campos, lo recomendable es utilizar el estilo Estándar (WP metabox) que permite la funcionalidad de arrastarlo y soltarlo en la posición que deseemos. Y hablando de posiciones, la siguiente opción nos permite ubicarlo en la zona de central del modo edición (antes o después del contenido) o en el sidebar (lateral).

Agregando campos

Ahora vamos a agregar los campos que necesitemos:

Vamos a agregar un campo para el precio:

Los parámetros más importantes son la Etiqueta (texto que se mostrará en la página de edición), el Nombre del campo (identificador único sin espacios ni caracateres especiales) y opcionalmente, un campo para las intrucciones. Por ejemplo, para el campo Precio vamos a insertar un campo de tipo numérico, puede que un futuro nos interese ordenar los resultados de una búsqueda de vehículos por su precio y si lo especificamos como una cadena de caracteres (con puntuaciones, símbolos de moneda…), el sistema no sabría ordenarlo correctamente, por lo que solo se introducirán números sin puntuaciones ni signos.

Vamos a añadir un par de campos más, uno para la matrícula (de tipo texto) y otro para observaciones internas (de tipo área de texto):

Una vez definidos todos los campos, publicamos:

Publicar el primer Vehículo

Ya estamos listos para publicar un nuevo vehículo. Como en toda entrada pondremos un título y un texto descriptivo y seleccionaremos su/s taxonomía/s, en este caso «Automóvil»:

En la taxonomía de Extras rellenaremos algunas como: Aire Acondicionado, Dirección Asistida, ABS, etc. Y en nuestros nuevos campos personalizados rellenaremos el precio, la matrícula y las observaciones internas.

Ahora que ya tenemos nuestro nuevo contenido publicado es el momento de crear un Template para mostrarlo en pantalla, pero eso lo veremos en el próximo post

Lo primero, por supuesto es contar con una cuenta de PayPal, así que si no dispones de ella, ábrela en pocos minutos.

Botón de donaciones PayPal con Plugin

Una vez creada nuestra cuenta en PayPal, la forma más cómoda y rápida de crear nuestro botón de donaciones es através de un plugin, en concreto usaremos PayPal Donations, un plugin gratuito y de código abierto.

Una vez instalado y activado, nos dirigimos al menú – Ajustes – PayPal Donations:

1. Configurar la cuenta

Insertamos nuestra dirección de correo de PayPal y seleccionamos la moneda en la que queremos recibir los pagos:

2. Ajustes opcionales

En nuestra cuenta de Paypal es posible crear plantillas de página de pago adaptadas según el tipo de pago que se vaya a realizar, por ejemplo puedes personalizar una página para pagos de tipo ventas, de tipo suscripción o de tipo donaciones. Si la hemos definido podemos especificarla en el campo «Estilo de página«, si no se especifica, se utilizará la página de pago por defecto.

En la página de retorno redigiremos a nuestro usuario a una URL concreta, por ejemplo, una página de agradecimiento.

3. Por defecto

Podemos fijar una cantidad por defecto para el donativo. Si lo dejamos en blanco, será el usuario el que tenga que introducir la cantidad a donar:

Motivo de la donación: Es un texto opcional que aparecerá en la página de pago de Paypal, así como la Referencia, otro campo opcional.

4. Botón de donación

En este apartado seleccionaremos el estilo para nuestro botón, permitiéndonos poder utilizar nuestro propio diseño especificando la URL de la ubicación de la imagen. Asímismo seleccionamos el idioma por defecto y guardamos los cambios.

5. Ajustes avanzados

Algunos ajustes extras que nos ofrece el plugin se centran en la activación o desactivación de estadísticas, estilos CSS del botón, abrir la página de pago en PayPal en una nueva pestaña (para no perder el foco de nuestro sitio web), idiomas, etc. Si no estás seguro de lo que haces, mi recomendación es que lo dejes como está por defecto.

Otra opción interesante es activar el modo Sandbox de PayPal. Para ello necesitas crear una cuenta sandbox en http://developer.paypal.com. Sandbox es una especie de web clon de PayPal para pruebas. En ella, podrás crear cuentas de administrador y de cliente para probar el sistema de pagos en tu sitio web con compras ficticias.

Terminados de configurar los ajustes, podrás llamar a tu botón de donativos en cualquier parte de tu web utilizando el shortcode:

[paypal-donation]

Así mismo disponemos de un widget listo para arrastrar y soltar el cualquier sidebar (lateral, header o footer…)

Botón de donaciones PayPal sin Plugin

La alternativa a usar un plugin es crear nuestro propio botón de Donaciones desde el panel administrador de PayPal y obtener un código HTML que necesitamos pegar en nuestro sitio.

Debido a los cambios que pueda realizar PayPal en su panel de control, es posible que encuentres diferencias entre las capturas del artículo y el estado actual del panel de PayPal.

Para crear un botón de donaciones en PayPal tenemos que acceder al menú «Herramientas – Todas las Herramientas» y localizar el apartado Botones de PayPal.

En el menú derecho seleccionamos Crear nuevo botón

Seleccionamos tipo de botón: Donativos

En el primer paso seleccionamos país, idioma y aspecto del botón:

En el siguiente paso podemos especificar nuestro logotipo para la página de pago, nuestro nombre, un texto opcional para la causa de la donación y si queremos seleccionar uno de los programas con los que PayPal colabora para donaciones. De no ser el caso, indicaremos que no.

En el siguiente paso especificamos la moneda por defecto (EUR), y seleccionaremos si queremos fijar un importe fijo para el donativo o que sea el usuario quien lo especifique. También podemos ofrecerle al usuario la posibilidad de convertirlo en un donativo periódico, que se efectúe mensualmente.

Opciones finales

Las últimas opciones de configuarción se dividen en 4 apartados.

En primer lugar podemos especificar si queremos obtener las direcciones de correo electrónico de los donantes y si queremos permitir a los donantes enviar una nota junto al donativo.

El siguiente apartado hace referencia a las URLs de redirección, una para cuando se completa correctamente un donativo y otra para cuando se produce un error en el mismo.

En esta opción decidiremos si PayPal nos reconocerá por nuestra dirección de correo electrónico de PayPal o por nuestro ID de vendedor. PayPal recomienda utilizar el ID de vendedor, de esta forma nuestra dirección de e-mail no quedará expuesta a posibles bots de SPAM.

Recordemos que a la hora de configurar el plugin PayPal Donations, tuvimos que especificar la dirección de correo de nuestra cuenta de PayPal (no el ID), por lo que crear el botón de donativos de esta forma es una ventaja (a parte de óptimo).

La última opción está destinada a usuarios avanzados o desarrolladores. En resumen, sirve para enviar ciertas variables a un script de nuestro sitio web que procese la información de pago de PayPal, por si el desarrollador quiere hacer alguna función o tarea cada vez que se reciba un pago en el sitio web.

Para terminar, pulsamos el botón Finalizar y obtener código:

Para pegar este código HTML, solo tenemos que irnos a cualquier página o entrada y poner el editor de WordPress en modo HTML:

Si estamos usando el nuevo editor Gutemberg, solo tenemos que añadir un bloque de HTML Personalizado y pegar el código:

O si queremos añadirlo como un widget, usaremos el Widget de HTML Personalizado:

Y eso es todo. ya no hay excusa para no integrar nuestro propio botón de donaciones en nuestro sitio web

¿Sabías que puedes poner un precio distinto a tus productos en WooCommerce según el rol del usuario activo?

Esto abre todo un abanico de posibilidades, sobre todo como reclamo para conseguir nuevos suscriptores, fidelizar clientes, nuevas promociones…

Imagina que quieres incentivar la primera compra de un cliente informándole que todas sus compras futuras tendrán un 10% de descuento. O que has abierto un sistema de suscripción y quieres compensar a tus subscritores con un descuento personalizado.

Y además podrás aplicar el descuento solo en los productos que te interese y para los roles que te interese.

Pero es que además podrás hacerlo gratis, gracias al plugin WC Role Based Price

Su configuración es muy sencilla, una vez instalado tendremos un nuevo menú de opciones en WooCommerce:

En la pestaña de ajustes General, podremos especificar los roles a los que vamos a definir precios distintos respecto del usuario general o visitante.

Al posicionar el ratón sobre el campo Allowed User Roles, se nos deplegará la lista de roles actuales en nuestra instalación.

En el campo Allowed Product Pricing, seleccionamos los campos de precio que queremos añadir a los productos en el modo de edición, como el campo para poner el precio normal y el campo para poner el precio con el descuento.

Además podemos personalizar las etiquetas de estos campos.

Recuerda que puedes crear tus propios roles personalizados, si no sabes cómo hacerlo revisa este post: Cómo crear roles personalizados en WordPress.

Ahora solo tenemos que ir a la edición de un producto y sobre la parte final localizar la sección WC Role Based Price Editor para habilitarlo:

En la columna izquierda veremos los roles que añadimos en los ajustes del plugin para especificar precios diferentes. Solo tenemos que activarlos y especificar tanto su precio normal como su precio promocional:

En el momento que un usuario con rol de Suscriptor acceda al producto, verá el precio normal tachado y su precio promocional:

Pero eso es algo que veremos en otros posts

Las posibilidades pueden ser muchas, por ejemplo, podríamos aprovechar los hooks de WooCommerce para poner en los productos promocionales un texto personalizado «Oferta solo para clientes».

El problema es, que si estamos usando un tema de terceros y este se actualiza, también será actualizado el archivo functions.php y perderemos todas las funciones que hayamos añadido manualmente.

Para evitar esto también tenemos la opción de usar un tema hijo o child-theme.

Aunque también podremos crear nuestro propio plugin de funciones y activarlo en la sección de Plugins como si de un plugin de terceros se tratara. De hecho es lo que se recomienda para agregar funciones que no tienen que ver con la plantilla instalada. Así si algún día decides cambiar la plantilla, tus funciones y configuraciones se mantendrán en tu plugin a parte.

Básicamente consiste en crear un archivo dentro del directorio de plugins de nuestro proyecto, que va a actuar como un archivo de funciones independiente del tema de WordPress, pero que todas las funciones que incorporemos a él funcionarán de igual modo.

Para hacerlo, solamente tenemos que irnos al directorio de plugins de WordPress y crear un nuevo directorio al que llamaremos por ejemplo «mi-plugin».

Ahora dentro del nuevo directorio creamos un archivo .php llamado por ejemplo «mi-plugin.php»:

Lo editamos con nuestro editor de código favorito y vamos añadir algunas líneas comentadas que serán usadas por WordPress para reconocer detalles del nuevo plugin:

 /*
 * Plugin Name:       Nombre de tu plugin
 * Plugin URI:        https://dominio.com
 * Description:       Descripción de tu plugin
 * Version:           1.0
 * Requires at least: 5.2
 * Requires PHP:      8.2
 * Author:            Nombre autor
 * Author URI:        https://author.example.com/
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Update URI:        https://example.com/my-plugin/
 * Text Domain:       nombre-de-tu-plugin
 * Domain Path:       /languages
 * Requires Plugins:  my-plugin, yet-another-plugin
 */

Creo que no hace falta explicar las líneas pues son muy intuitivas. En el momento que guardemos los cambios, si nos dirigimos a la sección de plugins de WordPress, veremos que este ha sido detectado y reconocido por las líneas anteriores que hemos especificado:

Ahora solo tenemos que activarlo y mantenerlo activo para que todo lo que incorporemos a él funcione.

Ya no tenemos que preocuparnos de que nuestro tema se actualice y perdamos cualquier función que hayamos especificado en el functions.php, porque estarán a salvo en nuestro propio plugin de funciones.

Espero que os haya resultado de interés y nos vemos en el siguiente post!

En el último post vimos cómo dar permisos a nuestros usuarios colaboradores para cargar archivos a la Biblioteca de Medios y poder usarlos en sus entradas. Llegados a este punto, puede que nos interese hacer que nuestros colaboradores sólo puedan ver sus propios archivos y los de nadie más.

Esto como siempre podemos implementarlo mediante código en el archivo functions.php o también mediante un sencillo plugin. Vamos a ver ambos métodos, pues cada uno tiene sus ventajas e inconvenientes.

Por un lado, usar código nos obliga a estar al tanto del Códex de WordPress por si en una futura actualización se modifica alguna función, hook o metodología, que haga errar nuestro código. En cambio ganaremos en optimización, pues los plugins que instalamos siempre incluyen archivos, funciones y código que no necesitamos.

El código:

<?php
//Limitar el acceso a la librería solo a tus propios archivos
 function mostrar_solamente_archivos_del_usuario($query){
    $user_id = get_current_user_id();

    if($user_id && !current_user_can('activate_plugins') && !current_user_can('edit_others_posts')){
        $query['author'] = $user_id;
    }
    return $query;
} 
add_filter('ajax_query_attachments_args', 'mostrar_solamente_archivos_del_usuario');
?>

Si optamos por usar el plugin, conviene asegurarnos de que su autor lo actualiza con frecuencia para mantener la compatibilidad con las nuevas versiones de WordPress.

En este caso vamos a usar WP Users Media, que en el momento de escribir este artículo, hace unas 3 semanas que se actualizó, lo cual indica que su autor lo está manteniendo.

Su configuración es muy simple, y una vez instalado y activado nos dirigimos al menú Ajustes – WP Users Media y solo tenemos que marcar los roles a los que aplicar la restricción de ver únicamente sus archivos en la biblioteca de medios:

Si también queremos ampliar esta limitación al administrador (por si existen varios administradores en el sitio web), podemos marcar la opción:

Y eso es todo de momento. Espero que esta nueva serie de Posts ayuden a aquellos que como yo, necesitaban habilitar zonas especiales para que otros usuarios puedan añadir contenido al sitio web.

Un saludo y hasta el próximo post!

Existen multitud de plugin que dan dinamismo y funcionalidad a las galerías, como Jquery Lightbox o la propia que se integra en JetPack.

Pero en este artículo vamos a ver cómo integrar Fuidbox de forma manual, un módulo para galerías WordPress que destaca por su sencillez y elegancia.

En la página principal de Fuidbox podéis ver el efecto aplicado a varias imágenes, las cuales se amplían con un suave zoom al hacer clic y vuelven a su estado inicial haciendo otro clic.

Para integrarlo en nuestra plantilla de WordPress debemos descargar los archivos desde el enlace a GitHub o cdnjs. En el artículo lo haremos desde GitHub.

Una vez dentro de GitHub localizamos el botón Clone or Download y descargamos el módulo Fluidbox en ZIP.

Una vez extraídos los archivos, los que nos interesan se encuentran en la carpeta Dist, donde hay otras dos carpetas: css y js.

Y copiamos los archivos:

• fluidbox.min.css
• jquery.fluidbox.min.js

Tanto el archivo css como el JavaScript debemos copiarlos en la plantilla de nuestro proyecto web, cada uno dentro de su sub-carpeta corresponiente (/css para el archivo de estilos y /js para el JavaScript). Muy importante que estén en las rutas indicadas ya que vamos a hacer referencia a ellas más adelante y no funcionarán si los archivos se encuentran en otro sitio. Ahora creamos un nuevo archivo al que llamaremos por ejemplo: iniciar-fluidbox.js. Copiamos dentro el siguiente código y lo guardamos también dentro de la carpeta /js en nuestra plantilla principal, junto al jquery.fluidbox.min.js.

2. Código javascript para iniciar Fluidbox.

$ = jQuery.noConflict();

$(document).ready(function(){
    $('.gallery a').each(function(){
        $(this).attr({'data-fluidbox' : ''});
    });
 
    if($('[data-fluidbox]').length > 0){
        $('[data-fluidbox]').fluidbox();
    }
});

Esto hará que el efecto Fluidbox se aplique a todos los elementos <a href> dentro de la clase .gallery que es la usada por las galerías WordPress, con lo cual se aplicará a cada una de las imágenes.

Seguidamente accedemos al archivo functions.php de nuestra plantilla y más o menos al final del código añadimos la siguiente función para llamar tanto al css de fluidbox, como a los JavaScript creados.

Código PHP para el archivo functions.php

<?php
    function cargar_fluidbox(){
        wp_enqueue_style("fluidboxcss", get_template_directory_uri()."/css/fluidbox.min.css", array(), "2.0.0");
        wp_enqueue_script("fluidboxjs", get_template_directory_uri()."/js/jquery.fluidbox.min.js", array(), "2.0.0", true);
        wp_enqueue_script("iniciarfluidbox", get_template_directory_uri()."/js/iniciar-fluidbox.js", array(), "1.0.0", true);
    }
    add_action("wp_enqueue_scripts", "cargar_fluidbox");
?>

Y eso es todo. Ahora tus galerías deberían disfrutar del efecto Fluidbox.

Si no te funciona, revisa que todos los nombres de archivos estén correctos y en las rutas especificadas anteriormente. Además comprueba que las imágenes de la galería apunten a Archivo multimedia, de lo contrario es posible que no funcionen.

Si tienes que desarrollar una web donde los clientes puedan solicitar una reserva en un día o período de tiempo determinado, necesitas implementar un sistema de reservas. En este artículo veremos un plugin sencillo que te hará la vida más fácil.

Se llama Booking Calendar del desarrollador WpDevArt.

Una vez instalado se nos añadirá un nuevo menú al menú principal de WordPress, Booking Calendar con algunos apartados.

Booking Calendar tiene una versión FREE suficiente para implementar sistemas básicos de reservas, y una versión PREMIUM con algunas funcionalidades más, como la posibilidad de editar el diseño, editar reservas a mano o implementar sistemas de pago on-line. La licencia para un sitio cuesta a día de hoy (17-07-2017) unos 60$, por si os interesa para vuestra web o tenéis que presupuestar el trabajo a un cliente.

El procedimiento es muy sencillo, desde la pantalla principal de Booking Calendar podemos crear nuestros calendarios. Por defecto ya tenemos uno de ejemplo con un shortcode que es lo que tenemos que pegar en la página donde queremos que aparezca el calendario.

Añadir un nuevo calendario.

Vamos a añadir un nuevo calendario haciendo clic en Add Calendar. Vamos a imaginar que estamos desarrollando la web para un Hotel u Hostal y queremos agregar un Calendario de Reservas en la página de habitaciones dobles.

Le damos un título al calendario, seleccionamos el tema (al ser versión FREE solo nos va a dejar usar el tema por defecto), seleccionamos si queremos mostrar  o no un formulario de solicitud de reserva (por defecto a parece el formulario de ejemplo que integra el plugin), y si queremos seleccionar algún extra que podemos configurar más adelante.

Si interactuamos con el calendario, seleccionando por ejemplo un día o un rango de días, aparecerán unas opciones a la derecha:

Set days availability

Desde aquí podemos habilitar o deshabilitar fechas en función de si queremos que estén disponibles para reservar, o indicar que ya están reservas o simplemente indicar que no están disponibles.

• Start date y End Date nos marca las fechas que tenemos seleccionadas en el calendario.
• Number Available: Podemos indicar cuántas reservas se pueden realizar para los días señalados. (Por ejemplo, podemos tener cinco habitaciones dobles en el hotel y no tenemos que crear un calendario para cada una de ellas, solo indicar cuántas hay disponibles).
• Price: Aparecerá el precio para día del calendario.
• Las demás opciones se habilitan actualizando a la versión PRO, que no veremos en esta guía.

Para nuestro ejemplo, vamos a indicar que los días señalados están disponibles para reservar y que el coste es de 30,00€ cada uno, quedando el calendario así:

No olvidéis salvar los cambios si abandonáis esta página.

Si queremos hacer alguna modificación en los días editados, como por ejemplo, aumentar el precio de la habitación en fin de semana, o marcar que un día está ocupado porque nos ha entrado un huésped, solo tenemos que marcar el día a modificar y aparecerán de nuevo las opciones para editarlo.

Por ejemplo, marcamos que el día 27 está reservado, y que el precio de las habitaciones en fin de semana es de 40,00€:

Nuestro calendario quedará así:

Apartado Forms

Bien, vamos a pasar a otro apartado dentro de Booking Calendar,  Forms.

Aquí podemos configurar que nuestros calendarios incluyan un formulario de solicitud de reservas para que el cliente pueda marcar las fechas que desea reservar y que sus datos de contacto sean guardados en la solicitud.

Podemos añadir un nuevo formulario o editar el existente:

Los campos por defecto son: nombre, apellido, e-mail, teléfono y mensaje. Podemos expandir las opciones de cada campo dando a la flechita, como por ejemplo cambiar la etiqueta de cada campo por una en español, así como indicar si el campo es obligatorio o no rellenarlo. Si necesitamos crear algún campo más podemos hacer clic en el icono  y añadir el tipo de campo que deseemos. Así quedaría el formulario con las etiquetas de los campos cambiadas:

Otro apartado muy interesante son los Extras, donde podemos configurar servicios adicionales que pueden repercutir en el coste final de la habitación, por ejemplo, un cargo por niño o adulto adicional, por un suplemento de cuna, por conexión WIFI, etc.

Para configurarlo nos dirigimos al apartado Extras:

Por defecto tenemos configurados los extras: Adultos y Niños.

Si desplegamos el extra Adultos, podemos configurar hasta cuántos adultos adicionales permitiría la habitación y el sobrecoste que ocasionaría:

Si no nos interesa añadir tantos, podemos eliminar campos hasta adaptarlo a nuestras necesidades. Lo mismo podemos hacer con la opción de niños.

Aunque si no vamos a permitir alojar a más visitantes de los establecidos en la habitación, podemos eliminar ambos extras y crear uno propio, como por ejemplo, una cuna opcional en caso de que se hospeden una pareja con un bebé.

Añadimos un nuevo extra haciendo clic en el icono y lo llamamos, por ejemplo, cuna opcional:

Indicamos que si se añade una cuna a la habitación, el precio de esta se incrementará en 10,00€, todo esto configurado conforme a nuestras necesidades.

Temas

En el apartado Themes, donde podemos personalizar algunos ajustes de nuestros calendarios:

Hacemos clic en editar el tema. Los ajustes se dividen en varios apartados que veremos a continuación:

Ajuste General

Algunas opciones solo están disponibles si contamos con la versión Pro del plugin. Pero para la versión FREE, entre otras opciones podemos ajustar el formado de fecha que aparecerá en los calendarios, el formato de los días de la semana (completo o abreviado), seleccionar el día en el que comienza la semana (en algunos países la semana comienza en Domingo).

Otra opción interesante es poder deshabilitar días fijos en la semana. Por ejemplo, si nuestro establecimiento cierra los Domingos, podemos hacer que todos los domingos se establezcan por defecto en «No disponible».

Seleccionar múltiples días o un único día. Si el propósito del calendario de reservas es para alojamiento (hoteles, casas rurales, hostales…), es conveniente permitir al usuario poder seleccionar un rango de días, tantos como días quiera hospedarse. Pero si nuestro establecimiento es una peluquería, lo que nos interesa es que el cliente solo escoja un día en concreto.

Establecemos el nombre que queramos darle a los 3 estados posibles dentro del calendario: disponible, reservado y no disponible.

Entre otros ajustes generales, podemos especificar el tipo de moneda con el que trabajaremos:

Notificaciones

En este apartado podremos configurar las notificaciones que serán enviadas por correo electrónico, tanto al administrador del sitio web, como al usuario que está realizando la reserva. Para ello es importante habilitar la opción PHPMailer en caso de que no tengamos configurado un sistema de envío de correo alternativo dentro de nuestro sitio web.

Las notificaciones podrían clasificarse:

– Notificaciones al administrador:

• Mensaje de solicitud de reserva recibida.
• Mensaje de solicitud de reserva aprobada.

– Notificaciones al usuario:

• Mensaje de solicitud de reserva recibida.
• Mensaje de solicitud de reserva aprobada.
• Mensaje de solicitud de reserva cancelada.

Por ejemplo, si queremos crear una notificación cada vez que un usuario envíe una solicitud de reserva podemos configurarla así de fácil (importante que Notify on book request esté activado):

O si queremos enviar una notificación para informar de que hemos aprobado su solicitud de reserva: (importante que Notify when reservation is approved esté activada):

Textos por defecto

En este apartado podemos cambiar alguno de los textos por defecto del plugin para adaptarlos a nuestro idioma y necesidades. También nos da a elegir usar directamente el archivo de traducción .mo en caso de estar disponible (si no sabéis traducir archivos .mo, aconsejo modificar los textos directamente en este apartado).

Terminando nuestro sistema de reservas.

Para insertar el calendario en una página de nuestro sitio web, primero nos dirigimos al listado de calendarios que tenemos creados y copiamos su Shortcode:

Nos dirigimos a la página donde queremos insertarlo y lo pegamos:

Y aquí tenemos el resultado:

Ahora si un usuario desea reservar por ejemplo el fin de semana del 29-30 de Julio, solo tiene que seleccionar los días en el calendario y rellenar el formulario con sus datos:

En el momento que pulse en Reservar ahora, si hemos activado las notificaciones, se enviará un aviso al administrador para que compruebe el panel de control de reservas y decida si aprueba o cancela la solicitud. Así mismo también se enviará una notificación al usuario si la hemos configurado previamente.

Vamos al apartado Reservations dentro de Booking Calendar y veremos que tenemos una nueva solicitud para el calendario de Habitación doble:

Para ver los detalles de la reserva seleccionamos el calendario Habitación doble y expandimos la pestaña de Details dentro de Reservation information:

Desde aquí podemos aprobar o rechazar la solicitud.

Si todo es correcto le datos a Approve y en ese momento, si hemos configurado las notificaciones, se enviará un e-mail al cliente confirmando su solicitud y automáticamente los días reservados se reflejarán en el calendario en rojo:

Como nota final, decir que hay algunos aspectos que no se han podido configurar desde las opciones del plugin, como por ejemplo, el nombre de los meses del año o los días de la semana que siguen apareciendo en inglés (o yo no he dado con la opción).

Para cambiar esto, os aconsejo editar directamente el archivo de traducción del plugin. Podéis echar un vistazo a un artículo que escribí hace tiempo sobre Loco Translate, que permite traducir fácilmente plugins y temas de WordPress.

Espero que os haya resultado interesante y si os ha gustado lo compartáis y dejéis vuestros comentarios.

¡Un saludo!