Tutoriales de diseño web con WordPress (teoría y práctica)

En este tutorial aprenderás cómo se puede vaciar la papelera de WordPress automáticamente, estableciendo cada cuánto. Como siempre, nada de plugins, todo con código.

Por defecto, WordPress elimina todas las entradas, páginas, comentarios de la papelera cada 30 días. Cómo ya te hablé en otro tutorial, WordPress también guarda automáticamente las revisiones y se puede desactivar totalmente.

¿Quieres cambiar esta frecuencia para que no se llene de contenido inútil la papelera?

Pues vamos a aprender a establecer cada cuánto se eliminarán todos los contenidos de tu papelera. ¡Vamos a ello!

Establecer frecuencia de vaciado de la papelera de WordPress

Simplemente tendremos que añadir este pequeño código en el archivo wp-config.php, que se sitúa en la carpeta raíz de tu instalación WordPress.

// Eliminar todo el contenido de la papelera automáticamente cada 15 días
define( 'EMPTY_TRASH_DAYS', 15 );

Con el código de arriba, tu papelera eliminará todo su contenido cada 15 días. Obviamente puedes cambiar el número de días por el que tu prefieras, teniendo en cuenta que la unidad de tiempo son días.

¡Pero esto no es todo! ¿Prefieres que no exista la papelera de WordPress? ¿Que cada vez que elimines un contenido se borre permanentemente? Pues simplemente tendremos que asignar los días a 0, y ya no se almacenará nada en la papelera.

// Desactivar la papelera de WordPress. Todos los contenidos se eliminarán permanentemente.
define( 'EMPTY_TRASH_DAYS', 0 );

Resumen y conclusión

¡Pues esto es todo! En este tutorial hemos aprendido a cómo personalizar la frecuencia automática de vaciar la papelera o incluso a cómo eliminar todos los contenidos permanentemente.

Recuerda que estos tutoriales ayudan mucho a optimizar tu WordPress ya que evitas que tu base de datos crezca de tamaño inútilmente. Ya sabes, cuánto menos ocupe tu base de datos, más rápido cargará tu página web en WordPress.

Puedes combinar este tutorial también desactivando las revisiones automáticas de WordPress, para que así también evites que se guarden copias exactas de tus entradas.

Recuerda, si tienes cualquier duda o pregunta acerca de este tutorial o quieres que escriba alguno en concreto, sólo hace falta que me lo comuniques 🙂

Este tutorial está inspirado en la documentación oficial de WordPress.

Con el siguiente tutorial aprenderás a cómo desactivar el guardado automático de entradas y páginas en WordPress. Sin plugins, sólo código.

Por defecto, WordPress guarda cada cierto tiempo automáticamente revisiones de todo lo que escribes, por prevención de que pierdas lo que has escrito sin guardarlo previamente.

Aunque parezca una función muy interesante y que te puede salvar de muchos dolores de cabeza, tiene su parte negativa. Cada guardado automático es una copia exacta de la entrada o página que vas a publicar. Esto se traduce a que en tu base de datos tendrás múltiples copias de cada entrada o página ocupando sitio. Por lo tanto, tu base de datos se satura y disminuirá la velocidad de tu página web.

También hay la opción de establecer el número de revisiones que se guardan automáticamente, pero en este caso vamos a quitar este problema de raíz.

Gracias a este tutorial, veremos que podemos desactivar dicha función con tan solo un pequeño código.

¡Vamos a ello!

Quitar las revisiones automáticas en WordPress

En este caso no tendremos que añadir ningún código en nuestro plugin personalizado o en functions.php. El archivo que modificaremos será el wp-config.php, situado en la carpeta raíz de tu instalación WordPress.

Tendrás que acceder a tu servidor con conexión FTP para modificarlo.

Una vez abierto, tendremos que introducir esta línea antes de la instrucción: “require_once(ABSPATH . ‘wp-settings.php’);”

Simplemente tendremos que añadir este código:

// Desactivar guardado automático de WordPress
define( 'WP_POST_REVISIONS', false );

¿Ves que fácil?

Gracias a este código WordPress sólo guardará una copia de nuestra entrada, la que guardemos manualmente.

Resumen y conclusión

Aunque el guardado automático sea una función muy útil para no perder nada de lo que escribimos, ya hemos visto que tiene sus inconvenientes.

Personalmente, es una de las cosas que siempre desactivo. Al escribir tutoriales siempre suelo guardar mis entradas manualmente cada cierto tiempo. De momento, no he tenido ningún susto de perder nada 🙂

De esta manera, tendrás cuidada tu base de datos y bien optimizada para que cargue lo más rápido posible.

¿Te gustan estos tutoriales de optimización para tu WordPress? ¿Quieres que escriba más acerca de ello? Sólo hace falta que contactes conmigo y te los traeré encantado.

