Conversion de HTML en WordPress (étape par étape)


Conversion de HTML en WordPressLa route des sites construits avec du HTML pur à WordPress n’était pas courte. D’une expérience entièrement textuelle, la conception Web est passée à une présence Web hautement interactive. En plus de cela, nous n’avons plus à rédiger nous-mêmes le balisage mais pouvons laisser les systèmes de gestion de contenu faire le gros du travail.


Cependant, cela ne signifie pas que les sites Web HTML statiques n’existent plus. En fait, HTML5, la dernière itération du langage de balisage, est très puissant et vous permet de créer des sites Web de qualité sans CMS derrière eux.

Pourtant, la part de marché croissante de WordPress montre que de plus en plus de personnes passent à la plate-forme.

Part de marché WordPress en 2019

Pour certains, cela signifie passer du HTML statique à WordPress. Cela peut être une tâche intimidante, mais cet article tentera d’expliquer comment le faire de quelques manières simples.

Ci-dessous, nous vous montrerons plusieurs façons de convertir du HTML en WordPress. Tout d’abord, vous apprendrez quelles sont les différentes options ainsi que leurs avantages et inconvénients. Après cela, nous vous montrerons comment exécuter chacun d’eux étape par étape.

Allons-y.

Contents

Les 3 façons de passer du HTML statique à WordPress

Pour passer du HTML à WordPress, vous devez transformer votre conception HTML en thème WordPress. Un thème contrôle l’apparence et la sensation d’un site Web WordPress, tandis que la fonctionnalité est fournie par le CMS lui-même ainsi que des plugins supplémentaires.

Pour effectuer le changement, vous avez plusieurs options. Le choix qui vous convient dépend de facteurs tels que le temps et l’argent que vous êtes en mesure et disposé à investir, vos compétences en codage et vos préférences personnelles. Voici les principales options.

A) Convertissez manuellement le HTML en un thème WordPress

La première option est également la plus technique. Si vous suivez cette voie, vous prendrez votre code existant et l’utiliserez comme point de départ pour créer les fichiers de thème WordPress.

Ce n’est pas trop compliqué, surtout si vous avez une expérience de codage. Vous pouvez le retirer avec un peu de HTML, CSS et quelques connaissances PHP. Une grande partie est copiée et collée.

L’inconvénient: bien que vous vous retrouviez avec un thème WordPress fonctionnel, il n’aura pas toutes les capacités que WordPress a à offrir. Par exemple, à moins que vous ne le construisiez après coup, votre site sera dépourvu de zones de widget ou de la possibilité de changer votre menu à partir du backend WordPress.

Bien que votre site fasse son travail, vous ne pourrez pas le gérer complètement via WordPress. Pour cette raison, nous préférons personnellement l’option suivante.

B) HTML vers WordPress via le thème enfant WordPress

À notre avis, c’est probablement la voie la plus simple et la plus raisonnable en termes d’effort et d’investissement monétaire. Au lieu d’utiliser votre site existant comme point de départ, vous utilisez plutôt un thème WordPress prêt à l’emploi. Vous ajustez ensuite uniquement son design pour qu’il ressemble à votre ancien site web.

Cela vous permet de profiter pleinement de WordPress tout en conservant l’apparence de votre ancien site. Vous n’aurez pas non plus à ajouter de fonctionnalités WordPress par la suite. Au lieu de cela, vous pouvez construire sur un thème existant – quelque chose pour lequel la plate-forme WordPress est explicitement conçue pour.

C) Importer du contenu de HTML vers WordPress en utilisant un plugin

De toute évidence, si vous n’insistez pas sur l’utilisation de votre conception actuelle et que vous êtes prêt à la modifier, les choses deviennent encore plus faciles. Dans ce cas, il vous suffit de configurer un site, d’installer le thème et d’importer votre contenu HTML. Comme vous le verrez ci-dessous, c’est un processus très rapide et indolore.

A) Comment convertir manuellement du HTML en un thème WordPress

Si votre objectif est de partir de zéro et de créer votre propre thème WordPress qui ressemble à votre site Web HTML existant, commencez à partir d’ici.

