Voulez-vous modifier dynamiquement la largeur et la hauteur d’oEmbed dans WordPress ?
Par défaut, WordPress fait un excellent travail pour intégrer des vidéos et d’autres oEmbeds dans vos articles et pages. Cependant, vous souhaiterez parfois modifier dynamiquement la largeur et la hauteur d’intégration.
Dans cet article, nous allons vous montrer comment modifier dynamiquement la largeur et la hauteur d’oEmbed dans WordPress.
Pourquoi définir la largeur et la hauteur dynamiques d’OEmbed 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 tweets, des TikToks, etc. La meilleure partie est que ce contenu n’est pas hébergé sur votre site Web WordPress, ce qui économise les ressources de votre serveur et améliore les performances de WordPress.
Par défaut, WordPress fait un excellent travail en ajustant automatiquement la hauteur et la largeur du contenu intégré pour s’adapter à vos publications et pages.
Cependant, certains utilisateurs peuvent souhaiter modifier ce comportement par défaut. Par exemple, vous souhaiterez peut-être 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 pratique 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 étant dit, examinons comment définir facilement la largeur et la hauteur dynamiques du contenu oEmbed dans WordPress.
Méthode 1. Définition de la largeur et de la hauteur d’intégration dynamique dans WordPress
Cette méthode nécessite que vous ajoutiez un code personnalisé à votre site Web WordPress. Si vous ne l’avez pas encore fait, consultez notre guide sur la façon d’ajouter facilement des extraits de code personnalisés dans WordPress.
Pour cette méthode, nous utiliserons des balises conditionnelles WordPress pour détecter quelle page WordPress est en cours d’affichage, puis modifierons les valeurs par défaut de largeur et de hauteur oEmbed en conséquence.
Ajoutez simplement le code suivant au fichier functions.php de votre thème ou à un plugin spécifique au site.
//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');
Vous pouvez utiliser n’importe lequel des Balises conditionnelles WordPress 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 un ID de page spécifique.
Méthode 2. Utilisation de 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 telles que page-id, post-id, category, tag et bien d’autres dans votre thème WordPress. Vous pouvez découvrir ces classes CSS à l’aide de l’outil Inspect.
De même, WordPress ajoute également des classes CSS pour intégrer des blocs dans vos articles et pages. Encore une fois, vous utiliserez l’outil Inspecter pour trouver les classes utilisées par le bloc d’intégration.
Une fois que vous avez ces classes CSS, vous pouvez les utiliser pour définir la hauteur et la largeur dynamiques des oEmbeds. Par exemple, dans l’exemple de code suivant, nous définissons une largeur et une 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 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 à définir facilement la largeur et la hauteur dynamiques oEmbed dans WordPress. Vous pouvez également consulter ces conseils, astuces et astuces WordPress utiles ou consulter notre sélection des meilleurs plugins de médias sociaux pour WordPress.