Reverie: un thème de démarrage WordPress basé sur la fondation

Reverie: un thème d'introduction WordPress basé sur Foundation Framework

Reverie est un thème d'introduction WordPress basé sur le cadre de la Fondation Zurb, qui fournit une base solide pour le développement du thème, y compris le maillage réactif, la typographie, les styles de bouton et d'autres composants. Sa conception légère et minimaliste peut améliorer les performances du site Web.

RÉVÉRATION Personnalisé

Vous pouvez modifier directement les fichiers CSS et PHP ou utiliser WordPress Customizer pour apporter des modifications plus simples. Ce thème prend en charge les sous-thèmes, vous permettant d'apporter des modifications sans affecter le fichier de thème d'origine, ce qui facilite la mise à jour du thème sans perdre des paramètres personnalisés.

La rêverie est très amicale avec les développeurs et les débutants qui connaissent le HTML et le CSS de base. Il prend en charge WooCommerce hors de la boîte, prend en charge la traduction de sites Web multilingues et est compatible avec tous les navigateurs modernes. Le thème prend également en charge les types de messages personnalisés et est mis à jour régulièrement pour être compatible avec les dernières versions de WordPress et de Foundation Frameworks.

Présentation de décision clé: sous-thème

Lors de la personnalisation de tout thème de base ou d'introduction, vous devez évaluer si un sous-thème est nécessaire. Si vous souhaitez tenir le sujet à jour, vous devez absolument utiliser un sous-thème. La raison principale est que lorsque vous mettez à jour le thème principal, toutes les modifications que vous apportez peuvent être perdues. Si vous créez un site Web pour vos clients, cela peut facilement provoquer une catastrophe.

En revanche, si vous ne voulez pas que vos clients mettent à jour les sujets eux-mêmes et cassent tout votre travail acharné, vous pouvez désactiver la mise à jour en utilisant des extraits de code simples. Cela empêchera l'utilisateur de mettre à jour le sujet du backend. Les mises à jour des thèmes et des plugins peuvent finir par rompre le site Web entier, vous pouvez donc les désactiver en ajoutant ce qui suit au fichier functions.php:

<code class="language-php">function remove_core_updates() {
  global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,);
}
add_filter('pre_site_transient_update_core','remove_core_updates');
add_filter('pre_site_transient_update_plugins','remove_core_updates');
add_filter('pre_site_transient_update_themes','remove_core_updates');</code>

Étape après la première installation

Après avoir installé le thème de la rêverie, vous pouvez voir qu'il est livré avec une fonctionnalité "personnalisée" qui vous permet de prévisualiser les modifications de base telles que les couleurs d'arrière-plan, les images d'arrière-plan et les widgets de l'avant. De nombreux thèmes populaires ont fait des personnalisations détaillées dans ce domaine, et les ont même affinés aux couleurs de police, aux séries de polices, etc.

Créer un sous-thème de rêverie

La façon dont le sous-thème

fonctionne consiste à enregistrer des fichiers dans des dossiers séparés, donc lorsque vous mettez à jour le thème principal, les fichiers dans des dossiers séparés ne sont pas touchés. Cela signifie que tout votre travail acharné et vos conceptions personnalisés ne sont pas effacés chaque fois que vous mettez à jour le thème principal.

La définition d'un sous-thème pour la rêverie est à peu près la même que les autres sujets. Dans le répertoire de thème, vous devez créer un dossier appelé "Reverie-Child". Dans ce document, vous devez placer un fichier style.css et un fichier functions.php. Ceci est typique de tout sous-thème. Ces fichiers sont requis si vous souhaitez ajouter vos propres fonctionnalités personnalisées et styles personnalisés.

Dans la feuille de style du sous-thème, il vous suffit de suivre les paramètres de base du fichier CSS sous-thème:

<code class="language-css">/*
Theme Name: Reverie Child Theme
Description: Child theme for Reverie 
Author: James George
Template: reverie
*/

@import url("../reverie/style.css");

/* Start child theme customization below */</code>

Vous pouvez désormais ajouter des fonctions et des styles personnalisés au nouveau sous-thème de rêverie.

Il s'agit d'un aperçu typique de l'installation de la rêverie. Si vous souhaitez personnaliser l'apparence, vous devez ajouter votre CSS personnalisé au fichier style.css dans le dossier de sous-thème.

La meilleure façon est d'ouvrir le fichier principal-index.php et le fichier Single-Page.php et d'afficher la structure. Assurez-vous de faire attention à toutes les catégories spéciales sur lesquelles vous souhaitez vous concentrer. Dans la plupart des cas, tout devrait être très simple et simple.

Une autre approche (et la méthode que j'ai choisie) consiste à utiliser l'inspecteur Firefox Firefbug et les outils d'inspects de Chrome. Peu importe l'outil que vous choisissez, ils ont presque les mêmes fonctions. Je préfère personnellement Firebug à Firefox. Je peux vérifier un élément et il me dira l'ID DIV et toute classe d'attribut qui stylise un élément spécifique.

C'est un autre excellent moyen de voir comment vous le construisez, et il met en évidence l'élément lorsque vous survolez un élément dans la panne en haut de la fenêtre Firebug. Vous pouvez voir comment les Divs sont imbriqués, ce qui peut vous aider à réduire tous les problèmes que vous essayez de résoudre.

Dans l'image ci-dessus, vous pouvez voir que la zone de code que vous consultez est mise en évidence en bleu clair. S'il y a une zone violette, il y a un remplissage. Le jaune indique toute valeur de marge appliquée. C'est un excellent moyen d'affiner tout problème d'espacement et de diagnostiquer pourquoi la conception n'est pas construite comme vous le souhaitez.

Dans l'exemple ci-dessus, si je veux styliser le nom de l'auteur, modifier sa couleur, je peux le survoler, cliquez avec le bouton droit et sélectionnez "Vérifier l'élément". Ensuite, dans le code ci-dessous, vous pouvez voir le div et le nom de classe, qui est en fait la classe Span de l'auteur Byline.

Étant donné que le nom de l'auteur est un lien, je peux ajouter un A à la fin et sélectionner l'élément actif:

<code class="language-php">function remove_core_updates() {
  global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,);
}
add_filter('pre_site_transient_update_core','remove_core_updates');
add_filter('pre_site_transient_update_plugins','remove_core_updates');
add_filter('pre_site_transient_update_themes','remove_core_updates');</code>

