Vivir de un blog – Resumen de julio 2020

Vivir de un blog resumen mensual del blog

Ya estamos en agosto de 2020, que viendo como está el panorama ya es toda una hazaña, la verdad… Y si estás en España como es mi caso y no te has derretido aún, vas a poder disfrutar de este resumen mensual del blog; bueno y si no estás en España también lo disfrutarás solo […]

Este post tan chulo Vivir de un blog – Resumen de julio 2020 se publicó primero en Posicionamiento web | Vivir de un blog por Rubén Alonso 😊

Tutorial Divi: Cómo añadir capas superpuestas y para qué sirven

Uno de los recursos más prácticos cuando usas imágenes o vídeos de fondo en Divi son las capas de fondo superpuestas.

Por si no caes en a lo que me refiero es a poner una superposición sobre la imagen o vídeo, que le añada opacidad al fondo.

Para qué sirven las capas superpuestas

Principalmente sirven para que se lean mejor los textos que van sobre esa imagen o vídeo de fondo.

Por ejemplo, si el fondo es un vídeo con partes claras y oscuras, es difícil decidirse por un texto claro u oscuro, pues depende qué parte del vídeo estemos viendo se verá bien/mal el texto.

Al añadir una capa superpuesta oscurecemos o aclaramos el vídeo o imagen de texto, haciendo que nuestro texto claro u oscuro se pueda leer bien consistentemente.

Para que te hagas una idea, el siguiente ejemplo sería un texto claro sobre una imagen de fondo muy clara o con una capa superpuesta muy clara, donde se vería fatal el texto.

Por el contrario, si aplicamos una capa de superposición oscura a la imagen, nuestro texto se leerá perfectamente, sin influir las partes claras u oscuras de la imagen.

Tipos de capas superpuestas

En Divi vamos a encontrar 2 tipos de capas superpuestas, así que vamos a ver cuál es su uso y cómo sacarle partido.

Capa superpuesta de fondo

Es la que nos permite configurar Divi inmediatamente al acceder a la pestaña de diseño de la sección o módulo que permita la utilidad de capas superpuestas.

Sirve fundamentalmente para aplicar un color de superposición a la imagen o vídeo de fondo, para que nuestro texto y botones se vean correctamente, como te explicaba antes.

Para utilizarla lo primero es activarla en el botón SÍ/No de la herramienta, y luego debes elegir el color de superposición justo debajo.

A este respecto debes saber que si aplicas un color seleccionándolo directamente de los visibles tu imagen o vídeo no se verá, pues el color se aplica inicialmente sin transparencia, o con la opacidad al 100%, que viene a ser lo mismo.

Lo ves claramente en este corto vídeo…

Como habrás podido comprobar, al aplicar un color se aplica el color sólido sobre la imagen o vídeo de fondo, con lo que se deja de ver, es como si no hubiese nada de fondo.

No es lo que queremos ¿verdad?

Lo habitual es aplicar una capa superpuesta con algún porcentaje de opacidad menor del 100%, para que se siga viendo de fondo nuestra imagen o vídeo.

Para ello debes seleccionar, no un color, sino el botón con el icono del cuentagotas, y ahí el proceso es el siguiente:

  1. Eliges el color base de la superposición.
  2. Eliges la variación del color base en el selector deslizante.
  3. Seleccionas el porcentaje de opacidad en el segundo selector deslizante.

Seguramente lo vas a ver más claro en este breve vídeo…

Fácil ¿eh?

Capa superpuesta de texto

¿Estamos de acuerdo en que el objetivo principal de una capa superpuesta es que un texto se vea bien sobre una imagen o vídeo de fondo?

¡Bien!

Entonces, ¿y si en vez de aplicar la capa superpuesta a toda la imagen o vídeo la aplicamos solo a la parte del texto?

Es ese efecto que sueles ver de texto que flota en una caja, más o menos opaca, sobre la imagen o el vídeo.

Para ello en Divi tenemos que activar, en la misma sección de Diseño > Capa superpuesta, no la superposición de fondo, sino la superposición de texto.

