Au cours de l'année, l'une des meilleures plates-formes open-source comme WordPress a gagné en popularité grâce à son CMS simple et flexible qui est devenu beaucoup plus facile pour son utilisateur. Il est révolu le temps où vous aviez besoin d'un maître de codage pour créer votre site Web d'entreprise.
Heureusement, nous vivons maintenant dans une ère hautement technologique, où il existe des dizaines de cadres qui nous fournissent d'excellentes plates-formes de système de gestion de contenu.
Le principal est bien sûr WordPress.
En tant que société de développement de logiciels, nous recevons de nombreuses demandes où les clients souhaitent passer du HTML à WordPress pour avoir un meilleur contrôle du CMS.
Donc, dans ce blog, nous allons vous faire savoir comment vous pouvez convertir votre site HTML statique en WordPress, vous devez avoir des connaissances de base en HTML, CSS et PHP.
Il y a trois façons de faire cette conversion, mais dans ce blog, nous allons vous montrer la façon manuelle de le faire afin que vous puissiez avoir une idée des changements que vous avez effectués et de la manière dont ils sont reflétés.
1. Conversion manuelle du HTML vers WordPress
2. Conversion de HTML via un thème enfant WordPress
3. Importation de contenu HTML dans WordPress à l'aide d'un plugin
Conversion manuelle de HTML vers WordPress
Étape 1: créer un nouveau dossier de thème et des fichiers de base
La première chose à faire est de créer un dossier de thème sur votre bureau ou dans n'importe quel répertoire de votre ordinateur. Vous pouvez le nommer comme vous voulez que votre thème soit appelé.
Après cela, accédez à l'un de vos éditeurs de code et créez quelques fichiers texte et nommez-les comme suit:
i) style.css
ii) index.php
iii) en-tête.php
iv) barre latérale.php
v) pied de page.php
Étape 2: Copiez le CSS existant dans une nouvelle feuille de style
Pour la prochaine étape; vous devrez copier le codage CSS de votre site HTML existant sur une feuille de style WordPress.
Maintenant, avant de copier le CSS HTML, ouvrez style.css et collez ce qui suit:
/*Theme Name: Twenty TwentyTheme
URI: https://wordpress.org/themes/twentytwenty
Author: John DoeAuthor
URI: https://wordpress.org/
Description: Twenty Twenty
themeVersion: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: black, orange, brown, white, tan, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentytwenty*/Ceci est l'en-tête de la feuille de style, vous devrez copier toute la ligne de code y compris le commentaire /*…..*/
La description détaillée de ces lignes de code suit:
✔Nom du thème: Cela peut être tout ce que vous voulez
✔URL du thème: Adresse du site ou informations sur la page d'accueil
✔Auteur: Peut être votre nom
✔URL de l'auteur: Peut être tel que nous l'avons ajouté ci-dessus ou vous pouvez ajouter un lien vers votre page d'accueil ou tout ce qui a du sens.
✔Description: Facultatif, peut être tel quel ou vous pouvez ajouter la description de votre choix. Il apparaîtra dans le backend WordPress.
✔Version: Il s'agit essentiellement de votre version de thème. Puisqu'il ne s'agit pas d'un thème de publication, vous pouvez commencer avec 1.0 ici.
✔Licence, URI de licence et balises: Uniquement obligatoire si vous allez soumettre le thème dans le répertoire WordPress pour que d'autres puissent l'utiliser. Si vous le gardez pour vous, ne vous en faites pas. Gardez tel quel.
Une fois que vous avez terminé, ajoutez ce qui précède dans votre fichier style.css; copiez et collez le CSS de votre site HTML existant dans ce fichier. Enregistrez le fichier et fermez-le.
Connexe: Meilleurs plugins WordPress pour l'amélioration du site Web
Étape 3: séparez votre code HTML existant
Dans WordPress pour accéder aux informations de la base de données, PHP est utilisé. En conséquence, votre code HTML existant qui réside dans index.html doit être séparé en parties, afin que le CMS WordPress puisse les combiner correctement.
Pour ce faire, vous devrez copier des parties du document HTML d'origine dans différents fichiers que vous aurez créés lors de la première étape.
Tout d'abord, ouvrez votre fichier index.html, puis parcourez votre fichier WordPress nouvellement créé:
header.php :
Du début de votre fichier HTML à la zone de contenu principale c.-à-d. ou va dans le fichier header.php. Alors, copiez et collez le code après cela juste avant son affichage copier et coller après
Barre latérale.php
Vérifiez à nouveau votre fichier index.html; trouver et rechercher ou et remarquez la balise de fermeture . Maintenant, tout ce qui se trouve à l'intérieur de cette section, copiez et collez à l'intérieur du fichier sidebar.php; sauver et fermer.
Pied de page.php
Maintenant, tout ce qui reste de la fin de la barre latérale (c.-à-d. ) jusqu'à la fin du fichier index.html doit contenir des informations de pied de page. Cela sera ajouté à ce fichier. Après cela juste avant le crochet de fermeture balise copier et coller après
enregistrer le fichier
Une fois que vous avez terminé avec le fichier index.html, enregistrez-le et fermez-le également
Lisez aussi: Doit utiliser l'extension Magento 2 pour des fonctionnalités supplémentaires
Étape 4: Finalisez vos fichiers header.php et index.php pour WordPress
Maintenant, les dernières étapes à suivre pour header.php et index.php sont au format suivant:
Recherchez le lien dans votre section qui ressemble à ceci:
<link rel=”stylesheet” href=”style.css”>Remplacez le lien par le lien ci-dessous:
<link rel=”stylesheet” href=”<?php
echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />Maintenant, enregistrez et fermez le fichier header.php.
Dans votre fichier index.php; entrez ce qui suit, exactement comme ceci:
<?phpget_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Assurez-vous que l'espace entre les deux lignes de code ci-dessus est tel quel, l'une après l'autre. C'est parce que vous allez coller ci-dessous le code de boucle (https://codex.wordpress.org/The_Loop)
La boucle commence ici:
<?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><!--endpost 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><!--endentry-->
<div class="post-footer">
<div class="comments">
<?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments'); ?>
</div>
</div><!--endpost footer-->
</div><!--endpost-->
<?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><!--endnavigation-->
<?php else: ?>
<?php endif; ?>Après cela, enregistrez et fermez le fichier. Le thème de base est prêt.
Étape 5: Téléchargez votre nouveau thème
Pour télécharger votre thème, procédez comme suit:
1. Créez un fichier zip de votre dossier
2. Allez sur WordPress
3. Sélectionnez Apparence-> Thème-> cliquez sur Ajouter nouveau en haut
4. Cliquez sur Télécharger le thème.
5. Téléchargez votre fichier zip et cliquez sur Installer maintenant.
Une fois cela fait, vous pouvez facilement activer votre thème.
Ce sont les étapes de base à effectuer si vous déplacez manuellement votre site HTML vers un thème WordPress. Bien que beaucoup de travail reste à faire pour migrer complètement le contenu du HTML vers WordPress en termes de pages.
Si vous avez suivi notre blog comme guide pour la migration de HTML vers WordPress, alors bienvenue à bord, vous avez rejoint l'une des plus grandes communautés open source de CMS au monde.
Services de développement Web
Êtes-vous à la recherche d'une entreprise de développement Web fiable? Nos développeurs Web hautement qualifiés nous permettent de fournir des services de développement Web axés sur les résultats. Contactez notre équipe pour comprendre comment nous pouvons vous aider à atteindre vos objectifs commerciaux.