Cómo codificar por color las publicaciones del blog Divi por autor

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 margen de mejora, y la codificación de colores 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!

Por qué debería considerar codificar por colores sus publicaciones de blog Divi

Antes de continuar, aclaremos lo que queremos decir con codificar por colores las publicaciones de tu 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 de 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 seguir con colores pastel claros para las publicaciones de nuestros autores. Veamos qué pasa si elegimos un esquema de color diferente:

Por supuesto, ese es un ejemplo extremo, pero nos ayuda a ilustrar nuestro punto. Si desea codificar con 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.

Cómo codificar por color las publicaciones del blog Divi por autor (en 2 pasos)

Ahora que hemos cubierto la teoría, es hora de pasar a cómo codificar por colores las publicaciones del blog Divi. Habilitar esta función solo requiere dos pasos, pero hay que tener en cuenta algunas consideraciones antes de comenzar.

Para empezar, querrá hacer una copia de seguridad de su sitio de WordPress, lo cual siempre es una buena idea al realizar cambios. En segundo lugar, querrá crear un tema secundario Divi, por lo que sus modificaciones permanecerán una vez que se actualice el tema.

Finalmente, necesitará usar un cliente FTP para el paso número uno. Usaremos FileZilla, pero si hay otra herramienta que prefiere, hágalo.

Paso # 1: agregue un fragmento de código al archivo functions.php de su tema infantil

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 el public_html o la carpeta raíz pueden llamarse www o después del dominio de su sitio, dependiendo de 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 hijo, su archivo functions.php debería estar casi vacío, además de poner en cola las funciones de sus padres. Vamos a añadir un fragmento que crea automáticamente una nueva clase para cada uno de sus autores con el autor-prefijo. Por ejemplo, si tiene un usuario de WordPress llamado John, puede usar la clase author-john . Esto nos permitirá agregar 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 :

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 guarde sus cambios, cierre el editor y ¡listo! Tenga en cuenta que deberá usar caracteres en minúscula para que su clase funcione, independientemente del autor con el que esté tratando. Eso será importante para el paso número dos.

Paso # 2: especifique un color para cada autor usando la opción CSS personalizada de Divi

Ahora que nuestra nueva función está lista, el siguiente paso es establecer un color para cada uno de sus autores. Divi le permite hacer esto con su función CSS personalizada , ya que cualquier código que agregue afectará a todo su tema. Para encontrarlo, vaya a su panel 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:

.author-author1 {background-color: #C1F3FA !important;}

Tenga en cuenta que debe agregar el prefijo de 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 importante . En pocas palabras, esto le da al código más peso y anula cualquier conflicto que pueda surgir; sin él, esta característica no funcionará.

Repasemos un último ejemplo. En este, asignaremos diferentes colores a dos autores. Aquí está el código que agregamos a nuestro campo CSS personalizado Divi:

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

Ahora, así es como se ve desde el principio:

Dejando de lado su elección de color, hay otros ajustes que puede hacer en las publicaciones de su 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. Tu objetivo principal debe ser encontrar el estilo perfecto para tu propio blog, ¡así que no temas jugar con Divi y ver qué puede hacer!

Conclusión

Codificar con colores las publicaciones de su blog por su autor es una característica simple que puede ayudar al usuario a navegar por su contenido mucho más fácilmente (particularmente 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 archivos, recuerde hacer una copia de seguridad de su sitio y configurar un tema secundario, para que los cambios persistan en el futuro. Una vez hecho esto, estos son los dos pasos que debe seguir para codificar con colores las publicaciones de su blog Divi por autor:

1. Modifique el archivo functions.php de su tema hijo.
2. Especifique un color para cada uno de sus autores utilizando la opción CSS personalizada de Divi.

¿Tiene alguna pregunta sobre cómo codificar por 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.