Comment convertir HTML en WordPress ?

exemple de code footer.php :

      </main> <!-- #main -->
    </div> <!-- #main-container -->
  <div class="footer-container">
    <footer class="wrapper">
      <p class="footer-credits">2019 Mon site web imaginaire</p>
    </footer>
  </div>
    <?php wp_footer();?>
  </body>
</html>
      </main> <!-- #main -->
    </div> <!-- #main-container -->
  <div class="footer-container">
    <footer class="wrapper">
      <p class="footer-credits">2019 Mon site web imaginaire</p>
    </footer>
  </div>
    <?php wp_footer();?>
  </body>
</html>
      </main> <!-- #main -->
    </div> <!-- #main-container -->
  <div class="footer-container">
    <footer class="wrapper">
      <p class="footer-credits">2019 Mon site web imaginaire</p>
    </footer>
  </div>
    <?php wp_footer();?>
  </body>
</html>

4. les associations header.php répondre en chantant index.php papiers

a été créé header.php mais il y a quelques étapes supplémentaires à franchir. En gros, il fautModifier la façon dont les feuilles de style sont appelées en HTMLafin de l'aligner sur la WordPress PHP Theme Standard Format.

modifications header.php pour charger correctement la feuille de style

existent header.php trouvez le fichier En-tête> et ajoutez le format standard de WordPress pour appeler l'élément style.css Fichier. Le code correct est le suivant :

<link rel="stylesheet" href="/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="/style.css" type="text/css" media="all" />

De cette manière, WordPress peut charger correctement les feuilles de style du thème sans dépendre d'un chemin fixe.

établir index.php invoquer header.php

Ouvrez le fichier index.php qui est vide à ce stade. Maintenant, copiez et collez le code suivant dans le fichier index.php Documentation :

<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posté le  par</p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Publié sous :
</span>
<?php endif; ?></section>
</article>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posté le  par</p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Publié sous :
</span>
<?php endif; ?></section>
</article>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posté le  par</p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Publié sous :
</span>
<?php endif; ?></section>
</article>

Ce que fait ce code :
✔ <?php get_header(); ?> -- appel header.phpLe site Web de la Commission européenne, qui présente le contenu de l'en-tête du site, est en cours d'élaboration.
✔ <?php while ( have_posts() ) : the_post(); ?> -- Démarrer WordPress Boucle principaleL'affichage de contenu dynamique.
✔ <?php the_title(); ?> -- Affiche le titre de l'article.
✔ par -- afficher l'heure de publication et les informations sur l'auteur (uniquement pour les pages) is_page()).
✔ <?php the_content(); ?> -- Affiche le contenu de l'article.
✔ <?php get_the_category_list( ', ' ); ?> -- Affiche une liste de catégories d'articles.
✔ <?php get_sidebar(); ?> -- appel sidebar.phpcharge le contenu de la barre latérale.
✔ <?php get_footer(); ?> -- appel footer.phpcharge le contenu du pied de page.

Conversion complète du thème WordPress

Après avoir effectué ces étapes, vous aurez un site web HTML original basé sur le modèle Thèmes WordPresset a étéPrêt à être téléchargé sur le site WordPress.

Ainsi, le site web HTML a été converti avec succès en un site web de type Thème WordPress de contenu à chargement dynamique!

5. créer des captures d'écran du thème et télécharger le thème

Créer un thème WordPress pour un capture d'écran (informatique)Idéalement situé à WordPress tableaux de bord Prévisualisez l'apparence du thème dans. Cette capture d'écran sera liée à la page informations d'en-tête style.css dans l'interface d'administration du thème WordPress.

Capture d'écran du sujet créé

• Ouvrez votre site web dans un navigateur.Capture d'écran de la page entière.
• Recadrage de l'image 880×660 pixelset l'enregistrer en tant que capture d'écran.png.
• Placez screenshot.png dans le dossier theme de votre site web(i.e.) wp-content/themes/votre-thème/ (Catalogue).

Cela affichera l'image de prévisualisation du thème dans la page du thème WordPress.

Comment télécharger des thèmes WordPress

Pour ce faire, il faut Deux voies Téléchargez un thème WordPress.

Méthode 1 : Télécharger le thème par FTP(aucune compression n'est nécessaire)

• Utilisez un client FTP (par exemple FileZilla) pour vous connecter à votre Serveur Web WordPress.
• Accédez au serveur sur le site wp-content/themes/ Catalogue.
• Glissez-déposez l'ensemble du dossier themes dans le répertoire themes.
• Une fois le téléchargement terminé, allez dans le tableau de bord de WordPress Apparence → Thèmes Sélectionnez et activez le thème.

cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)Ajouter un nouveauBouton.

cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)Télécharger un sujetbouton. Cliquez sur le bouton"Sélection de documents"et trouvez le fichier .zip qui a été créé. Sélectionnez le fichier pour qu'il apparaisse dans le tableau de bord de WordPress.

Sélectionnez le fichier du thème et cliquez surInstaller maintenantCeci installera le thème dans votre site WordPress. Ceci installera le thème dans votre site WordPress.