Ne vous inquiétez pas si cela semble intimidant, vous verrez que c’est tout sauf cela. Il suffit de quelques fichiers et dossiers, ainsi que de copier-coller.

1. Créez un dossier de thème et des fichiers de base

La première chose que vous devez faire est de créer un nouveau dossier de thèmes. Vous pouvez le faire sur votre bureau comme vous le feriez pour un répertoire sur votre ordinateur. Nommez-le comme vous voulez que votre thème soit appelé.

Après cela, allez dans l’éditeur de code et créez un certain nombre de fichiers texte. Nommez-les comme suit:

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

Ne faites rien encore avec eux, gardez les fichiers ouverts dans l’éditeur. Vous en aurez bientôt besoin.

2. Copiez le CSS existant dans la feuille de style WordPress

Il est maintenant temps de préparer la feuille de style WordPress (le fichierstyle.css que vous venez de créer) pour y copier le CSS de votre ancien site. Pour cela, ouvrez le fichier et collez ce qui suit:

/ *
Nom du thème: Vingt-treize
URI du thème: http://wordpress.org/themes/twentythirteen
Auteur: l'équipe WordPress
URI de l'auteur: http://wordpress.org/
Description: Le thème 2013 pour WordPress nous ramène au blog, avec une gamme complète de formats de publication, chacun affiché magnifiquement à sa manière. Les détails de conception abondent, à commencer par un jeu de couleurs vives et des images d'en-tête assorties, une belle typographie et des icônes, et une mise en page flexible qui a fière allure sur n'importe quel appareil, grand ou petit.
Version: 1.0
Licence: GNU General Public License v2 ou ultérieure
URI de licence: http://www.gnu.org/licenses/gpl-2.0.html
Tags: noir, marron, orange, beige, blanc, jaune, clair, une colonne, deux colonnes, barre latérale droite, largeur flexible, en-tête personnalisé, menu personnalisé, style éditeur, images en vedette, microformats, post-formats, support de la langue rtl, post-collant, prêt pour la traduction
Domaine de texte: twentythirteen

* /

Il s’agit de ce qu’on appelle l’en-tête de la feuille de style (Important: ne laissez pas le commentaire/*...*/ balises!). Remplissez chaque partie comme ceci:

  • Nom du thème – Voici le nom de votre thème. Cela peut être tout ce que vous voulez, mais c’est généralement le même que le nom de votre dossier de thème.
  • URI du thème – Vous publiez généralement la page d’accueil du thème ici, mais vous pouvez utiliser votre propre adresse de site.
  • Auteur – C’est toi. Mettez votre propre nom ici ou ce que vous voulez être appelé.
  • URI de l’auteur – Un lien vers votre page d’accueil. Cela peut être celui que vous construisez ou tout ce qui a du sens.
  • La description – Une description facultative de votre thème. Cela apparaîtra dans le backend WordPress.
  • Version – La version de votre thème. Comme vous ne le publiez pas, cela n’a pas vraiment d’importance. Nous mettons habituellement 1.0 ici.
  • Licence, URI de licence, balises – Ces choses ne sont importantes que si vous prévoyez de soumettre votre thème au Répertoire des thèmes WordPress. Vous pouvez les laisser de côté dans ce cas, nous les avons juste inclus pour être complétés.

Après l’en-tête, copiez et collez le CSS existant à partir de votre site Web HTML statique. Ensuite, enregistrez le fichier dans votre nouveau dossier de thèmes et fermez-le. Il est temps de passer au reste.

3. Séparez votre code HTML existant

Pour la partie suivante, vous devez comprendre que WordPress utilise généralement PHP pour extraire des informations de sa base de données. Pour cette raison, vous devez découper votre code HTML existant en différents morceaux afin que le CMS puisse les assembler correctement.

Bien que cela semble compliqué, cela signifie simplement que vous copiez et collez des parties de votre document HTML dans plusieurs fichiers PHP. Pour mieux le démontrer, nous avons mis en place une page d’exemple simple que vous pouvez voir ci-dessous.

page d'exemple html vers wordpress

Comme vous pouvez le voir, il s’agit essentiellement d’un modèle HTML standard qui comprend un en-tête, une zone de contenu, une barre latérale et un pied de page. Le code d’accompagnement est le suivant:





