Cómo personalizar el fondo de un div dinámicamente usando Advanced Custom Fields

Question

Cómo personalizar el fondo de un div dinámicamente usando Advanced Custom Fields

24 sept 2013, 00:07:48

Vistas: 13.8K

Votos: 2

He avanzado hasta crear tipos de contenido personalizados, campos personalizados y vincularlos a plantillas en este primer proyecto de WordPress en el que estoy trabajando, pero me he topado con un problema que no puedo resolver fácilmente (y estos problemas me surgen constantemente, como es natural).

He creado varios encabezados diferentes para distintas secciones de mi sitio y entiendo cómo llamarlos desde diferentes plantillas. Sin embargo, tengo un encabezado que se usará en 27 páginas de vecindarios diferentes y el detalle es que el color de fondo para cada vecindario necesita ser personalizado.

¿Se puede lograr esto con PHP? ¿O alguien tiene sugerencias sobre cómo podrían hacer que esto funcione? Entiendo que podría usar jQuery pero no estoy seguro de cómo funcionaría en un sitio que ya genera contenido dinámico y tener que determinar en qué vecindario está para saber qué color mostrar.

Estaba pensando en crear 27 archivos header.php diferentes pero luego pensé que era una locura cuando no pude entender cómo decirle a la plantilla de página de vecindario que llame al encabezado correcto basado en el vecindario. Incluso contemplar tener 27 plantillas de página solo para mostrar 27 colores de fondo diferentes para el encabezado sonaba a locura, pero bueno, cuando eres principiante ese tipo de soluciones empiezan a sonar bastante bien cuando los plazos se acercan.

Gracias.

CÓDIGO ACTUALIZADO 24/09/2013

<!--Código Actualizado 24/09-->

    $args = array(
        'post_type' => 'single_neighborhood'
      );

    $the_query = new WP_Query( $args );

  ?>

  <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

  <div class="container-hdr-neighborhood" style="background-color:<?php the_field( 'background_color' ); ?> ;">

  <?php endwhile; else: ?>

  <?php endif; ?>

MARS

163

campos personalizados avanzados fondo personalizado selector-de-color

Todas las respuestas a la pregunta

Puedes aplicar un estilo al <div> del encabezado (o al elemento <header>), y luego añadir un estilo en línea usando wp_add_inline_style().

Por ejemplo, supongamos que tienes algo como esto en tu archivo header.php:

<header id="masthead" class="site-header" role="banner">

(Tomado del tema Twenty Twelve).

Digamos que has configurado el color del vecindario como meta-información de la publicación usando update_post_meta() o quizás un metabox personalizado de algún tipo. Ahora podemos extraerlo de la tabla meta y colocarlo en los estilos en línea:

add_action(  'wp_enqueue_scripts', 'wpse115373_header_bg' );
function wpse115373_header_bg() {
    global $post;
    // establece esto al identificador de una de tus hojas de estilo
    $handle = 'twentytwelve-style';
    // establece esto a la clave meta que has utilizado
    $meta_key = 'neighborhood_color';
    $bg_color = get_post_meta( $post->ID, $meta_key, $single = true );
    $css = "header { background-color: $bg_color; }";
    wp_add_inline_style( $handle, $css ); 
}

Referencia

Páginas del Codex para:

Pat J

12.3K

24 sept 2013 00:32:37

Comentarios

gracias por la respuesta, solo que no estoy seguro de dónde poner la función, ¿sería dentro de functions.php o functions.wp-styles.php dentro de la carpeta wp-includes? Además, ¿crees que esto podría funcionar usando el plugin Advanced Custom Fields donde puedo crear un campo personalizado para el selector de color y usar la etiqueta de descripción (en mi caso 'background_color') para añadir una etiqueta the_field() a este archivo de cabecera personalizado y luego escribir algún tipo de $args para la consulta que seleccione el color basado en la taxonomía? Ese es el único tipo de comprensión que tengo en este momento. Gracias.

MARS

