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

¿Son realmente útiles las barras laterales en nuestra página web?  En este tutorial aprenderemos a no dejar rastro de ellas.

A priori puede parecer una locura prescindir de un elemento que es muy utilizado en muchas páginas web. Normalmente aparece a la derecha del blog, de una entrada o incluso en las páginas de inicio. Pero vamos a pensar cómo usuario y no como un diseñador web: ¿Realmente las hemos echado de menos cuando no las vemos?

Realmente no.

Como entusiasta del minimalismo, siempre he creído que cuando algo no echas de menos es que realmente no es necesario. Y por este motivo tan primitivo, debemos prescindir de ellos.

Es más, cuando dejamos de utilizarlas nos aportan muchos beneficios.

¡Vamos a verlos!

¿Por qué hay quitar las barras laterales de nuestra web?

El usuario tiene que leer el contenido, no la barra lateral

Cuando un usuario se encuentra en una entrada de nuestro blog, es muy probable que se distraiga leyendo lo que aparece en su lateral: la opción de suscribirse al boletín, las entradas más destacadas, las otras categorías, etc.

El contenido de tu entrada es lo importante, la otra información extra de la barra lateral no.

Hay que facilitar la lectura de las entradas del blog a tus usuarios, apartando todos los elementos que puedan distraerlo. Sólo es necesario que vea el contenido, para que de esta manera lo pueda leer sin distracciones.

No son responsive

Desde el año 2017, ya hay más dispositivos móviles navegando por Internet que no ordenadores. A consecuencia de ello, tienes que tener muy en cuenta cómo luce tu página web en versión móvil.

Las barras laterales son un problema para las versiones responsive de nuestra página web, ya que, cómo no caben en un lateral de las pantallas móviles, deben situarse abajo del todo. ¿Qué sentido tiene poner una barra lateral debajo del contenido? Ninguno. Y la siguiente pr

Quitar widgets de barras laterales

Antes de quitar las barras laterales, tenemos que quitar los widgets que hay colocados en ellas. Para ello, iremos al archivo functions.php de nuestro child theme de Genesis y añadiremos estas líneas de código.

Esta vez no tendrás que añadir código en tu plugin personalizado, sino propiamente en las funciones de tu tema. Estos cambios que vamos a añadir son características del tema, no funcionales.

// Quitar widget de barra lateral.
unregister_sidebar( 'sidebar' ); 
// Quitar widget barra lateral alternativa.
unregister_sidebar( 'sidebar-alt' );

Quitar layouts con barras laterales

Si te diriges en las opciones de Genesis, en «Genesis» y «Theme Settings», te encontrarás los diferentes layouts que pueden tener las páginas de tu web.

Por defecto, está el layout de contenido/barra lateral. Podríamos forzar el layout por defecto con este código. De esta manera podríamos mantener los otros layouts:

//* Forzar layout por defecto sin barra lateral
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

Pero en el caso de que sabemos de ciencia cierta que no las vamos a utilizar (te he dado múltiples razones para hacerlo), puedes añadir este código que eliminará todos los layouts con barra lateral:

// Quitar los layouts con barras laterales
genesis_unregister_layout( 'content-sidebar' );
genesis_unregister_layout( 'sidebar-content' );

En consecuencia, al solo disponer de un layout, Genesis ya no te preguntará más por el layout que quieres utilizar, ya que sólo habrá uno.

Resumen y conclusión

Hemos visto claramente que las barras laterales nos conllevan más problemas que soluciones, molestan al usuario y dificultan los objetivos de nuestra web.

Quizás no te habrás dado cuenta, pero mi página web no aparece ninguna barra lateral en ningún sitio. ¿A qué no la habías echado de menos?

Si quieres más tutoriales acerca de diseño web, sólo hace falta que me lo comentes. Estaré encantado de escuchar tu propuesta.

En este tutorial vamos a ver cómo instalar y utilizar los iconos de Font Awesome 5 en nuestro WordPress, independientemente del tema que utilicemos.

Font Awesome es una libreria de iconos que tiene una versión gratuita (Free) y otra de pago (Pro). Aunque la versión Pro tenga el triple de iconos, la versión Free es más que suficiente.

Instalar Font Awesome 5 

Para ello, tienes que añadir este código en tu plugin personalizado o en el archivo functions.php de tu tema hijo:

