Comment convertir n’importe quel modèle HTML5 en un thème WordPress fantastique
Que feriez – vous si vous ne trouviez pas le thème WordPress parfait? Il est probable que vous examinez un cadre thématique. Cependant, parfois, je pense à l’idée: « Je ne devrais coder qu’un seul modèle HTML5 et le convertir en thème wordpress». Mais c’est juste un rêve impossible à réaliser, n’est – ce pas? Soyons réalistes. Le fait est que tant que vous avez quelques compétences de programmation de base de WordPress, tant que vous êtes prêt à soumettre, vous pouvez convertir des modèles HTML5 en thèmes WordPress. Dans cet article, je vais vous montrer comment.
Pourquoi convertir des modèles HTML en thèmes WordPress? Vous avez peut – être de bonnes raisons d’entreprendre ce projet. L’utilisation du modèle HTML5 signifie que vous avez un contrôle total sur tous les détails de l’apparence du site. Tu n’aimes pas une partie du modèle? Changez ça. Il est beaucoup plus facile d’éditer des modèles HTML simples que des thèmes WordPress complexes. L’utilisation du modèle HTML5 signifie que vous n’utiliserez pas beaucoup de fonctionnalités que vous n’avez pas l’intention d’utiliser lors du chargement du site. Si le thème WordPress que vous voulez n’est pas utilisé par des milliers d’autres sites, la conversion des modèles HTML5 est un moyen d’obtenir un thème WordPress entièrement personnalisé. Si vous n’avez jamais créé de thème WordPress auparavant, les modèles de conversion vous permettront de développer de très bonnes façons de vraiment étirer vos muscles pour WordPress. Dans cet article, je vais commencer par un simple modèle HTML5 et le convertir en un thème WordPress complet. Suivez – nous et vous pouvez le faire.
Configurer l’environnement de développement pour convertir les modèles HTML5 en thèmes WordPress nécessite d’abord de configurer l’environnement de développement. Voici les outils dont vous avez besoin avant de commencer à travailler: serveurs locaux pour alimenter WordPress: il y a beaucoup d’options à considérer
Vous devez le convertir en thème WordPress entièrement fonctionnel. En parlant de design web, je suis un minimaliste et un partisan du design \
Une fois que vous avez choisi le modèle parfait ou que vous avez encodé votre propre modèle, vous pouvez passer à l’étape suivante: convertir le modèle en thème WordPress. Étape 2: convertir les modèles HTML5 en thèmes WordPress. À ce stade, vous devriez avoir un modèle HTML5 à portée de main. Il devrait se composer d’un répertoire contenant des fichiers index. Html et sous – répertoires des ressources CSS et JavaScript. Copiez l’ensemble du Répertoire des thèmes dans le contenu \/ thèmes \/ répertoires WP du site de développement WordPress. Les thèmes WordPress sont maintenant là où WordPress doit trouver. Cependant, pour activer le thème WordPress sur le site de développement, vous devez faire deux changements:
Renommer l’index. Html comme index. Php. Ajouter un fichier de style. Envoie un CSS avec un en – tête de fichier de sujet correctement formaté au Répertoire de sujet. Alternativement, vous pouvez simplement déplacer le fichier CSS principal du modèle à un niveau, en dehors du Répertoire \/ CSS, puis dans le répertoire principal du thème WordPress. La clé est qu’il doit y avoir un style de fichier. CSS est à la racine du sujet et doit contenir l’en – tête de sujet approprié. C’est également le bon moment pour ajouter une capture d’écran d’un sujet à votre répertoire de sujets, si vous voulez. Une fois que vous avez fait ces changements, votre thème WordPress sera disponible pour l’activation lorsque vous vous dirigerez vers Look and feel > themes dans la zone de gestion WordPress. Continuer à activer les thèmes WordPress et voir le front end de s
Disponible dans le catalogue des thèmes WordPress. Vous verrez qu’ils se ressemblent tous. En – tête de fichier pour chaque en – tête de fichier. Php devrait être ceci: charger le résumé 38a4c1582b19650140f7011b8f0ccef une fois que vous avez un en – tête de fichier, continuez à copier tout le Code d’en – tête de l’index. Php dans le titre. Php. Ensuite, supprimez tous les codes de titre de l’index. PHP et le remplacer par la fonction WordPress get _ header () comme suit:
8dc9bd6adfd69c65309e7f9f7e02d3b9 bien sûr, les commentaires dans ce bit de code doivent être remplacés par des fonctions wordpress pour générer du contenu et des balises HTML pour que le contenu soit correct. Ce cycle devrait tenir compte des pages, des messages personnels, des pages de blog, des pages d’accueil, des pages d’archives et des pages 404 et de recherche. Il est donc difficile de faire tout le travail en un seul document. Par conséquent, la plupart des sujets communs interrompent le cycle d’indexation. Et l’insérer dans plusieurs fichiers séparés avec un titre comme contenu. Php, contenu unique. Php, page de contenu. Php, attends. Si vous décidez d’insérer une boucle dans plus d’un fichier, utilisez les balises conditionnelles et la fonction get _ Template part pour faire référence à la version de la boucle à utiliser. Mon conseil est de commencer d’une manière simple et de répéter lentement votre boucle jusqu’à ce que vous soyez satisfait du contenu affiché sur le site WordPress. Si tout le reste échoue, le prochain cycle devrait s’appliquer à presque tous les sites WordPress, bien que les résultats ne soient peut – être pas aussi surprenants que vous le souhaitez. Cependant, si ce cycle est nouveau pour vous, c’est un bon point de départ. Télécharger le résumé d012fdf8cd3611687c97abbd21d3ba14 approfondir la boucle dépasse la portée de ce tutoriel. Cependant, c’est le thème dont nous avons déjà discuté et vous pouvez tout apprendre en lisant WordPress Intermediate user Development: Queries and Loops. Étape 5: remplacer le contenu du fichier Template par la fonctionnalité WordPress l’étape suivante peut varier considérablement selon le modèle HTML. Ce que vous devez faire, c’est travailler avec chaque fichier Template – titre, index, contenu (le cas échéant), barre latérale et pied de page – en remplaçant chaque section de contenu statique par la fonctionnalité WordPress appropriée. Commencez par l’en – tête. Php. Chaque fois que vous rencontrez quelque chose, Remplacez – le par la fonction d
, l’en – tête et le pied de page sont basés sur le modèle que vous utilisez. L’ajout d’une région Widget nécessite deux étapes: l’enregistrement d’une région Widget dans une fonction en utilisant la fonction Register _ Sidebar. Php. Utilisez la barre latérale Dynamic _ pour ajouter une région Widget à la partie du sujet que vous voulez qu’elle apparaisse. La fonction Register _ Sidebar accepte un tableau de valeurs comprenant le nom de la zone Widget, l’id de la zone Widget et les bits HTML qui doivent apparaître avant chaque Widget et le titre du Widget. La fonction Register _ Sidebar est imbriquée dans une fonction personnalisée qui utilise des widgets init hook pour se connecter à WordPress. Voici l’apparence des fonctions qui enregistrent les zones de barre latérale pour mon thème WordPress dans les fonctions. Mon sujet PHP: téléchargez le contenu 9953227f9818b5f68a453c3940eccfb3 et la zone Widget enregistrée que nous pouvons ajouter à la barre latérale. PHP avec barre latérale dynamique. La fonction Dynamic _ Sidebar accepte l’id de zone Widget que nous avons enregistré dans le registre Sidebar de la fonction. Php. Voici le Code pour ajouter la zone Widget à la barre latérale. Php dans mon thème: charger le contenu bc447a4d189ba5e8c41bbc4bd75e0aa6 ces deux fonctions ensemble génèrent la zone Widget de barre latérale de mon thème. La zone Widget sera incluse dans la DIV avec la classe col – MD – 4. De plus, chaque Widget sera inclus dans une DIV avec une classe Well, et chaque titre de Widget sera imbriqué dans un élément de titre de niveau 4. Vous pouvez appliquer cette procédure pour ajouter n’importe quel nombre de zones Widget à un thème WordPress. Tout ce que vous avez à faire est de créer une fonction de barre latérale Register _ différente avec un ID unique pour chaque région Widget. Vous pouvez empiler toutes les fonctions Register _ Sidebar dans une fonction personnalisée et les initialiser en même temps en utilisant le crochet widgets init. Utiliser la fonction Dynamic _ Function
Barre latérale et ID de zone de Widget unique pour charger la zone de Widget à afficher: dans la barre latérale, l’en – tête ou le pied de page. Prochaines étapes… Si vous suivez étape par étape, vous avez maintenant converti les modèles HTML5 en thèmes WordPress fonctionnels. Félicitations. J’ai suivi la même procédure pour créer ce thème WordPress: