web-dev-qa-db-fra.com

Est-il possible de copier l'image d'une page comme arrière-plan CSS sans alignement?

Donc, je suis totalement nouveau dans WordPress et j'essaie de "convertir" un site statique en un thème WP.

J'ai une page où j'aimerais utiliser l'image présentée comme arrière-plan pour une div.

Je me demandais quelle est la meilleure façon ou quelle est la convention pour le faire?

Peu importe qu'il s'agisse d'une image ou autre, je souhaite simplement que l'utilisateur puisse modifier l'image à partir du tableau de bord.

Je craindrais si possible de ne pas faire la queue, alors est-ce la seule option?

phptheme-developmenttemplatescsswp-enqueue-style
2
lastnoob

Il existe deux options possibles pour créer une feuille de style à partir d'une valeur générée dynamiquement. La première option est Feuille de style en ligne , comme suit:

<div id="hero" 
  style="background-image: url(<?php // TODO retrieve image here. ?>); ">
</div>

Et la deuxième option consiste à utiliser une feuille de style interne et éventuellement la meilleure solution. Pour utiliser la feuille de style en interne, vous devez attribuer à votre div un identifiant attribuant éventuellement le code ID ou , comme suit:

<div id="hero"></div>

La feuille de style interne :

<style>
    #hero {
       background-image: url('<?php // TODO retrieve image here. ?>');
       background-position: 50% 50%;
       background-size: cover;
    }
</style>

Utiliser une feuille de style externe pour récupérer et affecter la valeur de l'image à partir de la base de données est impossible. Vous pouvez toujours utiliser une feuille de style externe pour le reste des styles de votre div; c'est-à-dire #hero et que l'image soit récupérée et assignée via une feuille de style inline/internal.

1
Den Isahac

Évidemment, puisque vous voulez une image d’arrière-plan différente pour chaque page, vous ne pouvez pas inclure le fichier css dans un fichier statique. Vous devrez le générer à la volée.

Le moyen le plus simple consiste à inclure le css entre les balises <style> dans vos fichiers de modèle. Les autres réponses vous montrent comment faire cela.

La manière la plus 'WordPressy' serait différente, à savoir de gérer cela dans votre fichier functions.php en tant que feuille de style virtuelle en utilisant wp_add_inline_style . En gros, cela signifie que vous ajoutez des instructions à un fichier CSS existant. Votre style se retrouvera dans l'en-tête de la page, là où il se trouve, à la place du corps (ce qui fonctionne, mais il est sémantiquement incorrect).

Ainsi, dans votre fichier de fonctions, vous aurez, par exemple:

add_action ('wp_enqueue_style','wpse271934_add_styles');
function wpse271934_add_styles () {
  global $post;
  $extra_styling = '';
  if (is_page() || is_single ()) {
    $image = get_the_post_thumbnail ($post->ID,'large');
    if (!empty($image))
      $extra_styling = '.post, .page {background:url(' . $image . ');}';
    }
  // assuming style.css has the handle 'main_style' in your theme
  wp_add_inline_style ('main_style', $extra_styling);
  }

Dans l'exemple ci-dessus (que je n'ai pas testé, surveillez les bogues), nous ajoutons l'image d'arrière-plan à des pages individuelles et à des publications. Mais vous avez plus de possibilités. Par exemple pour tester 404 pages et définir une image d'arrière-plan, insérez un arrière-plan spécifique s'il n'y en a pas, effectuez des opérations différentes pour des pages de catégorie différentes, etc. sur. Donc, en plus d'être l'approche la plus correcte, cela vous donne également la plupart des possibilités de contrôler vos antécédents.

1
cjbj

Voici un exemple de style dans la page. :) 

<?php get_header();          


     <div id="primary" class="content-area">
       <main id="main" class="site-main" role="main">

          <?php
          // Start the loop.
          while ( have_posts() ) : the_post();

           if ( has_post_thumbnail( $_post->ID ) ) { ?>

           <style>
            .featureimg{
            /* dynamic img url */
            background: url(<?= get_the_post_thumbnail( $_post->ID,'large' );?>);

            /* full width */
            width:100%;

            /* half height */
            height: 50%; 

            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            }
          </style>

              <div class="featureimg"></div>
              <div class="title"><?php the_title();?></div>
              <div class="content"><?php the_content();?></div>


            <?php           
            // If comments are open or we have at least one comment, load up the comment template.
              if ( comments_open() || get_comments_number() ) :
                comments_template();
              endif;

            // End the loop.
            endwhile;
            ?>

         </main><!-- .site-main -->
       </div><!-- .content-area -->

    <?php get_footer(); ?>
0
samjco