WordPress : mettre à jour le code Dailymotion

Cet article est le pendant de l’article qui explique comment remplacer le vieux code YouTube de vos articles WordPress par une URL oEmbed, mais cette fois pour Dailymotion.

Sur d’anciens articles WordPress, on peut encore retrouver de vieux codes d’intégration Dailymotion en Flash, avec des balises <object>, <param>, <embed> ou des URL du type /swf/.

Ces intégrations sont obsolètes. Flash a disparu, ces codes ne sont plus propres, et ils compliquent la maintenance du contenu.

La solution moderne consiste à remplacer ces anciens blocs par une simple URL Dailymotion :

https://www.dailymotion.com/video/x123abcCode language: JavaScript (javascript)

WordPress peut ensuite transformer cette URL en lecteur intégré via oEmbed, à condition qu’elle soit seule sur sa ligne ou insérée dans un bloc d’intégration compatible.

Pourquoi remplacer les anciens codes Dailymotion ?

Les anciens codes Dailymotion ressemblaient souvent à ceci :

<object data="http://www.dailymotion.com/swf/video/x123abc" width="300" height="150">
  ...
</object>Code language: HTML, XML (xml)

ou :

<object data="http://www.dailymotion.com/swf/x123abc" width="300" height="150">
  ...
</object>Code language: HTML, XML (xml)

Le problème est triple :

• ces intégrations reposaient souvent sur Flash ;
• elles utilisent parfois du HTTP au lieu de HTTPS ;
• elles enferment l’URL utile dans du HTML difficile à maintenir.

À la place, une URL Dailymotion propre suffit :

https://www.dailymotion.com/video/x123abcCode language: JavaScript (javascript)

Dailymotion prend en charge oEmbed : le principe consiste à fournir une URL de vidéo, puis à récupérer les informations nécessaires pour l’intégrer dans une page.

Avant de commencer : faites une sauvegarde

Avant toute opération de remplacement massif dans WordPress, faites une sauvegarde de la base de données.

wp db export before-dailymotion-cleanup-$(date +%Y%m%d-%H%M%S).sqlCode language: JavaScript (javascript)

Si vous n’utilisez pas WP-CLI, exportez la base depuis votre outil habituel : phpMyAdmin, Adminer, sauvegarde hébergeur, ManageWP, Jetpack Backup, ou autre.

Ensuite, testez les recherches en mode prévisualisation. Les expressions régulières sont puissantes, mais elles n’ont aucun humour lorsqu’elles détruisent du contenu. Elles sourient même un peu.

Méthode recommandée : Search Regex

On peut utiliser le plugin Search Regex pour WordPress, avec la case regex activée. Dans les exemples ci-dessous, j’utilise le signe dièse # comme délimiteur d’expression régulière.

L’idée est de rechercher les vieux blocs Dailymotion, d’extraire l’identifiant de la vidéo, puis de remplacer le tout par une URL propre.

Remplacer les anciens liens /swf/video/ de Dailymotion

On commence par les anciens codes qui contiennent /swf/video/. C’est souvent la forme la plus explicite.

On recherche :

#<object[^>]+data=["']https?://www\.dailymotion\.com/swf/video/([^"'\?&]+)[^"']*["'][\s\S]*?</object>#iCode language: HTML, XML (xml)

Et on remplace par :

https://www.dailymotion.com/video/$1Code language: JavaScript (javascript)

Cette regex récupère l’identifiant de la vidéo après /swf/video/, puis reconstruit une URL Dailymotion moderne.

Exemple de départ :

<object data="http://www.dailymotion.com/swf/video/x123abc" width="300" height="150">
  <param name="movie" value="http://www.dailymotion.com/swf/video/x123abc">
</object>Code language: HTML, XML (xml)

Résultat :

https://www.dailymotion.com/video/x123abcCode language: JavaScript (javascript)

Remplacer les anciens liens /swf/ de Dailymotion

On s’occupe maintenant des anciens codes qui contiennent seulement /swf/, sans /video/.

On recherche :

#<object[^>]+data=["']https?://www\.dailymotion\.com/swf/([^"'\?&]+)[^"']*["'][\s\S]*?</object>#iCode language: HTML, XML (xml)

Et on remplace par :

https://www.dailymotion.com/video/$1Code language: JavaScript (javascript)

Exemple de départ :

<object data="http://www.dailymotion.com/swf/x123abc" width="300" height="150">
  ...
