Au début (du Web), tous les sites Web étaient créés uniquement avec du texte et du HTML statique. Aujourd’hui, plus de 20 ans plus tard, le Web est un endroit très différent. Les sites Web sont beaucoup plus complexes. Ils offrent des expériences plus riches et plus agréables aux créateurs de sites Web et aux visiteurs.

C’est en grande partie grâce à des projets open source comme WordPress. Ce qui a réussi dans sa tâche principale dans sa tâche principale au cours des dix dernières années, démocratiser la publication en ligne (et bien plus encore) afin que chacun avec une installation WordPress et les bons thèmes / plugins puisse avoir un site Web moderne avec un design et des fonctionnalités progressifs . Pas de codage – pas même HTML! – requis.

Pour cette raison, il est difficile de croire pour les utilisateurs avides de WordPress comme moi qu’en 2018, quelqu’un utilisera toujours un site Web HTML statique au lieu d’un site Web WordPress avec un thème et des plugins. Cependant, le fait est qu’il existe encore un nombre important de sites Web HTML actifs. (Ou HTML avec un peu de CSS.)

Certes, ces propriétaires de sites Web peuvent avoir de bonnes raisons de ne pas mettre à niveau ou convertir. Peut-être que le contenu de votre site Web ne change jamais et que la mise en forme et la conception simples déjà présentes sont utilisables? Ou est-ce moins un problème que de se soucier de maintenir un site WordPress à jour? Les deux sont des raisons valables (entre autres). Premiers exemples de: « Ne réparez pas ce qui n’est pas cassé. »

Cependant, j’ai le sentiment que ce n’est peut-être pas la raison principale pour laquelle certains (peut-être beaucoup) n’ont pas fait le saut. La chose la plus évidente est qu’ils ne savent tout simplement pas comment convertir leur site HTML en WordPress. En particulier, sans perdre de contenu ni avoir à faire un formatage excessif page par page.

Heureusement, comme c’est souvent le cas avec WordPress, il existe plusieurs façons de résoudre ce problème. J’ai arrondi quelques options ci-dessous.

Abonnez-vous à notre chaîne YouTube

Vos options pour convertir un site HTML statique en site WordPress

La façon dont vous convertissez votre site HTML statique en site WordPress dépend sans aucun doute de vos préférences personnelles, du temps / argent que vous souhaitez investir et de votre niveau de connaissance du code. Vous devez être celui qui décide de celui qui vous convient le mieux. Cependant, avec les résumés suivants, vous devriez être en mesure de prendre une décision rapide et de passer directement aux informations les plus pertinentes de cet article pour votre situation spécifique.

Il existe trois options principales:

1. Créez manuellement un thème WordPress basé sur votre site HTML statique actuel.

Pour ce faire, vous devez entrer votre code. Vous devrez accéder à votre répertoire de site actuel via FTP et utiliser votre code existant comme point de départ. À partir de là, vous devez créer les fichiers nécessaires pour un thème WordPress et copier des bits de code à partir du codex WordPress. C’est assez simple et simple si vous êtes expérimenté avec HTML, CSS et un peu de PHP.

2. Installez un thème prédéfini et migrez simplement votre contenu.

C’est probablement la meilleure option à l’intersection de la simplicité et de la valeur. En supposant que vous ayez déjà un hébergement pour votre site Web actuel, la seule façon de dépenser de l’argent est si vous décidez d’acheter un thème premium. Le plugin que nous utilisons pour importer du contenu est disponible gratuitement dans le référentiel officiel de plugins WordPress.

3. Lorsque vous payez pour avoir un service de conversion HTML vers WordPress, reconstruisez votre site Web.

C’est la solution la plus simple car il n’y a pas grand chose à faire. Cependant, cela ne fera pas grand-chose pour vous familiariser avec WordPress et le coût variera en fonction de la personne que vous souhaitez embaucher. Je ne couvrirai pas cette option dans les sections suivantes car si c’est l’itinéraire qui vous intéresse, vous pouvez simplement rechercher rapidement des fournisseurs de services qui s’occuperont du reste.

Préparation à la conversion de HTML en WordPress

