Transfert de WordPress vers un autre hébergement et domaine. Connexion à la base de données WordPress

Représentant désormais environ 17 % du contenu en ligne, WordPress devient rapidement le CMS de choix pour l'utilisateur moyen. Mais que faire des sites créés avec un CMS obsolète, ou sans CMS du tout ? Passer à WordPress signifie-t-il que vous devrez recommencer et perdre une tonne de temps, d'énergie et d'argent que vous avez investi dans votre site Web ? Non!

Migrer votre site Web (y compris la conception) vers WordPress est beaucoup plus simple que vous ne le pensez. Dans ce didacticiel, nous montrerons le processus de transfert en utilisant notre projet comme exemple. Nous examinerons également certaines questions que vous pourriez rencontrer et y trouverons des réponses.

En savoir plus sur cette leçon

Avant de nous mettre au travail, soulignons quelques points. Premièrement, ce guide a été écrit pour les débutants et sera plus utile pour les sites Web simples. Certains d’entre vous seront peut-être confrontés à des aspects avancés de la migration vers WordPress, mais il est peu probable que ce guide les aide. Si vous êtes bloqué à un moment donné concernant un transfert plus avancé, décrivez votre problème dans les commentaires.

Objectifs

Cette leçon est conçue pour vous aider dans les domaines suivants :

• planifier une transition efficace vers WordPress ;
• guider à travers les problèmes techniques associés au transfert ;
• résoudre les difficultés les plus courantes liées au transfert.

Hypothèses

J'espère que vous disposez de quelques informations de base sur l'utilisation de WordPress. Une expérience avec WordPress peut être utile, mais n’est pas nécessaire. Je suppose également que vous avez un site Web et un design que vous souhaitez migrer vers WordPress.

Premiers pas

Évaluez le site Web. Examinez attentivement les pages de votre site Web existant et déterminez le type de contenu (pages standards, galeries de photos, pages de ressources, etc.), en prenant note de toute information qui peut être considérée comme importante.

Préparez l’environnement. Configurez WordPress et préparez-vous à importer.

Importer du contenu. Migrez et organisez votre contenu via un utilitaire d'importation, manuellement (pour de petites quantités de contenu lorsque les utilitaires ne sont pas disponibles) ou via un processus de migration personnalisé.

Transférez le dessin. Intégrez votre conception existante dans un thème WordPress préinstallé.

Consultez le site Web et commencez. Vérifiez soigneusement le résultat de l'importation, corrigez si nécessaire, définissez les redirections d'URL et c'est parti !

Avec ce plan à l’esprit, commençons à élaborer chaque étape en détail.

Commencez par un plan

La clé d’une migration réussie est une évaluation minutieuse de votre site actuel. Vous devez comprendre comment importer et structurer du contenu dans WordPress avant de l’y déplacer. Si les principes du transfert sont les mêmes, les détails diffèrent souvent. Vous trouverez ci-dessous deux listes de questions à vous poser lorsque vous élaborez votre plan.

Contenu importé

