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

En este tutorial aprenderás a cómo quitar la paginación de entradas en cualquier child theme de Genesis Framework. Solo con código, sin plugins.

¿En tu archivo de entradas estás mostrando todas las entradas y no utilizas la paginación? Pues quizás te interese deshabilitarlo para ahorrarte problemas en un futuro.

Si no sabes a qué me refiero con paginación, son los botones que aparecen al final en el archivo de entradas. Gracias a ellos, podemos separar nuestras entradas por páginas para que no aparezcan todas de golpe.

No obstante, puede ser que te interese quitar la paginación de defecto porque quieres añadir una personalizada o simplemente quieres que se visualicen todos los elementos sin paginación.

Gracias a un simple filtro de Genesis, podrás realizar esta tarea en un abrir y cerrar de ojos.

¡Vamos allá!

Eliminar la paginación en Genesis Framework

Para ello, sólo tendremos que agregar este código en la página donde queramos quitar la paginación. Hay varias opciones:

• Página de inicio: tendremos que modificiar el archivo front-page.php de nuestro child theme.
• Página de blog: en este caso deberíamos cambiar home.php
• Archivo de nuestro CPT: dependerá del nombre de nuestro Custom Post Type. En el caso de que se llamara tutorial, modificaríamos archive-tutorial.php.

// Quitar la paginación en Genesis.
remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );

¡Ya está! Con tan solo una línea de código nuestra paginación se habrá esfumado.

Resumen y conclusión

Una vez más hemos visto lo fácil que es agregar o quitar funcionalidades gracias a los filtros de Genesis. En este particular tutorial, hemos quitado una funcionalidad que viene por defecto de una manera muy fácil y rápida. ¿Ahora me entiendes cuando digo que es mi framework favorito? 🙂

Cómo siempre, si necesitas ayuda en algún tema en particular de Genesis Framework o de WordPress en general, solo hace falta que me contactes y te ayudaré muy amablemente.

¡Hasta otra!

En este tutorial aprenderás a cómo cambiar y forzar la dirección del sitio (URL) de cualquier instalación de WordPress.

En los ajustes generales de WordPress, hay dos campos que son extremadamente peligrosos para alguien que no conozca muy bien WordPress.

Dichos campos son los de Dirección de WordPress y Dirección del sitio.

Con tan solo modificar alguno de estos campos nuestro WordPress dejaría de ser operativo. No encontraría los archivos del core en la dirección que hemos introducido y haría caer por completo la web.

¿Qué fácil nos lo pone WordPress para meter la pata, no? En este tutorial vamos a evitar que alguien pueda hacer caer la web tan fácilmente simplemente forzando las dos direcciones para que no sean modificables.

Modificar dirección de sitio (URL) de WordPress

Para ello, simplemente tendremos que modificar el archivo wp-config.php de nuestra instalación WordPress. Tendremos que utilizar un cliente FTP para conectarnos a nuestro servidor y dirigirnos a nuestra carpeta raíz. Una vez dentro, tendremos que añadir estas líneas al final del archivo:

#define SITE URL
define( 'WP_HOME', 'https://www.joelcantero.com' );
define( 'WP_SITEURL', 'https://www.joelcantero.com' );

Si tu dominio dispone de un certificado SSL, es muy importante acordarse de introducir la dirección con https en vez de http, ya que si nos olvidamos de ello nuestra página no se cargará con el certificado de seguridad.

Una vez hemos introducido estas líneas en nuestro wp-config.php, si nos dirigimos otra vez en los ajustes generales veremos que los campos de Dirección de WordPress y Dirección del sitio no se podrán modificar. Los valores que veremos serán los que hayamos introducido manualmente en el archivo wp-config.php.

De esta manera, tus clientes ya no podrán modificar estos campos y no habrá ningún peligro que rompan su web con una simple modificación de esas líneas. Como algunos dicen, mejor prevenir que curar.

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

Resumen y conclusión

Este tutorial es especialmente útil para aquellos desarrolladores e implementadores WordPress que quieren curarse en salud con sus clientes. Este tutorial no les permitirá que toquen esta configuración tan peligrosa.

Ya sabes, si quieres que escriba de algún tema en particular, solo hace falta que contactes conmigo.

En este tutorial aprenderemos a cómo añadir el enlace de «Leer más» en el hijo tema de Genesis Sample o cualquier otro.

Si te habrás fijado, en algunos child themes de Genesis aparece un enlace de «Leer más» en todos los extractos de las entradas de nuestro blog. No obstante, precisamente en Genesis Sample está oculto.

Para activarlo, simplemente tendremos que añadir un filter hook de Genesis para que reaparezca de nuevo.

Cómo añadir en enlace de «Leer más» en Genesis

Como siempre, simplemente tendremos que añadir este código en el archivo functions.php de nuestro child theme:

