Personalizar la vista de lista

La apariencia de la vista de lista de inmuebles se controla de forma centralizada en el Customizer de WordPress. Allí verá sus cambios inmediatamente en la vista previa en vivo antes de guardarlos.

Acceder al Customizer

Abra el Customizer en el backend de su sitio web (wp-admin) en Apariencia → Personalizar. WP-ImmoMakler añade allí su propia sección WP-ImmoMakler con el subapartado Immobilien Listenansicht (vista de lista de inmuebles).

Diseño y ancho

Estas opciones determinan la estructura básica de la lista: ancho, número de inmuebles y distribución de columnas.

Opción	Descripción
Ancho máximo de la lista (px)	Ancho máximo de la vista de lista (predeterminado: 1300 px).
Número de inmuebles por página	Cuántos inmuebles se muestran por página antes de que se active la paginación (predeterminado: 12).
Número de columnas	Número de columnas. Recomendación: “automático (CSS grid)”: el número real de columnas resulta entonces del ancho mínimo (véase la siguiente opción). El número fijo de columnas (1–4) sigue disponible para instalaciones existentes o casos especiales.
Columnas (automático): ancho mínimo en píxeles	Solo con “automático”: cuán estrechas pueden volverse las cajas de inmuebles en pantallas más pequeñas antes de que se reduzca automáticamente el número de columnas (predeterminado: 360 px). Con este valor controla indirectamente el número de columnas deseado.
Columnas (automático): espacio en píxeles	Espacio entre las cajas de inmuebles (predeterminado: 25 px).
Disposición	“Imágenes arriba” (predeterminado) o “Imágenes a la izquierda”: posición de la imagen de vista previa dentro de una caja.

Imágenes de vista previa

Controle el tamaño, el formato y los efectos de las imágenes de vista previa en la lista.

Opción	Descripción
Dimensiones en píxeles de las imágenes de vista previa	Tamaño de las imágenes de vista previa. Si las imágenes se ven borrosas, elija un formato de píxeles mayor.
Relación de aspecto de las imágenes	Relación de aspecto uniforme (original, 16:9, 3:2, 4:3 o 1:1; predeterminado: 3:2).
Alineación de las imágenes	Recorte de la imagen con una relación de aspecto fija: borde superior, centro (predeterminado) o borde inferior. Si, por ejemplo, muestra su logotipo en el borde inferior de la imagen, elija “borde inferior” para que siempre quede visible.
Efecto de ampliación	Las imágenes de vista previa se amplían y aclaran ligeramente al pasar el ratón por encima.
Efecto de precarga	Las imágenes de vista previa se muestran primero como una versión preliminar borrosa hasta que se carga la imagen real.
Mostrar imágenes como slider PLUS	Muestra todas las imágenes del inmueble como slider ya en la vista de lista.

Diseño de las cajas

Los inmuebles se muestran en cajas uniformes. Con el interruptor Diseño de cajas (activado/desactivado) habilita o deshabilita por completo la presentación en cajas; las siguientes opciones afinan su aspecto.

Opción	Descripción
Estilo de las cajas	“Largo” (detallado, predeterminado) o “Compacto” (presentación condensada).
Destacar gráficamente el precio principal	Resalta visualmente el precio más importante en el estilo de cajas “Compacto”.
Mostrar borde	Muestra u oculta el marco alrededor de las cajas.
Color del borde	Color del marco de la caja (predeterminado: `#cccccc`).
Color de fondo	Color de fondo de las cajas (predeterminado: `#ffffff`).
Sombra ligera alrededor de las cajas	Da a las cajas una apariencia más tridimensional.
Brillo de la sombra	Brillo de la sombra de la caja (185–254).
Radio de las esquinas en píxeles	Radio para esquinas redondeadas. Elija 0 para esquinas en punta.

Datos del inmueble mostrados

Defina qué campos de datos y precios aparecen en las cajas de la lista.

Opción	Descripción
Mostrar datos del inmueble	Seleccione qué características del inmueble (p. ej. superficie habitable, habitaciones, localidad) aparecen en la lista.
Mostrar precios	Seleccione qué importes (p. ej. precio de compra, alquiler base) se muestran.

Ordenación

Opción	Descripción
Mostrar opciones de ordenación en las listas	Muestra el desplegable de ordenación para los visitantes. De lo contrario, se listan primero los inmuebles importados más recientemente.
Ordenar por disponibilidad	Orden: disponible > reservado > vendido/alquilado > referencia.
Orden predeterminado	Cómo se ordenan los inmuebles la primera vez que se abre la lista (fecha, precio, habitaciones o superficie, cada uno ascendente o descendente). Predeterminado: “Automático” — lo más nuevo primero, o el orden manual si hay un plugin de ordenación activo. Los visitantes pueden cambiar después el orden mediante el desplegable de ordenación.

Inmuebles de referencia

Opción	Descripción
Mostrar inmuebles de referencia en las listas normales	De lo contrario, los inmuebles de referencia solo aparecen en la lista de referencias separada. Los inmuebles marcados como “referencia” se muestran —a diferencia de “vendido/alquilado”— sin precios ni detalles del inmueble.
Enlazar la vista de detalle para inmuebles de referencia	Enlaza los inmuebles de referencia con su respectiva vista de detalle (sin datos del inmueble).

Colorear las barras de estado

Las barras de estado (“nuevo”, “inmueble destacado”, “vendido”, etc.) sobre las imágenes de vista previa se configuran en el Customizer en la sección WP-ImmoMakler → Colores. Allí establece el color base en Color predeterminado de las barras de estado (vista de lista) y puede definir colores propios para “vendido/alquilado”, “reservado” y “nuevo” mediante Usar colores adicionales para cada estado.