add_action( 'wp_enqueue_scripts', 'jc_load_font_awesome' );
/**
 * Instalar Font Awesome 5
 */
function jc_load_font_awesome() {
    wp_enqueue_style( 'font-awesome-free', '//use.fontawesome.com/releases/v5.3.1/css/all.css' );
}

Si quieres tener la última versión de la librería, reemplaza el v.5.3.1 por la actual versión que puedes encontrar en su tutorial de cargar Font Awesome.

Usar los iconos

Para ver todos los iconos que tienes a tu disposición, tienes que ir su galería de iconos. 

Para insertar un icono, tienes que copiar el código HTML que aparece:

<i class="fab fa-accessible-icon"></i>

Para cambiar de estilo, simplemente tendremos que añadir classes CSS en nuestro style.css.

Otra manera de utilizarlo, es mediante los valores unicode. Vamos a ver un ejemplo:

Vamos a añadir una lista HTML con dos enlaces de Facebook y Twitter.

<ul>
    <li><a href="#" class="fontawesome social-icon twitter">Twitter</a></li>
    <li><a href="#" class="fontawesome social-icon facebook">Facebook</a></li>
</ul>

A continuación, modificaremos nuestro style.css con las clases que hemos declarado en los elementos HTML:

.fontawesome::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.social-icon::before {
    margin-right: 10px;
    font-family: "Font Awesome 5 Brands";
}
.facebook::before {
    content: "\f39e";
}
.instagram::before {
    content: "\f16d";
}

Después de aplicar estos estilos CSS, cada vez que escribamos un enlace con las clases «fontawesome social-icon facebook» y «fontawesome social-icon twitter» aparecerán automáticamente los iconos de Facebook y Twitter respectivamente. Este es el resultado después de implementar las clases con la condición de «::before».

Así es como luciría:

Resumen y conclusión

Imaginaros el potencial que tiene Font Awesome para nuestra página web. Podríamos usar estos iconos en nuestros menús de navegación, en nuestro footer para las redes sociales y en otros sitios. Tu imaginación es tu límite.

Si quieres ver más tutoriales de cómo aplicar Font Awesome o te gustaría conocer más bibliotecas de iconos, sólo hace falta que me lo digas.

En este tutorial veremos cómo añadir botones para compartir posts en redes sociales en Genesis Framework.

Podéis ver el final de este tutorial para ver cómo quedan estos botones. Si escribes contenido de valor, tus lectores compartirán tus entradas y tendrán mucha más visibilidad.

Antes de nada, repasaremos las tres cosas que necesitaremos:

• El plugin Genesis Simple Share. Lo puedes descargar en el repositorio de plugins de WordPress o más fácil aún, en el instalador de plugins de tu WordPress.
• Utilizar un child theme de Genesis. Esta condición es la más importante de todas. Genesis Simple Share sólo sirve exclusivamente para el framework de Genesis.
• Añadirle estilo CSS. Por defecto, el estilo de los botones que aporta Genesis Simple Share son poco minimalistas. Te proporcionaré el estilo CSS para que se vea mucho mejor.

¿Cumples las tres condiciones mencionadas? ¡Pues entonces vamos a ello!

Agregar botones para compartir con Genesis Simple Share

Los mismos dueños de Genesis, StudioPress, desarrollaron este plugin que funciona a las mil maravillas con su framework. Es el oficial. Por este motivo, no recomiendo otro plugin para compartir en redes sociales que no sea este.

Instalar Genesis Simple Share

La manera más fácil para instalar este plugin es dirigirnos al dashboard de WordPress, ir a «Plugins» y «Añadir nuevo». Buscaremos «Genesis Simple Share», lo instalaremos y activaremos.

Una vez activado, nos dirigiremos en «Genesis», «Simple Share». Esta pestaña podremos editar todos los ajustes del plugin que acabamos de instalar. Veremos algo parecido a esto:

A medida que vayamos cambiando las opciones del plugin, veremos una previsualización en directo de cómo quedarán en nuestra entrada.

No te preocupes si no te acaba de convencer el aspecto visual de los botones para compartir. Los cambiaremos más adelante para que se vean más minimalistas.

Configurar Genesis Simple Share

Vamos a repasar las opciones que tendremos que establecer:

