¿Te gustaría clasificar las categorías de manera diferente en WordPress?
La mayoría de las Temas de WordPress use el mismo estilo para todas las páginas de archivo de categorías. Sin embargo, si tiene un sitio web rico en contenido, puede optar por mostrar cada categoría de manera diferente para maximizar su potencial.
En este tutorial, le mostraremos cómo mostrar las categorías de manera diferente en su blog de WordPress.
Sin más preámbulos te invitamos a descubrir nuestra lista. Pero primero, si nunca ha instalado WordPress, averigüe ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog
Luego de vuelta a por qué estamos aquí.
¿Por qué dar un estilo diferente a las categorías en WordPress?
Como dijimos anteriormente, la mayoría Temas de WordPress utilice la misma plantilla para cada página de archivo de categoría. Esto se debe a que los desarrolladores de Temas de WordPress No sé cómo vas a utilizar las categorías en tu sitio web.
Lea también: Cómo mostrar contenido RSS sólo para suscriptores en WordPress
Sin embargo, si tiene un sitio web rico en contenido, cambiar el diseño de una página de archivo La categoría puede tener un impacto dramático en cómo los usuarios interactúan con el contenido de esa página.
Por ejemplo, si administra un sitio web de noticias o revistas, puede mostrar anuncios locales en la categoría de noticias locales. Puede ver información meteorológica, ver las historias más populares de esta categoría, etc.
Dicho esto, veamos cómo personalizar fácilmente categorías individuales en WordPress.
Cómo dar un estilo a las categorías.
Hay varias formas de categorizar categorías en WordPress. Le mostraremos dos métodos diferentes para dar a las categorías un estilo diferente, y puede elegir los que mejor se adapten a sus necesidades y nivel de habilidad.
Usar una plantilla de categoría única en un tema de WordPress
Los temas de WordPress siguen una jerarquía de plantillas estándar. Según el nombre del archivo de plantilla, WordPress puede elegir automáticamente la plantilla correcta para mostrar una página.
Por ejemplo, busca el archivo category.php para mostrar las páginas de archivo de categoría.
WordPress también te permite crear modelos para categorías individuales Supongamos que desea clasificar la categoría "AppleDiferente Puede hacer esto agregando un nuevo archivo de plantilla a su tema de WordPress y nombrándolo -categoría apple.php.
Conéctese a su sitio web de WordPress utilizando un cliente FTP, luego navegue hasta / Wp-content / themes / tu-tema / y cree un nuevo archivo llamado category-apple.php. Recuerde reemplazar "Apple" con el nombre de su categoría.
Puedes usar el archivo " category.php De su tema de WordPress como punto de partida. Simplemente edite y copie todo su contenido. Ahora cambie el nombre de su nuevo archivo a " -categoría apple.php Y pega el código dentro.
Luego puede comenzar a realizar cambios en su modelo de categoría individual. Puede crear y usar una barra lateral diferente para esta categoría, convertirla en una página de ancho completo, agregar un mensaje de bienvenida o lo que quieras
Dar un estilo a las categorías usando código CSS
WordPress agrega automáticamente clases CSS a diferentes elementos en su sitio web. Estos incluyen tanto la clase de cuerpo como la clase de publicación.
Por ejemplo, si ve una página de archivo de categorías y luego usa la herramienta Inspeccionar, notará las clases CSS "categorías" y el nombre de la categoría en la etiqueta "cuerpo".
Puede usar esta clase CSS para cada categoría individual diferente por agregar CSS personalizado.
Aquí hay un ejemplo de CSS que puede usar como punto de partida.
body.category-manzana {background-color: #eee; background: url ( "http://example.com/wp-content/uploads/2017/background.jpg ') no-repeat fijo; de color: #FFFFFF; } .site .category-manzana {background: #232323; } .category-manzana {color: #CCCCCC; }
No olvide cambiar el nombre de la categoría en la clase CSS con el nombre de su categoría.
Ahora puede agregar código CSS personalizado en WordPress. Pero, si necesita una solución premium para agregar un código CSS personalizado, ofrecemos a continuación 2 plugins de WordPress premium que te ayudará en esta tarea.
1. Easy Custom JS y CSS
Ce Plugin de WordPress premium es un poderoso editor de código CSS y JavaScript que te permite agregarlos a cualquier sección de tu sitio web. Le permite mantener sus personalizaciones incluso después de una actualización importante de su tema de WordPress.
Tiene la posibilidad de limitar el campo de uso de su código personalizado. Por ejemplo, puede usar su código solo para un artículo que tenga el formato de video.
Vea nuestros artículos sobre Cómo exigir la aceptación de los términos de uso en WordPress
O puede limitar su código a un tema específico de WordPress; Lo cual es útil si actualmente está cambiando temas para su blog de WordPress.
Descargar | Demo | alojamiento web
2. ¡JavaScript y CSS personalizados en las páginas!
Gracias a esto Plugin de WordPress, puedes añadir Estilos CSS y JavaScript personalizado en páginas específicas. También le permite definir reglas para varias páginas. De esta manera, puede tener estilos predefinidos o únicos para secciones específicas.
Como cualquier otra característica que ofrece este Plugin de WordPress, puede incluir fácilmente diferentes scripts en diferentes páginas de su sitio web.
Descargar | Demo | alojamiento web
Recursos recomendados
Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.
- 8 complementos de WordPress para agregar un sistema de traducción en un blog
- 5 complementos de WordPress para crear un calendario en un blog
- La guía en pasos de 4 para construir su autoridad a través de su blog
- Algunos complementos de WordPress para redirigir
Conclusión
Listo ! Eso es todo por este tutorial, espero que le permita agregar código CSS personalizado en WordPress. no dude en comparte este artículo con tus amigos en tus redes sociales favoritas.
Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.
Si tienes sugerencias o comentarios, déjalos en nuestra sección comentarios.
...
Muchas gracias por este genial y fácil de entender tutorial, gracias a tu artículo pude modificar el diseño de la página.
Salut!
Por favor mira si puedes ayudarme porque me estoy fumando la cabeza
Estoy haciendo una tienda online con divi y woocommerce y tengo un problema porque no puedo personalizar la página de categorías.
Te paso el enlace para que lo veas:
https://chachocarp.com/product-category/los-mas-vendidos
Lo que quiero cambiar es:
1. Tengo 24 productos en esta categoría y en lugar de mostrarlos en dos páginas de 12 productos, los muestra en tres páginas de 9, 9 y 6 y es fatalmente claro.
2. No mantuve la configuración de desplazamiento al pasar el cursor sobre los productos. Me gustaría que la transparencia fuera azul y las letras "ver producto para ser naranaja" como en el módulo de tienda de la página principal.
3. Me gustaría que la barra lateral izquierda mostrara todas las categorías y subcategorías.
¿Cómo lo hizo?
Merci pour ton ayudante
Hola miguel
Haga la pregunta en un artículo sobre WooCommerce o Divi. Y es un placer poder responderte. 😉