Quel que soit l’itinéraire que vous choisissez ci-dessous, il y a quelques choses à faire avant de plonger.

Le premier est de choisir un plan d’hébergement. Vous devriez regarder les options disponibles et choisir le forfait qui correspond le mieux à vos besoins. Ou peut-être que tu aimerais Créer une installation WordPress locale au lieu? Tu peux toujours Migrez-le vers un service d’hébergement plus tard.

Une fois que vous avez choisi, vous devrez installer WordPress et vous connecter à WP Admin. C’est là que nos deux chemins possibles se séparent.

Conversion manuelle de votre site HTML statique en WordPress

Si vous souhaitez non seulement intégrer votre contenu de votre site HTML statique dans WordPress, mais également dupliquer votre conception actuelle, vous devez créer votre propre thème personnalisé. Heureusement, ce n’est pas aussi effrayant que cela puisse paraître au début. Créez simplement quelques dossiers et fichiers, copiez et collez un peu, puis téléchargez le résultat.

Vous avez besoin d’un éditeur de code comme Sublime ou Notepad ++ et d’accéder au répertoire de votre site HTML et au répertoire de votre nouvelle installation WordPress.

Étape 1: Créez un nouveau dossier de sujets et les fichiers nécessaires

Créez un nouveau dossier sur votre bureau pour vos fichiers de conception. Appelez-le comme vous voulez que votre sujet soit nommé.

Ensuite, créez des fichiers (qui se trouvent tous dans votre nouveau dossier de rubrique) dans votre éditeur de code. Ne leur faites rien pour le moment. Laissez-les simplement ouverts pour une modification ultérieure.

  • Style.css
  • Index.php
  • header.php
  • sidebar.php
  • footer.php

Étape 2: Copiez le CSS existant dans une nouvelle feuille de style

Si vous souhaitez dupliquer un design, cela signifie probablement que vous avez au moins du CSS à enregistrer. Le premier fichier que vous souhaitez modifier est votre fichier Style.css.

Tout d’abord, ajoutez ce qui suit à votre fichier ci-dessus.

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Après cette section, ajoutez simplement votre CSS existant ci-dessous. Enregistrez et fermez le fichier.

Étape 3: séparez votre HTML actuel

Avant de passer à la troisième étape, laissez-moi vous expliquer brièvement comment fonctionne WordPress. WordPress utilise PHP pour appeler et extraire des données de la base de données sous-jacente. Chaque fichier que nous utilisons dans ce petit didacticiel est destiné à indiquer à WordPress quelle partie du contenu de votre site doit afficher où.

Donc, quand je dis que nous allons « pirater » votre HTML existant, nous découpons simplement des morceaux de votre code existant et les collons dans les différents fichiers que nous venons de créer afin que WordPress sache où les afficher.

Nous y voilà.

Tout d’abord, ouvrez votre site actuel index.html Déposer. Mettez tout en surbrillance, du haut du fichier à l’ouverture div class = « main » Étiqueter. Copiez et collez cette section dans la vôtre header.php Fichier, enregistrez et fermez.

Deuxièmement, reviens au vôtre index.html Déposer. Mettre en évidence le côté classe = « barre latérale » Élément et tout ce qu’il contient. Copiez et collez cette section dans la vôtre sidebar.php Fichier, enregistrez et fermez.

Troisièmement, dans le vôtre index.html Sélectionnez tout en fonction de votre barre latérale et copiez-le et collez-le dans le vôtre footer.php Fichier, enregistrez et fermez.

Enfin dans le vôtre index.html Sélectionnez ce qui reste (cela devrait être la section de contenu principale) et collez-le dans votre fichier index.php Déposer. Enregistrez, mais ne fermez pas encore.

elles ou ils peut ferme ton index.html Enregistrez maintenant cependant et continuez avec les dernières étapes. Presque fini!

Étape 4: finalisez votre fichier Index.php

Pour terminer vos nouveaux thèmes index.php Vous devez vous assurer que l’autre section (en plus du contenu principal) est accessible qui se trouve dans les autres fichiers que vous avez créés. Ou en d’autres termes, remettez les éléments que nous venons de «pirater».

