web-dev-qa-db-fra.com

Comment personnaliser un fond de div de manière dynamique en utilisant Advanced Custom Fields Plugin?

Je suis allé aussi loin que la création de types d'articles personnalisés, de champs personnalisés et la liaison de ceux-ci aux modèles de ce projet WordPress pour la première fois sur lequel je travaille, mais je semble avoir rencontré un problème que je ne parviens pas facilement à résoudre (et Je rencontre naturellement ce genre de problèmes tout le temps :).

J'ai créé quelques en-têtes différents pour différentes sections de mon site et je comprends comment les appeler à partir de différents modèles. Cependant, j'ai cet en-tête qui sera utilisé sur 27 pages de voisinage différentes. Le problème, c'est que la couleur de fond de chaque quartier doit être personnalisée.

Cela peut-il être accompli avec PHP? Ou est-ce que quelqu'un a des suggestions sur la façon dont ils pourraient faire cela? Je me rends compte que je pourrais emprunter la voie jQuery, mais je ne sais pas comment cela fonctionnerait sur un site qui génère déjà du contenu dynamique et je suis obligé de déterminer le quartier dans lequel il se trouve pour pouvoir déterminer la couleur à afficher.

Je pensais créer 27 fichiers header.php différents, mais je me suis dit que j'étais fou quand je ne savais pas comment dire au modèle de page de voisinage comment appeler le bon en-tête en fonction du voisinage et même envisager d'avoir 27 modèles de page. Juste pour afficher 27 couleurs de fond différentes pour l'en-tête, ça ressemblait à une folle conversation, mais bon quand on est un noob, ce genre de solutions commence à bien paraître quand les délais sont imminents.

Merci.

CODE MIS À JOUR 24/09/2013

<!--Updated Code 9/24-->


    $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; ?>
advanced-custom-fieldscustom-backgroundcolor-picker
2
MARS

@Pat J merci pour votre aide.

J'ai compris le problème en fonction de la solution avec laquelle je travaillais déjà.

J'utilisais déjà le plug-in Advanced Custom Fields avec le plug-in Custom Post Type UI (pour ceux qui ne sont pas familiers avec l'écriture du code, ce qui est bien mieux à faire, mais il s'agit d'une belle introduction aux champs CPT et Custom, et vous auriez besoin utiliser les deux en tandem, c’est juste mon conseil), j’avais donc besoin de savoir comment appeler une image d’arrière-plan personnalisée pour mon div en fonction de l’image que l’utilisateur entrerait par le biais du champ personnalisé de l’administrateur principal.

J'ai choisi de créer une variable pour rendre l'url de fond plus facile à écrire:

<?php

$bg = get_field( 'bg_img' );

?>

Ensuite, j'ai commencé ma boucle et inclus la variable en tant que valeur de propriété pour la couleur d'arrière-plan.

REMARQUE: je trouvais préférable d'ajouter toutes les propriétés d'arrière-plan supplémentaires par le biais de la feuille de style externe (simplement plus propre et plus cohérente) et de ne conserver que la valeur de propriété réelle dont j'avais besoin dans la ligne. Toutefois, si vous ne ciblez qu’une propriété, faites ceci - ex: "background-image:" ou "background:" car elle est plus spécifique et n’appliquera pas les autres valeurs que vous ajoutez à partir de la feuille de style externe, à nouveau, vous pouvez ajouter les autres propriétés d’arrière-plan inline, par exemple: "background: url () no-repeat center cover;" Je n'ai tout simplement pas aimé cette option.

Voici la référence en ligne:

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

Le "bg-img-default" était la classe i créée pour inclure toutes les autres propriétés d'arrière-plan en externe. Si quelqu'un pense que c'est wack et pourrait être fait d'une meilleure façon s'il vous plaît partager, j'ai l'amour de l'apprendre.

Enfin, si vous utilisez le plug-in ACF, vous devez définir la valeur de retour sur "URL de l'image". Dans le cas contraire, votre image ne sera pas affichée.

0
MARS

Vous pouvez appliquer un style à l'en-tête <div> (ou à l'élément <header>), puis ajouter un style en ligne à l'aide de wp_add_inline_style() .

Par exemple, supposons que vous ayez quelque chose comme ceci dans votre fichier header.php:

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

(Cribbed du thème Twenty Twelve .)

Supposons que vous définissiez la couleur du quartier comme une méta-information post utilisant update_post_meta() ou peut-être une métabox personnalisée. Maintenant, nous pouvons le sortir de la méta table et le jeter dans les styles en ligne:

add_action(  'wp_enqueue_scripts', 'wpse115373_header_bg' );
function wpse115373_header_bg() {
    global $post;
    // set this to the handle of one of your stylesheets
    $handle = 'twentytwelve-style';
    // set this to the meta key you've used
    $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 ); 
}

Référence

Pages Codex pour:

0
Pat J