Aviso de WP-ImmoMakler

Con la opción Mostrar aviso de WP-ImmoMakler muestra al final de la vista de lista una nota discreta que indica que la vista fue creada con WP-ImmoMakler.

Insertar textos y bloques de contenido

A través del WP-ImmoMakler Child-Skin-Plugin o un constructor de páginas como Elementor o Divi, puede insertar textos propios, cuadros informativos o avisos encima o debajo de la lista de inmuebles. En Elementor y Divi, simplemente coloque los elementos deseados en el editor visual en la posición correspondiente.

Diseño mediante CSS

Los ajustes visuales que van más allá de las opciones del Customizer, como el color de fuente, el tipo de letra o las mayúsculas, se realizan preferiblemente mediante CSS. Añada su código en el archivo immomakler.css del WP-ImmoMakler Child-Skin-Plugin:

.immomakler h1 {
  text-transform: uppercase !important;
}

Comience con un archivo immomakler.css vacío y añada únicamente los estilos que realmente desee sobrescribir. No copie el archivo CSS predeterminado completo del plugin. Una vez que se coloca un archivo en el WP-ImmoMakler Child-Skin-Plugin, ese archivo ya no se carga desde el plugin principal, sino desde el WP-ImmoMakler Child-Skin-Plugin.

Cambiar el texto del botón de resultados de búsqueda

El texto predeterminado del botón que muestra la cantidad de resultados (por ejemplo, “Mostrar 12 resultados”) se puede personalizar mediante un filtro en el WP-ImmoMakler Child-Skin-Plugin: Por favor, añada el filtro en el archivo functions.php de su WP-ImmoMakler Child-Skin-Plugin.

add_filter( 'immomakler_search_button_text', function() {
    return '%s Treffer anzeigen';
} );

El marcador %s se reemplaza automáticamente por la cantidad de inmuebles encontrados.

Personalizar el encabezado

El encabezado principal sobre la vista de lista de inmuebles se puede personalizar mediante un filtro (para cambios específicos en encabezados individuales) o mediante una copia de plantilla de title.php. Coloque todas las personalizaciones en su WP-ImmoMakler Child-Skin-Plugin, para que se conserven tras las actualizaciones del plugin.

Mediante filtro

Con el filtro immomakler_archive_headline sustituye el encabezado principal por un título a su elección. Añada el filtro en el archivo functions.php de su WP-ImmoMakler Child-Skin-Plugin. En el caso más sencillo, devuelva un nuevo título de forma incondicional:

add_filter( 'immomakler_archive_headline', function( $title ) {
    return 'Immobilienangebote';
} );

Nota: Con esta variante sobrescribiría todos los encabezados de los archivos de inmuebles a la vez (véase la lista de verificación en Mediante copia de plantilla). Si desea reemplazar solo un encabezado específico, compruebe el valor original:

add_filter( 'immomakler_archive_headline', function( $title ) {
    if ( $title === 'Immobilienangebot' ) {
        return 'Immobilienangebote in Lübeck';
    }
    return $title;
} );

Mediante copia de plantilla (`title.php`)

Como alternativa, coloque una copia de title.php en el directorio archive de su WP-ImmoMakler Child-Skin-Plugin. Sustituya allí la salida predeterminada

<?php echo esc_html( immomakler_archive_headline() ); ?>

por su propio título:

<h1 class="archive-title">Mi título personalizado</h1>

Si desea eliminar el encabezado por completo, coloque simplemente un title.php vacío en el directorio archive de su WP-ImmoMakler Child-Skin-Plugin.

El subencabezado se puede ajustar mediante el hook immomakler_archive_subheadline.

Mediante constructor de páginas

Si diseña la vista de lista con un constructor de páginas, personalice el encabezado directamente en el editor visual. Para más información, consulte los artículos correspondientes: Elementor Pro, Divi Theme Builder, Bricks, WPBakery, Oxygen, Gutenberg Blocks y otros Theme Builders.

Subencabezado / Ajustar el subencabezado

Debajo del encabezado principal aparece un subencabezado complementario que varía según el filtro y la categoría. En la vista general de inmuebles, este texto es por defecto “Todos los inmuebles”. Con este filtro puede sustituir exactamente ese texto predeterminado por su propia formulación, sin afectar los subencabezados individuales de cada categoría. Introduzca el texto deseado en el lugar de “Tu nuevo texto”.

add_filter( 'immomakler_archive_subheadline', function( $title ) {
    if ( $title === 'Alle Immobilien' ) {
        return 'Dein neuer Text';
    }
    return $title;
} );

Añadir datos de inmuebles en la vista de lista

Con este filtro puede añadir más campos de datos que se mostrarán en cada caja de inmuebles en la vista de lista, además de los campos estándar seleccionados en el Customizer (véase el apartado “Datos del inmueble mostrados” más arriba). En el ejemplo se añaden el número de habitaciones, la superficie habitable y la superficie del terreno; adapte el array $add_keys según sus necesidades.

add_filter( 'immomakler_property_data_archive_keys', function( $property_data_keys ) {
    $add_keys = [
        'anzahl_zimmer',
        'wohnflaeche',
        'grundstuecksflaeche',
    ];
    return array_merge( $property_data_keys, $add_keys );
} );

Realizar todas las personalizaciones de forma segura ante actualizaciones

Los ajustes del Customizer se conservan automáticamente durante las actualizaciones. Realice cualquier otro cambio en plantillas, CSS o mediante filtros exclusivamente en el WP-ImmoMakler Child-Skin-Plugin. Solo así se conservarán también esos cambios tras las actualizaciones del plugin.