Las páginas de categorías son una parte esencial de cualquier sitio web que organice su contenido en diferentes temas o temas. Si utilizas WordPress como plataforma para tu sitio web, tienes la oportunidad de personalizar estas páginas de categorías para mejorar la apariencia y la experiencia del usuario. En este artículo, exploraremos cómo puedes personalizar la página de categorías en WordPress de acuerdo con tus necesidades y preferencias. ¿Te ayuda en el SEO? No dejes de leer el artículo para descubrirlo.
Contenido
Comprender la Estructura de las Páginas de Categorías en WordPress
Antes de sumergirnos en la personalización, es importante comprender cómo WordPress organiza y muestra las páginas de categorías. Por defecto, WordPress utiliza una plantilla predeterminada para mostrar estas páginas, y esta plantilla puede variar según el tema que estés utilizando. Normalmente, verás una lista de entradas (posts) que pertenecen a una categoría específica.
Si has decidido indexar las categorías, sería interesante el poder personalizar estas páginas para que tengan un texto optimizado para el SEO, una imagen para cada categoría …
Seleccionar el Método de Personalización
Cuando se trata de personalizar la página de categorías en WordPress, tienes dos enfoques principales: personalización con pluguins y personalización con código. La elección entre estos enfoques depende de tus habilidades técnicas y preferencias.
Personalización Sin Código con Plugins de WordPress
Partiendo del supuesto que conoces que son las categorías y que la importancia que tiene en la estructura de tu web. Lo primero es acceder a la edición de las categorías y tener claro qué es lo que necesitamos o queremos tener.
En las siguientes imágenes os mostramos un ejemplo del panel de creación de categorías, intenta observar la diferencia entre ambas.
Como podéis observar se ha añadido la imagen de la categoría, algo muy interesante si quieres hacer un menú por clusters o categorías dinámico y con imágenes. También es una parte importante a la hora de de personalizar la página de la categoría correspondiente, puesto que la puedes añadir a la cabecera.
Plugins de Personalización
Si deseas opciones más avanzadas de personalización, considera utilizar plugins específicos como «Category Page Enhanced» o «Category Templates». Estos plugins pueden agregar funcionalidades adicionales y opciones de diseño a tus páginas de categorías. Tras la última revisión esto es lo poco que queda en el repositorio de plugins de wordpress, la gente prefiere editar el código ya que termina siendo más sencillo.
Aquí hay algunos plugins populares que puedes utilizar para personalizar la página de categorías en WordPress:
- Elementor: Elementor es un popular plugin de creación de páginas que te permite personalizar fácilmente el diseño de tus páginas de categorías. Puedes arrastrar y soltar elementos, agregar widgets y personalizar el diseño de la página según tus necesidades.
Es importante tener en cuenta que la elección del plugin dependerá de tus necesidades específicas y del tema que estés utilizando en tu sitio de WordPress. Algunos temas pueden tener opciones de personalización incorporadas para las páginas de categorías, por lo que es posible que no necesites utilizar un plugin adicional.Recuerda siempre investigar y probar los plugins antes de instalarlos en tu sitio en vivo. Lee las reseñas, verifica la compatibilidad con tu versión de WordPress y asegúrate de que el plugin sea confiable y esté bien mantenido.
Personalización Con Código
Creación de un Child Theme
Si prefieres un control más profundo sobre la personalización y deseas mantener los cambios después de las actualizaciones del tema, crear un tema secundario (child theme) es esencial:
- Crea una carpeta para tu child theme en el directorio «wp-content/themes/».
- Crea un archivo «style.css» en la carpeta del child theme y define los detalles del tema.
- Activa el child theme desde el panel de administración.
Crear campo Imagen:
Para poder introducir la imagen en el formulario de creación de categorías, yo recomiendo hacerlo con ACF una forma sencilla y rápida:
- Instala el plugin ACF del repositorio de wordpress
- Crea un nuevo grupo de campos.
- Añadir el nombre del grupo.
- En Tipo de campo elegir «imagen».
- Darle nombre a la etiqueta de campo.
- Darle nombre a campo, este luego será necesario para añadirlo al código.
- En formato de retorno elegir «Url de imagen» y guardar.
- Este es el resultado:
Incluir consulta en functions.php del Child Theme
Para poder utilizar la imagen recién introducida con ACF tenemos que añadir en el functions.php de tema hijo, repito tema hijo para que no se dañe la web con las modificaciones, para que se mantenga cuando se actualice el tema y para poder arreglar la web cuando metamos la pata al tocar lo que no toca…. jajaja
// Imagen en categorias
add_action( 'category_template_part', 'category_thumbnail' );
function category_thumbnail() {
if ( is_category() && has_category_thumbnail() ) {
echo '<img src="' . category_thumbnail_url() . '" />';
}
}
function category_thumbnail_url() {
$thumbnail_id = get_term_meta( get_query_var( 'cat' ), 'Nombre_del_campo', true );
return wp_get_attachment_url( $thumbnail_id );
}
function has_category_thumbnail() {
return get_term_meta( get_query_var( 'cat' ), 'cat_img', true );
}
// Fin en categoriasRecuerda que has de cambiar «Nombre_del_campo» por el que tu has colocado en ACF.
Modificación de Archivos de Plantilla
Identifica los archivos de plantilla relacionados con las páginas de categorías en tu tema. Estos archivos podrían ser «category.php», «archive.php» o «index.php». Edita estos archivos para ajustar el diseño y la estructura de la página de categorías.
Dependiendo el tema que estés utilizando el archivo se denomina de una forma u otra y el funcionamiento del código también. Por ejemplo este es el código de la plantilla del tema Generatepress:
<?php
/**
* The template for displaying Archive pages.
*
* @package GeneratePress
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
get_header(); ?>
<div <?php generate_do_attr( 'content' ); ?>>
<main <?php generate_do_attr( 'main' ); ?>>
<?php
/**
* generate_before_main_content hook.
*
* @since 0.1
*/
do_action( 'generate_before_main_content' );
if ( generate_has_default_loop() ) {
if ( have_posts() ) :
/**
* generate_archive_title hook.
*
* @since 0.1
*
* @hooked generate_archive_title - 10
*/
do_action( 'generate_archive_title' );
/**
* generate_before_loop hook.
*
* @since 3.1.0
*/
do_action( 'generate_before_loop', 'archive' );
while ( have_posts() ) :
the_post();
generate_do_template_part( 'archive' );
endwhile;
/**
* generate_after_loop hook.
*
* @since 2.3
*/
do_action( 'generate_after_loop', 'archive' );
else :
generate_do_template_part( 'none' );
endif;
}
/**
* generate_after_main_content hook.
*
* @since 0.1
*/
do_action( 'generate_after_main_content' );
?>
</main>
</div>
<?php
/**
* generate_after_primary_content_area hook.
*
* @since 2.0
*/
do_action( 'generate_after_primary_content_area' );
generate_construct_sidebars();
get_footer();
Recuerda tener instalado un tema hijo y realizar las modificaciones en el.
En la plantilla se tendría que añadir el siguiente código, dependiendo la zona donde quieres que aparezca has de incluir el código en el apartado deseado:
if ( has_category_thumbnail() ) {
echo '<img src="' . category_thumbnail_url() . '" />'; }Definir las mejores medidas para las imágenes destacadas en WordPress es importante para garantizar que tu sitio web se vea profesional, se cargue rápido y brinde una experiencia visual agradable para los usuarios. A continuación, te proporciono algunas recomendaciones para resolución, formato y tamaños de imágenes destacadas en WordPress:
Resolución y Formato
Resolución
La resolución de las imágenes se mide en píxeles por pulgada (PPI o DPI). Para imágenes web, una resolución de 72 PPI es común y suficiente para la visualización en pantalla.
Formato
El formato más común y recomendado para las imágenes web es JPEG (o JPG). Es un formato comprimido que ofrece una buena calidad de imagen y un tamaño de archivo razonable. Para imágenes con transparencias, como logotipos, utiliza el formato PNG.
Tamaños Recomendados
Imagen Destacada en Entradas o Páginas
El tamaño de imagen destacada puede variar según el diseño de tu sitio web y cómo se muestra en diferentes dispositivos. Sin embargo, aquí tienes algunas medidas recomendadas que suelen funcionar bien en la mayoría de los casos:
- Tamaño recomendado: 1200 x 800 píxeles (ancho x alto)
- Proporción: 3:2
Este tamaño proporciona una buena calidad en la mayoría de las pantallas y se adapta bien a diferentes diseños de página.
Miniaturas y Galerías
WordPress genera automáticamente miniaturas de tus imágenes destacadas para diferentes partes del sitio, como las páginas de inicio, las páginas de categorías y las galerías. Aquí hay algunas medidas recomendadas para miniaturas:
- Miniatura cuadrada: 150 x 150 píxeles
- Miniatura horizontal: 300 x 200 píxeles
- Miniatura vertical: 150 x 225 píxeles
Cabecera (Header) o Imagen de Portada
Si tu tema permite una imagen de cabecera o portada, aquí hay un tamaño recomendado:
- Tamaño recomendado: 2000 x 1200 píxeles (ancho x alto)
- Proporción: 5:3
Este tamaño asegura que la imagen se vea bien en pantallas grandes y mantenga una buena calidad en dispositivos más pequeños.
Recuerda que estas son recomendaciones generales y que los tamaños pueden variar según el diseño de tu sitio web y tus preferencias. Además, es importante optimizar las imágenes para web mediante compresión para que se carguen rápidamente sin sacrificar demasiada calidad.
Optimización para SEO y Rendimiento
Al personalizar las páginas de categorías, asegúrate de que las optimizaciones SEO y el rendimiento no se vean comprometidos. Mantén en mente las mejores prácticas de SEO y utiliza herramientas para verificar la velocidad de carga de la página.
Pruebas y Visualización Responsiva
Antes de finalizar tus personalizaciones, realiza pruebas exhaustivas en diferentes dispositivos y tamaños de pantalla. Utiliza herramientas de prueba como el modo de desarrollo del navegador y servicios de prueba en línea para asegurarte de que todo se vea y funcione como debería.
Mantenimiento Continuo
Recuerda que las personalizaciones pueden requerir ajustes periódicos debido a las actualizaciones de WordPress, temas o plugins. Mantén un ojo en las actualizaciones y realiza pruebas después de cada actualización importante.
Personalizar la página de categorías en WordPress puede marcar la diferencia en la apariencia y experiencia general de tu sitio web. Ya sea que elijas la personalización sin código o la personalización con código, el resultado final debe reflejar tus objetivos y visión para el sitio. Experimenta, prueba y adapta tus personalizaciones para crear un sitio web único y atractivo que atraiga a tus usuarios.
¿Has personalizado alguna vez la página de categorías en WordPress? ¡Comparte tus experiencias y resultados en los comentarios a continuación!
