web-dev-qa-db-fra.com

Comment ajouter un contrôle d'image d'arrière-plan aux contrôles d'administration de page?

Je comprends que chaque page se voit attribuer sa propre classe, telle que .page-id-22. 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 page elle-même, ce que je voudrais accomplir.

Fondamentalement, l'utilisateur pourrait cliquer et télécharger une image sur une page individuelle, si nécessaire, sans avoir besoin de modifier la feuille de style.

Serait-ce semblable à certaines idées énoncées dans cette discussion périmée ?

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

functionstheme-developmentcsscustom-backgroundadmin-css
2
Jeff W

Cela peut être fait avec un champ personnalisé et le CSS devrait être changé en fichier .php:

$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
}
1
Arsalan

Le moyen le plus simple serait d'utiliser des champs personnalisés, disons ACF (Advanced Custom Fields) *, même une 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 et un nom de champ (YOUR_FIELD_NAME) après avoir sélectionné Type de champ: Image (lorsque vous sélectionnez ce type de champ, vous aurez l'option de l'afficher sous forme d'URL

  3. Sélectionnez un emplacement (page ou publication) - où afficher le champ que vous avez créé:  ACF Choose Location 

  4. Maintenant, nous avons le bouton Image Field sur chaque page dans le backend permet de passer à l’affichage frontal

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

  6. Les choses plus avancées sont, vous pouvez utiliser if/else pour afficher une 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. Le meilleur moyen serait d’insérer votre fichier de script dans le pied de page afin qu’il soit chargé après jQuery et d’autres parties et que le même code image que 6 ne contient que du code script.

INFO: section 3 vous donnera l'option d'arrière-plan pour afficher le champ d'image lorsque vous créez ou éditez une ancienne page

0
apsolut

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

0
jgraup