A partir de que actives la superposición de texto, poco más tienes que aprender, pues el modo de utilizar la herramienta es como en el caso anterior de la superposición de fondo, solo que con un paso (opcional) adicional:

  1. Eliges el color base de la superposición.
  2. Eliges la variación del color base en el selector deslizante.
  3. Seleccionas el porcentaje de opacidad en el segundo selector deslizante.
  4. Aplicas radio al borde, para hacer las esquinas de la caja de superposición de texto más o menos redondeadas.

De nuevo, en un breve vídeo lo verás más claro y fácil de aprender…

Como habrás podido ver, las capas superpuestas son un recurso realmente interesante, a veces incluso imprescindible, en todos aquellos módulos y secciones de Divi en las que utilicemos una imagen o vídeo de fondo.

Por cierto, si aún no tienes una licencia de Divi aquí la puedes obtener de por vida con un 20% de descuento.

La entrada Tutorial Divi: Cómo añadir capas superpuestas y para qué sirven la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Tablas sin bordes

El editor de bloques de WordPress ha facilitado mucho algo que hasta hace poco requería instalar plugins adicionales o saber HTML: la creación de tablas.

Solo tienes que añadir un bloque de tabla, decidir las filas y columnas que tendrá y aplicar alguno de los estilos que ofrece.

bloque de tabla editor de WordPress

Pero lo que no ofrece es la posibilidad de eliminar los bordes, en los estilos disponibles siempre hay líneas o franjas visibles que separan celdas, filas y columnas.

Es un recurso muy utilizado, y he visto usuarios que han instalado un plugin solo para esto, cuando en realidad no es necesario, ni muchísimo menos.

Si quieres que tus tablas no tengan bordes solo tienes que añadir el siguiente código a la sección de «CSS adicional» del personalizador de WordPress:

table, tr, td {
border: none;
}

¡Y ya está!

La entrada Tablas sin bordes la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Tutorial Astra: Cómo atenuar el contenido al pasar el cursor por el menú

¿Te gustaría que cuando un visitante pase el cursor para ver tus menús se atenuase el resto de la web?

Me refiero a este efecto…

Pues este efecto tan interesante para centrar la visualización del visitante en tu menú es muy fácil de hacer, y aunque el tema Astra no lo incorpora como ajuste en sus opciones, puedes añadirlo a tu arsenal de personalizaciones para Astra.

Solo tienes que añadir un poquito de código en la sección «CSS adicional» del personalizador de WordPress, este:

/* Difuminar contenido al pasar el cursor sobre un menu */
#masthead:hover~#content {
	opacity: 0.1;
	transition: all 0.5s linear 0.1s;
}

#content {
	transition: all 0.5s linear 0.1s;
}

Por supuesto, puedes personalizar el nivel de opacidad a tu gusto (

opacity

).

Espero que te haya gustado este truco exprés para el tema Astra.

La entrada Tutorial Astra: Cómo atenuar el contenido al pasar el cursor por el menú la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Cómo mostrar el nombre del usuario conectado en tu web

Hay muchas situaciones en las que es interesante mostrar el nombre del usuario conectado en tu web, y casi todas tienen que ver con la personalización y la fidelización.

Es un toque, un detalle, que gustará a tus usuarios, eso seguro, no digamos si tienes un sitio de membresía.

Vamos a ver cómo mostrar el nombre del usuario conectado una vez haya accedido, y algunos trucos más.

Mostrar el nombre de usuario conectado donde quieras con un shortcode

Para ello nada más práctico que crear un shortcode que luego puedas poner donde gustes, un widget por ejemplo.

Primero creamos la función…

function ayudawp_mostrar_conectado( $atts ) {
	global $current_user, $user_login;
      	wp_get_current_user();
	add_filter('widget_text', 'apply_shortcodes');
	if ($user_login)
		return '¡Hola ' . $current_user->display_name . '!';
	else
		return 'Acceder';
}
add_shortcode( 'mostrar_conectado', 'ayudawp_mostrar_conectado' );

En este ejemplo hemos usado

display_name

para mostrar el nombre visible del usuario, pero puedes añadir otra información del usuario:

  • user_login
  • user_email
  • user_level
  • user_firstname
  • user_lastname
  • ID

El código puedes añadirlo al final del archivo functions.php del tema activo o a tu plugin de utilidades.

Ahora solo te quedaría insertar el shortcode