</object>Code language: HTML, XML (xml)

Résultat :

https://www.dailymotion.com/video/x123abcCode language: JavaScript (javascript)

Remplacer les balises embed Dailymotion

Certains vieux articles peuvent contenir une balise <embed> au lieu d’un bloc <object>.

Exemple :

<embed src="http://www.dailymotion.com/swf/video/x123abc" width="300" height="150"></embed>Code language: HTML, XML (xml)

On recherche :

#<embed[^>]+src=["']https?://www\.dailymotion\.com/swf/(?:video/)?([^"'\?&]+)[^"']*["'][^>]*>(?:</embed>)?#iCode language: HTML, XML (xml)

Et on remplace par :

https://www.dailymotion.com/video/$1Code language: JavaScript (javascript)

Cette expression prend en charge les deux formes :

/swf/video/x123abc
/swf/x123abc

Remplacer les iframes Dailymotion anciens

Certains contenus peuvent déjà contenir des iframes. Dans ce cas, il n’est pas forcément nécessaire de les remplacer si elles fonctionnent. Mais pour uniformiser le contenu WordPress, vous pouvez aussi les convertir en URL oEmbed.

Exemple ancien :

<iframe src="https://www.dailymotion.com/embed/video/x123abc" width="480" height="270" frameborder="0"></iframe>Code language: HTML, XML (xml)

On recherche :

#<iframe[^>]+src=["']https?://www\.dailymotion\.com/embed/video/([^"'\?&]+)[^"']*["'][\s\S]*?</iframe>#iCode language: HTML, XML (xml)

Et on remplace par :

https://www.dailymotion.com/video/$1Code language: JavaScript (javascript)

Dailymotion recommande aujourd’hui plutôt son Player Embed Script quand c’est possible, et indique que l’iframe est surtout adaptée aux environnements qui restreignent l’usage de JavaScript, comme AMP.

Pour WordPress, l’URL oEmbed reste souvent la solution la plus propre côté contenu éditorial : elle garde l’article lisible, portable et moins dépendant d’un code embed figé.

Pourquoi remplacer par une URL et non par une iframe ?

Dans WordPress, une URL Dailymotion seule sur sa ligne est plus propre qu’un gros bloc HTML.

Exemple idéal dans le contenu :

https://www.dailymotion.com/video/x123abcCode language: JavaScript (javascript)

Les avantages :

• le contenu reste lisible dans l’éditeur ;
• WordPress gère l’intégration ;
• le HTML final peut évoluer côté fournisseur ;
• on évite les vieux attributs obsolètes ;
• on supprime les restes de Flash ;
• on facilite les futures migrations.

WordPress permet de modifier la liste des fournisseurs oEmbed via le filtre oembed_providers, et sa documentation rappelle que les fournisseurs autorisés sont considérés comme fiables pour l’intégration de contenus riches.

Vérifier que les vidéos s’intègrent bien dans WordPress

Après remplacement, éditez un article contenant une URL Dailymotion et vérifiez que WordPress transforme bien l’URL en bloc intégré.

L’URL doit idéalement être seule sur sa ligne :

Voici une vidéo intéressante :

https://www.dailymotion.com/video/x123abc

Et voici la suite de l’article.Code language: JavaScript (javascript)

Si vous collez l’URL au milieu d’un paragraphe, WordPress peut simplement l’afficher comme lien classique au lieu de l’intégrer.

Nettoyer les URL HTTP en HTTPS

Profitez du nettoyage pour remplacer les anciennes URL HTTP par HTTPS.

On recherche :

#http://www\.dailymotion\.com/video/#iCode language: PHP (php)

On remplace par :

https://www.dailymotion.com/video/Code language: JavaScript (javascript)

C’est un petit nettoyage utile pour éviter les contenus mixtes et les redirections inutiles.

Détecter les anciens codes Dailymotion avec WP-CLI

Avant de remplacer, vous pouvez lister les articles qui contiennent encore du vieux code Dailymotion.

Avec WP-CLI :

wp db query "
SELECT ID, post_title, post_type, post_status
FROM wp_posts
WHERE post_content LIKE '%dailymotion.com/swf%'
AND post_type IN ('post', 'page')
ORDER BY ID;
"Code language: PHP (php)

Pour chercher aussi les iframes Dailymotion :

wp db query "
SELECT ID, post_title, post_type, post_status
FROM wp_posts
WHERE post_content LIKE '%dailymotion.com/embed/video%'
AND post_type IN ('post', 'page')
ORDER BY ID;
"Code language: PHP (php)