Titre du site Web







Titre du site Web

  • élément de navigation n ° 1
  • élément de nav # 2
  • élément de nav # 3

Le titre de l'article

Lorem ipsum dolor sit amet, elect adipiscing consectetur. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper conséquat est, eu porta velit mollis nec.

Sous-titre

Lorem ipsum dolor sit amet, elect adipiscing consectetur. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper conséquat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.

Sous-titre

Lorem ipsum dolor sit amet, elect adipiscing consectetur. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper conséquat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.

Si votre conception est différente, vous devrez peut-être ajuster quelque peu les étapes ci-dessous. Cependant, le processus global reste le même.

Tout d’abord, ouvrez votre index.html (fichier principal de votre site HTML). Après cela, parcourez vos fichiers WordPress nouvellement créés et copiez-y les éléments suivants (les exemples ci-dessous sont mon balisage):

header.php

Tout, du début de votre fichier HTML à la zone de contenu principale (généralement signifié par

ou

) va dans ce fichier. En plus de cela, juste avant où il est dit, copier et coller . Ceci est crucial pour que de nombreux plugins WordPress fonctionnent correctement.




Titre du site Web






Titre du site Web

  • élément de navigation n ° 1
  • élément de nav # 2
  • élément de nav # 3

sidebar.php

Tout ce qui appartient à la section

Après cela, vous avez terminé avec index.html et peut le fermer. Enregistrez tous les autres fichiers dans votre dossier de thèmes et fermez-les sauf header.php et index.php. Vous avez encore du travail à faire avec eux.

4. «WordPressify» Header.php et Index.php

Pour l’en-tête, tout ce qui reste est de changer l’appel de la feuille de style du format HTML au format WordPress. Pour ce faire, recherchez un lien existant dans le section. Cela pourrait ressembler à ceci:

Remplacez-le par ceci:

Cool, maintenant vous pouvez enregistrer et fermer header.php. Tournez ensuite vers index.php. Il devrait être vide pour le moment. Donc, tout d’abord, copiez et collez ces lignes de code:




Ce sont les appels pour les autres fichiers qui contiennent le reste de votre site. Vous remarquerez peut-être l’espace entre l’appel pour l’en-tête et la barre latérale. C’est là que vous ajouterez La boucle.

Ce dernier est la partie de WordPress où le CMS génère du contenu créé dans le backend. C’est crucial si vous voulez que WordPress ajoute dynamiquement du contenu à vos pages que vous importerez plus tard. À cette fin, collez-le ici juste après :


Maintenant, économisez index.php fichier et fermez-le. Bien joué! Votre thème de base est prêt. Vous pouvez maintenant l’ajouter à votre nouveau site WordPress.

5. Créez une capture d’écran et téléchargez le thème

Vous allez maintenant ajouter une capture d’écran de thème qui, avec les informations de l’en-tête de votre feuille de style, servira d’aperçu de votre site Web dans le backend WordPress.

Pour ce faire, ouvrez votre site existant dans un navigateur et faites une capture d’écran avec votre méthode préférée. Après cela, ouvrez le logiciel de retouche d’image de votre choix et recadrez-le à 880 × 660 pixels. Enregistrez-le sous screenshot.png et ajoutez-le à votre dossier de thème. Vous êtes maintenant prêt à télécharger votre thème.

Pour mettre le nouveau thème sur votre site WordPress, vous avez plusieurs options. Cependant, la condition préalable est que tous les fichiers résident dans votre dossier de thème.

La première option consiste à créer un fichier zip à partir de celui-ci. Après cela, allez sur votre site WordPress puis sur Apparence> Thèmes. Ici, cliquez Ajouter un nouveau en haut puis Télécharger le thème.

télécharger le thème converti

Dans le menu à venir, utilisez le bouton pour accéder à l’emplacement de votre fichier zip. Marquez-le et cliquez Ouvert, puis Installer maintenant. Quand c’est fait, activez le thème.

Alternativement, vous pouvez vous connecter à votre serveur via FTP (ou simplement aller dans le répertoire local de votre disque dur) et naviguer vers wp-content / thèmes. Ensuite, téléchargez-y votre dossier de thème (décompressé). Après cela, activez le thème au même endroit qu’avant.

