Blog

Comment développer un thème WordPress sur un sous-domaine

Écrit le 17 01 2017 par Kévin MET _

DISCLAIMER : Ce tutoriel est écrit par un sysadmin, si certaines façons de faire vous choquent, vous pouvez le dire en commentaire tout en gardant à l’esprit que je suis ouvert à la critique mais que le développement n’est pas mon métier de base 😉

Introduction

Je fais un petit retour aux sources avec ce billet sur Wordpress, un sujet que j’affectionnais particulièrement il y a de ça 3/4 ans mais qui me plaît moins maintenant même si j’aime toujours autant ce CMS. On va dire que je ne l’utilise plus à toutes les sauces comme à cette époque, la preuve, le blog sur lequel vous êtes était auparavant sur WordPress et il est maintenant sur une solution php que j’ai développé en partant d’un thème basé sur Foundation. Bon, trêve de blabla, nous allons voir comment faire pour développer un thème WordPress sur un sous-domaine du site de prod. En gros, le dev du thème permettra d’utiliser la base de données de prod et le même DocumentRoot sous apache ou le même root sous nginx (en gros, le même dossier contenant les fichiers WordPress).

Dans la suite du tutoriel je vais utiliser le site mad-rabbit.com comme exemple car c’est sur ce site que je fais du développement WordPress et le sous-domaine est dev.mad-rabbit.com (ne cherchez pas à voir cette version, elle est protégée par un htpasswd comme je l’expliquerai plus tard).

UPDATE DU 18/01/2017 :

En me relisant je me suis dit que ce que je proposais n'était pas vraiment très clair dans ce dernier paragraphe donc pour donner un exemple concret, quand je vais sur mad-rabbit.com, c'est le thème TMTK qui se charge alors qu'en allant sur dev.mad-rabbit.com qui pointe sur le même dossier que le site en prod, c'est le thème TMTKdev qui se charge.

Avantages

Cette méthode a plusieurs avantages :

  • Pas besoin de dupliquer la base de données
  • Pas besoin de dupliquer le dossier contenant WordPress
  • Rapidité à mettre en œuvre

Mise en place coté serveur

Il suffit de mettre en place un nouveau vhost qui pointe sur votre sous-domaine de développement avec une protection par htpasswd pour éviter que Google n’indexe le site en dev et passe le contenu du domaine principal en duplicate content. Pour l’exemple, sur nginx, voici le vhost que j’ai sur la dev de mad-rabbit.com :


server {
	listen 443 ssl http2;
	server_name dev.mad-rabbit.com;
	auth_basic "Zone de dev"; # Protection par htpasswd
	auth_basic_user_file /etc/nginx/htpasswd.dev;
	
		
	root /home/madrabbit/www; # Même dossier que la prod
		
	index index.html index.php;
	access_log /var/log/nginx/dev.mad-rabbit.com-ssl_access.log;
	error_log /var/log/nginx/dev.mad-rabbit.com-ssl_error.log;
	ssl_certificate /etc/nginx/ssl/mad-rabbit.chain.pem;
	ssl_certificate_key /etc/nginx/ssl/mad-rabbit.key;
	ssl_trusted_certificate /etc/nginx/ssl/gandi-standardssl-2.chain.pem;


	location / {
		try_files $uri $uri/ /index.php?$args;
	}
	
	location ~ /\.ht {
		deny all;
	}
	location ~ \.php$ {
		fastcgi_pass unix:/run/php/php7.0-fpm-madrabbit.sock;
		fastcgi_index index.php;
		include fastcgi_params;
	}
}

Mise en place coté WordPress

Une fois le vhost mis en place, on va pouvoir s’attaquer à la partie PHP. Pour commencer il faut dupliquer le dossier thème que vous utilisez actuellement. Par exemple dans mon cas, le dossier en prod se nomme TMTK et le dossier en dev se nomme TMTKdev.

Ensuite, il suffit d’utiliser ce petit plugin WordPress en le plaçant dans un dossier du nom de votre choix dans le dossier plugins de WordPress. Il faut simplement changer les domaines et les noms de dossiers des thèmes pour que cela colle avec votre propre installation. Le fonctionnement est assez simple, le plugin intercepte la variable $_SERVER['HTTP_HOST'] et si elle correspond à votre domaine de développement, le thème de dev sera chargé au détriment du thème normal.


<?php
/*
Plugin Name: Development Theme Switcher
Plugin URI: https://mnt-tech.fr/
Description: Map theme to specific domain name
Version: 0.1
Author: nierdz
Author URI: https://mnt-tech.fr/
License: GPL
*/

//Ajout du support du theme de dev
if ($_SERVER['HTTP_HOST'] === 'dev.mad-rabbit.com') {
	add_filter( 'pre_option_siteurl', 'siteurl' );
	add_filter( 'pre_option_home', 'home' );
	add_filter( 'template', 'TMTKdev' );
	add_filter( 'stylesheet', 'TMTKdev' );
	add_filter( 'option_template', 'TMTKdev' );
	add_filter( 'option_stylesheet', 'TMTKdev' );
}

function TMTKdev() {
	return 'TMTKdev';
}

function siteurl() {
	return 'http://dev.mad-rabbit.com';
}

function home() {
	return 'http://dev.mad-rabbit.com';
}
?>

Vous pouvez ainsi faire vos modifications sans impacter la prod et en gardant le contenu de la base de données qui est en prod. Cette solution ne conviendra pas à tous les sites mais à une grande majorité des utilisateurs de WordPress. Je l’utilise sur mad-rabbit.com depuis environ deux ans et cela me convient parfaitement. Pour mettre en prod mes modifications je fais un diff sur les deux dossiers des thèmes pour voir les fichiers qui ont changés et je les copie sur le thème en production. Voilà un procédé simple mais très efficace 😃

♥ Partage sur tes réseaux sociaux ♥
Kévin MET
Kévin MET

Auteur de ce blog et gérant de la société MNT-TECH, je publie sur ce blog lorsque le temps me le permet et lorsqu'un sujet qui me parait intéressant n'a pas encore été abordé en français. Toutes les informations techniques présentes sur cette page peuvent être réutilisées moyennant le fait de citer la source.