// Añadir un link de leer más a los extractos (resúmenes)
add_filter('excerpt_more', 'get_read_more_link');
add_filter( 'the_content_more_link', 'get_read_more_link' );
function get_read_more_link() {
   return '... <a href="' . get_permalink() . '">[Leer más]</a>';
}

¡Pues esto es todo! Con este código nuestro tema ya visualizará el enlace de Leer más en todos los extractos de nuestras entradas de blog.

Además, podremos modificar el texto de «Leer más» por el que más nos convenga. Esto va a gusto de cada uno.

Te recuerdo que este código sirve tanto para Genesis Sample como para otros child themes de Genesis. Esta es la gracia de utilizar Genesis Framework, su compatibilidad de hooks 🙂

Resumen y conclusión

Los filter hooks de Genesis nos permiten personalizar nuestro tema hsata el más mínimo detalle. Con el tutorial de hoy, hemos podido aprender a cómo introducir un enlace de «Leer más» en cualquier child theme de Genesis. Con sólo código, ningún plugin.

¿Te ha quedado alguna duda de este tutorial? ¿Quieres proponerme otro tutorial acerca de un filtro de Genesis? Solo es necesario que me escribas y te lo traeré encantado en un siguiente tutorial.

En este tutorial aprenderemos a cómo instalar y usar los iconos Ionicons en nuestra instalación de WordPress. Sin utilizar ningún plugin, sólo código.

Hoy en día es muy común utilizar una librería de iconos para utilizarlos en nuestra página web. Actualmente hay muchas opciones que elegir. Cómo vimos en un tutorial anterior, aprendimos a cómo usar los iconos de Font Awesome 5.

Esta vez le toca el turno a los Ionicons.

Esta biblioteca de iconos es muy común verlo en los temas de StudioPress, ya que es muy ligera y dispone de iconos muy útiles para usar.

Antes de nada, te recomiendo que le eches un vistazo si tu tema ya utiliza una biblioteca de iconos, ya que en caso afirmativo, ya podrías utilizar la existente o deshacerte de ella para quedarte sólo con Ionicons. Utilizar bibliotecas de iconos impacta negativamente (aunque sea ligeramente) al rendimiento de nuestra página web, por lo tanto hay que vigilar siempre en utilizar tan sólo una de ellas.

Por este motivo, podrías buscar en el archivo «functions.php» palabras como «font-awesome», «dashicons» o incluso comprobar si «ionicons» ya aparece.

No obstante, siempre te recomendaré utilizar únicamente la libreria de dashicons, que es la que viene por defecto en cualquier instalación de WordPress. Aunque sea muy una librería muy limitada, es la más ligera y no impactará negativamente a tu página web.

Pero si te gusta mucho los iconos de Ionicons y los ves indispensables para tu página web, añadirlos es muy fácil.

¡Vamos a ello!

Usar los iconos de Ionicons en WordPress

Como siempre te recomiendo, añade este código en tu plugin personalizado o en el functions.php de tu tema.

// Usar Ionicons en WordPress
add_action( 'wp_enqueue_scripts', 'jc_enqueue_ionicons' );
function jc_enqueue_ionicons() {
	wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
}

A continuación, si queremos utilizar alguno de sus iconos, tenemos que entrar en la biblioteca de Ionicons y seleccionar uno.

A continuación aparecerá una barra en la parte inferior y le daremos a Usage. Dentro de esta página, nos iremos al pie de la página y seleccionaremos el código que aparece en la sección de «Basic usage»

<i class="icon ion-md-flashlight"></i>

¡Y magia! Dicho icono aparecerá dentro del contenido que estés implementando. Esta lista de iconos te ayudará con un vistazo rápido a seleccionar el icono que más te gusta y utilizar el nombre de la clase pertinente.

Resumen y conclusión

Con este tutorial hemos aprendido a cómo instalar la librería en nuestro WordPress y sobre todo a cómo usarlos en nuestro contenido.

Recuerda que no es la única librería de iconos disponible, existen otras como la biblioteca de Font Awesome, que ya vimos en un anterior tutorial.

¿Te gustaría ver más tutoriales como este? Contacta conmigo y recomiéndame que quieres que escriba en el siguiente tutorial.

En este nuevo tutorial aprenderemos a cómo nuestra página web puede actualizar siempre la última versión de estilos CSS en todos los child theme de Genesis.

¿Para qué sirve que nuestra página web cargue la última versión de CSS actualizada? Algunas veces realizamos modificaciones en nuestro archivo style.css pero en cambio estos cambios no se visualizan en nuestra web.

Esto es debido a la caché.

La caché del navegador guarda los estilo CSS para que no lo tenga que cargar cada vez que visitamos la página web. El problema viene cuando actualizamos este archivo pero el navegador no es consciente de dicho cambio, por este motivo, carga la versión que tenía en caché.