Une fois le thème téléchargé, cliquez surWordPress confirmera l'installation et affichera un message de réussite. Cliquez ensuite suractiverpour rendre le nouveau thème actif sur le site.

✅ avantageVous n'avez pas besoin de zipper le fichier, il vous suffit de le télécharger et de l'utiliser.

Méthode 2 : Conversion manuelle du site HTML via un thème enfant

Contrairement à la méthode précédente, au lieu de créer un thème à partir de zéro, cette méthode crée un thème enfant basé sur un thème WordPress existant afin de conserver le style du design HTML d'origine. Voici les étapes à suivre :

1) Choisissez le bon thème WordPress

Tout d'abord, choisissez un thème WordPress qui corresponde à votre conception HTML. Il est recommandé de choisir un thème enfant (Child Theme), dont la présentation et la structure sont similaires à celles du site web, ce qui permet de réduire le nombre de modifications.

2. créer des dossiers de sous-thèmes

Dans le répertoire du thème WordPress (wp-content/themes/), créez un nouveau dossier sous-thème.

Règle de dénomination : utilisez le nom du thème parent comme base et ajoutez le suffixe "-child" à la fin.

Par exemple, si le nom du sujet parent est inshal-wordpress-themepuis le nouveau dossier doit être nommé :

inshal-wordpress-theme-child

prenez noteLe nom du dossier ne peut pas contenir d'espaces.

3. créer des feuilles de style pour les thèmes enfants (style.css)

Dans le dossier du thème enfant nouvellement créé, créez un nouveau fichier style.css et ajoutez le code suivant :

/*
Nom du thème : inshal-wordpress-theme-child
URI du thème : http://example.com/inshal-wordpress-theme-child/
Description : inshal-wordpress-theme Thème enfant
Auteur : WPZOOM
URI de l'auteur : http://example.com
Modèle : inshal-wordpress-theme
Version : 1.0.0
Licence : GNU General Public License v2 ou ultérieure
URI de la licence : http://www.gnu.org/licenses/gpl-2.0.html
Tags : one-column, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style *// images-fonctionnalités, widgets de pied de page, formats de post, support de la langue rtl, sticky-post, options de thème, commentaires filtrés, prêt à être traduit
*/
/*
Nom du thème : inshal-wordpress-theme-child
URI du thème : http://example.com/inshal-wordpress-theme-child/
Description : inshal-wordpress-theme Thème enfant
Auteur : WPZOOM
URI de l'auteur : http://example.com
Modèle : inshal-wordpress-theme
Version : 1.0.0
Licence : GNU General Public License v2 ou ultérieure
URI de la licence : http://www.gnu.org/licenses/gpl-2.0.html
Tags : one-column, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style *// images-fonctionnalités, widgets de pied de page, formats de post, support de la langue rtl, sticky-post, options de thème, commentaires filtrés, prêt à être traduit
*/
/*
Nom du thème : inshal-wordpress-theme-child
URI du thème : http://example.com/inshal-wordpress-theme-child/
Description : inshal-wordpress-theme Thème enfant
Auteur : WPZOOM
URI de l'auteur : http://example.com
Modèle : inshal-wordpress-theme
Version : 1.0.0
Licence : GNU General Public License v2 ou ultérieure
URI de la licence : http://www.gnu.org/licenses/gpl-2.0.html
Tags : one-column, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style *// images-fonctionnalités, widgets de pied de page, formats de post, support de la langue rtl, sticky-post, options de thème, commentaires filtrés, prêt à être traduit
*/

crête: :

• Nom du thème est le nom de votre thème enfant, qui peut être personnalisé mais doit être unique.
• Modèle Le nom du répertoire du thème parent doit être renseigné, sinon le thème enfant n'héritera pas correctement des fonctionnalités du thème parent.
• Version Le numéro de version peut être mis à jour si nécessaire.

4. création functions.php et hérite du style du thème parent

Pour que le thème enfant hérite correctement des styles CSS du thème parent, vous devez créer le fichier functions.php Documentation.

Dans le dossier du thème enfant, créez un nouveau fichier functions.php et ajoutez le code ci-dessous :

phpCopyEdit
<?php
function inshal_child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'inshal_child_theme_enqueue_styles');
?>
<?php
function inshal_child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'inshal_child_theme_enqueue_styles');
?>
<?php
function inshal_child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'inshal_child_theme_enqueue_styles');
?>

correspond à l'anglais -ity, -ism, -ization: :

• wp_enqueue_style est utilisée pour charger les styles CSS du thème parent afin d'éviter le problème des pages HTML non stylisées dans le thème enfant.
• add_action('wp_enqueue_scripts', 'inshal_child_theme_enqueue_styles') ; Assurez-vous que la feuille de style se charge au bon moment pour WordPress.

5. activationsous-thème

Méthode 1 : Téléchargement via le tableau de bord de WordPress

Compresser les dossiers des sous-thèmes

• choisir un candidat inshal-wordpress-theme-child/ compressé dans un fichier .zip (par ex. inshal-wordpress-theme-child.zip).

Téléchargez et activez le thème enfant

