Cum să personalizezi dinamic fundalul unui div folosind Advanced Custom Fields Plugin?

Question

Cum să personalizezi dinamic fundalul unui div folosind Advanced Custom Fields Plugin?

24 sept. 2013, 00:07:48

Vizualizări: 13.8K

Voturi: 2

Am reușit să creez tipuri de postări personalizate, câmpuri personalizate și să le conectez la șabloane în acest prim proiect WordPress la care lucrez, dar am dat peste o problemă pe care nu o pot rezolva ușor (și întâlnesc frecvent astfel de probleme, firește:).

Am creat câteva anteturi diferite pentru diverse secțiuni ale site-ului și înțeleg cum să le apelez din șabloane diferite. Totuși, am un antet care va fi folosit pe 27 de pagini de cartier diferite, iar particularitatea este că culoarea de fundal pentru fiecare cartier trebuie să fie personalizată.

Se poate realiza acest lucru cu PHP? Sau are cineva sugestii despre cum ar putea funcționa? Înțeleg că aș putea folosi jQuery, dar nu sunt sigur cum s-ar integra pe un site care deja generează conținut dinamic și ar trebui să identific în ce cartier mă aflu pentru a afișa culoarea corectă.

M-am gândit să creez 27 de fișiere header.php diferite, dar apoi mi s-a părut o idee nebunească când nu am reușit să înțeleg cum să instruiesc șablonul paginii de cartier să apeleze antetul corect în funcție de cartier. Chiar și ideea de a avea 27 de șabloane de pagină doar pentru a afișa 27 de culori diferite de fundal pentru antet mi s-a părut exagerată, dar hei, când ești începător, astfel de soluții încep să pară rezonabile când termenele limitează.

Mulțumesc.

COD ACTUALIZAT 24.09.2013

<!--Cod actualizat 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

câmpuri personalizate avansate fundal personalizat selector-culoare

Toate răspunsurile la întrebare

Puteți aplica un stil pentru antetul <div> (sau elementul <header>), apoi adăugați un stil inline folosind wp_add_inline_style().

De exemplu, să presupunem că aveți ceva de genul acesta în fișierul header.php:

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

(Preluat din tema Twenty Twelve.)

Să presupunem că ați setat culoarea cartierului ca meta-informație a postului folosind update_post_meta() sau poate un metabox personalizat. Acum putem extrage această informație din tabela meta și o putem adăuga în stilurile inline:

add_action(  'wp_enqueue_scripts', 'wpse115373_header_bg' );
function wpse115373_header_bg() {
    global $post;
    // setați acest lucru la handle-ul uneia dintre foile de stil
    $handle = 'twentytwelve-style';
    // setați acest lucru la cheia meta pe care ați folosit-o
    $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 ); 
}

Referințe

Pagini din Codex pentru:

Pat J

12.3K

24 sept. 2013 00:32:37

Comentarii

mulțumesc pentru răspuns, dar nu sunt sigur unde să pun funcția - ar trebui să fie în functions.php sau în functions.wp-styles.php din folderul wp-includes. De asemenea, crezi că ar putea funcționa folosind pluginul Advanced Custom Fields unde pot crea un câmp personalizat pentru selector de culori și să folosesc tag-ul de descriere (în cazul meu 'background_color') pentru a adăuga un tag template the_field() în acest fișier de header personalizat, apoi să scriu un fel de $args pentru query care să selecteze culoarea bazată pe taxonomie? Asta e singura înțelegere pe care o am momentan. Mulțumesc.

MARS

24 sept. 2013 16:35:46

Pot fi rulate query-uri la nivel de header sau e o vorbărie inutilă? În mod ideal, aș dori să pot crea mai multe versiuni ale acestui CPT și ca header-ul să apeleze culoarea bazată pe taxonomie, este posibil să funcționeze așa?

MARS

24 sept. 2013 16:36:32

Pentru prima întrebare: Pune-o în functions.php din tema ta, sau pune-o într-un plugin. Nu o pune în directorul wp-includes; acesta este codul de bază, iar orice modificări făcute pot fi suprascrise la actualizarea WordPress. (Nu am folosit ACF, așa că nu pot comenta în privința asta).

Pat J

24 sept. 2013 16:41:08

În legătură cu a doua întrebare: Nu sunt sigur ce înțelegi prin "pot fi rulate interogări la nivelul header-ului". Hook-ul de acțiune wp_enqueue_scripts va executa acțiunea atunci când fișierele de stiluri și scripturi sunt încărcate în coadă. De asemenea, ar trebui să poți apela culoarea pe baza taxonomiei: va trebui să folosești ceva de genul wp_get_object_terms() dacă folosești taxonomii personalizate cu CPT-urile tale.

Pat J

24 sept. 2013 16:45:12

Prin interogare mă refeream la rularea unei bucle în header, lucru pe care tocmai l-am descoperit că este posibil. Trebuie să recunosc că cunoștințele tale sunt excelente pe acest subiect, ale mele nu prea, așa că încă lucrez dintr-un unghi pe care îl pot înțelege și, deși voi încerca să înțeleg soluția ta, îmi va lua mai mult timp. Totuși, dacă ai fi atât de amabil să te uiți la codul meu actualizat de mai sus, crezi că aș putea folosi metoda wp_get_object_terms(), să-i dau un argument și în acel argument să includ un array cu toate taxonomiile diferite? Aceasta este partea care mă încurcă, înțeleg cum să atribui taxonomii, dar nu înțeleg cum să le apelez dinamic?

MARS

24 sept. 2013 17:05:37

Arată celelalte 2 comentarii

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

@Pat J mulțumesc pentru ajutor.

Am rezolvat problema pe baza soluției la care lucram deja.

Deja foloseam pluginul Advanced Custom Fields alături de pluginul Custom Post Type UI (pentru cei care nu sunt familiarizați cu scrierea codului, care este mult mai bine de făcut, dar acesta este un intro frumos la CPT-uri și câmpuri personalizate și ar trebui să folosești ambele în tandem; acesta este doar sfatul meu), așa că a trebuit să descopăr cum să apelez o imagine de fundal personalizată pentru div-ul meu bazată pe imaginea pe care utilizatorul o va introduce prin câmpul personalizat din backend-ul de administrare.

Am ales calea de a crea o variabilă pentru a face URL-ul de fundal mai ușor de scris:

<?php

$bg = get_field( 'bg_img' );

?>

Apoi am început bucla și am inclus variabila ca valoare a proprietății pentru culoarea de fundal.

NOTĂ: Am considerat că este mai bine să adaug toate proprietățile suplimentare de fundal prin fișierul de stil extern (doar mai curat și mai consistent, după părerea mea) și să am doar valoarea reală a proprietății de care aveam nevoie în linie. Cu toate acestea, dacă intenționezi să țintești doar o proprietate, fă asta - ex: "background-image:" vs. "background:" deoarece este mai specific și nu va aplica celelalte valori pe care le adaugi din fișierul de stil extern. Din nou, ai putea adăuga celelalte proprietăți de fundal în linie, ex: "background: url() no-repeat center cover;", pur și simplu nu mi-a plăcut această opțiune.

Aici a fost referința inline:

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

"bg-img-default" a fost clasa pe care am creat-o pentru a include toate celelalte proprietăți de fundal extern. Dacă cineva consideră că acest lucru este nepotrivit și ar putea fi făcut într-un mod mai bun, vă rog să împărtășiți, aș dori să învăț.

Ah, în final, dacă folosești pluginul ACF, trebuie să setezi valoarea de returnare la "URL imagine", altfel imaginea ta nu va fi afișată.