Récemment, j’ai pleinement profité des images en vedette WordPress (ou Post Thumbnails comme certaines personnes les appellent) pour le curseur d’image utilisé dans mes thèmes gratuits. Cependant, certaines personnes m’ont demandé s’il était possible d’avoir une image distincte pour le curseur, puis leur vignette de publication, car le curseur d’image a tendance à être beaucoup plus grand, alors j’ai pensé que j’écrirais un tutoriel rapide vous montrant comment ajouter un champ personnalisé à votre thème afin que vous puissiez définir une image distincte pour le curseur avec «l’image en vedette» définie comme sauvegarde.
Étape 1 : Créer le champ personnalisé
La première étape consiste à créer le nouveau champ personnalisé (voir le codex si vous n’êtes pas familier avec Les champs personnalisés). Insérez ce qui suit au début de la boucle qui serait juste APRÈS l’instruction « while (have_posts) » ou « foreach($myposts as $post ». Changez l’endroit où il est écrit « Image alternative » pour tout ce qui a du sens – comme l’image du curseur , image de l’auteur… etc.
//get custom field titled "Post Image" $alternative_post_image = get_post_meta($post->ID, 'Alternative Image', $single = true);
Étape 2 : Afficher le nouveau champ personnalisé au lieu de l’image sélectionnée
Vous pouvez maintenant passer un test rapide pour voir si le champ personnalisé existe et, si c’est le cas, afficher l’URL définie dans le champ personnalisé, sinon afficher la vignette du message. Insérez le code suivant à l’endroit où vous souhaitez afficher votre image.
<?php //if custom field isn't blank if ($alternative_post_image !== '' ) { ?> <img src="https://www.wpexplorer.com/custom-field-image-wordpress/<?php echo $alternative_post_image; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> <?php } else { ?> <?php //show featured image the_post_thumbnail(); ?> <?php } ?>
Étape 3 : Utilisez le champ personnalisé dans vos messages
Vous pouvez maintenant utiliser votre formulaire de champ personnalisé dans l’éditeur de publication pour définir le lien vers votre image alternative. Entrez le nom de votre champ personnalisé (dans cet exemple, il s’agit de « Image alternative ») dans le champ « Nom », puis l’URL de votre image dans le champ « Valeur ». Cliquez ensuite sur « Ajouter un champ personnalisé ».