Agréable! Le frontal de votre nouveau site devrait maintenant ressembler à votre ancien site. Il ne vous reste plus qu’à terminer le passage de HTML à WordPress: importer votre contenu existant. Nous couvrirons cela plus loin lorsque nous parlerons de l’utilisation d’un thème WordPress existant.

Cependant, sachez que même si le thème de base fonctionne maintenant, vous pouvez faire plus pour mieux intégrer votre code HTML à WordPress. Ceci comprend rendre le titre et la description de votre blog modifiables, ajout de zones de widget, commentaires, et bien plus encore. Vous devrez peut-être également ajouter un balisage CSS, car le contenu ne fait pas partie de votre conception d’origine comme les images.

Comme c’est beaucoup de travail, nous aimons personnellement utiliser une solution qui possède déjà toutes ces fonctionnalités et qui n’a besoin que d’une modification de conception. C’est ce que nous allons vous montrer ensuite.

B) HTML vers WordPress via le thème enfant WordPress

Si ce qui précède vous semble trop intense, la méthode suivante pourrait être plus gérable. Il vous permet de profiter de milliers de thèmes WordPress existants tout en conservant votre conception d’origine.

C’est en utilisant un soi-disant thème enfant. Ces thèmes sont construits sur un autre thème (le parent) qui ne se suffit pas à lui-même, mais modifie simplement le thème parent en fonction de vos besoins. Assez facile à faire, même si cela nécessite un peu de travail de détective.

1. Choisissez un thème approprié

La première étape consiste à choisir un thème approprié sur lequel baser votre conception. Pour cela, il est utile de trouver un thème proche de votre conception existante ou d’utiliser un cadre de thème ou un thème de démarrage, qui sont tous deux conçus pour fonctionner comme base pour des thèmes personnalisés..

Vérifier la Répertoire des thèmes WordPress, notre liste de thèmes impressionnants ou regardez dans thèmes premium pour trouver un candidat approprié. Après quelques recherches, nous avons décidé Vingt douze thème ferait un bon point de départ pour mon passage de HTML à WordPress. Habituellement, nous choisissons quelque chose de plus à jour, mais cela va bien avec la conception simple avec laquelle nous travaillons.

Une fois que vous avez fait votre choix, installez le thème sur votre site WordPress comme vous le feriez pour n’importe quel thème. Pas besoin de l’activer. Comme mentionné, il est juste là pour vous fournir une base de travail. Le reste se passe dans le thème enfant.

2. Créez un nouveau dossier

Comme pour la méthode précédente, pour le thème enfant, vous devez créer un dossier de thème. Voici où vous mettrez tous les fichiers qui lui appartiennent.

Lors de la création de thèmes enfants, il est courant d’appeler le dossier du même nom que le thème parent plus -enfant. Donc, puisque notre thème enfant est basé sur le thème Twenty Twelve, nous appelons son répertoire vingt-douze enfants.

Quel que soit le nom que vous choisissez, assurez-vous simplement de ne pas inclure d’espace, car cela ne fonctionnera pas de cette façon..

3. Configurer la feuille de style

Le thème enfant a également besoin d’une feuille de style. Celui-ci fonctionnera presque de la même manière que la feuille de style créée ci-dessus. Cependant, il a un en-tête légèrement différent et contiendra moins de code.

Nous arriverons à la deuxième partie plus tard. Pour l’instant, créez l’habituel style.css et placez-le dans le dossier du thème. Ajoutez ensuite les éléments suivants:

/ *
Nom du thème: Vingt-quinze enfants
URI du thème: http://example.com/twenty-fifteen-child/
Description: Vingt-quinze thème enfant
Auteur: John Doe
URI de l'auteur: http://example.com
Modèle: vingt-quinze
Version: 1.0.0
Licence: GNU General Public License v2 ou ultérieure
URI de licence: http://www.gnu.org/licenses/gpl-2.0.html
Tags: clair, foncé, deux colonnes, barre latérale droite, responsive-layout, prêt pour l'accessibilité
Domaine de texte: vingt-quinze enfants
* /

Comme vous pouvez le voir, il est très similaire à l’en-tête de feuille de style que vous avez utilisé auparavant, à une exception près: il contient le Modèle étiquette.

