Les partenaires publicitaires:

Comment écrire css pour une vignette dans wordpress

Une des nombreuses caractéristiques WordPress a est sa capacité à générer des vignettes automatiques pour les images sur votre site. Insertion de la the_post_thumbnail d'appel () dans votre modèle WordPress place automatiquement une version réduite de votre image en vedette dans votre page ou par courrier. Vous pouvez définir la taille par défaut de vos vignettes dans les paramètres du support lorsque vous êtes connecté à votre tableau de bord WordPress, et vous pouvez également spécifier un style via CSS si vous voulez ajouter une personnalisation plus poussée à votre vignette.

Instructions

  1. Connectez-vous à votre site WordPress et cliquez sur "Apparence", puis "Editor".

  2. Sélectionnez "stylesheet" à partir de la liste de droite.

  3. Ajouter la CSS pour votre vignette en utilisant l'éditeur en ligne. Par exemple, si vous souhaitez aligner l'image des vignettes à gauche et à afficher une couleur noire unie pour cela, vous pouvez ajouter ce code:




    img.alignleft {

    float: left;

    border: 1px solid # 000-

    }

  4. Cliquez sur «Mettre à jour le fichier."



  5. Sélectionnez le modèle où vous avez code "the_post_thumbnail". Si elle est située dans une page WordPress, sélectionnez le modèle "Page" de la liste des modèles sur la droite.

  6. Modifier le code pour appliquer le style que vous avez spécifié pour votre vignette. Le code suivant affiche la vignette en utilisant la taille de vignette par défaut de votre site, avec le style que vous avez défini dans votre modèle de style:

    <?php the_post_thumbnail('thumbnail', array('class' => 'AlignLeft')) ->

  7. Mettez à jour votre fichier de modèle pour appliquer les modifications.

Conseils Avertissements

  • Mis à part la définition de vos propres sélecteurs, vous pouvez également utiliser les sélecteurs CSS img.wp post-images, img.attachment-miniatures, img.attachment-moyennes, grandes et img.attachment-img.attachment pleine définir des styles pour votre vignette.
» » » » Comment écrire css pour une vignette dans wordpress