Para solucionar dicho problema tenemos que cargar nuestra página web vaciando la caché. En Chrome, puedes utilizar la combinación de teclas CTRL+SHIFT+R para realizarlo automáticamente. No obstante, tus clientes nunca harán esto y podrían ver siempre una versión anterior de tus estilos CSS.

¿Cómo lo vamos a solucionar? Muy fácil, vamos a añadir un código que force cargar de nuevo el archivo style.css cuando ha habido una modificación. De este modo, nuestro style.css tendrá un nombre distinto (la fecha de modificación) cada vez que haya una variación. Al tener un nombre distinto, el navegador sabrá que tiene que cargarlo de nuevo.

¿A qué es una maravilla de solución? A mí personalmente me ha quitado muchos dolores de cabeza en relación con mis clientes, ya que siempre habían problemas de que no veían lo mismo que yo veía. Todo por la puñetera caché.

Código para mantener siempre la última versión de CSS en Genesis

Para ello, simplemente tendremos que añadir el siguiente código en el archivo functions.php de nuestro child theme. En este caso no podremos añadirlo en nuestro plugin personalizado ya que no funcionará.

remove_action( 'genesis_meta', 'genesis_load_stylesheet' );
add_action( 'wp_enqueue_scripts', 'jc_refresh_css_stylesheet' );
function jc_refresh_css_stylesheet() {
	$theme_name = defined('CHILD_THEME_NAME') && CHILD_THEME_NAME ? sanitize_title_with_dashes(CHILD_THEME_NAME) : 'child-theme';
	$stylesheet_uri = get_stylesheet_directory_uri() . '/style.css'; 
	$stylesheet_dir = get_stylesheet_directory() . '/style.css'; 
	$last_modified = date ( "njYHi", filemtime( $stylesheet_dir ) ); 
	wp_enqueue_style( $theme_name, $stylesheet_uri, array(), $last_modified );
}

Con este código ya no tendrás que forzar a tu navegador a recargar la caché cada vez que hagas un cambio en tus estilos CSS.

Resumen y conclusión

Este código será una maravilla para todos aquellos que están diseñando su página web y realizando continuos cambios en ella.

No obstante, recomendaría quitar este código cuando ya tu hoja de estilos CSS sea la definitiva. De esta manera, podrás aprovecharte de la caché del navegador para que tu página web vaya mucho más rápida. Sí, aunque parezca mentira la caché está para beneficiarnos, aunque tenemos que aprender cuando utilizarla y cuando no.

¿Te has quedado con alguna duda acerca de este tutorial o quieres comentarme alguna sugerencia? No dudes ni un sólo instante y contacta conmigo. Soy todo oídos.

En este tutorial aprenderás a cómo modificar la frecuencia de revisiones automáticas de las entradas y páginas en WordPress. Sin plugin alguno, solo código.

Como ya te explique en el tutorial de cómo quitar el guardado automático, WordPress de forma automática guarda una copia exacta del contenido de tu entrada o página cada 60 segundos.

En el caso de que estés 15 minutos escribiendo una entrada de tu blog (o en la mayoría de casos, muchos más) WordPress guardará en tu base de datos 15 copias exactas de tu entrada.

¿Sabes lo que significa esto? Incrementar notablemente tu base de datos y consecuentemente, reducir la velocidad de tu página web.

Una opción sería desactivar esta funcionalidad, pero la otra sería cambiar la frecuencia de guardado.

¡Vamos a ello! Cómo siempre, sin plugins ni chorradas. Una sola línea de código.

Cambiar la frecuencia de revisiones automáticas en WordPress

Simplemente tendremos que añadir esta línea de código en el archivo wp-config.php, que se sitúa en la carpeta raíz de tu instalación WordPress. Sobre todo, fíjate que lo añades antes de la sentencia de «require_once(ABSPATH…»:

// Cambiar la frecuencia de guardado a 5 minutos
define('AUTOSAVE_INTERVAL', 300); // Unidad de tiempo: segundos

Con este código tu WordPress guardará tus entradas y páginas cada 5 minutos, en vez de cada minuto.

Obviamente puedes modificar este número según más te convenga, pensando siempre que la unidad de tiempo son segundos.

Resumen y conclusión

¡Pues esto es todo! Con este tutorial hemos podido aprender como cambiar la frecuencia de revisiones automáticas en nuestro WordPress. Gracias a ello, optimizaremos nuestra base de datos para que no se sobrecargue y su tamaño se reduzca notablemente.

Recuerda que todos estos tutoriales permiten que tu página web cargue mucho más rápido. Por este motivo, también podrías echar un vistazo a cómo se puede vaciar la papelera de WordPress automáticamente o a cómo desactivar las revisiones.

Ya sabes, si tienes alguna duda acerca de este tutorial o quieres proponerme alguno nuevo, sólo hace falta que me lo digas.

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