• quelle quantité de contenu doit être importée (nombre de pages, d'images)
• votre contenu peut-il être transféré manuellement ou avez-vous besoin d'un utilitaire
• si vous avez besoin d'un utilitaire, existe-t-il ?
• le contenu peut-il être défini en « articles » ou « pages » réguliers, ou une personnalisation est-elle nécessaire ?
• du contenu supplémentaire devrait-il être placé sur certaines pages
• La structure de l'URL va-t-elle changer ? Si oui, la redirection depuis les anciennes URL est-elle nécessaire ?

Fonctionnalité existante

• le site Internet inclut-il des services tiers (données, etc.)
• si les formulaires doivent être transférés (formulaires de contact, formulaires de candidature, etc.)
• y a-t-il des restrictions de contenu (par exemple, uniquement pour les utilisateurs enregistrés)
• le site Web vend-il des produits (virtuels ou réels)
• Est-il nécessaire de migrer les paramètres d'administration individuels

Exemple de travail

Mon frère a décidé de donner son site à titre d'exemple : son projet vend des affiches et des cartes à une entreprise de produits alimentaires végétariens. Il a construit le site en HTML simple, avec des inserts PHP de base pour l'en-tête et le pied de page. Vous trouverez ci-dessous un screencast de ma modification de ce site afin que vous puissiez comprendre le processus. Apprécier!

Installation de WordPress

Avant d’importer du contenu, nous devons préparer WordPress. Si vous expérimentez simplement ou préférez le développement hors ligne, commencez par installer WordPress. Sinon, l’étape suivante consiste à installer WordPress sur le serveur de votre hébergeur. Ou vous pouvez utiliser le processus de migration comme une excellente opportunité de passer à un nouvel hébergement.

Une fois WordPress opérationnel, vous pouvez commencer !

Pour notre exemple, nous avons installé wordpress sur le même hébergement, dans le répertoire /wp pour poursuivre le processus de transfert.

Paramètres et plugins

Une fois WordPress installé, il ne nous reste plus qu’à faire des ajustements minimes :

• Mettez à jour vos permaliens. Cliquez « Paramètres->Permaliens » pour apporter des modifications. La plupart du temps, je change simplement les permaliens en "nom de poste".
• Mettre à jour les utilisateurs. J'ai créé un compte de niveau administrateur pour moi-même et pour tout administrateur ou éditeur nécessaire aux clients et partenaires. Je supprime également le nom d'utilisateur par défaut "administrateur", s'il existe.

En fonction des objectifs du projet, nous devrons peut-être réinstaller les plugins. Les principales catégories de plugins sont décrites ici.

• Gestion des formulaires. Porter des formes telles qu’elles sont peut tout transformer en chaos. Créer simplement des formulaires à partir de zéro est beaucoup plus simple. Mon préféré est formes de gravité. D'autres options sont redoutable Et formulaire de contact 7.
• Gestion du référencement. Le référencement est une chose très délicate. Le but de mon travail est de créer du contenu pour les gens, pas pour les moteurs de recherche. Il existe donc une approche adéquate du référencement soutenue par l’écosystème wordpress. Et si votre ancien site dispose de méta descriptions personnalisées, vous devez les transférer sans perte. Cela aidera pour cela référencement wordpress.
• De nombreuses langues. Si votre site prend en charge plusieurs langues, WordPress a une solution. Mon choix se porte sur un plugin WPML. Une autre solution pourrait être qTraduire.
• Sécurité . La sécurité sur WordPress est un sujet que je connais très bien. La popularité croissante de WordPress en a fait une bonne cible pour divers types d’attaques. WordPress lui-même est rarement un problème ; cela réside principalement dans un environnement d'hébergement mal sécurisé et des plugins obsolètes ou mal conçus. Pour la plupart de mes projets, j’utilise un hébergement WordPress réglementé, qui offre de bons standards de sécurité. Dans un certain nombre d'options, vous pouvez appeler Moteur WPE, ZippyKid, Pagely Et Synthèse. En plus de l'hébergement réglementé, faites attention aux plugins de sécurité tels que Meilleure sécurité WP ou Clôture de mots.
• Sauvegardes. Si vous choisissez un hébergement géré, les sauvegardes sont généralement incluses. Si vous effectuez la sauvegarde vous-même ou souhaitez une couche de protection supplémentaire pour vos données, il existe d'excellentes options, telles que VaultPress, CodeGuard, BackupBuddy, BackWPup.

Importer du contenu

Nous avons donc WordPress opérationnel, il est maintenant temps de migrer tout votre contenu.

Si votre ancien site dispose d'un CMS, un utilitaire est peut-être à votre disposition. Commencez à rechercher un script de transfert de contenu dans le Codex. S'il y a une coïncidence, tant mieux ! Suivez les instructions et mettez-vous au travail. Si tout va bien, vous transférerez votre site sans aucun problème.

Si votre CMS n'est pas répertorié ou si vous n'avez pas de CMS et que vous avez moins de 100 pages, alors la migration manuelle vous sera utile. Copiez et migrez le contenu, en notant les anciennes URL.

Si vous disposez d'un CMS ou d'une base de données de publication personnalisée sans outil de migration et d'un grand volume de contenu, vous souhaiterez peut-être embaucher un spécialiste pour migrer le contenu avant de commencer. Plus le volume de contenu est important, plus le risque d’erreur humaine est élevé et plus il est important d’automatiser le processus.

Dans notre cas, nous avons migré manuellement le contenu et remplacé la navigation dans le menu WordPress existant. Vous pouvez regarder le processus dans ce screencast.

Conception de transfert

Il est maintenant temps de transférer notre conception vers WordPress. Si vous souhaitez mettre à jour l'apparence de votre site, de nombreux thèmes WordPress intéressants sont disponibles dans le référentiel officiel et dans des magasins tiers comme ThemeForest et Creative Market. Dans notre cas, imaginons que vous soyez entièrement satisfait du design.

Évaluation de la conception

Évaluez au mieux le code source de la future conception avant de vous battre contre le port. Si le code est basé sur des tableaux ou est plus complexe que celui avec lequel vous êtes à l'aise, les résultats n'en valent peut-être pas la peine. Quand tout est possible, tout n’est pas pratique.

Travailler avec le code source

D'après mon expérience, je peux dire que le moyen le plus simple de transférer un design est de travailler avec le code source dans le navigateur. Bien que l'accès dans un environnement hébergé puisse être utile (en particulier lorsque vous travaillez avec des images et des fichiers téléchargeables), la façon dont les sites Web sont construits est si différente que vous devrez retravailler l'architecture d'origine pour obtenir quelque chose d'utile.

Travailler directement avec le code source vous fera gagner du temps, révélera des fonctionnalités utiles cachées et vous donnera tout ce dont vous avez besoin. J'utilise le navigateur Google Chrome.

Création d'un thème personnalisé

Si vous êtes nouveau dans ce domaine, consultez les informations sur l'utilisation des thèmes dans le Codex. Pour le processus de migration, vous pouvez créer un nouveau thème WordPress à partir de zéro ou modifier un thème existant selon vos goûts. Je recommande la deuxième méthode.

La plupart de mes projets de migration ont démarré avec les dernières versions des thèmes WordPress préinstallés. J'ai récemment supprimé le thème original pour créer mon propre thème, que j'utiliserai dans notre exemple et que vous pourrez utiliser vous-même. Commençons !

Téléchargez une copie (zip) du modèle pour le transfert ou continuez avec votre thème, votre choix.

Style des pages.

Notre première étape sera de transférer les styles de l'ancien site. Dans la plupart des cas, cela n'est pas plus difficile que de rechercher dans le code source des correspondances .css :

Ouvrez style.css.

Remplacez les détails du thème (nom, URL, description, etc.) par les vôtres.

Collez les styles de l'ancien site.

Une note sur les images

Si vous migrez un style de page, recherchez et mettez à jour toutes les informations sur l'image. En général, j'aime conserver toutes mes images dans un dossier /image/ dans le répertoire du thème. Le plus souvent, il est nécessaire de changer la position des images dans le CSS d'origine, et je me suis assuré de modifier tous les liens et modèles en conséquence.

Titre

La prochaine étape consiste à créer un titre pour notre nouveau thème. Notre objectif sera de combiner la structure du code actuel avec les modèles WordPress. Voici ce que nous devrions faire :

• Copiez la structure HTML de l'ancien site.
• Remplacez le menu statique par un menu pris en charge par WordPress.
• Utilisez la balise de titre WordPress et laissez le wp_head en place.
• Insérez d'autres balises importantes de l'ancien titre.

Jetons un coup d'œil au code !

Affiches, cartes postales et fonds d'écran HTML originaux de la pyramide alimentaire végétalienne Pyramide alimentaire végétalienne

• Produits
• Papier peint
• À propos
• Contact

En-tête ajusté (header.php) try(Typekit.load();)catch(e)() Explication

L’un des défis du portage est de déterminer s’il faut améliorer le code au fur et à mesure. Notre projet comporte des sections qui pourraient être améliorées, mais nous avons décidé de tout laisser tel quel. La plupart d’entre vous travailleront avec un transfert de conception qui n’était pas destiné à être amélioré.

Si le temps et les opportunités le permettent, je vous conseille d'améliorer le code. Ou habituez-vous à l’idée qu’apporter des modifications sera beaucoup plus facile avec un site WordPress.

Examinons les changements que nous avons apportés.

• Type de document. Assurez-vous de transférer le même type. Dans ce cas, le code HTML original possède déjà un doctype HTML5 (un cas relativement rare sur les sites plus anciens). L'utilisation d'un doctype moderne dans du code écrit pour de l'ancien code peut ruiner le modèle.
• Balises méta. Je déplace généralement la plupart des balises méta telles quelles, en les remplaçant dans WordPress. L'exception dans notre cas est le lien vers le fichier de style, qui est inséré automatiquement via wp_enqueue_style dans le dossier fonctions.php.
• Scripts. Les scripts peuvent prêter à confusion. Si le script figure sur chaque page (par exemple, un script de suivi ou un script de police), vous devez le placer dans un fichier d'en-tête ou de pied de page. Si vous souhaitez qu'il apparaisse uniquement à certains endroits, les balises de condition conviennent. Votre meilleur pari est d'ajouter tous les scripts à l'en-tête via wp_enqueue_script. Si vous êtes prêt à relever un défi, je recommande cette méthode.
• wp_head. Partir en bas de l'étiquette dans le dossier en-tête.php. WordPress utilise également wp_head pour organiser les scripts et fichiers de style utilisés dans le thème et dans les plugins que vous avez installés. Sans wp_head la plupart des plugins ne fonctionneront tout simplement pas.
• Classe_corps. Notez l'utilisation de la balise . WordPress l'utilise pour fournir un certain nombre de classes utiles à la balise pendant que vous regardez la page. Dans notre exemple, ils ne sont pas utilisés. Le vôtre doit avoir des identifiants ou des classes uniques sur chaque page, auquel cas vous devez créer des fonctions personnalisées à l'aide de balises de condition pour ajouter les classes appropriées pour chaque page.
• Menu WordPress. La migration vers les menus WordPress est l'une des tâches les plus difficiles à migrer. Ce sera assez simple pour nous. Nous avons un menu simple que la classe utilise actif(généré via PHP) pour montrer quelle page l'utilisateur visite. Fonction wp_nav_menu est très flexible et offre des fonctionnalités intégrées pour gérer l'état actuel d'un élément dans un menu. J'ai mis à jour les conditions dans le fichier de style pour actif et les ai modifiés pour utiliser l'équivalent généré wp_nav_menu, ce qui est élément de menu actuel. Regardez le screencast sur le transfert de contenu pour comprendre comment personnaliser le menu à l'aide de notre exemple.

La coquille est maintenant prête. Passons à l'étape suivante.

Sous-sol

Déménager un sous-sol est généralement un processus sans tracas. Comme pour l’en-tête, nous devons combiner des parties du code source d’origine. Allons-y.

HTML d'origine

© 2013 VeganFoodPyramid.com

Pied de page personnalisé (footer.php)

© VeganFoodPyramid.com

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src="" + gaJsHost + "google-analytics.com/ga.js" type="text/javascript"%3E%3C/script%3E"));

Certains pieds de page sont difficiles à migrer (par exemple ceux comportant des menus et des widgets complexes), mais dans la plupart des cas, c'est assez simple. Dans notre cas, nous avons combiné le HTML avec notre modèle de pied de page, laissant l'appel wp_footer. Nous avons également modifié la référence de date pour utiliser PHP et nous assurer qu'elle est mise à jour chaque année.

Page d'accueil

L’un des problèmes du portage est qu’il existe une multitude de façons de faire le travail. Un bon exemple est la page d’accueil car elle est généralement la plus différente du reste du site. La méthode la plus simple est généralement la plus correcte. J'ai décidé de placer tout le contenu de la page d'accueil directement dans le modèle. Vous aurez rarement besoin de le modifier et cela peut toujours se faire en changeant de modèle.

Regardons le code sans l'en-tête et le pied de page que nous avons déjà déplacés.

HTML d'origine Affiche 30 $ pièce Acheter Cartes postales 50$ pour 50

Comprend la livraison gratuite dans le monde entier

Acheter une page d'accueil personnalisée /images/Vegan-Food-Pyramid-New.jpg">