En este tutorial aprenderás a cómo modificar el tamaño de la foto de perfil (gravatar) de la caja de autor. Como siempre, solo en todos los child theme de Genesis Framework.

Cuando agregas la caja de autor en las entradas en Genesis, por defecto siempre aparece la foto de perfil correspondiente del autor.

No obstante, el tamaño del gravatar dependerá del child theme que estés utilizando. Por ejemplo, en Genesis Sample el tamaño por defecto es de 70×70px.

Quizás veas que el tamaño por defecto de tu child theme no te gusta demasiado. A lo mejor quieres hacerlo un poco más grande o eres más minimalista y no quieres que destaque mucho.

¿Te gustaría modificar el tamaño a tu manera?

Gracias una vez más a un filtro de Genesis, esto será pan comido 🙂

¡Vamos a ello!

Cómo cambiar la imagen de la caja de autor en Genesis

Simplemente tendremos que añadir este código en nuestro plugin personalizado, o a malas, en nuestro archivo functions.php del child theme.

// Modificar el tamaño del Gravatar de la caja de autor
add_filter( 'genesis_author_box_gravatar_size', 'author_box_gravatar_size' );
function author_box_gravatar_size( $size ) {
    return 85;
}

Con el código proporcionado, cambiaremos la dimensión de la imagen del Gravatar a 85×85 píxeles. Obviamente lo puedes cambiar como tu prefieras y dependiendo del estilo de tu página web.

No obstante, quizás también necesites aplicar un poco de estilo CSS para que se vea genial.

Recuerda que para que se visualice tu caja de autor, primeramente tendrás que aplicar el filtro para introducirlo.

Resumen y conclusión

¿A qué ha sido muy fácil? Aparte de este filtro, Genesis ofrece muchos otros para modificar a nuestro aire la caja de autor. ¿Quieres ver más tutoriales acerca de ello? Los verás próximamente 🙂

Y como siempre. si tienes alguna pregunta o quieres recomendarme que escriba un tutorial en concreto, solo hace falta que me lo digas.

En este tutorial vamos a aprender cómo permitir que WordPress pueda subir imagenes en formato SVG. Simplemente agregando un pequeño código, sin plugin alguno.

SVG (Scalable Vector Graphics) es un formato vectorial que no pierde calidad cuando su tamaño se agranda. Como toda la información del archivo es vectorial, su tamaño también es muy reducido. Es muy recomendado utilizar este formado para logotipos e imágenes vectoriales.

Sin embargo, WordPress no permite por defecto cargar un fichero SVG en tu biblioteca de medios. Si lo intentas, aparecerá un mensaje como este:

Ha habido un error al subir “mi-logo.svg”
Lo siento, este tipo de archivo no está permitido por motivos de seguridad.

Y WordPress tiene razón. Los archivos SVG es un tipo de formato XML que por naturaleza contener código malicioso dentro de la propia imagen. Es una puerta abierta para que aquellos usuarios que tienen permisos para subir imágenes a tu biblioteca infecte tu sitio web. Así que, aunque parezca una tontería, está muy bien que WordPress bloquee por defecto este tipo de archivos.

No obstante, si en nuestra instalación WordPress somos los únicos que tenemos permiso para subir archivos a la biblioteca de medios, podemos permitirnos subir este tipo de ficheros. Obviamente no vamos a infectar nuestro sitio web a drede 🙂

Por lo tanto, en este tutorial vamos a aprender cómo permitir la subida de SVG en la biblioteca de medios con un código. 

Permitir subir imágenes SVG a WordPress

Una vez más, copiaremos este código en nuestro plugin personalizado o en el archivo functions.php de nuestro tema actual.

// Habilitar la subida de imágenes en formato SVG en WordPress
add_filter( 'upload_mimes', 'jc_custom_upload_mimes' );
function jc_custom_upload_mimes( $existing_mimes = array() ) {
	$existing_mimes['svg'] = 'image/svg+xml';
	return $existing_mimes;
}

¿Has visto que fácil? Con este código tan corto WordPress ya te permitirá subir archivos SVG a tu biblioteca. Si lo intentas, verás que lo subirá sin problema alguno.

Eso sí, los SVG los tratará como un archivo, no como una imagen. Eso significa que no podrás modificar su tamaño u otras opciones que si te permite con las imágenes. Por este motivo, te recomiendo que la subas con el tamaño que quieras que se visualice en la web.

En caso de que en tu instalación WordPress existan más usuarios con permisos de subir archivos, te recomiendo que elimines el código que hemos introducido después de subir la imagen SVG. De esta manera podrás usar el archivo SVG que has subido pero los demás usuarios no podrán subir de más. Siempre velando por la seguridad de tu WordPress 🙂

Resumen y conclusión

Una vez más, con un simple filtro de WordPress podemos habilitar subir archivos SVG en nuestra biblioteca. Aunque WordPress siempre tenga unas medidas de seguridad por defecto, siempre nos da cancha a los usuarios decidir si utilizarlas o no.

