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

En este tutorial vamos a aprender cómo insertar la caja de autor en cada entrada en Genesis Framework.

Si no sabes a lo que me estoy refiriendo, es una caja que puede aparecer al final de cada post mostrando la información del autor de la misma: su nombre, su imagen y su biografía.

¿Cuándo nos puede interesar mostrar esta caja? Normalmente se utiliza cuando nuestro blog lo componen muchos autores o cuando un autor invitado redacta la entrada.

También lo podemos utilizar aunque seamos el único autor de todas las entradas del blog. No obstante, no lo recomiendo ya que es información redundante que podemos prescindir de ella. Para eso ya existe la página de sobre mí 🙂

Mostrar la caja de autor en cada entrada en Genesis

Una vez más, tendremos que añadir un fragmento de código en nuestro plugin personalizado o en el archivo functions.php de nuestro child theme de Genesis.

// Mostrar la caja de autor en entradas (single posts)
add_filter( 'get_the_author_genesis_author_box_single', '__return_true' );

Así de simple, así de fácil. Con este código ya podremos visitar cualquier entrada de nuestro blog y veremos que en la parte inferior aparece la información del autor.

Si ves que solo aparece el nombre y echas de menos la biografía, es que todavía no la has introducido. Para ello, dirígete al dashboard de WordPress, en Usuarios, Todos los usuarios, y edita el usuario correspondiente. En la sección «Acerca de ti» habrá un campo llamado «Información biográfica» que será el texto que aparecerá en la caja de autor.

Resumen y conclusión

¿Has visto que fácil es agregar la caja de autor en nuestras entradas? Gracias a este filtro de WordPress nos facilita muchísimo la faena. Recuerda que solo te recomiendo utilizar esta función en el caso que tu blog tenga más de un autor, en caso contrario no lo veo para nada útil.

¡Y ya lo sabes! Si tienes cualquier duda o simplemente me quieres recomendar para que escriba uno nuevo, solo es necesario que contactes conmigo.

¡Hasta la próxima!

En este tutorial aprenderás a agregar enlaces de navegación a la parte inferior de todas las entradas en Genesis Framework. Con tan solo una línea de código, sin plugins.

¿Te parecería interesante que al final de todas las entradas aparecieran dos enlaces de la entrada anterior y posterior? ¡Vamos a ello! Seguramente tus lectores lo agradecerán 🙂

Cómo añadir enlaces de navegación al final de las entradas en Genesis

Como siempre, tendrás que añadir un pequeño código en tu plugin personalizado o en el final de tu archivo functions.php de tu child theme.

// Agregar enlaces a entradas anteriores o posteriores al final de la entrada
add_action( 'genesis_entry_footer', 'genesis_prev_next_post_nav' );

Añadiendo este código conseguirás que al final de todas tus entradas aparezcan dos enlaces: una al post anterior y otra al post posterior. Obviamente, la primera y última entrada de tu blog solo aparecerá un enlace.

El resultado sería el siguiente:

Si quieres mejorar el estilo de estos enlaces, solo es necesario que le añadas un poco de estilo CSS a tu archivo style.css del child theme:

.pagination-previous, .pagination-next {
	padding: 2%;
	margin-bottom: 2%;
}

Con este estilo CSS los enlaces «respirarán» más y no estarán tan enganchados de los comentarios y de la entrada en sí. Pero obviamente te recomiendo que lo estilices a tu manera, añadir estilos CSS es muy fácil 🙂

Resumen y conclusió

¡Pues esto es todo por hoy! ¿A qué ha sido fácil agregar los enlaces de navegación a tu Genesis? Pues esto no es todo, en próximos tutoriales sabrás cómo personalizar los textos de estos enlaces (en vez de que muestre el título de la entrada en sí) o añadirlo en tu CPT.

Tiempo al tiempo.

Y una vez más, si quieres recomendarme algún tema para escribir un tutorial solo hace falta que me lo digas. Me encanta leer vuestro feedback y saber que es lo que realmente necesitáis, para mi es oro puro 🙂

En este tutorial aprenderemos a cómo quitar la información que aparece en cada entrada en Genesis. Sin plugins, solo código. 

Si no sabes a qué me refiero con la información de entrada, es la línea de texto que aparece en la parte superior dónde aparece:

