Comment définir le point terminaison oEmbed Max Width dans WordPress (4 méthodes faciles)

Voulez-vous limiter la largeur des points de terminaison oEmbed dans WordPress ?

WordPress embarque automatiquement des contenus tiers tels que des vidéos YouTube et des tweets. Cependant, il arrive que les contenus embarqués deviennent trop larges et ruinent le design de votre site.

Dans cet article, nous allons vous montrer comment définir le point terminaison oEmbed dans WordPress afin que vous ayez plus de contrôle sur la mise en page de votre site.

Pourquoi Corrigé les points terminaison oEmbed largeur maximale dans WordPress ?

WordPress supporte le point terminaison oEmbed, qui vous permet d’intégrer automatiquement du contenu provenant de sites tiers. Par exemple, vous pouvez facilement intégrer des vidéos YouTube, des présentations SlideShare, des tweets et bien d’autres types de contenu.

Ce contenu n’est pas hébergé sur votre serveur, il ne ralentira donc pas votre site. En particulier, vous devriez toujours utiliser des technologies telles que le point terminaison oEmbed, et ne jamais téléverser une vidéo sur WordPress.

Note : Bien que Facebook et Instagram aient tous deux pris en charge oEmbed dans le passé, Meta a depuis abandonné le support de oEmbed. Pour des instructions étape par étape sur la façon de réparer cette fonctionnalité, veuillez consulter notre guide sur la façon de corriger le point de terminaison oEmbed de Facebook et Instagram dans WordPress.

WordPress essaiera toujours d’ajuster la largeur du contenu embarqué pour qu’il s’adapte parfaitement à l’espace disponible. Cependant, il arrive que le contenu embarqué soit trop large et chevauche les autres zones de contenu de votre site.

Malheureusement, vous ne pouvez pas définir une largeur maximale pour les contenus embarqués de tiers à l’aide des outils intégrés de WordPress.

Ceci étant dit, voyons comment vous pouvez ajouter cette fonctionnalité manquante et définir un point terminaison oEmbed maximum dans WordPress. Utilisez simplement les liens rapides ci-dessous pour passer directement à la méthode que vous souhaitez utiliser :

Méthode 1 : Utilisation du Contenu embarqué court (idéal pour les vidéos YouTube)

Vous pouvez définir une largeur maximale à l’aide d’un code court. Cette méthode est facile, en particulier si vous souhaitez uniquement définir la largeur maximale pour un petit nombre de publications. Nous avons également trouvé que cette méthode fonctionne bien pour Embarquer des vidéos dans les publications de blogs WordPress.

Cependant, le code court d’intégration et ses paramètres de largeur et de hauteur ne fonctionnent pas pour tous les fournisseurs de Contenu embarqué. Par exemple, vous ne pouvez pas l’utiliser pour définir la hauteur et la largeur d’un contenu embarqué Giphy dans WordPress. Dans ce cas, vous pouvez essayer l’une des autres méthodes mentionnées ci-dessous.

Au lieu de coller l’URL dans l’éditeur de la publication, vous devrez créer un bloc de codes courts. Vous pourrez ensuite ajouter les paramètres de largeur et de hauteur au code embarqué.

Par exemple, il vous suffit d’insérer les éléments suivants dans des balises d’identification ( embed):

width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues

Il suffit de modifier les valeurs de largeur et de hauteur en fonction de vos besoins et de remplacer l’URL par le contenu que vous souhaitez intégrer.

Lorsque vous êtes satisfait de la page, il vous suffit de cliquer sur « Mettre à jour » ou « Publier ».

Le contenu embarqué devrait maintenant s’insérer parfaitement dans l’espace disponible.

Méthode 2 : Utiliser les blocs de contenu embarqué de WordPress (facile)

L’éditeur/éditrices blocs de WordPress est livré avec plusieurs blocs de terminaison pour différents services oEmbed.

Certains de ces blocs vous permettent de modifier l’alignement du Contenu embarqué et de définir le contenu comme étant de « grande largeur » ou de « pleine largeur ».

Si vous choisissez la pleine largeur, le bloc et le contenu embarqué prendront toute la largeur de l’écran. Si vous choisissez la largeur large, le bloc incorporé occupera toute la largeur de l’écran, mais le contenu restera de la même taille.

Le résultat final peut varier en fonction de votre thème WordPress. Cependant, il s’agit d’une méthode rapide et facile, cela vaut donc la peine de voir si elle fonctionne pour votre site WordPress.

Il suffit de cliquer sur le bouton « Aligner » dans la petite barre d’outils située au-dessus du bloc. Sélectionnez ensuite « Large » ou « Pleine largeur ».

Si cela corrige le problème de la largeur maximale du Contenu embarqué, vous pouvez publier la page. Si vous n’êtes pas satisfait de l’aspect de la page, vous devrez essayer une autre méthode.

Méthode 3 : Outil de personnalisation PHP (Définir une largeur maximale pour tous les contenus embarqués)

Il peut arriver que vous souhaitiez définir une largeur maximale pour l’ensemble du contenu embarqué. La manière la plus simple de le faire est d’ajouter un code personnalisé à votre site WordPress.

Le problème avec cette méthode est que l’attribut de largeur maximale fonctionnera uniquement si le contenu embarqué n’a pas déjà un attribut « width » défini. Si le code embarqué comprend déjà son propre attribut « width », cette méthode risque de ne pas fonctionner.