• Connectez-vous à votre tableau de bord WordPress et allez sur Apparence → Thèmes.
• frappe (sur le clavier) Ajouter un nouveau Bouton.

• frappe (sur le clavier) Télécharger le thèmepuis sélectionnez .zip Documentation.

• Une fois le téléchargement terminé, cliquez sur Installer maintenantpuis cliquez sur Activer.

Méthode 2 : téléchargement manuel vers le serveur

1. via un client FTP (par exemple FileZilla) pour se connecter au serveur.
2. entrer dans wp-content/themes/ Catalogue.
3. Glisser-déposer direct inshal-wordpress-theme-child/ Dossier à thèmes Catalogue.
4. Connectez-vous à votre tableau de bord WordPress et allez sur Apparence → Thèmestrouvez le sous-thème et cliquez sur Activer.

6. ajuster la conception pour qu'elle corresponde au site HTML d'origine

Pour que l'apparence de votre site WordPress reste conforme à celle de votre site HTML d'origine, vous devez ajuster manuellement le code HTML et les styles CSS.

les méthodologies: :

• Copiez le code HTML original dans les pages et les fichiers modèles de WordPress (par ex. header.phpetfooter.php).
• Ajustez le CSS pour qu'il corresponde au site d'origine, soit en utilisant un CSS personnalisé, soit en modifiant directement les paramètres du thème enfant. style.css.
• Configurez les menus, les plugins et les widgets de WordPress pour qu'ils correspondent aux fonctionnalités du site HTML d'origine.

prenez noteIl existe des plugins qui peuvent convertir automatiquement les sites web HTML, mais ils peuvent ne pas être applicables à la dernière version de WordPress. Il est donc recommandé de modifier manuellement le code pour s'assurer que le site fonctionne correctement.

résultat final

À l'issue de ces étapes, le site WordPress aura été converti avec succès et aura hérité de l'aspect et de la convivialité du site HTML d'origine.

• Le thème enfant a une structure claire et toutes les modifications n'affecteront pas la mise à jour du thème parent.
• Prise en charge des fonctionnalités du thème WordPress (par exemple, personnalisation du thème, menus, plugins, etc.)
• L'aspect et la convivialité du site restent cohérents avec le site HTML et sont dotés de capacités de gestion de contenu dynamique.

Le site web HTML a donc été converti avec succès en un thème enfant WordPress !

Dépannage

existent Conversion HTML vers WordPress Certains problèmes courants peuvent être rencontrés au cours du processus. Voici ces problèmes et leurs solutions :

1. problèmes liés aux chemins d'accès aux images

au cas où L'image ne s'affiche pas correctementVeuillez cocher Chemins d'accès aux images dans les fichiers du thème WordPress. Assurez-vous que le chemin d'accès estPar rapport au catalogue thématiquedu fichier, plutôt que de pointer vers le mauvais emplacement du fichier.

2. les problèmes de style CSS

au cas où Les styles CSS ne sont pas appliqués correctementVeuillez cocher Fichiers CSS Il n'y a pas de conflits ou d'erreurs. Il peut s'avérer nécessaire de modifier ou de remplacer les styles existants pour s'assurer que l'élément style.css Chargez correctement et vérifiez qu'il ne manque rien. wp_enqueue_style() Code connexe.

3. conflit entre les plug-ins

Certains plugins peuventInterférence avec le fonctionnement normal du sujet. Si vous rencontrez des problèmes de fonctionnement anormal, vous pouvezDésactiver les plug-ins un par unIdentifiez le plug-in qui est à l'origine du conflit, puis adaptez-le en conséquence ou cherchez des solutions de remplacement.

4. les questions relatives à la hiérarchie des modèles

au cas où Les fichiers modèles ne se chargent pas comme prévuVeuillez cocher Hiérarchie des modèles WordPressAssurez-vous que le fichier modèleL'appellation est correcteet placé dans le répertoire sujet correct. Par exemple :

• index.php(Modèle de document principal)
• header.php(Modèle d'en-tête)
• footer.php(Modèle de pied de page)
• page.php(modèle de page)
• single.php(Modèle de page de détail de l'article)

résumés

commandant en chef (militaire) Conversion d'un site web HTML en un thème WordPress Les avantages sont nombreux, notammentUne meilleure personnalisationrépondre en chantantUne gestion plus efficace du contenu.

Suivez les étapes de ce tutoriel pour réussir àConvertir un design HTML statique en un site web WordPress dynamique. Avant de procéder à la conversion, assurez-vous de

• Optimiser le code HTMLVeiller à la clarté de la structure
• Organisation rationnelle du contenuVoici quelques-uns des éléments clés du programme qui amélioreront la lisibilité et la facilité de gestion.
• Optimisé pour différentes tailles d'écranLe dernier ajout à la liste est une nouvelle expérience, plus réactive, dont le bon fonctionnement est garanti.
• Conception d'un site web de sauvegardePrévenir la perte de données

Après avoir effectué ces étapes, le site WordPress aura les caractéristiques suivantesFonctionnalités renforcées, évolutivitéet peuvent être facilement optimisés et gérés par la suite.