24 sept 2013 16:35:46

¿Se pueden ejecutar consultas a nivel de cabecera o es una idea descabellada? Idealmente me gustaría una forma en la que pudiera crear varias versiones de este CPT y que la cabecera llamara al color basado en la taxonomía, ¿puede funcionar de esa manera?

MARS

24 sept 2013 16:36:32

Para tu primera pregunta: Ponlo en functions.php de tu tema, o bien ponlo en un plugin. No lo pongas en el directorio wp-includes; ese es código central, y cualquier cambio que hagas podría sobrescribirse cuando WordPress se actualice. (Nunca he usado ACF así que no puedo opinar sobre eso).

Pat J

24 sept 2013 16:41:08

Respecto a tu segunda pregunta: No estoy seguro de lo que quieres decir con '¿se pueden ejecutar consultas a nivel del encabezado?'. El gancho de acción wp_enqueue_scripts ejecutará la acción cuando se estén encolando las hojas de estilo y scripts. Además, deberías poder llamar al color basado en la taxonomía: necesitarás usar algo como wp_get_object_terms() si estás usando taxonomía(s) personalizada(s) con tus CPTs.

Pat J

24 sept 2013 16:45:12

Por consulta me refería a ejecutar un bucle en el encabezado, lo cual acabo de descubrir que es posible. Debo decir que tu conocimiento es excelente sobre el tema, el mío no tanto, así que todavía estoy trabajando desde un ángulo que pueda comprender y aunque intentaré entender tu solución, me tomará más tiempo. Sin embargo, si fueras tan amable de ver mi código actualizado arriba, ¿crees que podría usar el método wp_get_object_terms(), darle un argumento y en ese argumento incluir un array con todas las diferentes taxonomías? Esta es la parte que me confunde, entiendo cómo asignar taxonomías pero no cómo llamarlas dinámicamente.

MARS

24 sept 2013 17:05:37

Mostrar los 2 comentarios restantes

MARS 163 · Accepted Answer · 2013-09-26T21:59:05Z

@Pat J gracias por tu ayuda.

Resolví el problema basándome en la solución con la que ya estaba trabajando.

Ya estaba usando el plugin Advanced Custom Fields junto con el plugin Custom Post Type UI (para quienes no están familiarizados con escribir el código directamente, que por cierto es mucho mejor, pero esto es una buena introducción a CPTs y campos personalizados, y necesitarías usar ambos en conjunto; ese es solo mi consejo) así que necesitaba averiguar cómo llamar una imagen de fondo personalizada para mi div basada en la imagen que el usuario ingresaría a través del campo personalizado en el backend de administración.

Tomé el camino de crear una variable para hacer que la URL del fondo sea más fácil de escribir:

<?php

$bg = get_field( 'bg_img' );

?>

Luego inicié mi bucle e incluí la variable como el valor de la propiedad para el color de fondo.

NOTA: Descubrí que es mejor agregar todas las propiedades adicionales del fondo a través de la hoja de estilos externa (más limpio y consistente en mi opinión) y solo tener el valor de propiedad real que necesitaba dentro del estilo en línea. Sin embargo, si vas a apuntar a una sola propiedad, haz esto - ej: "background-image:" vs. "background:" ya que es más específico y no aplicará los otros valores que estás agregando desde la hoja de estilos externa. Nuevamente, podrías agregar las otras propiedades del fondo en línea ej: "background: url() no-repeat center cover;" simplemente no me gustó esa opción.

Aquí estaba la referencia en línea:

<div class="bg-img-default" style="background-image: url(<?=$bg?>); "></div>

La clase "bg-img-default" fue la que creé para incluir todas las otras propiedades del fondo externamente. Si alguien piensa que esto no es lo mejor y podría hacerse de una mejor manera, por favor compártelo, me encantaría aprenderlo.

Ah, y finalmente, si estás usando el plugin ACF necesitas establecer el valor de retorno como "URL de la imagen" de lo contrario no mostrará tu imagen.