Cela modifie le lien de l'auteur vers Orange. C'est simple, mais ce sont les bases des thèmes de style. De plus, c'est beaucoup plus facile que de commencer par une page de PHP, de div et de classes - et d'essayer d'organiser tout dans votre esprit.

Dans le prochain article de la série, nous explorerons en ajoutant des fonctionnalités au sujet de Reverie. Il y a beaucoup de flexibilité ici et les possibilités sont infinies. Comprendre la structure globale du thème de la rêverie et comment manipuler son apparence vous aidera à comprendre comment en construire avec succès.

FAQ de la rêverie

• En quoi la rêverie est-elle différente des autres thèmes d'introduction WordPress? Ce qui rend la rêverie différente des autres thèmes d'introduction WordPress, c'est son intégration avec le cadre de la fondation. Cela signifie qu'il est livré avec un maillage réactif, une typographie, des styles de bouton et d'autres composants disponibles immédiatement. Il comprend également des menus de navigation personnalisés, des zones de widgets et des modèles de pages, fournissant une base solide pour le développement du thème. Contrairement à de nombreux autres thèmes d'introduction, Reverie est conçu pour être léger et minimaliste, contribuant à améliorer les performances du site Web.

• Comment personnaliser le thème de la rêverie? La rêverie est hautement personnalisable. Vous pouvez modifier directement les fichiers CSS et PHP ou utiliser le personnalisateur WordPress pour apporter des modifications plus simples. Le thème prend également en charge les sous-thèmes, vous permettant d'apporter des modifications sans affecter le fichier de thème d'origine. Cela facilite la mise à jour du thème sans perdre des paramètres personnalisés.

• La rêverie convient-elle aux débutants? Bien que la rêverie soit conçue pour les développeurs, il convient également aux débutants qui connaissent le HTML et le CSS de base. Le code concis et bien annoté du sujet facilite la compréhension de son fonctionnement, et l'intégration avec le framework Foundation fournit beaucoup de ressources pour en savoir plus sur le développement Web.

• La rêverie prend-elle en charge WooCommerce? Oui, Reverie prend en charge WooCommerce hors de la boîte. Cela signifie que vous pouvez facilement créer une boutique en ligne sur votre site Web sans installer des plugins ou des thèmes supplémentaires. Le thème comprend également des modèles personnalisés pour plusieurs pages WooCommerce pour donner à votre site Web une apparence cohérente.

• Comment les performances de Reverie se comparent-elles aux autres sujets d'introduction? La rêverie est conçue pour être légère et rapide, contribuant à améliorer le temps de chargement du site Web et les performances globales. La conception minimaliste de ce thème signifie qu'elle ne contient pas de fonctionnalités inutiles ou de code gonflé qui peut ralentir votre site Web. Cela en fait un excellent choix pour les développeurs axés sur les performances.

• Puis-je utiliser la rêverie pour les sites Web multilingues? Oui, Reverie prend en charge la traduction et prend en charge les sites Web multilingues. Ce sujet contient des fichiers .po et .mo que vous pouvez utiliser pour traduire le sujet en n'importe quelle langue. Il prend également en charge le plug-in WPML, ce qui facilite la gestion et le changement de différentes langues sur votre site Web.

• La rêverie est-elle compatible avec tous les navigateurs? La rêverie est conçue pour être compatible avec tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Ce thème utilise des améliorations progressives pour s'assurer qu'elle fonctionne correctement même sur les navigateurs plus anciens, bien que certaines fonctionnalités avancées puissent ne pas être disponibles.

• La rêverie prend-elle en charge les types d'articles personnalisés? Oui, Reverie prend en charge les types d'articles personnalisés. Cela signifie que vous pouvez créer différents types de contenu sur votre site Web, tels que les articles de blog, les produits, les critiques, etc. Le sujet comprend également plusieurs modèles personnalisés qui affichent différents types de messages, donnant à votre site Web une apparence cohérente.

• À quelle fréquence la rêverie met-elle à jour? La rêverie est mise à jour régulièrement pour assurer la compatibilité avec les dernières versions de WordPress et des cadres de fondation. Ces mises à jour incluent également des corrections de bogues, des améliorations des performances et de nouvelles fonctionnalités basées sur les commentaires des utilisateurs.

• y a-t-il un support pour la rêverie? Oui, la rêverie est alimentée dans son référentiel GitHub. Vous pouvez signaler des problèmes, demander des fonctionnalités ou contribuer au développement du sujet. Il existe également un grand nombre de documents et de tutoriels sur le site Web du thème, ainsi qu'une communauté d'utilisateurs qui peuvent aider à répondre aux questions et à fournir des suggestions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!