Dans cette section, vous devez mettre le nom du thème qui fonctionnera comme parent. Sans cela, le thème enfant ne fonctionnera pas. Pour éviter cela, entrez le nom de dossier du parent. Donc, pour Twenty Twelve, ce serait Modèle: vingt-douze.

4. Créez Functions.php et héritez des styles parents

Avec juste la feuille de style et le dossier, il est déjà possible d’activer le thème enfant. Cependant, cela ne servirait pas à grand-chose, car votre site ressemblerait à l’heure actuelle à une page HTML sans aucun style.

Pour changer cela, vous devez d’abord hériter des styles du parent et pour cela, vous devez functions.php. Ce fichier est une partie importante de toute installation WordPress et vous permet d’apporter des modifications radicales à votre site Web.

Cependant, dans ce cas, vous ne l’utiliserez que pour appeler le style du parent. Pour cela, créez un nouveau fichier et appelez-le functions.php. La première chose que vous ajouterez au tout début est la suivante:

Avec une balise PHP d'ouverture, le fichier est théoriquement prêt mais il ne fait encore rien. Donc, en plus, vous devrez saisir ceci:

function child_theme_enqueue_styles () {

$ parent_style = 'parent-style';

wp_enqueue_style ($ parent_style, get_template_directory_uri (). '/style.css');
wp_enqueue_style ('style enfant',
get_stylesheet_directory_uri (). '/style.css',
tableau ($ parent_style),
wp_get_theme () -> get ('Version')
);
}
add_action ('wp_enqueue_scripts', 'child_theme_enqueue_styles');

Ce morceau de code indique à WordPress d'aller dans le répertoire des modèles (aka thème parent) et d'utiliser les styles qui y sont inclus. Il permet également de modifier le thème via votre thème enfant (plus à ce sujet plus tard).

5. Activez le thème enfant

À ce stade, le thème enfant est prêt à être activé.

Vous pouvez y ajouter une capture d'écran comme dans les instructions ci-dessus si vous le souhaitez. Mis à part cela, vous pouvez soit le compresser et l'ajouter à WordPress via Apparence> Thèmes> Ajouter un nouveau> Télécharger un thème ou simplement en ajoutant le dossier tel quel wp-content / thèmes.

Dans les deux cas, lorsque vous activez le thème, votre site devrait maintenant ressembler exactement à son parent.

6. Ajustez la conception

Voici où commence le travail de détective susmentionné. Il est maintenant temps de changer la conception du thème existant afin qu'il ressemble à votre site HTML d'origine.

Par exemple, l'une des premières choses qui se démarquent est que notre thème WordPress ajoute de l'espace au-dessus de l'en-tête et en dessous du pied de page que notre site HTML ne possède pas..

html à wordpress via la page d'exemple de thème enfant

Pour y remédier, nous pouvons consulter le site HTML avec notre outils de développement de navigateur pour trouver le balisage responsable. Lorsque nous le faisons, nous rencontrons ceci:

corps {
marge: 0;
}

Ensuite, nous faisons de même avec mon nouveau thème WordPress où l'on retrouve ces styles:

body .site {
margin-top: 48px;
margin-top: 3.428571429rem;
marge en bas: 48 pixels;
marge en bas: 3,428571429rem;
}

Mon objectif est maintenant d'appliquer le style du site HTML au thème WordPress. Dans ce cas, nous pouvons y parvenir simplement en ajoutant ce qui suit au thème de mon enfant style.css:

body .site {
marge: 0 auto;
}

Après l'enregistrement, le thème WordPress a les nouveaux styles qui lui sont appliqués:

html à wordpress via la page d'exemple éditée par thème enfant

En effet, tout ce que vous ajoutez à la feuille de style du thème enfant remplace les styles de son parent. Cependant, le reste du balisage reste intact, vous ne pouvez donc modifier que les éléments pertinents.

De plus, si vous utilisez un modèle HTML5 comme entrée et un thème WordPress moderne comme parent, une grande partie du balisage de base correspondra, ce qui vous facilitera la vie.

