web-dev-qa-db-fra.com

Convertir un site Web statique en un thème WordPress et importer tout le contenu existant

J'ai un site qui est construit avec html, css et javascript et n'a pas de CMS. Cela a l'air génial et mon client voudrait que ce site ait WordPress en arrière-plan pour pouvoir en modifier facilement le contenu. Donc, je suis un peu coincé ici.

Je sais qu'il existe des plugins pour importer du HTML bien écrit, et ils fonctionnent à merveille. Mais je n'ai jamais fait ce genre de migration. Comment puis-je transférer tout le site sur WordPress? Existe-t-il un moyen de supprimer automatiquement l'ensemble du site et un moyen simple d'importer des bibliothèques JS afin que je puisse conserver toutes les classes, balises div ou span en HTML, styles en CSS, etc.?

theme-developmentcssimportbulk-import
3
Josip Ivic

WordPress a un wrapper parfait pour HTML> Conversion de thème: Le thème lui-même. Toutes les informations peuvent être trouvées dans la page Codex .

Il suffit d'ajouter un dossier dans votre répertoire wp-content/themes (ou le répertoire que vous avez enregistré en plus de cela) et d'ajouter les fichiers suivants.

  1. functions.php
  2. style.css
  3. index.php
  4. header.php

dans votre dossier themename personnalisé. Utilisez ensuite l’API Plugins pour associer des rappels au flux d’exécution du noyau WordPress. C’est ici que vous définissez des éléments de base, comme l’ajout de feuilles de style ou de scripts. Exemple pour votre functions.php:

add_action( 'wp_enqueue_scripts', function() {
    // Register Stylesheets and Scripts in here
    // @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
} );

Dans votre header.php, vous ajoutez les appels d'ouverture pour votre code HTML:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <?php wp_head(); ?>
</head>

La fonction wp_head(); appelle toutes les actions et c’est là que les scripts et les feuilles de style que vous avez enregistrés apparaissent.

Dans votre index.php, vous ajouterez votre balise corporelle:

<?php get_header(); ?>
<body <?php body_class(); ?>>
    <!-- Markup from your HTML files -->
    <?php get_footer(); ?>
</body>

La fonction get_footer(); appellera un fichier footer.php si vous en incluez un.

Enfin, il vous suffit d'ajouter Modèles de page qui remplacent les fichiers PHP originaux. Celles-ci ne diffèrent pas vraiment du index.php ci-dessus, à une exception près: le commentaire d'en-tête. Supposons que vous ajoutiez une copie de votre index.php, le renommiez en about-us.php et ajoutez ce qui suit en première ligne:

<?php /** Template Name: About Us */ ?>

Maintenant, lorsque vous allez dans l'interface utilisateur et que vous ajoutez une nouvelle page, vous pouvez sélectionner ce nouveau modèle, vous aurez un fichier de remplacement pour certains fichiers HTML existants. Vous pouvez même ajuster le slug dans l'écran d'édition de la page de l'interface utilisateur administrative.

Tout cela devrait vous aider à convertir vos modèles HTML en un thème WordPress valide. Vous pouvez ensuite, en fonction de votre contrat, dynamiser petit à petit ces modèles - par exemple en séparant les barres latérales répétitives, en modifiant les menus, modifiez le titre et le contenu .

5
kaiser

Cela peut être fait et vous pouvez faire un travail rapide (relativement) ou prendre plus de temps sur un meilleur site-> conversion WP. Je suppose que vous pouvez écrire un thème ou cet article deviendra un livre entier. Si ce n'est pas le cas, il existe de nombreux guides en ligne et imprimés et vous n'avez pas besoin de devenir un expert en thèmes pour lancer cette conversion. Et nous pouvons ajuster ma réponse à votre niveau de confort.

Voici une approche qui effectue rapidement la conversion principale mais laisse les tâches telles que l’inclusion appropriée des styles et des scripts à plus tard. Vous préférerez peut-être faire un travail plus rigoureux dès le début.

Étape 1 - Obtenez le site dans WP

J'espère que votre code HTML est très cohérent sur l'ensemble du site et que vous pouvez facilement identifier un en-tête et un pied de page communs. Votre première étape consiste à créer vous-même un nouveau thème avec uniquement ces fichiers:

style.css - les styles de votre site existant avec l'ajout d'un en-tête de thème approprié header.php - le code HTML pour l'en-tête footer.php - le code HTML pour le pied de page index.php - standard WP index.php avec appels appropriés pour en-tête et pied de page

Si votre mise en page comporte des barres latérales évidentes qui se répètent sur le site, ajoutez également des fichiers de la barre latérale.

Assurez-vous que votre en-tête et votre pied de page incluent les appels obligatoires à wp_head et wp_footer. Gardez un œil sur les WP directives de développement au fur et à mesure que vous aidez une liste de contrôle.

Examinez votre structure HTML pour connaître le contenu de la page principale, le titre de la page et l’essentiel du contenu. Vous souhaitez intégrer l'intégralité du code HTML structurel dans vos modèles afin qu'à l'avenir, vous ne vous fiez plus à celui qui modifie le contenu pour écrire du code HTML. Lorsque vous avez identifié le titre et le contenu de la page dans l'une de vos pages clé (pas la page d'accueil si elle a sa propre mise en page, comme c'est souvent le cas), vous pouvez remplacer le texte de ces zones par The Loop contenant les appels appropriés à the_title, le contenu. Vous pouvez envisager de séparer toutes les métadonnées maintenant ou après la première conversion. Le choix dépend de votre contenu et de la manière dont vous voulez gérer les choses.

Créez une page avec le titre et le contenu que vous venez de remplacer et voyez à quoi elle ressemble!

Vous ne tirerez pas votre JavaScript et vos styles dans "The WordPress Way" mais cela peut venir plus tard. À ce stade, assurez-vous que les références à ces thèmes dans votre thème sont toujours résolues et corrigez-les, dans le cas contraire.

Étape 2 - Obtenez le contenu du site HTML dans WordPress

J'ai eu des gens faire cela manuellement sur de petits sites. Fonctionne bien. J'ai également utilisé HTML Import 2 de Stephanie Leary, mais vous pouvez rechercher d'autres personnes dans le référentiel de plug-in si vous le souhaitez.

Si votre site a un contenu qui devrait être des messages ou même des types de publication personnalisés plutôt que des pages, importez-les par lots et utilisez un convertisseur de type de publication - John James Jacoby fonctionne bien pour moi et je pense toujours qu'un plugin d'un contributeur principal est susceptible de bien fonctionner.

Intervalle

Vous devriez maintenant avoir un site à peu près fonctionnel qui utilise ce qui va ressembler, à ce stade, à un thème assez mal écrit! Les améliorations à venir incluent un codage correct de la navigation et l’inclusion des styles et des scripts de la manière appropriée, ce que Kaiser couvre dans sa réponse à cette question.

2
Andy Macaulay-Brook