Si votre préfixe n’est pas wp_, adaptez le nom de table ou utilisez :

wp db prefix

Remplacer avec WP-CLI search-replace

WP-CLI possède une commande search-replace, mais elle n’est pas idéale pour des remplacements regex complexes dans du HTML ancien.

Pour ce cas précis, Search Regex est plus confortable, car il permet de prévisualiser les correspondances avant remplacement.

Si vous utilisez WP-CLI, commencez toujours par un dry-run :

wp search-replace 'http://www.dailymotion.com/video/' 'https://www.dailymotion.com/video/' --dry-runCode language: JavaScript (javascript)

Puis seulement ensuite :

wp search-replace 'http://www.dailymotion.com/video/' 'https://www.dailymotion.com/video/'Code language: JavaScript (javascript)

Pour les conversions <object> ou <embed>, je préfère le plugin Search Regex ou un script PHP sur mesure qui parse les contenus avec prudence.

Script PHP de diagnostic sans modification

Voici un petit script WP-CLI pour lister les contenus qui contiennent encore du vieux code Dailymotion. Il ne modifie rien.

wp eval '
$query = new WP_Query(
	array(
		"post_type"      => array( "post", "page" ),
		"post_status"    => "any",
		"posts_per_page" => -1,
		"s"              => "dailymotion.com",
		"fields"         => "ids",
	)
);

foreach ( $query->posts as $post_id ) {
	$content = get_post_field( "post_content", $post_id );

	if (
		str_contains( $content, "dailymotion.com/swf" )
		|| str_contains( $content, "dailymotion.com/embed/video" )
	) {
		printf(
			"#%d %s\n",
			$post_id,
			get_the_title( $post_id )
		);
	}
}
'Code language: PHP (php)

C’est pratique pour mesurer l’ampleur du chantier avant de lancer des remplacements.

Script PHP de remplacement contrôlé

Si vous préférez éviter les regex dans une interface admin, voici un script WP-CLI qui remplace les anciens blocs Dailymotion par des URL oEmbed. Testez-le d’abord en staging.

wp eval '
$query = new WP_Query(
	array(
		"post_type"      => array( "post", "page" ),
		"post_status"    => "any",
		"posts_per_page" => -1,
		"s"              => "dailymotion.com",
		"fields"         => "ids",
	)
);

$patterns = array(
	"#<object[^>]+data=[\"\\\']https?://www\.dailymotion\.com/swf/video/([^\"\\\'\?&]+)[^\"\\\']*[\"\\\'][\s\S]*?</object>#i",
	"#<object[^>]+data=[\"\\\']https?://www\.dailymotion\.com/swf/([^\"\\\'\?&]+)[^\"\\\']*[\"\\\'][\s\S]*?</object>#i",
	"#<embed[^>]+src=[\"\\\']https?://www\.dailymotion\.com/swf/(?:video/)?([^\"\\\'\?&]+)[^\"\\\']*[\"\\\'][^>]*>(?:</embed>)?#i",
	"#<iframe[^>]+src=[\"\\\']https?://www\.dailymotion\.com/embed/video/([^\"\\\'\?&]+)[^\"\\\']*[\"\\\'][\s\S]*?</iframe>#i",
);

$updated = 0;

foreach ( $query->posts as $post_id ) {
	$content = get_post_field( "post_content", $post_id );
	$new     = $content;

	foreach ( $patterns as $pattern ) {
		$new = preg_replace( $pattern, "\nhttps://www.dailymotion.com/video/$1\n", $new );
	}

	if ( $new !== $content ) {
		wp_update_post(
			array(
				"ID"           => $post_id,
				"post_content" => $new,
			)
		);

		printf( "Updated #%d %s\n", $post_id, get_the_title( $post_id ) );
		++$updated;
	}
}

printf( "Done. Updated posts: %d\n", $updated );
'Code language: HTML, XML (xml)

Avant de lancer ce type de script en production, faites un export de base et testez sur quelques articles. Les vieux embeds ont souvent des variantes inattendues. Un site ancien, c’est une brocante HTML avec une base MySQL.

Vider le cache oEmbed WordPress si nécessaire

WordPress met en cache certains résultats oEmbed dans les métadonnées des articles.

Si vous avez remplacé beaucoup d’URLs et que certains embeds ne se mettent pas à jour, vous pouvez chercher les métadonnées oEmbed :

wp db query "
SELECT post_id, meta_key
FROM wp_postmeta
WHERE meta_key LIKE '_oembed_%'
LIMIT 20;
"Code language: PHP (php)

Pour supprimer le cache oEmbed, avec prudence :

wp db query "
DELETE FROM wp_postmeta
WHERE meta_key LIKE '_oembed_%';
"Code language: PHP (php)

WordPress régénérera les embeds lors des prochains affichages ou éditions selon les cas. À faire seulement si vous comprenez l’impact et que vous avez une sauvegarde.

Cas Gutenberg : transformer en bloc d’intégration

Dans Gutenberg, une URL seule sur sa ligne peut être transformée en bloc d’intégration. Vous pouvez aussi utiliser un bloc Embed ou Dailymotion si disponible dans votre installation.

Le contenu final peut ressembler à un bloc embed classique :

<!-- wp:embed {"url":"https://www.dailymotion.com/video/x123abc","type":"video","providerNameSlug":"dailymotion","responsive":true} -->
<figure class="wp-block-embed is-type-video is-provider-dailymotion wp-block-embed-dailymotion">
  <div class="wp-block-embed__wrapper">
    https://www.dailymotion.com/video/x123abc
  </div>
</figure>
<!-- /wp:embed -->Code language: HTML, XML (xml)

Mais vous n’êtes pas obligé d’écrire ce markup à la main. Coller l’URL seule dans l’éditeur suffit généralement.

Vérifier après migration

Après remplacement, vérifiez quelques articles manuellement :

• un article avec un ancien /swf/video/ ;
• un article avec un ancien /swf/ ;
• un article avec une iframe ;
• un article sans vidéo pour confirmer qu’il n’a pas été touché ;
• une page d’archive si votre thème affiche les embeds dans les extraits.

Pensez aussi à vider les caches éventuels : cache objet, cache page, Cloudflare, Varnish, plugin de cache, etc.

Mémo rapide

# Sauvegarder la base.
wp db export before-dailymotion-cleanup-$(date +%Y%m%d-%H%M%S).sql

# Ancien /swf/video/.
Recherche :
#<object[^>]+data=["']https?://www\.dailymotion\.com/swf/video/([^"'\?&]+)[^"']*["'][\s\S]*?</object>#i

Remplacement :
https://www.dailymotion.com/video/$1

# Ancien /swf/.
Recherche :
#<object[^>]+data=["']https?://www\.dailymotion\.com/swf/([^"'\?&]+)[^"']*["'][\s\S]*?</object>#i

Remplacement :
https://www.dailymotion.com/video/$1

# Ancienne balise embed.
Recherche :
#<embed[^>]+src=["']https?://www\.dailymotion\.com/swf/(?:video/)?([^"'\?&]+)[^"']*["'][^>]*>(?:</embed>)?#i

Remplacement :
https://www.dailymotion.com/video/$1

# Ancienne iframe.
Recherche :
#<iframe[^>]+src=["']https?://www\.dailymotion\.com/embed/video/([^"'\?&]+)[^"']*["'][\s\S]*?</iframe>#i

Remplacement :
https://www.dailymotion.com/video/$1

# HTTP vers HTTPS.
Recherche :
#http://www\.dailymotion\.com/video/#i

Remplacement :
https://www.dailymotion.com/video/

# Détecter les vieux embeds.
wp db query "
SELECT ID, post_title, post_type, post_status
FROM wp_posts
WHERE post_content LIKE '%dailymotion.com/swf%'
AND post_type IN ('post', 'page')
ORDER BY ID;
"

# Nettoyer le cache oEmbed si nécessaire.
wp db query "
DELETE FROM wp_postmeta
WHERE meta_key LIKE '_oembed_%';
"Code language: PHP (php)

Conclusion

Pour nettoyer les anciens codes d’intégration Dailymotion dans WordPress, le plus simple consiste à remplacer les vieux blocs Flash <object>, <embed> ou les anciennes iframes par une URL Dailymotion propre :

https://www.dailymotion.com/video/x123abcCode language: JavaScript (javascript)

WordPress peut ensuite gérer l’intégration via oEmbed, ce qui donne un contenu plus propre, plus lisible et plus facile à maintenir.

La règle d’or : sauvegarde d’abord, prévisualisation ensuite, remplacement enfin. Les vieux embeds Flash sont pénibles, mais une regex trop gourmande l’est encore plus.

Report a typo