Vous pouvez faire beaucoup plus avec les thèmes enfants, que vous pouvez apprendre ici. Une fois que vous avez terminé d'ajuster la conception, il est temps d'importer votre contenu. Voyons maintenant.

C) Importer du contenu de HTML vers WordPress en utilisant un plugin

Enfin, sur la liste de passer de HTML à WordPress, utilisez un thème existant tel quel et migrez simplement votre contenu de votre site HTML vers celui-ci. C'est le moyen le plus simple - tout ce que vous devez faire est d'installer et d'activer le thème de votre choix (nous supposons que vous savez comment le faire maintenant), puis suivez les étapes ci-dessous.

Soit dit en passant, bien que ce processus ne soit pas très difficile, il y a des choses qui peuvent mal tourner. Pour cette raison, assurez-vous de sauvegarder votre site WordPress avant de le parcourir.

1. Installez le plugin d'importation

La première chose que vous devez faire est d'installer le plugin Importation HTML 2. La façon la plus simple d’y parvenir est d’aller à Plugins> Ajouter un nouveau et recherchez-le par son nom. Lorsque vous le trouvez dans la liste (il peut être plus bas), cliquez sur Installer maintenant. Activez-le quand c'est fait.

plugin d'importation html vers wordpress

2. Préparez l'importation

Pour importer plusieurs pages à la fois, vous devez les télécharger sur le même serveur que votre installation WordPress. Le plugin proposera quelque chose comme fichiers-html à importer  le nom du dossier mais vous pouvez choisir ce que vous voulez. Assurez-vous juste de vous souvenir du chemin.

Comme vous le verrez ci-dessous, vous pouvez également importer des pages individuelles une par une. Pour l'une ou l'autre méthode, accédez à WordPress et Paramètres> Importation HTML. Nous allons maintenant passer en revue les paramètres les plus élémentaires. Si vous avez besoin d'informations supplémentaires ou si quelque chose n'est pas clair, reportez-vous au guide d'utilisation officiel.

Des dossiers

fichiers d'importation html vers wordpress

Configurez cet écran comme suit:

  • Répertoire à importer - Entrez le chemin dans lequel vous venez de copier vos fichiers existants.
  • Ancienne URL de site - Utilisé pour les redirections. Saisissez votre ancienne URL. Nous y reviendrons plus loin dans cet article.
  • Fichier par défaut : Le fichier par défaut des répertoires de l'ancien site, généralement index.html.
  • Extensions de fichiers à inclure - Les extensions de fichiers que vous souhaitez importer.
  • Répertoires à exclure - Si vous avez des répertoires dans l'ancien site que vous ne souhaitez pas importer, entrez-les ici.
  • Conserver les noms de fichiers - Pour que le plugin utilise automatiquement vos noms de fichiers comme nouvelle URL, cochez cette case. Cela a du sens si vos titres sont très longs car généralement, l'importateur les utilisera pour créer le slug.

Contenu

Sous contenu, vous devez configurer la balise HTML qui contient le contenu de votre site.

html au contenu d'importation wordpress

Pour ce faire, choisissez l'option Balise HTML au sommet. Configurez ensuite la balise dans les trois champs suivants. Par exemple, si votre contenu est contenu dans une balise appelée

, les informations que vous entrez seraient div, id et principale.

Les autres paramètres de cette page doivent être explicites et vous permettre d'importer des images, des documents, de mettre à jour des liens internes, etc..

Titre et métadonnées

html vers le titre et les métadonnées d'importation wordpress

Cette partie est similaire à la partie de contenu précédente. Cependant, il s'agit des titres de page. Au début, vous devez indiquer au plugin comment les titres sont marqués dans votre modèle HTML afin qu'il puisse les importer au bon endroit.

De plus, vous pouvez filtrer les éléments redondants comme le titre du site, car il est souvent affiché par défaut par les thèmes WordPress. Si vos titres résident dans le contenu, vous pouvez également demander à l'importateur de les supprimer afin qu'ils ne soient pas inclus deux fois.

Ce qui est important, c'est que vous décidiez d'importer ou non votre ancien contenu, comme des publications ou des pages. Le reste est plutôt explicite et vous permet de configurer les paramètres WordPress pour les nouvelles pages.

Les champs personnalisés

html vers wordpress importation de champs personnalisés

