Fonctionnalité étonnante dans WordPress !

Je vais repartir de zéro. Vous devez donc d'abord comprendre la différence entre les vignettes et images régulières du poste. Une vignette est quelque chose comme un aperçu d’une publication ; elle ne peut même pas être utilisée dans la publication elle-même.

Supposons que vous ayez une sorte de catégorie, et sur la page de cette catégorie, avant certains articles (et peut-être avant chacun), il y a une sorte d'image, qui est essentiellement un aperçu de l'article, c'est-à-dire miniature. Si nous allons sur la page d'un des articles, nous pouvons ou non trouver cette image dans son contenu.

En général, d'accord, en un mot, une vignette est une image d'aperçu pour les publications qui :

• peut ou non être utilisé dans le contenu de la publication,
• peut être affiché avec un lien vers la publication sur les pages de catégories, tags, archives, etc.,
• peut être automatiquement ajusté à une certaine taille (je veux dire la résolution de l'image),

En fait, vous pouvez même l'utiliser comme arrière-plan de site Web, c'est-à-dire chaque entrée a son propre arrière-plan.

Étape 1 : Activez la prise en charge des vignettes pour votre thème WordPress

Afin d'utiliser les miniatures sur votre site, vous devez d'abord les activer, car par défaut cette fonctionnalité est désactivée.

Tout ce que nous avons à faire pour activer les vignettes est de coller la ligne de code suivante dans votre fichier function.php (il peut y avoir plusieurs fichiers portant ce nom - nous avons besoin de celui qui se trouve directement dans le dossier avec votre thème actuel).

Si vous ne souhaitez pas utiliser de miniatures dans tous les articles à la fois, vous pouvez les connecter, par exemple, uniquement pour les publications :

ou uniquement pour les articles et uniquement pour les pages :

add_theme_support( "post-thumbnails" , array ( "post" , "page" ) ) ;

Est-il possible d’attribuer une vignette à une taxonomie WordPress ?

Par des moyens standards - non. Vous pouvez utiliser n'importe lequel des plugins qui s'ajoutent (y compris les catégories et les balises) ou écrire URL de l'image dans la description de votre élément de taxonomie spécifique.

Étape 2. Comment définir une miniature pour une publication ?

En général, il existe deux manières d'installer des vignettes via le panneau d'administration. Ils ne sont pas particulièrement différents les uns des autres - vous pouvez utiliser celui qui vous semble le plus pratique.

Méthode 1. Metabox « Publier la vignette »

Il est comme ça :

"> ">

Cet exemple affiche les titres des publications (fonction) et les miniatures des publications avec des liens (fonction) vers la publication elle-même.

Le même exemple pour la fonction :

"> ">

Obtenir l'URL de la vignette en utilisant wp_get_attachment_image_src() et get_post_thumbnail_id()

Si vous avez besoin d'aide pour votre site Web ou pour le développement à partir de zéro, je peux vous recommander quelques bons gars. Juste .

Word Press vous permet d'afficher des vignettes de publications à côté de leurs annonces. Nous avons écrit plus en détail sur les méthodes de sortie des enregistrements. Les vignettes sont de petites images sélectionnées de manière à décrire la signification de l'entrée. Cela permet de rendre l'article reconnaissable sur le site, ses annonces plus agréables à regarder, et en général il est beau et esthétique.

Les outils standards de Word Press ne vous permettent en aucun cas de modifier les vignettes des articles, ce qui est très gênant, puisque vous souhaitez être totalement maître de votre blog. Et s'il est nécessaire de modifier la taille et l'emplacement des vignettes, vous devrez modifier le code. Voyons comment procéder.

Comment changer la taille des vignettes

Avant de suivre les conseils ci-dessous, vous devez faire des copies des fichiers que vous modifiez. Tout d'abord, nous allons plonger dans le fichier de thème qui affiche les annonces d'articles sur le site. Ce fichier peut s'appeler loop.php ou autre chose. Vous devriez y trouver une fonction qui affiche une vignette. Les vignettes dans Word Press sont désignées par miniature, nous recherchons donc une fonction avec ce mot.

Cette fonction ressemble le plus souvent à ceci : the_post_thumbnail (array(xxx,yyy), où xxx et yyy sont les dimensions de la vignette en pixels. Généralement 100 par 100 pixels sont indiqués. Et pour changer la taille, vous devez changer ces chiffres . Après avoir enregistré le fichier, vous verrez une page d'affichage des annonces de vignettes d'une taille donnée.

Changer la position de la vignette

Généralement, dans la plupart des modèles, les vignettes sont placées à gauche de l'annonce de l'article. Pour modifier l'emplacement, vous devez modifier à nouveau le code. Mais maintenant, nous n'aurons pas besoin d'un fichier de sortie d'annonce, mais d'un fichier de style - style.css.

Toutes les images en CSS sont écrites dans la section /* Images */, nous la recherchons donc d'abord, et nous y trouvons nos miniatures - un code qui contient le mot miniature.

Dans le bloc responsable de la vignette, nous trouvons la ligne float - c'est l'emballage. Nous avons écrit sur. La valeur de cette fonction peut être modifiée en trois options : droite, gauche ou aucune, - enroulement à droite, enroulement à gauche ou sans enroulement.

Mais ce n'est pas tout. Pour que la vignette située à côté de l'annonce s'affiche correctement, vous devez modifier ses dimensions dans le fichier CSS par celles spécifiées dans le fichier chargé de l'affichage des annonces, c'est-à-dire si vous vous fiez à l'exemple ci-dessus - loop.php.
Et après cela, vous pouvez enregistrer le fichier. Et si vous l'avez fait correctement, vous verrez alors des vignettes de la taille souhaitée, au bon endroit.

(1 notes, moyenne : 5,00 sur 5)

Depuis longtemps maintenant, dans WordPress, vous pouvez définir la « Post Image » dans l'éditeur. Cette vignette apparaît à côté de l'annonce de l'article. Les modèles WordPress précisent la taille de la vignette et son emplacement par rapport au texte de l'annonce. Et comme ils sont enregistrés, cela signifie qu'ils peuvent être modifiés.

Comment modifier la taille et la position des vignettes WordPress vous les apprendrez dans cet article.
Veuillez noter que dans cet article, nous allons essayer de modifier la taille et l'emplacement de la vignette Wordpress directement dans le modèle actuel. Dans les fichiers modèles, la vignette est écrite sous la forme Vignette. Le plus souvent, la vignette est affichée à gauche de l’annonce de l’article. La taille peut être différente, généralement de 100 x 100 px.

La taille de la vignette peut être modifiée

Important! Avant le travail, pour éviter "" nous le faisons.

Vous pouvez modifier la taille des vignettes dans le fichier modèle, qui inclut la balise d'affichage de l'annonce de l'article. Il s'agira très probablement de content.php. Dans la partie administrative du site. Dans le fichier content.php on recherche (mot de recherche : vignette) le code contenant la fonction d'affichage du code html de l'image à l'écran :

Par exemple ce type :

"; the_post_thumbnail(array(100,100)); echo ""; ) the_excerpt(); ) ?>

Nous modifions les valeurs en fonction de la taille de la vignette dont nous avons besoin. La photo montre un exemple de modification de la taille de la vignette de la publication de 100 × 100 px à 200 × 200 px.

Modifier l'affichage de la vignette par rapport au texte de l'annonce

Vous pouvez modifier la taille et la position de la vignette WordPress en modifiant la feuille de style du modèle. A cet effet. Nous recherchons le fichier style.css (Style Sheet). Dans le fichier, nous recherchons la section : /* Images */. Dans la section, nous recherchons le code, toujours avec le mot vignette.

Résumé de l'entrée .thumbnail img ( float : aucun ; marge droite : 10 px ; largeur maximale : 100 px ; hauteur maximale : 100 px ; remplissage : 3 px ; largeur : expression (document.body.clientWidth< 742? "200px" : document.body.clientWidth >1000 ? "200px" : "auto"); )

Et changez la valeur de la propriété float :

flotteur:gauche | à droite | aucun

Insérez éventuellement l'une des valeurs : gauche | à droite | aucun (gauche | droite | aucun).

Nous modifions également les valeurs dans la section ci-dessous, conformément à ce que nous avons défini dans le fichier Loop-singl.php.

largeur maximale : 100 px ; passer à la taille souhaitée ;
hauteur maximale : 100 px ; passer à la taille souhaitée.

Note: Selon la disposition du modèle, vous devrez peut-être rechercher « l'enregistrement » de la vignette dans les fichiers du modèle.

Tailles des vignettes dans le fichier function.php

Si vous modifiez la taille et la position de la vignette WordPress de cette manière, cette modification devra être répétée à chaque fois que vous mettrez à jour le modèle. C'est efficace, même si ce n'est pas pratique. Il est donc préférable d'ajouter ou de modifier, si cela existe déjà, les tailles des vignettes dans le fichier function.php du thème de travail.

Important! Avant d'apporter des modifications aux fichiers modèles, notamment au fichier function.php, effectuez une copie de sauvegarde du site pour restaurer le site en cas d'erreurs.

Par exemple, vous pouvez ajouter des tailles de vignettes par défaut comme ceci :

Si (function_exists("add_theme_support")) ( add_theme_support("post-thumbnails"); set_post_thumbnail_size(150, 150, true);

De plus, l'image sera recadrée (vrai). Le code est inséré dans le fichier function.php.

Conclusion

C'est tout ! J'espère que ces anciens conseils vous aideront à modifier la taille et la position de votre vignette WordPress.

Codex WordPress

Texte masqué

fonction the_post_thumbnail

Fonction

the_post_thumbnail

But

La fonction_post_thumbnail génère le code html de l'image miniature de la publication, une valeur vide s'il n'y a pas d'image.

Application

Cette balise de modèle, la fonction the_post_thumbnail, doit être utilisée en interne

Usage

the_post_thumbnail(string|array $size = "post-thumbnail", string|array $attr = "")

Source

Déposer: wp-includes/post-thumbnail-template.php

Fonction the_post_thumbnail($size = "post-thumbnail", $attr = "") ( echo get_the_post_thumbnail(null, $size, $attr); )

Possibilités

$size (chaîne/tableau)

La taille de la vignette à recevoir. Il peut s'agir d'une chaîne avec des tailles conditionnelles : miniature, moyenne, grande, complète ou d'un tableau de deux éléments (largeur et hauteur de l'image) : array(60, 60).

Défaut: 'post-thumbnail', c'est-à-dire la taille définie pour le thème actuel par la fonction set_post_thumbnail_size()

$attr (chaîne/tableau)

Un tableau d'attributs qui doivent être ajoutés à la balise html img résultante (alt est un nom alternatif).

Défaut:

Exemple

" titre= "(!LANG :_("permalink"), the_title_attribute("echo=0")); ?>"> !}get("layout", "imgwidth"), $SMTheme->get("layout", "imgheight"), array("class" => $SMTheme->get("layout","imgpos") . " image_présentée")); si (!is_single())( ?>

Salut tout le monde! Une semaine s'est déjà écoulée depuis que nous avons quitté Saint-Pétersbourg et nous sommes installés dans le village de Hikkaduwa au Sri Lanka. Un peu plus à ce sujet à la fin du post.

Aujourd'hui, vous apprendrez à créer, ajouter et modifier des vignettes pour les publications dans WordPress. Voyons pourquoi ils sont nécessaires, ainsi que comment vous pouvez ajouter automatiquement des aperçus à votre blog.

Comment utiliser les vignettes sur un blog WordPress ?

Les images miniatures dans WordPress sont le plus souvent utilisées dans les annonces d’articles de blog. Les annonces sont affichées sur la page principale ou dans des sections. En règle générale, une illustration d’annonce est une copie plus petite de l’image contenue dans l’article lui-même. De plus, ces aperçus apparaîtront lorsque des publications similaires seront affichées sous un article, si votre thème propose une telle option ou si le plugin approprié est installé. Cela est également vrai pour les publications récentes et populaires dans la barre latérale, si vous en avez.

Il est très important qu'à chaque endroit où les vignettes sont affichées, elles soient compressées à la taille dans laquelle nous les voyons sur le site. Bien entendu, il serait possible d'afficher des images en taille réelle et de les définir simplement en petites tailles à l'aide de styles CSS. Mais le navigateur devra alors charger à chaque fois beaucoup d’images volumineuses et lourdes, ce qui ralentira le chargement du site. Heureusement, il est possible de compresser automatiquement les images à la taille souhaitée.

Passons maintenant à la façon d'afficher les vignettes sur un blog WordPress et leurs paramètres.

Afficher un aperçu d'un article dans WordPress

Pour vérifier si votre modèle WordPress prend en charge l’affichage des vignettes, vous devez accéder à l’éditeur de publication ou de page. Si pris en charge, vous devriez voir ce qui suit :

J'ai cette option dans le coin inférieur droit de la page d'édition.

Maintenant, pour créer un aperçu de l'article, cliquez sur « Définir la vignette ».

Vous pouvez sélectionner des images déjà téléchargées dans la bibliothèque de fichiers ou en télécharger une nouvelle. Étant donné que la vignette est définie après la rédaction et le formatage de l'article, la photo requise se trouvera très probablement dans la bibliothèque. Il ne vous reste plus qu'à le sélectionner, puis, en fonction de votre modèle, un aperçu de la taille dont vous avez besoin sera généré.

Si, pour une raison quelconque, vous n'êtes pas satisfait de la taille ou du style de l'image, vous pouvez accéder à l'éditeur de photos et définir manuellement les paramètres nécessaires.

Vous pouvez définir la taille des vignettes pour les publications dans WordPress dans le panneau d'administration : « Paramètres » - « Fichiers multimédias » :

Que faire si l'affichage des vignettes n'est pas prévu dans votre thème, mais que vous en avez besoin ?

Pour ce faire, vous pouvez utiliser la fonction suivante dans le fichier function.php de votre thème :

add_theme_support('post-vignettes'); ?>

Vignettes automatiques dans WordPress à l'aide d'un plugin

C'est bien si vous avez correctement ajouté des miniatures à chaque publication lors de leur création. Mais que se passe-t-il si vous avez déjà de nombreux articles sur votre blog sans aperçus ? Ou comment changer la taille de toutes les vignettes dans WordPress après avoir modifié le design du blog ? Rouvrir chaque entrée et la modifier demande trop de travail.

Heureusement, pour nous faciliter la vie, des plugins ont été créés pour générer automatiquement des vignettes pour les publications WordPress.

Afin de trouver un plugin approprié, entrez les vignettes (de l'anglais - vignettes) dans la barre de recherche.

Ainsi, nous trouverons les plugins les plus pertinents et les plus populaires pour notre tâche.

L’un des plugins simples et couramment utilisés pour redimensionner toutes les vignettes dans WordPress est Regenerate Thumbnails :

Après l'installation, allez dans « Outils » - « Regen.Thumbnails » :

Dans la fenêtre qui apparaît, cliquez sur le bouton « Régénérer toutes les vignettes » si vous souhaitez ajuster toutes les vignettes à la taille spécifiée dans les paramètres du blog.

Nous attendons la fin du processus :

L'un des plugins les plus simples pour insérer des vignettes automatiques dans toutes les publications sur WordPress est Easy Add Thumbnail.

Il crée automatiquement une vignette basée sur la première image de la publication. Pour ce faire, il vous suffit de l’activer ; vous n’avez rien à configurer.

Un autre plugin permettant de créer des miniatures pour les publications dans WordPress est Generate Post Thumbnails. Il permet de définir le numéro de l'image dans la publication qui sera utilisée pour générer l'aperçu.

Comme vous pouvez le constater, afficher des vignettes dans WordPress et même les générer automatiquement est très simple.

P.S. Hikkaduwa est une merveilleuse destination touristique sur la côte sud-est du Sri Lanka. Nous aimons ça ici : une végétation luxuriante, un océan clair et déchaîné avec d'énormes vagues, beaucoup de noix de coco et autres fruits, des habitants sympathiques. Nous louons une maison pour 45 000 roupies (21 000 roubles). La saison des pluies touche désormais à sa fin et le temps devrait être magnifique pour les prochains mois ! Venez visiter :)