Uno de los principales objetivos de Divi es asegurarse de que todos los elementos de su sitio web se vean bien, y las publicaciones de blog no son una excepción. Sin embargo, siempre hay espacio para mejorar, y la codificación de color de las publicaciones de su blog por autor ofrece una forma para que los usuarios naveguen por su contenido de manera más eficiente (¡además de identificar a sus escritores favoritos!).
En este artículo, hablaremos más sobre por qué es posible que desee codificar con colores las publicaciones de su blog Divi y cómo hacerlo en dos simples pasos. ¡Es hora de una nueva capa de pintura!
Antes de continuar, aclaremos lo que queremos decir con la codificación por colores de las publicaciones de su blog Divi. En la siguiente sección, le enseñaremos cómo asignar a cada uno de sus escritores un color que aparecerá como fondo para sus propias publicaciones. En este ejemplo, asigné a mis propias publicaciones (como autor1) un azul claro muy atractivo:
El efecto en sí es relativamente simple, pero ofrece una forma impactante de diferenciar a los escritores. Los usuarios pueden reconocer fácilmente nuevas piezas de sus escritores favoritos de un vistazo. Por supuesto, hacer que el nombre del autor sea más prominente puede tener el mismo efecto, pero puede que no sea tan impactante visualmente.
Su única preocupación con esto es su elección de colores. Tome la captura de pantalla al comienzo de esta sección, por ejemplo: nuestro índice de blog Divi usa un fondo blanco, por lo que decidimos mantener colores pastel claros para las publicaciones de nuestros autores. Veamos qué sucede si elegimos un esquema de color diferente:
Por supuesto, ese es un ejemplo extremo, pero nos ayuda a ilustrar nuestro punto. Si desea codificar por colores sus publicaciones, deberá considerar su paleta cuidadosamente, utilizando una herramienta adecuada para ayudar si es necesario. El uso de colores contrastantes para resaltar la diferencia entre cada publicación puede ayudar a los usuarios a identificar a los autores rápidamente, pero también puede causar estragos en el estilo de su blog y dificultar la lectura de su contenido.
Ahora que hemos cubierto la teoría, es hora de pasar a cómo codificar con color las publicaciones de blog de Divi. Habilitar esta característica solo toma dos pasos, pero hay algunas consideraciones que hacer antes de comenzar.
Para empezar, querrá hacer una copia de seguridad de su sitio de WordPress , lo cual siempre es una buena idea cuando se realizan cambios. En segundo lugar, querrá crear un tema secundario de Divi , por lo que sus modificaciones permanecerán una vez que se actualice el tema.
Finalmente, deberá usar un cliente FTP para el paso número uno. Usaremos FileZilla , pero si hay otra herramienta que prefiera, hágalo.
Paso n.º 1: agregue un fragmento de código al archivo functions.php de su tema secundario
Para hacer esto, deberá abrir su cliente FTP e iniciar sesión en el servidor de su sitio. Desde allí, diríjase al directorio public_html / wp-content/themes/ , luego busque la carpeta del tema de su hijo. Tenga en cuenta que la carpeta raíz o public_html puede llamarse www o después del dominio de su sitio, según su host:
Una vez que haya localizado la carpeta de su tema hijo, ábrala y busque el archivo functions.php dentro. Ahora, haga clic derecho sobre él y presione la opción que dice Ver/Editar :
Esto le pedirá que abra el archivo con su editor de texto predeterminado. Dado que estamos tratando con un tema secundario, su archivo functions.php debería estar mayormente vacío aparte de poner en cola las funciones de sus padres. Vamos a agregar un fragmento que crea automáticamente una nueva clase para cada uno de sus autores con el prefijo autor- . Por ejemplo, si tiene un usuario de WordPress llamado John, podría usar la clase author-john . Esto nos permitirá agregar algún código CSS más adelante.
A continuación, agregue el siguiente fragmento de PHP después de la línea // END ENQUEUE PARENT ACTION :
|
01
02
03
04
05
|
function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );return $classes;}add_filter( 'post_class', 'et_set_author_class' ); |
Ahora guarda tus cambios, cierra el editor y ¡listo! Tenga en cuenta que deberá usar caracteres en minúsculas para que su clase funcione, independientemente del autor con el que esté tratando. Eso va a ser importante para el paso número dos.
Ahora que nuestra nueva función está lista, el siguiente paso es establecer un color para cada uno de sus autores. Divi te permite hacer esto con su función CSS personalizado , ya que cualquier código que agregues allí afectará todo tu tema. Para encontrarlo, vaya a su panel de control de WordPress y navegue a la pestaña Divi > Opciones de tema , luego desplácese hacia abajo hasta el cuadro CSS personalizado al final de la página:
Deberá agregar una nueva línea de CSS dentro de este campo para cada uno de sus autores. Por ejemplo, si tiene un autor con el nombre de usuario autor1 , así es como establecería un color particular para él:
|
01
|
.author-author1 {background-color: #C1F3FA !important;} |
Tenga en cuenta que debe agregar el prefijo autor a su clase, independientemente de su nombre de usuario. Después de indicar un color de fondo, también debe asegurarse de declarar que el código es !important . En pocas palabras, esto le da más peso al código y anula cualquier conflicto que pueda surgir; sin él, esta función no funcionará.
Repasemos un último ejemplo. En esto, asignaremos diferentes colores a dos autores. Aquí está el código que agregamos a nuestro campo CSS personalizado de Divi:
|
01
02
03
|
.author-author1 {background-color: #C1F3FA !important;}.author-author2 {background-color: #F9FCB8 !important;} |
Ahora, así es como se ve desde el frente:
Dejando de lado tu elección de color, hay otros ajustes que puedes hacer en las publicaciones de tu blog Divi. Por ejemplo, puede modificar la longitud de los extractos de su blog o diseñar las ‘tarjetas’ de sus publicaciones de varias maneras. Su objetivo principal debe ser encontrar el estilo perfecto para su propio blog, ¡así que no tenga miedo de jugar con Divi y ver qué puede hacer!
Conclusión
La codificación por colores de las publicaciones de su blog por su autor es una característica simple que puede ayudar al usuario a navegar su contenido mucho más fácilmente (especialmente si tiene un archivo extenso). Además, muchos de sus usuarios probablemente apreciarán poder reconocer las publicaciones de sus autores favoritos solo por el color.
Antes de comenzar a modificar los archivos, recuerde hacer una copia de seguridad de su sitio y configurar un tema secundario , para que sus cambios persistan en el futuro. Una vez hecho esto, estos son los dos pasos que debe seguir para codificar por color las publicaciones de su blog Divi por autor:
- Modifique el archivo functions.php de su tema hijo .
- Especifique un color para cada uno de sus autores utilizando la opción CSS personalizada de Divi.
¿Tiene alguna pregunta sobre cómo codificar con color las publicaciones del blog Divi por autor? ¡Pregunte en la sección de comentarios a continuación!
Imagen en miniatura del artículo de RaZZers / shutterstock.com.