En haut de votre page index.php File, placez la ligne suivante de PHP.

<?php get_header(); ?>

Puis au fond de la vôtre index.php Fichier, placez ces lignes de PHP.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Enfin, nous devons ajouter ce que l’on appelle The Loop. Il s’agit du bit PHP principal utilisé par WordPress pour afficher le contenu de votre publication aux visiteurs. Donc, la dernière étape de la création de vos nouveaux thèmes index.php Le fichier ajoute le code suivant dans la zone de contenu.

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
    </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    <div class="navigation index">
       <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
       <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

Sauvez votre index.php et fermer. Votre sujet est maintenant prêt! Tout ce que vous avez à faire est de le télécharger sur votre site Web WordPress.

Étape 5: Téléchargez votre nouveau sujet

Après avoir créé vos fichiers de thème et les avoir tous enregistrés dans votre nouveau dossier de thème, vous devrez accéder au répertoire de votre nouvelle installation WordPress.

Mettez votre nouveau dossier de sujets à l’intérieur / wp-content / topics /. Puis revenez à WP Admin> Apparence> Thèmes et votre thème nouvellement créé devrait y apparaître. Allez-y et activez-le!

Il ne vous reste plus qu’à remplir votre nouveau site Web WordPress avec le contenu de votre ancien site Web. Suivez la section ci-dessous (en sautant la partie sur l’utilisation d’un thème prédéfini) pour voir comment faire cela.

Utilisez un thème WordPress prédéfini et importez du contenu HTML

Si les étapes ci-dessus vous semblent trop intenses ou trop longues, soyez assuré qu’il existe une autre voie à suivre. Au lieu de transformer le design avec lequel vous travaillez actuellement en un thème WordPress, vous pouvez profiter de l’un des milliers de thèmes disponibles sur le marché WordPress plus large.

Il existe des thèmes gratuits et des thèmes premium. Avant de décider lequel vous convient le mieux, c’est une bonne idée de rechercher les thèmes adaptés à vos besoins et de rechercher des catégories de thèmes ici sur Elegant Themes et ailleurs.

Une fois que vous avez choisi un thème que vous aimez (et que son package de fichiers compressés a été téléchargé), vous voudrez revenir en arrière Admin WP> Apparence> Thèmes> Ajouter un nouveau et installez / activez votre nouveau thème WordPress.

Une fois que cela est fait, vous aurez un nouveau site Web et un nouveau thème WordPress – mais rien d’autre. Lorsque vous prévisualisez votre site Web, il est vide et il semble probablement ennuyeux. C’est très bien car ensuite, nous allons importer le contenu de votre ancien site.

Dans WP Admin, accédez à Plugins> Ajouter un nouveau et recherchez un plugin appelé Importation HTML 2 par Stephanie Leary. Après avoir installé et activé ce plugin, suivez le guide de l’utilisateur pratique pour importer l’intégralité de votre répertoire de pages HTML. Complet avec des photos!

Après cela, tout votre ancien contenu vivra dans WordPress et sera formaté par votre nouveau thème. Si vous avez créé votre propre thème ci-dessus, votre site Web devrait ressembler à ce qu’il était auparavant – juste sur WordPress.

Enfin

Si vous avez utilisé cet article comme guide pour migrer votre site Web vers WordPress, vous venez de rejoindre l’une des plus grandes communautés open source au monde. Bienvenue! C’est un endroit amusant avec de nombreux développeurs, concepteurs, blogueurs, amélioration de la maison et bien plus encore – créer, jouer et créer le tout avec des thèmes / plugins WordPress et WordPress.

Si vous avez « attrapé » le bogue WordPress, le fonctionnaire WordPress.org Le site Web regorge de sujets utiles, de plugins et d’autres ressources. Si vous souhaitez peaufiner davantage vos fichiers de sujets, consultez le Code pour des conseils, des astuces et des variations apparemment sans fin.

Et bien sûr, nous espérons que vous resterez dans les commentaires ci-dessous et que vous vous abonnerez à d’autres articles de blog à l’avenir.

Vignette de l’article via Max Griboedov / shutterstock.com





Source link

Recent Posts