Come personalizzare dinamicamente lo sfondo di un div utilizzando Advanced Custom Fields Plugin?

Question

Come personalizzare dinamicamente lo sfondo di un div utilizzando Advanced Custom Fields Plugin?

24 set 2013, 00:07:48

Visualizzazioni: 13.8K

Voti: 2

Finora ho creato tipi di post personalizzati, campi personalizzati e li ho collegati ai template in questo mio primo progetto WordPress su cui sto lavorando, ma sembra che mi sia imbattuto in un problema che non riesco a risolvere facilmente (e mi capita spesso naturalmente:).

Ho creato diversi header per diverse sezioni del mio sito e capisco come richiamarli da template diversi. Tuttavia ho questo header che verrà utilizzato in 27 pagine di quartieri diversi e il problema è che il colore di sfondo per ogni quartiere deve essere personalizzato.

È possibile realizzarlo con PHP? O qualcuno ha suggerimenti su come potrei farlo funzionare? So che potrei usare jQuery ma non sono sicuro di come potrebbe funzionare su un sito che già genera contenuti dinamici e dovrei capire su quale quartiere ci troviamo per poter visualizzare il colore corretto.

Stavo pensando di creare 27 diversi file header.php ma poi ho pensato che fosse folle quando non riuscivo a capire come dire al template della pagina del quartiere di richiamare l'header giusto in base al quartiere e contemplare l'idea di avere 27 template di pagina solo per visualizzare 27 diversi colori di sfondo per l'header sembrava una follia, ma quando sei un principiante queste soluzioni iniziano a sembrare buone quando le scadenze sono vicine.

Grazie.

CODICE AGGIORNATO 24/09/2013

<!--Codice Aggiornato 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

campi personalizzati avanzati custom background selettore-colori

Tutte le risposte alla domanda

Puoi applicare uno stile all'intestazione <div> (o all'elemento <header>), e poi aggiungere uno stile inline usando wp_add_inline_style().

Ad esempio, supponiamo che tu abbia qualcosa come questo nel tuo file header.php:

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

(Preso dal tema Twenty Twelve.)

Supponiamo che tu abbia impostato il colore del quartiere come meta-informazione del post usando update_post_meta() o forse un metabox personalizzato di qualche tipo. Ora possiamo estrarlo dalla tabella meta e inserirlo negli stili inline:

add_action(  'wp_enqueue_scripts', 'wpse115373_header_bg' );
function wpse115373_header_bg() {
    global $post;
    // imposta questo all'handle di uno dei tuoi fogli di stile
    $handle = 'twentytwelve-style';
    // imposta questo alla meta key che hai utilizzato
    $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 ); 
}

Riferimenti

Pagine del Codex per:

Pat J

12.3K

24 set 2013 00:32:37

Commenti

grazie per la risposta, non sono sicuro dove inserire la funzione, dovrebbe essere all'interno di functions.php o di functions.wp-styles.php nella cartella wp-includes. Inoltre, pensi che potrebbe funzionare utilizzando il plugin Advanced Custom Fields dove posso creare un campo personalizzato per il selettore di colore e usare il tag di descrizione (nel mio caso 'background_color') per aggiungere un template tag the_field() a questo file di intestazione personalizzato e poi scrivere una sorta di $args per la query che selezionerebbe il colore basandosi sulla tassonomia? Questa è più o meno la comprensione che ho al momento. Grazie.

MARS

24 set 2013 16:35:46

Le query possono essere eseguite a livello di header o è una cosa assurda? Idealmente vorrei un modo per creare diverse versioni di questo CPT e fare in modo che l'header richiami il colore basato sulla tassonomia, può funzionare in questo modo?

MARS

24 set 2013 16:36:32

Per la tua prima domanda: inseriscila in functions.php del tuo tema, oppure mettila in un plugin. Non metterla nella directory wp-includes; quello è codice core, e qualsiasi modifica fatta potrebbe essere sovrascritta quando WordPress si aggiorna. (Non ho mai usato ACF quindi non posso pronunciarmi su quello).

Pat J

24 set 2013 16:41:08

Per rispondere alla tua seconda domanda: non sono sicuro di cosa intendi con "le query possono essere eseguite a livello di header". L'hook di azione wp_enqueue_scripts eseguirà l'azione quando i fogli di stile e gli script vengono accodati. Inoltre, dovresti essere in grado di richiamare il colore basato sulla tassonomia: dovrai usare qualcosa come wp_get_object_terms() se stai utilizzando tassonomie personalizzate con i tuoi CPT.

Pat J

24 set 2013 16:45:12

Con query intendevo eseguire un loop nell'header, cosa che ho appena scoperto essere possibile. Devo dire che la tua conoscenza sull'argomento è eccellente, la mia non altrettanto quindi sto ancora lavorando da un'angolazione che riesco a comprendere e mentre cercherò di afferrare la tua soluzione mi ci vorrà più tempo. Tuttavia, se fossi così gentile da dare un'occhiata al mio codice aggiornato sopra, pensi che potrei usare il metodo wp_get_object_terms(), dargli un argomento e in quell'argomento includere un array con tutte le diverse tassonomie? Questa è la parte che mi confonde, capisco come assegnare le tassonomie ma non come richiamarle dinamicamente?

MARS

24 set 2013 17:05:37

Mostra i restanti 2 commenti

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

@Pat J grazie per il tuo aiuto.

Ho risolto il problema basandomi sulla soluzione con cui stavo già lavorando.

Stavo già utilizzando il plugin Advanced Custom Fields insieme al plugin Custom Post Type UI (per chi non ha familiarità con la scrittura del codice, che è comunque molto meglio da fare, ma questo è un buon approccio introduttivo ai CPT e ai campi personalizzati, e bisogna usarli entrambi in combinazione; questo è il mio consiglio) quindi dovevo capire come chiamare un'immagine di sfondo personalizzata per il mio div basata sull'immagine che l'utente avrebbe inserito tramite il campo personalizzato nel backend di amministrazione.

Ho scelto la strada di creare una variabile per rendere più semplice scrivere l'URL dello sfondo:

<?php

$bg = get_field( 'bg_img' );

?>

Poi ho iniziato il mio loop e ho incluso la variabile come valore della proprietà per il colore di sfondo.

NOTA: Ho trovato che fosse meglio aggiungere tutte le proprietà aggiuntive dello sfondo tramite il foglio di stile esterno (più pulito e consistente secondo me) e avere solo il valore effettivo della proprietà che mi serviva inline. Comunque, se vuoi targettizzare solo una proprietà, fai così - es: "background-image:" invece di "background:" perché è più specifico e non applicherà gli altri valori che stai aggiungendo dal foglio di stile esterno, ovviamente potresti aggiungere le altre proprietà dello sfondo inline es: "background: url() no-repeat center cover;" ma a me questa opzione non piaceva.

Ecco il riferimento inline:

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

La classe "bg-img-default" è quella che ho creato per includere tutte le altre proprietà dello sfondo esternamente. Se qualcuno pensa che questo sia sbagliato e che ci sia un modo migliore per farlo, per favore condividilo, mi piacerebbe impararlo.

Ah, infine, se stai usando il plugin ACF devi impostare il valore di ritorno su "image URL" altrimenti non visualizzerà la tua immagine.