• Tamaño de icono: seleccionaremos la caja. Las otras opciones de botón son muy estrechas y son poco accesibles en pantallas pequeñas.
• Aspecto del icono: es indiferente lo qué elijamos aquí. Esta opción hace referencia a la parte inferior de las cajas, dónde aparece los textos. Como en nuestro caso eliminaremos este texto con estilos CSS, no es importante.
• Posición a mostrar del icono: en mi caso he seleccionado «Después del contenido«, pero puedes elegir la opción que te parezca mejor. Es totalmente subjetivo.
• Ocultar contador: marcaremos esta opción. En caso contrario aparecería un número con las veces que se ha compartido el post en cuestión. Es una característica que no es muy útil, por eso la descartaremos.
• Activar en: deberemos marcar el tipo de post dónde queramos que aparezcan los botones. En mi caso sólo lo he seleccionado en tutoriales, ya que es el único tipo de entrada (Custom Post Type) que utilizo.
• Redes sociales: seleccionaremos las redes sociales que queramos que aparezcan. Te recomiendo que no selecciones todas, simplemente las más apropiadas para tus lectores. En mi caso he seleccionado Facebook, Twitter y LinkedIn. También podemos elegir el orden de aparición, simplemente arrastrando las cajas de las redes sociales.

Una vez hemos acabado guardaremos los ajustes con el botón «Save Changes» que aparece justo debajo de las cajas de las redes sociales.

¡Ya está! Aunque… si le echamos un vistazo cómo aparecen, quizás no nos guste demasiado.

Primeramente, no están centrados verticalmente y el estilo deja mucho que desear. Para ello, añadiremos un poco de CSS para que sean botones más minimalistas y luzcan mejor.

¡Vamos a ello!

Añadir estilo CSS a los botones para compartir de Genesis Simple Share

Para añadir estilo CSS a nuestros botones, tendremos que ir a «Apariencia«, «Personalizar» y «CSS adicional«. En caso que lo añadiéramos en el archivo «style.css» de nuestro tema, cuando lo actualicemos reemplazaría todos los estilos que le hemos añadido, y en consecuencia, los cambios no permanecerían.

Por otro lado, si estamos utilizando un child theme, este problema no lo tendríamos. En este caso sí que te recomendaría añadir estas líneas en el archivo «style.css» de tu child theme.

Con este tema aclarado, copiaremos y pegaremos este código:

/* Genesis Simple Share  */
.share-outlined {
	text-align: center;
}
.box .share {
	display: none;
}
a.count {
    border: none !important;
    border-radius: 0 !important;
    background-color: crimson !important;
    color: #fefefe !important;
} 	
a.count::before {
    position: none;
    line-height: 53px !important;
    top: 0 !important;
    background-color: crimson !important;
    color: #fefefe !important;
    border: 1px crimson solid;
}
a.count:hover::before {
    color: crimson !important;
    background-color: #fefefe !important;
    line-height: 53px !important;
    top: 0 !important;
    -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
    -o-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
}

En este código tendrías que cambiar los valores de los selectores «color» y «background-color» por los colores corporativos de tu página web. Te recomiendo que utilices el color principal en el selector »
background-color», y el color de fondo en «color».

Fíjate que en el selector «a.count:hover::before» los colores tienen que ser invertidos, es decir, el color principal en «color» y el color de fondo en «background-color».

Si quieres conocer más acerca de este tema, te recomiendo que leas cuántos y cuáles colores debe usar tu página web.

¿A qué queda mucho mejor? Si quieres ver cómo quedan lo puedes ver justamente aquí debajo.

¡Ah! ¿Y por qué no compartes este tutorial en tus redes sociales? 🙂

En este tutorial veremos cómo habilitar compresión en WordPress para mejorar nuestra nota en Google PageSpeed Insights. Y como siempre lo hacemos todo, sin plugins.

Veremos que con tan sólo 3 líneas de código solucionaremos esta advertencia que te puede salir cuando analizas tu web en Google PageSpeed:

Habilitar compresión

Comprimir recursos con gzip o con deflate puede reducir el número de bytes enviados a través de la red.

Esta sugerencia de optimización es para que nuestra página ahorre algunos bytes con la compresión deflate. Ya que, cuanto menos pese tu página web, más rápido cargará.