Si vous avez des données à importer dans des champs personnalisés, vous pouvez les configurer ici.

Catégories et tags

html vers les catégories et les balises d'importation wordpress

Ici, vous pouvez attribuer des catégories, des balises et des formats de publication à votre contenu importé. Le plugin affichera la taxonomie existante sur votre site pour faciliter cette étape.

Outils

outils d'importation html vers wordpress

Cet écran répertorie un certain nombre d'outils utiles pour réussir l'importation de HTML vers WordPress.

3. Commencez l'importation

Une fois que vous avez terminé, enregistrez les paramètres. Cela permettra au Importer des fichiers bouton. Cliquez dessus pour commencer.

importation html vers wordpress

(Remarque: vous pouvez également accéder ici via Outils> Importer puis cueillette Exécuter l'importateur sous le HTML option.)

Ensuite, choisissez d'importer un répertoire de fichiers ou un seul fichier (vous devez y accéder), puis appuyez sur Soumettre. Le plugin fonctionnera alors.

Une fois cela fait, vous devriez avoir tout le contenu existant sur votre site WordPress et formaté par le nouveau thème. Ou, si vous avez choisi l'un des autres itinéraires, votre site devrait ressembler à celui de votre ancien site Web HTML. Bien fait!

Étapes supplémentaires

Si vous prévoyez de déployer le site WordPress au même endroit que le site Web HTML statique, il y a encore quelques choses à faire avant de terminer.

La première consiste à vérifier les URL de vos publications et pages nouvellement importées pour vous assurer qu'elles sont adaptées aux moteurs de recherche (c'est-à-dire inclure les mots clés pour lesquels vous souhaitez vous classer). C'est très simple - il suffit d'aller sur une page ou un post et de regarder l'URL sous le titre.

vérifier les permaliens après html à l'importation wordpress

Pour le changer, cliquez sur Éditer à droite, passez à l'URL de votre choix et appuyez sur D'accord.

Une deuxième chose consiste à implémenter des redirections des anciennes URL vers les nouvelles. De cette façon, vous ne perdrez pas la valeur SEO existante.

Si vous avez renseigné l'ancienne adresse du site dans le plugin HTML, cela créera le code de redirection pour vous. Vous pouvez copier et coller ceci dans le fichier.htaccess qui réside sur votre serveur (généralement dans le répertoire racine).

Vous y accédez via FTP, cependant, vous devrez peut-être activer la visualisation des fichiers cachés car ils ne sont pas visibles par défaut. Puis éditez .htaccess et saisir les règles.

Sachez que cela ne fonctionne que si vous avez laissé les URL inchangées. Si vous n'avez pas et devez définir des redirections personnalisées, utilisez le Plugin de redirection. Il s'agit d'une solution très confortable qui effectue également le suivi chaque fois que quelqu'un atterrit sur une URL inexistante sur votre site. De cette façon, vous pouvez également implémenter des redirections pour ces liens.

Avez-vous réussi à passer de HTML à WordPress?

Et c'est tout. Vous venez d'apprendre à convertir un site HTML statique en WordPress. En conséquence, vous faites partie d'une des plus grandes communautés du Web et avez accès à des milliers de ressources pour améliorer encore votre site.

Selon la solution que vous avez choisie ci-dessus, vous avez déjà eu une idée du fonctionnement de WordPress. À partir de là, il est assez facile de se diversifier et d'approfondir la création de sites Web avec la plate-forme WordPress. Si vous avez besoin d'aide supplémentaire dans ce domaine, ce site en regorge. Vous pouvez apprendre à:

  • Personnalisez WordPress étape par étape
  • Déplacez votre site de HTTP à HTTPS
  • Ajouter des polices personnalisées à WordPress
  • Accélérez votre site WordPress
  • Ajoutez un formulaire de contact à votre site WordPress

En dehors de cela, nous vous souhaitons bonne chance avec votre site Web WordPress nouvellement créé. Nous espérons que vous aimerez travailler avec WordPress autant que nous..

Avez-vous déplacé votre site de HTML vers WordPress? Quelle a été votre expérience? Des conseils à ajouter? Veuillez nous le faire savoir dans la section commentaires ci-dessous.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map