• La fecha de creación de la entrada.
• El autor de la misma.
• El número de comentarios.
• El enlace de editar la entrada. En este tutorial podéis aprender a cómo quitar solamente el enlace de editar la entrada.

En mi caso solo aparecería la fecha de creación de la entrada ya que los otros elementos los tengo deshabilitados. No obstante, también he quitado la información de entrada en mi página web.

¿Motivos para quitarlo? En mi humilde opinión no ofrece información relevante para el usuario. La fecha de creación de una entrada de blog puede ser insignificante si el contenido de la misma está actualizado. En mi caso, aunque mis primeros tutoriales los escribí hace mucho tiempo, el contenido está actualizado para que se puedan aplicar a día de hoy.

¿Te he convencido? Si es así… ¡vamos a ello!

Eliminar la información de entrada en Genesis

Simplemente tienes que copiar este código en el archivo single.php de tu child theme de Genesis. En este caso, si lo utilizas en tu plugin personalizado no funcionará, ya qué es un action que pertenece a la plantilla de entrada (single.php).

 // Eliminar la información de entrada en Genesis
remove_action( 'genesis_entry_header', 'genesis_post_info', 12);

¿Cómo puedes modificar este archivo? Muy fácil, dirígete a Apariencia, Editor y selecciona el archivo single.php de la columna de la derecha. Sobre todo comprueba que lo añades antes de la función genesis();, no obstante no funcionará.

Resumen y conclusión

Gracias a este tutorial ya has aprendido a quitar un elemento más cuando tu visitante lee tu entrada del blog. Recuerda, menos es más, y en este caso ayudas a tu lector a que se centre en lo realmente importante: el contenido.

¡Esto es todo por hoy! Recuerda, si quieres recomendarme que escriba un tutorial sobre un tema en particular, solo es necesario que me lo digas.

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

Gracias a este tutorial aprenderás a eliminar el enlace de editar una entrada en todos los child theme de Genesis Framework. Y si todavía te lo estás preguntando a estas alturas, sí, sin plugins.

Este enlace aparece en la parte superior de cada entrada cuando estás identificado con un usuario con permisos para crear y modificar entradas. Puede ser un poco molesto ya que no verás el post exactamente como lo ven tus lectores. Además, siempre podemos modificar la entrada gracias a la opción de «Editar entrada» que aparece en la barra de administración de WordPress en la parte superior.

Si no sabes de qué enlace estoy hablando, te lo enseño en esta imagen:

Es el link que aparece al lado de la información de cada post en la parte superior. Justo al lado de «Deja un comentario».

Una vez más, utilizaremos un filtro de Genesis que nos facilitará la faena en tan solo una línea de código.

Eliminar el enlace de editar entradas en Genesis Framework

Como siempre hacemos, agregaremos una línea de código en nuestro plugin personalizado o en el archivo functions.php de nuestro child theme.

// Quitar el enlace de editar entradas en Genesis
add_filter ( 'genesis_edit_post_link' , '__return_false' );

Pegando este código, eliminarás de todas las entradas el link de «Edit» de la parte superior. 

No obstante, si ahora estás pensando en quitar toda la información de la entrada, también sería una opción.

En mi caso, es una de las cosas que siempre quito. La información que muestra de cada entrada me parece irrelevante para el lector y no es necesario. Y como buen fan del minimalismo, si algo realmente no lo necesito, no lo debo de tener.

Resumen y conclusión

Gracias a esta línea de código ahora podrás eliminar el enlace de editar entrada en la información de cada entrada. Recuerda que el único requisito que necesitas para aplicar este código es utilizar un child theme de Genesis. Pero a estas alturas, sino lo sabes, que te voy a contar 🙂

¡Cómo siempre! Recuerda que puedes escribirme para sugerirme próximos tutoriales o preguntarme cualquier duda que tengas. Siempre me encanta leer tu feedback.

En este tutorial veremos uno por uno los cuatro filtros que dispone Genesis para modificar la cabecera a nuestro gusto.

Si no sabes lo que es un filter hook, te recomiendo que veas primero este tutorial dónde explico qué es un filtro de Genesis y para que sirve.

En este caso, veremos todos los filtros que hay en header.php y pondremos un ejemplo práctico de uso.

Antes de nada, acuérdate que todos estos filtros los podemos añadir en nuestro plugin personalizado o a malas, en el functions.php de nuestro child theme de Genesis.