Es importante darle importancia a las sugerencias de Google en optimizaciones de páginas web. Recuerda que, Google es el que decide el PageRank de nuestra web, y cuánto más puntuación obtengamos, más alto aparecerá nuestra web en los resultados de búsqueda.

Habilitar compresión en .htaccess sin plugins

Para ello, tienes que acceder al archivo .htaccess de tu instalación WordPress, que aparece en la raíz de tu servidor FTP.

/* Habilitar compresión (DEFLATE) */
<FilesMatch "\.(css|js|ico|pdf|jpg|jpeg|png|gif|php|woff)$">
SetOutputFilter DEFLATE
</FilesMatch>

Verificar la compresión deflate en Google PageSpeed Insights

Una vez hemos añadido estas líneas de código en .htaccess, comprobaremos si realmente se realiza la compresión en Google PageSpeed.

Si se ha aplicado bien, ya no aparecerá la sugerencia de optimización. En cambio, saldrá en «Optimizaciones que ya se aplican», dónde ya podremos afirmar que hemos hecho los deberes.

Resumen y conclusión

¡Y ya está! Fácil y simple. Tan sólo nos ha hecho falta 3 minutos de nuestro tiempo para mejorar la nota de nuestra página web en Google PageSpeed. ¿A qué realmente no es necesario tantos plugins para realizar estos cambios?

Ya sabes, cuanto menos plugins, menos líneas de código. Menos líneas de código, más rápido cargará tu página web.

¡Pues esto es todo! Si queréis más tutoriales cómo este, o queréis proponerme alguno, sólo hace falta que me lo digas.

En este tutorial veremos cómo añadirle una capa extra de seguridad a nuestro WordPress modificando wp-config.php. Seguiremos tocando código, pero no te asustes, no hace falta que conozcas nada de programación.

Si en el otro tutorial vimos como modificar el .htaccess, ahora le toca turno al archivo wp-config.php. También se localiza en la raíz de nuestro directorio FTP.

Antes de nada, te recomiendo que hagas una copia de seguridad de tu wp-config.php actual. Simplemente lo duplicas y le cambias el nombre. Siempre va bien por si ocurre algo, siempre tendremos la posibilidad de volver atrás.

Ahora sí, ¡vamos a ello!

Deshabilitar el editor de temas y de plugins

Por defecto, desde el panel de administración de WordPress hay la posibilidad de modificar los ficheros de nuestros temas y plugins. Es una característica interesante ya que nos ahorra tiempo por si queremos modificar cualquier archivo, evita que tengamos que acceder constantemente a nuestro servidor FTP.

No obstante esta funcionalidad puede llegar ser un verdadero quebradero de cabeza.

Especialmente si tenemos varios usuarios administradores en nuestro WordPress, puede ser que alguien modifique un archivo crítico (ya sea del tema o de algún plugin) y deje inoperativa nuestra página web.

En este caso, podemos curarnos en salud deshabilitando esta funcionalidad para evitar este tipo de sustos.

Simplemente añadiremos este código al final de nuestro archivo wp-config.php:

/* Deshabilitar el editor de temas y de plugins */
define( 'DISALLOW_FILE_EDIT', true );

Por otro lado, si eres el único administrador de tu WordPress y no hay peligro de que rompas tu sitio web, no es necesario aplicar esta medida de seguridad. En mi caso, utilizo esta funcionalidad a menudo para modificar los archivos CSS de mi tema, sin tener que acceder al FTP.

Deshabilitar wp_debug desde wp-config

A veces, cuando hay cualquier error, advertencia o incompatibilidad PHP en nuestro WordPress, aparecen avisos en nuestro sitio web.

¿Por qué puede llegar a ser un problema? Estos avisos muestran rutas de nuestros directorios de la instalación de WordPress que pueden ser aprovechadas para los hackers. Al indicarnos las carpetas de plugins o temas pueden encontrar vulnerabilidades y aprovecharlas.

Por esta sencilla razón, vamos a lavarnos las manos deshabilitando este tipo de avisos con una simple línea de código.

Antes de añadirla, tenemos que fijarnos si esta línea ya aparece en el archivo. En algunas instalaciones aparecerá en «true», sólo deberemos cambiarlo por «false». O incluso, en algunos casos ya está deshabilitado por defecto.

