WordPress : Comment ajouter le contrôle de l’image d’arrière-plan aux contrôles d’administration de la page ?

Je comprends que chaque page se voit attribuer sa propre classe, telle que .page-id-22 et je peux l’utiliser pour lui attribuer une image d’arrière-plan à l’aide de la feuille de style, mais j’ai vu un thème qui ajoute un contrôle à la section admin du page elle-même, ce que j’aimerais accomplir.

Fondamentalement, l’utilisateur pourrait cliquer et télécharger une image sur une page individuelle, selon ses besoins, sans avoir à modifier la feuille de style.

Serait-ce similaire à certaines idées posées dans cette discussion datée?

Cette question est différente de cette discussion car ce n’est pas seulement l’en-tête et c’est quelque chose qui doit faire partie du thème qui n’utilise pas de plugin.

Solution n°1 trouvée

Le moyen le plus simple serait d’utiliser des champs personnalisés, disons ACF (Advanced Custom Fields) * même la version gratuite de WordPress.org

1. Disons que nous utilisons ACF, vous devez créer un groupe de champs : suivez ce lien et accédez à Champs personnalisés > Ajouter un nouveau

2. Champs, Créer un champ, Ajouter une étiquette de champ et un nom de champ (YOUR_FIELD_NAME) après cela, sélectionnez Type de champ : Image (lorsque vous sélectionnez ce type de champ, vous aurez la possibilité de l’afficher en tant qu’URL

3. Sélectionnez l’emplacement (Page ou Articles) – où afficher ce champ que vous avez créé :

4. Maintenant, nous avons le bouton Image Field sur chaque page du backend, passons à l’affichage frontal

5. Décidez où vous voulez afficher cette image (code), cela peut être page.php, footer.php, header.php (ou tout ce dont vous avez besoin), ouvrez ce fichier et vous devez le coller <img src="<?php the_field('YOUR_FIELD_NAME'); ?>" />.

6. Des choses plus avancées sont, vous pouvez utiliser if/else pour afficher l’image et jquery pour cet arrière-plan,<?php if( get_field('YOUR_FIELD_NAME') ): ?>
<img src="<?php the_field('YOUR_FIELD_NAME'); ?>" />
<script>Your Script here</script>
<?php endif; ?>

7. La meilleure façon serait d’insérer votre fichier de script dans le pied de page, afin qu’il se charge après jQuery et d’autres parties et uniquement lorsqu’il y a une image du même code que 6 mais contenant uniquement du code de script.

INFO: la section 3 vous donnera l’option principale d’afficher le champ d’image lorsque vous créez une nouvelle ou modifiez une ancienne page

Solution n°2 trouvée

Cela peut être fait avec un champ personnalisé et le CSS doit être changé en .phpfile :

$image = get_post_meta( $post->ID, "ImagePathFromCustomField", true );
if ( $image != '' ) { 
    ?>
    <style type="text/css">
        .bg-image { 
            background-image: url(<?php echo $image; ?>); 
            background-repeat: repeat; 
        }
    </style>
    <?php
}

Solution n°3 trouvée

Consultez le plugin Custom CSS Per Post sur GitHub pour voir comment utiliser une méta-boîte avec le personnalisateur. Il existe également un Gist : Custom CSS dans WordPress, modifiable dans le Customizer où vous pouvez simplement remplacer la partie CSS par un WP_Customize_Image_Control.

Solution n°4 trouvée

Le moyen le plus simple serait d’utiliser des champs personnalisés, disons ACF (Advanced Custom Fields) * même la version gratuite de WordPress.org

1. Disons que nous utilisons ACF, vous devez créer un groupe de champs : suivez ce lien et accédez à Champs personnalisés > Ajouter un nouveau

2. Champs, Créer un champ, Ajouter une étiquette de champ et un nom de champ (YOUR_FIELD_NAME) après cela, sélectionnez Type de champ : Image (lorsque vous sélectionnez ce type de champ, vous aurez la possibilité de l’afficher en tant qu’URL

3. Sélectionnez l’emplacement (Page ou Articles) – où afficher ce champ que vous avez créé :

4. Maintenant, nous avons le bouton Image Field sur chaque page du backend, passons à l’affichage frontal

5. Décidez où vous voulez afficher cette image (code), cela peut être page.php, footer.php, header.php (ou tout ce dont vous avez besoin), ouvrez ce fichier et vous devez le coller <img src="<?php the_field('YOUR_FIELD_NAME'); ?>" />.

6. Des choses plus avancées sont, vous pouvez utiliser if/else pour afficher l’image et jquery pour cet arrière-plan,<?php if( get_field('YOUR_FIELD_NAME') ): ?>
<img src="<?php the_field('YOUR_FIELD_NAME'); ?>" />
<script>Your Script here</script>
<?php endif; ?>

7. La meilleure façon serait d’insérer votre fichier de script dans le pied de page, afin qu’il se charge après jQuery et d’autres parties et uniquement lorsqu’il y a une image du même code que 6 mais contenant uniquement du code de script.

INFO: la section 3 vous donnera l’option principale d’afficher le champ d’image lorsque vous créez une nouvelle ou modifiez une ancienne page

Solution n°5 trouvée

Cela peut être fait avec un champ personnalisé et le CSS doit être changé en .phpfile :

$image = get_post_meta( $post->ID, "ImagePathFromCustomField", true );
if ( $image != '' ) { 
    ?>
    <style type="text/css">
        .bg-image { 
            background-image: url(<?php echo $image; ?>); 
            background-repeat: repeat; 
        }
    </style>
    <?php
}

Solution n°6 trouvée

Consultez le plugin Custom CSS Per Post sur GitHub pour voir comment utiliser une méta-boîte avec le personnalisateur. Il existe également un Gist : Custom CSS dans WordPress, modifiable dans le Customizer où vous pouvez simplement remplacer la partie CSS par un WP_Customize_Image_Control.