Intégrer Wordpress à un site existant en mode SEO Friendly

Vous lissez le premier article rédigé et publié avec WordPress sur Alyze ! Si j’ai bien bossé, tout doit normalement très bien s’intégrer à l’interface du reste du site. Il ne s’agit pas de l’adaptation d’un thème WordPress, mais réellement d’utiliser WordPress au sein du code d’un site existant. Cette technique permet de bénéficier de l’interface de publication de WordPress tout en conservant les spécificités de l’UX d’un site. Je vais maintenant prendre plaisir à publier régulièrement sur le blog d’Alyze, mais ce n’est pas l’objet premier de cet article. 

On va ici survoler les étapes permettant d’intégrer WordPress à un site existant. Bien entendu, il faut que ce site soit en PHP, sinon ça va être plus compliqué. On ne va pas oublier le SEO, parce qu’on est quand même sur le blog d’Alyze !

Pourquoi intégrer WordPress à un site existant ?

Intégrer WordPress à un site custom se justifie bien souvent parce qu’on souhaite une intégration parfaite du site et du blog. Prenons tout simplement l’exemple du blog sur lequel vous êtes. Il y a des années que j’ai créé ce petit espace sur Alyze avec du code PHP maison. Au départ, le besoin était tout simple : informer mes visiteurs des nouveautés sur Alyze.

Au fil du temps, j’ai éprouvé le besoin de parler davantage sur ce blog, mais à chaque fois, je perdais rapidement ma motivation. La faute d’une interface vraiment basique et d’un code legacy qu’il fallait régulièrement mettre à niveau. Pour vous donner une idée, il fallait que je rédige les posts en HTML et que j’uploade les images à la main en FTP ! Bref, il était temps de passer à une solution plus pratique. 

Pour ce genre de besoin, WordPress est la solution toute trouvée (dans la communauté SEO FR, je dirais même c’est la seule solution envisageable 😅). Ma première idée a été d’installer un WordPress dans un sous répertoire, d’adapter vaguement le thème avec du vert et du noir et de publier le tout. 

Le souci, c’est que le blog d’Alyze est très intégré à l’interface du reste du site. Il propose aussi en haut de chaque page un formulaire pour tester le SEO d’une page en un clic (avec les éléments de sécurité qui vont avec). Je ne le cache pas, c’est aussi une manière d’amener des visiteurs du Blog à tester Alyze. J’aurais certes pu modifier un thème existant pour y intégrer les fonctionnalités d’Alyze. Outre le fait que le code aurait forcément été un peu crade, j’y aurais sans doute passé plus de temps qu’à intégrer WordPress à mon code. Eh oui, l’opération est assez facile, on y vient.

Enfin, le dernier avantage de la manœuvre est de pouvoir faire cohabiter de manière parfaitement transparente le blog « legacy » et le blog WordPress. Les posts WP et les anciens articles du blog peuvent être affichés et triés de manière parfaitement transparente pour l’utilisateur.

Disclaimer : Je ne suis pas développeur WordPress, il s’agit simplement de ma manière de faire. Ce n’est peut-être pas la meilleure. Libre à vous de l’adapter !

Installer WordPress

La première chose à faire est d’installer un WP dans un répertoire sur votre site. Normalement, vous savez faire. Sinon, demandez à Google… ou à ChatGTP. 

⚠ Utilisez une base de données différente de cette utilisée par votre site en prod, ça lui évitera de s’exposer aux éventuelles failles propres à WP. Il est également utile d’un point de vue sécurité d’utiliser les espaces de noms dans votre code PHP pour isoler autant que possible le code WordPress.

Pour la suite de ce tuto, admettons que votre WordPress soit installé dans le répertoire :

/www/wp/

Pendant que votre site custom se trouve dans :

/www/mon_site/

Configurer l’adresse du blog dans son répertoire d’installation. Si vous êtes sur localhost, ça donne :

http://localhost/wp/

L’administration du blog se fera le plus classiquement du monde en passant par l’adresse http://localhost/wp/wp-admin/

Rien de particulier question configuration. Il est simplement utile de passer l’ensemble du blog en noindex afin d’éviter d’éventuel problème de duplicate content (cocher la case « Demander aux moteurs de recherche de ne pas indexer ce site » dans Réglages -> Lecture). On peut aussi mettre un mot de passe pour accéder aux WordPress (avec une extension comme Password Protected par exemple) afin d’éviter qu’un visiteur tombe sur votre installation de WordPress par accident.

Utiliser les fonctions WP dans votre code

Imaginons que votre site existant s’affiche grâce un fichier index.php placé dans /www/mon_site/. Pour l’exemple, le code est hyper simple :

<?php

my_header();
my_content();
my_footer();

?>

Je vous avais prévenu, on simplifie.

Reprenons ce code, qu’est-ce qu’il lui manque pour pouvoir utiliser les fonctions de WP ? Presque rien, juste un include sur le fichier wp-load.php qui se trouve à la racine de votre installation WP. 

Si vous avez bien suivi ce qu’on tente de faire, nous n’aurons besoin d’aucun thème puisque nous irons chercher directement le contenu du blog avec les fonctions WP. Pour ne pas charger tout le brassard relatif aux thèmes, on ajoute une constante WP_USE_THEMES définie sur false.

Voici donc le code que nous pourrons intégrer à la partie blog de notre petit site :

<?php

my_header();

define('WP_USE_THEMES', false);
require('../wp/wp-load.php');

// ici j'utilise les fonctions WP

my_footer();

?>

Nous avons maintenant tout le nécessaire pour afficher directement le contenu de WP dans notre code. 

Afficher un post WP avec votre propre code

Admettons que nous ayons un article déjà publié dont le slug est « test » (il est bien entendu possible d’accéder aux articles par leur ID, mais dans une optique SEO, on va directement s’intéresser aux slugs). Dans le fichier précédent, il suffit d’insérer le code suivant pour afficher l’article dont le slug est « test ».

$slug = 'test';

// On utilise ici la class WP_Query pour retrouver le post via son slug (stocké dans le champ "name") :
$wp_query = new WP_Query([
    'name'  => $slug
]);

$post = $wp_query->posts[0] ?? false;
		
if(!$post){
    // génère une erreur si le post n'a pas été trouvé :
    http_response_code(404);
    echo 'Post introuvable';
}else{
    // si le post a été trouvé, on peut directement passer à l'affichage :
    echo '<h1>'.$post->post_title.'</h1>';
    echo $post->post_date.'<br>';

    // application des filtres sur le contenu du post :
    $content = apply_filters('the_content', $post->post_content); 
    echo '<div>'.$content.'</div>';
}

Voilà ! Nous venons d’afficher un post WP dans l’interface de notre site. Facile non ?

Il reste bien entendu plein de choses à faire : lister les articles, les catégories, gérer les extensions, etc. On ne va pas entrer dans l’ensemble de ces détails, mais puisqu’on est sur un blog SEO, évoquons directement cette question !

Utiliser Yoast SEO pour soigner votre SEO

Dans l’exemple précédent, les experts SEO que vous êtes auront tout de suite remarqué qu’il manque des éléments indispensables pour bien apparaître sur les moteurs de recherche.

Pour les gérer avec WordPress, nous sommes nombreux à avoir pris l’habitude d’utiliser Yoast SEO. Cette extension offre en effet dans sa version gratuite tout ce qu’il faut pour optimiser ses pages. Les développeurs de Yoast ont de plus le bon goût de proposer une fonction YoastSEO très simple à utiliser.

Voici un petit extrait de code que l’on peut ajouter juste au-dessus de l’affichage de la balise H1 :

$title = YoastSEO()->meta->for_post($post->ID)->title;
$description =  YoastSEO()->meta->for_post($post->ID)->meta_description;
$ldjson = json_encode(YoastSEO()->meta->for_post($post->ID)->schema);
	
echo '<head>';
echo '<title>'.$title.'</title>';
echo '<meta name="description" content="'.$description.'" />';
echo '<script type="application/ld+json">'.$ldjson.'</script>';
echo '</head>';

Ce simple code permet de contrôler l’essentiel de ce qui manque à WordPress out of the box :

• le titre indépendamment de la balise H1,
• la meta description,
• les données structurées complètes de la page au format JSON

Bien sûr, Yoast est capable de générer beaucoup d’autre données. Rendez-vous sur la page Yoast dédiée aux développeurs pour aller plus loin.

Gérer les scripts et les styles nécessaires aux extensions

Les extensions font une bonne partie de la force de WordPress. Il y en a pour tous les besoins. Certaines fonctionneront très bien simplement en utilisant la fonction apply_filters comme nous l’avons vu au-dessus, d’autres seront utilisables comme Yoast SEO avec des fonctions qui leur sont propres, mais beaucoup d’autres auront besoin d’utiliser des styles ou du code Javascript pour bien fonctionner. Sur ce blog, c’est par exemple le cas de l’extension qui permet de coloriser le code source ou de créer un sommaire.

Là aussi, WordPress offre toutes les fonctions nécessaires à ces manipulations. À titre d’exemple, vous pouvez utiliser le code suivant après avoir appelé la fonction apply_filters :

do_action('wp_enqueue_scripts');

foreach($wp_scripts->queue ?? [] as $handle){
	if($obj = $wp_scripts->registered[$handle] ?? null){
		if(is_array($obj->extra ?? null)){
			foreach($obj->extra as $extra){
				echo '<script id="'.$handle.'-js-extra">'.$extra.'</script>';
			}
		}
		
		$filename = $obj->src ?? null;
		if($filename && !preg_match('/wp\-content\/themes/', $filename)){
			$q = isset($obj->ver) && $obj->ver ? '?ver='.$obj->ver : '';
			echo '<script src="'.$filename.$q.'" type="text/javascript" id="'.$handle.'-js"></script>';
		}
		
	}
}

foreach($wp_styles->queue ?? [] as $handle){
	if($obj = $wp_styles->registered [$handle] ?? null){
		$filename = $obj->src ?? null;
		
		if($filename && !preg_match('/wp\-content\/themes/', $filename)){
			if(!preg_match('/^https?:\/\//', $filename)){
				$filename = site_url().'/'.$filename;
			}

			
			echo '<link type="text/css" rel="stylesheet" href="'.$filename.'" />';
		}
	}
}

À noter que les variables $wp_scripts et $wp_styles sont des variables globales. Si vous placez ce code dans une fonction, il faudra donc le faire précéder de :

global $wp_scripts, $wp_styles;

Si on revient deux secondes sur le début de ce tuto, il est également utile lorsqu’on est dans une fonction de travailler sur une variable $post globale. Ce n’est pas rigoureusement indispensable, mais certaines extensions utilisent cette variable pour travailler. 

Lister les articles de votre blog

On arrive à la fin de ce survol, mais avant de vous quitter, il me reste à vous donner quelques pistes pour lister les articles sur votre blog.

Je vous propose ce code hyper simplifié comme base :

$page = 1;
$posts_par_page = (int) (get_option( 'posts_per_page' ) ?? 10);

$query = new WP_Query([
	'post_type' => 'post',
	'posts_per_page' => $posts_par_page,
	'paged' => $page
]);

foreach($query->posts as $post){
	echo '<h2>'.$post->post_title.'</h2>';
	echo '<p>'.get_the_excerpt($post->ID).'</p>';
	echo '<nav><a href="?slug='.$post->post_name.'">Lire la suite</a></nav>';
}

On liste ici les derniers posts du blog dont on n’affiche qu’un extrait.

Pour conclure

J’espère que ces informations vous donneront envie d’aller plus loin dans la manipulation de WordPress. La programmation WordPress a une logique un peu particulière, presque archaïque, mais il faut dire qu’on trouve toujours une solution à ses problèmes. Finalement, qu’il s’agisse comme ici d’intégrer WP dans un autre site, de créer un thème ou de développer une extension, les choses se font toujours assez simplement.

Il me reste à vous donner rendez-vous très vite pour de nouvelles publications sur ce blog ! Ça sera bien plus facile à gérer que l’ancien système maison.