¡Vamos a ello!

genesis_seo_title

El fitro genesis_seo_title nos permite modificar el título del sitio web. Por defecto, Genesis introduce el título del sitio que le hemos indicado en las opciones de WordPress, pero en este caso, podemos personalizarlo de cualquier manera.

En este caso, he querido que mi título del sitio web tenga dos colores distintos, en vez de uno. Lo que haremos es aplicar el filtro y utilizaremos etiquetas HTML span para poner mi nombre de color crimson y mi apellido del color por defecto.

Tan sólo tendremos que añadir este código.

add_filter( 'genesis_seo_description', 'jc_genesis_seo_description', 10, 3);
function jc_genesis_seo_description( $description, $inside, $wrap ) {
   $inside = sprintf('<a href="https://www.google.es/" title="%s">%s</a>', 'Título al pasar el cursor', 'Descripción con enlace');
$description = sprintf('<%s class="site-description">%s</%s>', $wrap, $inside, $wrap);
   return $description;   
}

Después de introducir este código, mi título de sitio ser vería así:

genesis_seo_description

Este filtro funciona exactamente igual que el anterior. Te permite modificar la descripción del sitio web cómo tu quieras y te ofrece tres variables por si las quieres utilizar

• $description: en esta variable se guarda el texto de descripción que introduces en Apariencia, Personalizar, Identidad del sitio.
• $inside: contiene el código HTML propiamente que se va a visualizar en la página web.
• $wrap: es el elemento HTML que queremos utilizar para mostrar nuestra descripicón. Por defecto es un elemento p (párrafo).

Un caso práctico para utilizar este filtro sería añadir un enlace a nuestra descripción. Por predeterminado, Genesis muestra la descripción de la página web como un texto llano, sin posibilidad de añadir ningún enlace u otra personalización.

Para ello, utilizaremos el filtro y añadiremos un enlace (elemento HTML a) para que enlace a Google (por ejemplo).

add_filter( 'genesis_seo_description', 'jc_genesis_seo_description', 10, 3);
function jc_genesis_seo_description( $description, $inside, $wrap ) {
   $inside = sprintf('<a href="https://www.google.es/" title="%s">%s</a>', 'Título al pasar el cursor', 'Descripción con enlace');
$description = sprintf('<%s class="site-description">%s</%s>', $wrap, $inside, $wrap);
   return $description;   
}

Con este sencillo código, podremos vincular nuestra descripción a la página que queramos.

genesis_pre_load_favicon

El filtro genesis_pre_load_favicon nos permite establecer el favicon de nuestra página web, fijando un enlace de una imagen con formato ICO.

Recuerda que también WordPress nos permite cambiar el favicon de nuestra página web muy fácilmente, en la opción Apariencia, Personalizar, Identidad del sitio y Icono del sitio. 

add_filter( 'genesis_pre_load_favicon', 'jc_genesis_pre_load_favicon' );
function jc_genesis_pre_load_favicon() {
return 'https://www.zamzar.com/images/filetypes/png.png';
}

No obstante, el icono que esté configurado en el Personalizador tiene prioridad y permanecerá antes que el icono que hayamos aplicado en este filtro. Así que lo podríamos utilizar este filtro para fijar un icono predeterminado para nuestros clientes y que después lo cambien a su antojo. 

genesis_header_scripts

El último filtro de Genesis de la cabecera sirve para añadir cualquier script en la cabecera (header) de nuestro código HTML. Podemos introducir cualquier script JavaScript, un píxel de Facebook, el código de seguimiento de Google Analytics, etc.

Este filtro de Genesis es en verdad un hook general de WordPress.

¿Cuál sería un uso práctico de este filter hook? Lo podemos aprovechar para incrustar cualquier librería de terceros en nuestro sitio web. Así funcionaría:

add_filter( 'genesis_header_scripts', 'jc_genesis_header_scripts' );
function jc_genesis_header_scripts() {
echo '<script src="srcript-de-prueba.js"></script>';
}

Resumen y conclusión

¡Pues esto es todo! Hemos repasado los cuatro filtros que hay en la cabecera en Genesis y hemos visto ejemplos prácticos. En los siguientes tutoriales veremos otros filter hooks que aparecen en otras ubicaciones. De esta manera, aprenderemos a personalizar nuestro child theme de Genesis como queramos 🙂

¿A qué no es tan difícil?

¡Ya sabes! Déjame cualquier comentario o feedback en el fomulario de contacto, lo leo siempre 🙂

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

En este tutorial veremos qué son los filtros de Genesis, cómo se utilizan y por qué son tan útiles. Lo veremos de manera práctica con algunos ejemplos y veremos el potencial tus conocimientos del código de Genesis.

Antes de nada, vamos a definir qué son.

¿Qué son los filtros de Genesis?

Los filtros de Genesis (filter hooks) son funciones que nos permiten personalizar su funcionalidad y opciones, aprovechando el código de estos.

A diferencia de los action hooks, los filter hooks no eliminan una función o crean una nueva entera, modifican funciones existentes. 

Puede parecer muy complejo, pero practicar con ejemplos es la mejor forma de saber qué son y cómo utilizarlos.

En los próximos tutoriales veremos todos los filtros que podemos encontrar en cada ubicación. Desde la cabecera (header) hasta el pie de página (footer). 

Ejemplo: modificar el título del sitio

En este ejemplo utilizaremos el filter que se sitúa en header.php, el filtro genesis_seo_title. Con él podremos cambiar la función que implementa el título del sitio de nuestra página web. 

Gracias a él, conseguiremos que nuestro título de sitio tenga dos colores en vez de uno. Para ello, escribiremos parte de nuestro título con una etiqueta HTML <span> que contenga un estilo con el color del texto que vamos a aplicar.

Sólo tenemos que copiar este código en nuestro plugin personalizado o en el functions.php de nuestro child theme:

add_filter( 'genesis_seo_title', 'jc_titulo_nuevo', 10, 3);
function jc_titulo_nuevo( $title, $inside, $wrap ) {
   $inside = sprintf('<a href="#" title="%s"><span style="color:crimson">Joel</span> Cantero</a>', 'Diseñador web WordPress');
   return sprintf ('<%1$s class="site-title" itemprop="headline">%2$s</%1$s>', $wrap, $inside);   
}

Con este código, el título de mi sitio se verá en dos colores. En este caso, Joel en color crimson, y Cantero en color negro. Esta funcionalidad no la podríamos realizar si no fuera por los filter hooks. ¿Ahora ves el potencial que tienen?

Si no has entendido muy bien el código, no te preocupes. Indagaremos más en ellos en los próximos tutoriales.

¿Dónde se encuentran los filtros de Genesis?

Los filtros de Genesis se encuentran en los archivos del tema. Por lo tanto, en los archivos PHP de la plantilla (layout) podremos encontrar todos los filtros de Genesis.

• Cabecera (header.php): uno de los primeros archivos que carga Genesis cuando renderiza nuestra página es la cabecera. En ella podremos encontrar los filtros del título del sitio, la descripción, el favicon y los scripts que queramos añadir.
• Pie de página (footer.php): en el pie de página se sitúan los filtros de cambiar los créditos de texto, cambiar el footer entero, modificar los widgets y los scripts añadidos nuestros (cómo en la cabecera).
• Bucle de entradas (post.php): el loop es el archivo que se encarga de visualizar nuestras entradas, tanto en los archivos de entradas como la plantilla individual de cada una de ellas. Hay filtros para modificar la información de cada entrada (la fecha, el autor), para que aparezca la imagen de perfil del autor, etc.
• Comentarios (comments.php): Genesis dispone ni más ni menos que de una docena de filtros para personalizar sus funcionalidades a nuestro gusto.
• Búsqueda (search.php): Gracias a los filtros que están en la búsqueda podemos modificar los textos del botón, de la caja y modificar el formulario.
• Otros filtros: aparte de estos mencionados, también hay otros filtros especiales que se sitúan antes de que cargue la página (init.php), específicos de las migas de pan y algunos más específicos de otras funcionalidades de Genesis. No te preocupes, los veremos todos.

Resumen y conclusión

Para concluir, en los siguientes tutoriales veremos más a fondo cada uno de los filter hooks que nos proporciona Genesis. Sé que al principio parece un poco complicado de entender, pero a medida que te vas familiarizando con ellos se convierten en una herramienta de tu día a día en el desarrollo web.

¿Te gustan estos tutoriales más técnicos de Genesis? Ya sabes, déjame un comentario para proponerme nuevos tutoriales. Me encanta leer tu feedback 🙂

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