Comment modifier dynamiquement la largeur et la hauteur du point terminaison oEmbed dans WordPress

Vous souhaitez modifier dynamiquement le point de terminaison oEmbed en largeur et en hauteur dans WordPress ?

Par défaut, WordPress fait un excellent travail pour intégrer des vidéos et d’autres points de terminaison oEmbed dans vos publications et pages. Cependant, il peut arriver que vous souhaitiez modifier dynamiquement la largeur et la hauteur de l’intégration.

Dans cet article, nous allons vous afficher comment modifier dynamiquement le point terminaison oEmbed en largeur et en hauteur dans WordPress.

Pourquoi définir la largeur et la hauteur des points terminaison oEmbed dans WordPress ?

WordPress permet d’intégrer facilement du contenu tiers dans vos publications et vos pages grâce à une technologie appelée oEmbed.

Cela vous permet d’embarquer facilement des vidéos YouTube, des vidéos TikTok, des tweets, et plus encore dans WordPress. Le plus beau, c’est que ce contenu n’est pas hébergé sur votre site WordPress, ce qui permet d’enregistrer les ressources de votre serveur et d’améliorer les performances de WordPress.

Par défaut, WordPress fait un excellent travail en ajustant automatiquement la hauteur et la largeur du contenu embarqué pour l’adapter à vos publications et à vos pages.

Toutefois, certains utilisateurs/utilisatrices peuvent souhaiter modifier ce comportement par défaut. Par exemple, vous pouvez définir une largeur et une hauteur par défaut différentes pour la page d’accueil et les articles individuels.

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

Ceci étant dit, voyons comment définir facilement la largeur et la hauteur dynamiques du contenu oEmbed dans WordPress.

Méthode 1. Définir la largeur et la hauteur du Contenu embarqué dynamique dans WordPress

Cette méthode nécessite d’ajouter un 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 vue et modifier en conséquence les points terminaison oEmbed en largeur et en hauteur.

Il suffit d’ajouter 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 en utilisant WPCode, la meilleure extension 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 à craindre de casser votre site. De plus, si vous modifiez votre thème WordPress, vous pourrez conserver toutes vos personnalisations.

Pour Premiers pas, vous devez installer et activer l’extension gratuite WPCode. Pour obtenir des instructions étape par étape, consultez notre guide sur l’installation d’une extension WordPress.

Une fois le plugin activé, allez dans Code Snippets «  + Add Snippet depuis votre tableau de bord d’administration WordPress.

Trouvez ensuite l’option « Ajouter votre code personnalisé (nouvel extrait) » et cliquez sur le bouton « Utiliser l’extrait ».

Ensuite, il suffit de copier et de coller l’extrait de code ci-dessus dans le champ « Prévisualisation du code ». Vous devez également sélectionner « Extrait de PHP » comme type de code dans la liste déroulante de droite.

Ensuite, il suffit de faire passer le permutateur en haut de l’écran de « Inactif » à « Actif » et de cliquer sur le bouton « Enregistrer l’extrait ».

Vous pouvez utiliser n’importe laquelle des balises conditionnelles WordPress disponibles pour détecter différents scénarios.

Voici un autre exemple dans lequel nous modifions la largeur par défaut d’oEmbed pour une page d’atterrissage 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 constater, ce code définit simplement une largeur et une hauteur par défaut différentes pour un ID de page spécifique.

Méthode 2. Utiliser les CSS pour définir la largeur et la hauteur des points terminaison 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 contenus embarqués dans des zones spécifiques de votre site.

Par exemple, vous pouvez trouver des classes CSS telles que page-id, post-id, category, tag, et bien d’autres dans votre thème WordPress. Vous pouvez trouver ces classes CSS à l’aide de l’outil Inspect.

De même, WordPress ajoute des classes CSS aux blocs embarqués dans vos publications et vos pages. Là encore, vous utiliserez l’outil Contenu embarqué pour trouver les classes utilisées par le bloc intégré.

Une fois que vous disposez de ces classes CSS, vous pouvez les utiliser pour définir la hauteur et la largeur dynamiques des points terminaison oEmbed. Par exemple, dans l’exemple de code suivant, nous définissons une largeur et une hauteur dynamiques pour le bloc Pinterest embed sur un ID de publication spécifique.

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

Vous pouvez tester votre code CSS en ajoutant un 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 le point terminaison oEmbed dynamique en largeur et en hauteur dans WordPress. Vous pouvez également consulter ces astuces, trucs et astuces WordPress ou consulter notre sélection des meilleurs plugins de réseaux sociaux pour WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.