Comment changer dynamiquement la largeur et la hauteur des oEmbeds dans WordPress

Vous voulez que votre contenu intégré soit parfait sur votre site WordPress, quelle que soit la taille de l'écran ?

Par défaut, WordPress fait un excellent travail pour intégrer des vidéos et d'autres oEmbeds dans vos articles et pages. Cependant, d'après notre expérience, vous avez parfois besoin de plus de contrôle sur leur taille.

La possibilité de changer dynamiquement la largeur et la hauteur des intégrations est importante pour la conception réactive, garantissant que votre site Web est superbe sur les téléphones, les tablettes et les ordinateurs de bureau. Cela vous permet également d'affiner la mise en page de votre contenu pour un aspect plus soigné. 

Dans cet article, nous vous montrerons comment changer dynamiquement la largeur et la hauteur des oEmbeds dans WordPress.

Pourquoi définir la largeur et la hauteur dynamiques des oEmbeds dans WordPress

WordPress facilite l'intégration de contenu tiers dans vos articles et pages à l'aide d'une technologie appelée oEmbed.

Cela vous permet d'intégrer facilement des vidéos YouTube, des publications Facebook, des vidéos TikTok, des tweets, et bien plus encore dans WordPress. Le meilleur, c'est que ce contenu n'est pas hébergé sur votre site WordPress, ce qui économise les ressources de votre serveur et améliore les performances de WordPress.

Par défaut, WordPress fait un excellent travail pour ajuster automatiquement la hauteur et la largeur du contenu intégré afin qu'il s'adapte à vos articles et pages.

Cependant, certains utilisateurs peuvent vouloir modifier ce comportement par défaut. Par exemple, vous pourriez vouloir définir une largeur et une hauteur d'intégration par défaut différentes pour la page d'accueil et les articles individuels.

Cela s'avère utile lorsque vous utilisez une mise en page de page d'accueil personnalisée ou que vous travaillez sur votre propre conception de thème personnalisé.

Cela dit, examinons comment définir facilement une largeur et une hauteur dynamiques pour le contenu oEmbed dans WordPress.

Nous vous montrerons deux méthodes différentes ; vous pouvez utiliser les liens rapides ci-dessous pour accéder directement à la méthode qui vous intéresse.

• Méthode 1. Définir la largeur et la hauteur d'intégration dynamiques dans WordPress
• Méthode 2. Utiliser CSS pour définir la largeur et la hauteur oEmbed dynamiques

Méthode 1. Définir la largeur et la hauteur d'intégration dynamiques dans WordPress

Cette méthode nécessite l'ajout de code personnalisé à votre site WordPress. Si vous ne l'avez jamais fait auparavant, consultez notre guide sur la façon de coller facilement des extraits du web dans WordPress.

Pour cette méthode, nous utiliserons les balises conditionnelles de WordPress pour détecter quelle page WordPress est consultée, puis nous modifierons les valeurs par défaut de la largeur et de la hauteur oEmbed en conséquence.

Ajoutez simplement le code suivant au fichier functions.php de votre thème, à un plugin spécifique au site, ou à un plugin d'extraits de code.

//Custom oEmbed Size
function wpb_oembed_defaults($embed_size) {
if(is_front_page()) {
        $embed_size['width'] = 940;
        $embed_size['height'] = 600;
}
else {
    $embed_size['width'] = 600;
        $embed_size['height'] = 338;
}
    return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');

Nous vous recommandons d'ajouter ce code à l'aide de WPCode, le meilleur plugin d'extraits de code WordPress. C'est le moyen le plus simple d'ajouter du code personnalisé dans WordPress sans modifier le fichier functions.php de votre thème.

Avec cette méthode, vous n'avez pas à vous soucier de casser votre site. De plus, si vous changez de thème WordPress, vous pourrez conserver toutes vos personnalisations.

Pour commencer, vous devez installer et activer le plugin gratuit WPCode. Pour des instructions étape par étape, consultez notre guide sur comment installer un plugin WordPress.

Une fois le plugin activé, accédez à la page Snippets de code » + Ajouter un snippet depuis votre tableau de bord d'administration WordPress.

Ensuite, recherchez l'option « Ajouter votre code personnalisé (Nouveau snippet) » et cliquez sur le bouton « + Ajouter un snippet personnalisé ».

Ensuite, sélectionnez « Snippet PHP » comme type de code parmi les options qui apparaissent à l'écran.

Après cela, vous pouvez ajouter un nom à votre snippet personnalisé, qui peut être n'importe quoi pour vous aider à vous souvenir de l'utilité du code.

Ensuite, copiez et collez simplement le snippet de code ci-dessus dans la boîte « Aperçu du code ».

Une fois cela fait, basculez simplement le commutateur en haut de l'écran de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer le snippet ».

Vous pouvez utiliser n'importe lequel des tags conditionnels WordPress disponibles pour détecter différents scénarios.

Voici un autre exemple où nous modifions la largeur par défaut d'oEmbed pour une page de destination personnalisée.

function wpb_oembed_defaults($embed_size) {
if( is_page( 42 ) ) {
        $embed_size['width'] = 940;
        $embed_size['height'] = 600;
}
else {
    $embed_size['width'] = 600;
        $embed_size['height'] = 338;
}
    return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');

Comme vous pouvez le voir, ce code définit simplement une largeur et une hauteur par défaut différentes pour une page spécifique.

Méthode 2. Utiliser CSS pour définir la largeur et la hauteur oEmbed dynamiques

WordPress ajoute automatiquement des classes CSS par défaut à différentes zones de votre site Web.

Ces classes CSS peuvent ensuite être utilisées pour modifier l'apparence des intégrations dans des zones spécifiques de votre site web.

Par exemple, vous pouvez trouver des classes CSS comme page-id, post-id, category, tag, et bien d'autres dans votre thème WordPress. Vous pouvez découvrir ces classes CSS en utilisant l'outil d'inspection.

De même, WordPress ajoute également des classes CSS aux blocs d'intégration dans vos articles et pages. Encore une fois, vous utiliserez l'outil d'inspection pour trouver quelles classes sont utilisées par le bloc d'intégration.

Une fois que vous avez ces classes CSS, vous pouvez les utiliser pour définir une hauteur et une largeur dynamiques pour les oEmbeds. Par exemple, dans le code d'exemple suivant, nous définissons la largeur et la hauteur dynamiques pour le bloc d'intégration Pinterest sur un ID de publication spécifique.

article#post-79 .wp-block-embed-pinterest {
    max-width: 200px!important;
    max-height: 400px!important;
}

Vous pouvez essayer votre code CSS en ajoutant du CSS personnalisé dans le personnalisateur de thème. Une fois que vous êtes satisfait, n'oubliez pas d'enregistrer et de publier vos modifications.

Nous espérons que ces deux méthodes vous ont aidé à apprendre comment définir facilement la largeur et la hauteur dynamiques des oEmbeds dans WordPress. Vous voudrez peut-être aussi consulter ces astuces, tours et hacks WordPress utiles ou consulter notre sélection des meilleurs plugins de médias sociaux pour WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.