Comment jazz votre wordpress en ajoutant des images en vedette

Images ont été introduits dans WordPress en version 2.9, et il vous permet d`afficher facilement une image qui est associée à votre poste de blog dans différentes parties de votre thème.

Pour un exemple évident, consultez la page d`accueil MakeUseOf, où l`image sélectionnée est utilisée pour faire une liste ennuyeuse pop vraiment. Non seulement cela améliore évidemment l`esthétique de votre blog, il est également plus probable que les lecteurs prêteront attention au contenu. Les indices visuels sont toujours mieux.

Aujourd`hui, je voudrais vous montrer comment utiliser des images en vedette dans votre blog WordPress. Je vais vous montrer comment ajouter et d`assigner l`image à votre message ainsi que le code que vous aurez besoin de les intégrer dans votre thème.

Réglage Images

Si votre thème, vous devriez voir un soutient L`image sélectionnée option sur votre écran d`édition de poste.

comment utiliser des images en vedette dans wordpress

Cliquez sur ce pour ouvrir la fenêtre contextuelle de téléchargement de fichiers d`habitude, mais au lieu de cliquer Insérer dans Post, sélectionnez Utiliser comme Photo descriptive au lieu.

l`image sélectionnée wordpress

Fermez la fenêtre contextuelle et vous devriez voir votre image en vedette ajouté à la barre latérale pour indiquer que vous avez réussi.

l`image sélectionnée wordpress

Ne vous inquiétez pas de la taille pour l`instant, nous pouvons régler plus tard les options de WordPress.

Pas de bouton d`image en vedette?

Si vous ne voyez pas le lien dans la barre latérale, il est tout à fait probable que votre thème ne les supporte pas. Pas de soucis, nous pouvons résoudre ce problème. Vous devez vous connecter à FTP - ou utilisez le gestionnaire de fichiers WordPress intégré si vos autorisations de dossier vous permet - et localiser votre dossier thématique. Ce sera dans la wp-content / themes / votretheme, où votretheme est le nom du thème que vous utilisez. Ouvrez et que jeter un oeil sur les fichiers là-dedans.

l`image sélectionnée wordpress

Recherchez le fichier appelé functions.php et l`ouvrir dans votre éditeur de texte favori. Faites défiler jusqu`à la fin du fichier, et juste avant la fermeture gt ;, ajoutez la ligne suivante?:

 add_theme_support ( «post-vignettes) -

Rappelez-vous, assurez-vous que vous faites cela juste avant ou sur la ligne avant la balise PHP de fermeture. Ainsi, la fin de votre fichier devrait maintenant quelque chose comme:

 add_theme_support ( «post-vignettes) - gt?;

Rafraîchir l`écran d`édition de poste et vous devriez être en mesure de définir maintenant une image sélectionnée.

Et tous mes messages précédents? Dois-je les éditer à nouveau?

Non, il y a un plugin appelé pratique générer des vignettes qui peuvent gérer l`ennui de mettre en vignettes en vedette sur les anciens messages très facilement. Une fois que vous avez installé, juste trouver le nouveau lien sur votre menu Outils et cliquez sur le bouton pour définir les images. De toute évidence, si vous ne disposez pas d`images sur vos messages en premier lieu, vous ne pouvez pas régler automatiquement tous.

comment utiliser l`image sélectionnée

Ajouter à la Miniature Votre Thème:

Je vais utiliser mon nouveau blogue Guide Autosuffisance de démontrer, si la tête sur là-bas pour voir les résultats - en utilisant un thème appelé Nature_wdl que vous pouvez télécharger ici. Par défaut, il ne prend pas en charge tout type de vignettes postales, donc j`ai dû modifier la première functions.php d`inclure cette ligne. La conception de base de la page d`accueil est très bien, mais je voudrais pour montrer juste une liste d`articles avec une vignette sélectionnée à côté d`eux, au lieu de l`ensemble du contenu du message.

comment utiliser l`image sélectionnée

Si vous avez suivi mon tutoriel WordPress la semaine dernière, je vous ai montré comment fonctionne la structure du thème de base. Comme il n`y a ni home.php ni avant page.php pour ce thème, la première page sera assurée par index.php, donc nous allons ouvrir et jeter un coup d`oeil:

Posté par | Publié dans | Posté sur

Heureusement, ce thème est très bien codé, donc l`ajuster devrait poser aucun problème. Avant d`ajouter la vignette, je veux vous assurer que seulement un petit extrait du message est affiché, au lieu de la totalité du contenu de poste. Trouver la ligne qui dit:

Sur un thème différent, il peut juste dire the_content (). Il suffit de remplacer avec:

Maintenant, si vous rajoutez, vous verrez que seul un court extrait de paragraphe est montré, plutôt que la totalité du contenu.

Ensuite, pour ajouter la vignette, nous allons voir tout ce qui se passe si nous ajoutons simplement dans une seule ligne directement au-dessus, comme suit:

Il est un peu laid, mais tout de suite avec une seule ligne de code que nous avons ajouté l`image associée à la page d`accueil! Fantastique! Pour le rendre un peu plus attrayant, nous allons essayer flotter l`image vers la gauche, et en réduisant la taille des vignettes par défaut comme ceci:

`Float: left -`?)) - gt;

La syntaxe est un peu compliqué là-dedans, mais vous devriez être en mesure de voir où vous pouvez insérer votre propre CSS si vous le souhaitez. Par exemple, pour ajouter une marge de droite:

`Float: left-margin-right: 10px -`?)) - gt;

comment utiliser des images en vedette dans wordpress

Je dirais que c`est assez impressionnant pendant 30 minutes de travail!

Réglage de la taille Miniature:

Vous trouverez peut-être la taille par défaut de 150 x 150 est un peu trop grand pour votre site. Pour régler cela, entrez votre admin WordPress et trouver Paramètres -gt; Médias sur la gauche. Ici, vous pouvez modifier la taille de vos vignettes. Un mot d`avertissement cependant: cela ne changera pas, les futurs ajouts à vos images existantes, alors ne soyez pas surpris quand rien ne se passe. Il y a cependant un plugin utile appelé Régénérer Les images miniatures qui peuvent fonctionner automatiquement toutes vos images existantes et les jaugent droite.

J`espère que cela vous montre à quel point le système incroyablement flexible WordPress est et comment vous pouvez facilement régler un code thématique sans aucune expérience de la programmation PHP. Dans le passé, l`ajout de ce type de fonctionnalité aurait pu prendre jours. La meilleure façon d`apprendre est d`expérimenter, donc assurez-vous de lire sur le codex et restez à l`écoute, comme la prochaine fois que je vais vous montrer comment faire votre propre widget pour la barre latérale qui met en évidence un message aléatoire en utilisant son image sélectionnée. Restez à l`écoute!

Articles connexes