/* Deshabilitar WP_Debug */
define( 'WP_DEBUG', false );

Forzar SSL en wp-login y wp-admin

La última medida de seguridad es forzar SSL para la identificación de nuestro WordPress.

¿Qué significa esto realmente?

Cuando forzamos SSL significa que la dirección URL empezará por ‘https’. De esta forma, cuando introduzcamos nuestra contraseña, se enviará de manera encriptada. Si se enviara sin ninguna encriptación (con http), navegaría por Internet totalmente legible.

¿Qué hay de malo en esto?

Si estuviéramos en nuestra casa o en nuestra oficina no va a pasar absolutamente nada. Pero si estamos en una red inalámbrica de un hotel, aeropuerto o bar, todos los datos de tus contraseñas correrían peligro. Cabe la posibilidad de que alguien pueda conectarse en la misma red y captar nuestros datos y contraseñas.

Con SSL, se enviaría codificado y evitaríamos esta posibilidad. Que aunque parezca mentira, es muy común utilizar esta estrategia para hackear contraseñas en las redes inalámbricas públicas.

/* Forzar SSL en el wp-login y wp-admin */
define( 'FORCE_SSL_LOGIN', true );
define( 'FORCE_SSL_ADMIN', true );

Antes de introducir el código, tendremos que asegurarnos que nuestra página web tiene un certificado SSL. En la mayoría de los alojamientos ofrecen la encriptación Let’s Encrypt gratuitamente. En el caso que no lo tengamos, no tenemos que introducir estas líneas.

Resumen y conclusión

¡Pues esto es todo! Con unas sencillas definiciones de código hemos aumentado notablemente la seguridad de nuestra página web. Puedes felicitarte a ti mismo porque ya tu web es más segura que la mayoría de instalaciones WordPress que rondan por allí.

Cómo has podido observar, no hace falta tener ningún tipo de conocimiento de programación. Simplemente basta copiar y pegar las líneas de código y entender qué hacen cada una.

Ya sabes, para cualquier duda o pregunta, puedes contactar conmigo desde este formulario.

Cuando escribí el tutorial de cómo cambiar la imagen del wp-login sin plugins, un usuario me preguntó lo siguiente:

La imagen que se refiere es al icono de WordPress que aparece en la barra de administración:

De la misma manera que lo hicimos en el anterior tutorial, tampoco vamos a utilizar ningún plugin para modificar esta imagen. Unas sencillas líneas de código en nuestro plugin personalizado será suficiente.

¡Vamos a ello!

Cambiar imagen de WordPress de la barra de administración sin plugins

Para cambiar el logo de WordPress de la barra de administración simplemente tendremos que modificar nuestro plugin personalizado o el functions.php de nuestro tema:

function jc_change_icon_admin_bar() {
	
	echo '<style type="text/css">
	
			#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
				background-image: url(https://www.joelcantero.com/contenido/joel-cantero-wp-admin-bar.png) !important;
				background-size: cover;
				background-position: 0 0;
				color:rgba(0, 0, 0, 0);
			}
			
			#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
				background-position: 0 0;
			}
	</style>';
}
add_action('wp_before_admin_bar_render', 'jc_change_icon_admin_bar');

Fíjate que en tu caso tendrás que cambiar el enlace que aparece en «background-img: url()», sino aparecerá mi logo.

Para ello, tendrás que subir primero una imagen de dimensiones 20px por 20px en tus Medios, y copiar el enlace del archivo.

Quedará algo así:

    background-image: url(https://www.tu-web.com/contenido/tu-imagen.png);

Como ya podrás ver, la imagen es extremadamente pequeña. Para facilitaros la faena, te puedes descargar el icono PNG que utilizo yo. De esta manera sólo tienes que modificarlo (te recomiendo que utilices Photoshop) y reemplazarlo por tu icono.

Y este es el resultado:

Resumen y conclusion

Pues ya hemos visto un nuevo tutorial de cómo personalizar aún más nuestro WordPress. Aunque estos cambios solo se aprecian en nuestro dashboard (cuando estamos identificados como administrador), siempre luce muy bien.

Como siempre, si tienes alguna duda o me quieres proponer otro tutorial de diseño, házmelo saber. Disfruto mucho escribiendo tutoriales que me pidáis 🙂