[mostrar_conectado]

donde quieras que se vea, por ejemplo en un widget de texto.

Y como ves en la captura anterior se mostrará un saludo al usuario conectado, mostrando – en este ejemplo – su nombre completo visible.

Mientras, cuando no esté conectado, verá un enlace para acceder.

Lo bueno de los shortcodes es que puedes usarlos en cualquier parte, por ejemplo en una entrada, lo que añadiría una capa de personalización muy chula a tus contenidos.

Por ejemplo, si creamos el shortcode para que muestre solo el nombre de pila del usuario, así:

function ayudawp_mostrar_conectado( $atts ) {
 global $current_user, $user_login;
      	wp_get_current_user();
 add_filter('widget_text', 'apply_shortcodes');
 if ($user_login)
 return '¡Hola ' . $current_user->user_firstname . '!';
}
add_shortcode( 'mostrar_conectado', 'ayudawp_mostrar_conectado' );

Podemos usar el shortcode de un modo muy creativo en nuestras publicaciones…

Para ofrecer nuestro contenido siempre personalizado, saludando al usuario conectado.

Como puedes ver, un mundo de posibilidades. Piensa, piensa …

Nota: Observa que he utilizado la función

apply_shortcodes

introducida en WordPress 5.4. Aún funciona la función

do_shortcode

pero es mejor que te vayas acostumbrando a usar la nueva.

Mostrar el nombre de usuario conectado en cualquier parte del tema

Ahora bien, si prefieres no usar shortcodes sino insertar un código en alguna parte específica de tu tema (cabecera, pié de página, barra lateral, contenido, etc.) entonces te propongo este código:

¡Hola ' . esc_html( $current_user->display_name . '!');
    }
}
?>

Que, ya puestos, puedes añadirle también el avatar, como toque de personalización adicional…

ID, 64 );
		echo ' 
¡Hola ' . esc_html( $current_user->display_name . '!'); } } ?>

Y tendrías algo así…

En este ejemplo he metido el código en el archivo

sidebar.php

del tema, antes de los widgets.

Cómo mostrar el nombre de usuario conectado en un menú personalizado

Otra posibilidad, también muy interesante, sería saludar al usuario conectado desde tu menú de navegación personalizado.

Para ello nos valdremos de una función como la siguiente:

/* Saludo a usuario en menu */
add_filter( 'wp_nav_menu_objects', 'saluda_usuario_menu');
function saluda_usuario_menu($items) {
    $remove_childs_of = array();
    foreach($items as $index => $item) {
        if($item->title == "##usuario##") {
            if(is_user_logged_in()) {
                $user=wp_get_current_user();
                $name=$user->user_firstname; // o user_login, user_lastname, display_name
                $items[$index]->title = $name;
            }
            else {
                array_push($remove_childs_of, $item->ID);
                unset($items[$index]);
            }
        }
        if(!empty($remove_childs_of) && in_array($item->menu_item_parent, $remove_childs_of)) {
            array_push($remove_childs_of, $item->ID);
            unset($items[$index]);
        }
    }
    return $items;
}

Como siempre, añadiremos esta función a nuestro plugin de funcionalidades o al archivo functions.php del tema activo (mejor al final del todo).

El siguiente paso sería añadir un nuevo elemento a nuestro menú:

##usuario##

en el ejemplo.

Como verás en la captura anterior se muestra el nombre del usuario conectado.

En el caso de que el visitante no esté conectado no mostrará nada, dejando limpio tu menú.

Resumiendo

Como habrás podido comprobar, mostrar el nombre de los usuarios conectados te abre un montón de posibilidades de personalización y detalle en tu web.

Y, como siempre, WordPress nos ofrece las funcionalidades para conseguirlo de manera sencilla, da igual dónde lo queramos aplicar.

Seguramente habrá algún plugin que ayude con parte o todo de lo que hemos visto, pero no he podido encontrar ninguno que solo haga estas cosas. Si sabes de alguno nos lo cuentas en los comentarios.

Nada más. La verdad es que no tenía pensado este tutorial, pero me lo pidieron el otro día en Twitter y me pareció buena idea.

Espero que te sirva en tus proyectos web.

La entrada Cómo mostrar el nombre del usuario conectado en tu web la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.