Si vous n’avez jamais modifié le code de votre site, consultez notre guide sur la façon d’ajouter facilement des extraits de code personnalisés dans WordPress.

Certains guides vous demandent de modifier les fichiers du thème manuellement, mais cela peut provoquer des erreurs WordPress courantes, voire casser complètement votre site.

C’est pourquoi nous vous recommandons d’utiliser WPCode. Il facilite l’ajout d’extraits de code dans WordPress sans avoir à modifier les fichiers de votre thème. Ainsi, vous pouvez mettre à jour ou modifier votre thème sans perdre toutes les fonctions de votre code personnalisé.

Tout d’abord, vous devrez installer et activer le plugin gratuit WPCode. Pour plus d’informations, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, allez dans Extraits de code  » Ajouter un extrait.

Sur l’écran suivant, survolez l’option « Ajouter votre code personnalisé (nouvel extrait) » et cliquez sur le bouton « Utiliser l’extrait » lorsqu’il apparaît.

Dans l’écran suivant, saisissez un titre pour l’extrait de code. Il s’agit d’un titre de référence, vous pouvez donc utiliser ce que vous voulez.

Ensuite, ouvrez le menu déroulant « Type de code » et choisissez « Extrait de PHP ».

Une fois cela fait, il suffit de coller ce qui suit dans l’éditeur/éditrices de code :

add_filter( 'embed_defaults', 'wpbeginner_embed_defaults' );

function wpbeginner_embed_defaults() {
    return array(
        'width'  => 400,
        'height' => 280
    );
}

N’oubliez pas d’ajuster les attributs de hauteur et de largeur en fonction de vos besoins.

Enfin, cliquez sur le Diaporama « Inactif » pour qu’il affiche « Actif ». Cliquez ensuite sur le bouton « Enregistrer l’extrait » ou « Mettre à jour » pour rendre l’extrait de code direct.

Méthode 4 : Utilisation de CSS (Définir la largeur maximale pour des types de contenus embarqués spécifiques)

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

Il ajoute également plusieurs classes CSS aux blocs embarqués. Vous pouvez utiliser ces classes CSS pour définir une largeur maximale pour les contenus embarqués sur votre blog WordPress.

C’est un bon choix si vous souhaitez définir une taille maximale pour un type d’incorporation spécifique, comme les Tweets embarqués. Il vous permet également de créer une taille maximale pour tous les contenus embarqués, quel que soit leur type.

Pour trouver les classes CSS que vous devez cibler, il suffit d’embarquer du contenu dans une publication ou une page, puis de le prévisualiser dans votre navigateur.

Survolez ensuite le contenu embarqué et cliquez avec le bouton droit de la souris. Dans le menu qui apparaît, sélectionnez l’outil « Inspecter ».

Cela ouvre un nouveau panneau affichant toutes les classes CSS que WordPress a ajoutées au contenu embarqué. Vous pouvez utiliser ces classes pour définir une largeur maximale pour ce type de Contenu embarqué.

Pour cibler un point terminaison de points terminaison oEmbed, vous utiliserez généralement .wp-block-embed-providername, recherchez donc cette classe dans le tableau de bord.

Par exemple, dans l’image suivante, nous avons souligné la classe .wp-block-embed-providername. Sur cette ligne, on peut également voir une classe .wp-block-embed-pinterest.

Vous pouvez définir une largeur maximale pour les contenus embarqués Pinterest uniquement à l’aide de la classe .wp-block-embed-pinterest.

Par exemple :

.wp-block-embed-pinterest {
    max-width: 900px!important;
}

Sachez simplement que vous devrez peut-être remplacer .wp-block-embed-pinterest par une classe CSS différente, en fonction du contenu que vous souhaitez cibler.

Si vous souhaitez définir une largeur maximale pour tous les Contenu embarqués, vous pouvez utiliser l’extrait suivant :

.wp-block-embed {
    max-width: 900px!important;
}

La manière la plus simple d’ajouter un CSS personnalisé à votre site est d’utiliser WPCode. Il suffit de créer un nouvel extrait personnalisé en suivant le même processus que celui décrit ci-dessus.

Cette fois-ci, ouvrez le menu déroulant « Type de code » et sélectionnez « Extrait CSS ».

Vous pouvez maintenant enregistrer et publier cet extrait exactement de la même manière que vous mettez en direct n’importe quel extrait de WPCode.

Ceci fait, WordPress utilisera cette valeur comme taille maximale pour vos contenus embarqués.

Astuce : Comment ajouter facilement vos flux de réseaux sociaux à WordPress

Si vous embarquez régulièrement du contenu provenant de plateformes de réseaux sociaux, vous pouvez alors Gagner beaucoup de temps et d’efforts en utilisant Smash Balloon.

Smash Balloon est la meilleure extension de médias sociaux pour WordPress et vous permet d’ajouter facilement vos flux de réseaux sociaux à un site WordPress.

Il supporte tous les contenus embarqués des réseaux sociaux les plus populaires, notamment YouTube, Twitter et Instagram.

Plus important encore, Smash Balloon est responsive pour les mobiles et fonctionne avec n’importe quel thème WordPress, de sorte que votre contenu embarqué aura toujours fière allure.

Nous espérons que cet article vous a aidé à apprendre comment définir un point terminaison de terminaison oEmbed max width dans WordPress. Vous voudrez peut-être aussi consulter notre antisèche complète sur les réseaux sociaux ou notre comparaison d’experts du meilleur logiciel de discussion en direct pour les petites entreprises.

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.