Si eres diseñador gráfico y eres familiar con los archivos SVG, este tutorial te irá de perlas para subir finalmente tu logotipo en formato vectorial.

¿Tienes alguna pregunta acerca de este tutorial o quieres motivarme a que escriba otro tutorial? Contacta conmigo y hablamos 🙂

Con este tutorial aprenderás a cómo activar el modo mantenimiento en WordPress sin la necesidad de instalar ningún plugin. Unas solas líneas de código servirán.

¿Por qué instalar un plugin de modo mantenimiento cuando quieres hacer un cambio temporal si lo puedes hacer con código y mucho más rápido?

En realidad, en el repositorio de WordPress está lleno de plugins de este tipo con diferentes estilos, tipos de letra y más adornos innecesarios.

Hoy aprenderás la forma más fácil y simple que hay para hacerlo. Gracias a este código no recurrirás nunca más a un plugin del repositorio.

Código para poner WordPress en modo mantenimiento

Para ello, tendremos que introducir este pequeño código en nuestro plugin personalizado o en el archivo functions.php de nuestro theme de WordPress.

// Modo mantenimiento en WordPress con código
function wp_maintenance_mode(){
    if(!current_user_can('edit_themes') || !is_user_logged_in()){
        wp_die('Actualmente la página está en mantenimiento. Muy pronto estará otra vez disponible. <br> Gracias por tu paciencia y comprensión :)');
    }
}
add_action('get_header', 'wp_maintenance_mode');

En el argumento de «wp_die», podremos cambiar el texto por el que queramos, teniendo en cuenta que podemos utilizar elementos HTML (como el <br> para saltar de línea). Otra buena idea sería añadir enlaces a nuestras redes sociales para que los visitantes puedan contactar con nosotros, a pesar de que nuestra web no esté disponible.

De esta forma, cuando alguien intente acceder a nuestra página web y no esté identificado, aparecerá el siguiente mensaje:

Algo muy minimalista y sencillo para informar al visitante que en estos momentos estamos realizando cambios en la página web.

¿Has visto que rápido y fácil puede ser activar el modo mantenimiento en nuestra página web?

Resumen y conclusión

Con este tutorial hemos aprendido la manera definitiva de poner nuestra web en modo construcción, rápido y sencillo. No obstante, recuerda que se puede aplicar en cualquier tema de WordPress, no es exclusivo de Genesis.

¿Quieres más tutoriales acerca de funcionalidades de WordPress sin utilizar plugins? Tan solo hace falta que me lo comuniques y te lo traeré.

Este tutorial está inspirado en la documentación oficial de WordPress.

En este tutorial aprenderás a agregar la imagen destacada en las entradas de Custom Post Type (CPT) en todos los child theme en Genesis Framework. Sin plugins, solo con un pequeño fragmento de código.

Por ejemplo, mi Custom Post Type «Tutorial», aparece la imagen destacada en la parte superior:

¿Quieres hacer lo mismo? Pues estás sólo a unas pocas líneas de código para hacerlo 🙂

Una vez más, utilizaremos los fantásticos hooks de Genesis Framework para conseguirlo. Sin plugin alguno, todo código.

Mostrar la imagen destacada en un CPT

Para ello, tendrás que añadir este código en tu plugin personalizado o al final del archivo functions.php de tu child theme.

// Enseñar la imagen destacada en todas las entradas de tutoriales.
add_action( 'genesis_before_entry', 'jc_agregar_imagen_destacada', 8 );
function jc_agregar_imagen_destacada() {
  if ( ! is_singular( 'tutorial' ) )  return; // Cambiar esta línea de aquí
	the_post_thumbnail('post-image');
}

¡Cuidado! Tendrás que cambiar una línea de código antes de añadirlo. Dónde pone ‘tutorial’, tendrás que cambiarlo por el CPT en cuestión que quieras mostrar la imagen destacada. Este sería el código en caso de cambiar un CPT llamado tutorial, pero seguramente tu CPT será distinto.

De esta manera, tu imagen destacada aparecerá justo antes del título de la entrada de CPT. Tal como queda en esta entrada 🙂

Resumen y conclusión

¡Ya hemos añadido nuestra imagen destacada en nuestras entradas de Custom Post Type! En mi opinión, una imagen que acompañe a entender el título de la entrada siempre ayuda al lector a ponerse en contexto. En mi caso concreto, siempre establezco como imagen destacada un vector muy simple que ayuda a entender el título de mis tutoriales.

¿Quieres más tutoriales acerca de Custom Post Types? Genesis nos facilita muchísimos filter hooks para utilizar nuestros Custom Post Types de la manera más efectiva. Mándame un mensaje con el formulario de contacto y recomiendame algun tutorial que creas necesario y te lo traeré en joelcantero.com en la mayor brevedad posible.

¡Nos vemos!