Modernisation du développement du thème WordPress avec Sage

Sage: un cadre de thème WordPress moderne

Il y a plusieurs années, nous avons présenté des racines, un cadre de thème WordPress. Roots est depuis évolué en une entreprise offrant deux outils puissants: le sage et le substratum rocheux. Cet article se concentre sur Sage, un framework tirant parti de la baillie HTML5, Gulp, Bower et Bootstrap pour le développement de thème WordPress rationalisé. Nous couvrirons un aperçu de ces outils, de l'installation, de la personnalisation et du flux de travail SAGE de base.

Avantages clés du sage:

• Modernise le développement du thème WordPress à l'aide d'outils tels que HTML5 Boilerplate, Gulp, Bower et Bootstrap, résultant en des thèmes efficaces et réactifs.
• simplifie la gestion et l'automatisation des actifs grâce à un processus de construction robuste.
• fournit une structure de répertoire clair pour une navigation et une personnalisation faciles.
• offre des options de personnalisation étendues pour divers aspects de thème.
• rationalise le flux de travail avec des mises à jour en temps réel via Browsersync.

Outils essentiels:

• HTML5 Plaque: Un modèle frontal robuste fournissant une base solide.
• Gulp: Un outil d'automatisation pour des tâches telles que la minification, la concaténation, l'optimisation d'image et les tests.
• bower: un gestionnaire de packages pour les actifs frontaux, simplifiant l'inclusion des bibliothèques JavaScript.
• BrowseSync: Active les modifications et les interactions de fichiers synchronisés sur plusieurs appareils.
• Asset-constructeur et wirep: Aider à la collecte d'actifs et à l'injection de dépendance.
• Bootstrap: un cadre frontal populaire pour créer des sites Web réactifs.

Installation:

L'installation de la sauge utilise le git. Accédez à votre répertoire de thème WordPress et exécutez la commande suivante dans votre terminal (remplacer theme-name par le nom de thème choisi):

git clone https://github.com/roots/sage.git theme-name

Alternativement, téléchargez le fichier zip à partir du référentiel GitHub, extraire et copiez le contenu dans un nouveau dossier dans votre répertoire de thème WordPress.

Ensuite, configurez WordPress pour le mode de développement en ajoutant cette ligne à votre fichier wp-config.php:

define('WP_ENV', 'development');

Structure du répertoire de thème:

Sage maintient une structure de thème WordPress standard avec des ajouts pour une fonctionnalité améliorée:

• Files de base (index.php, functions.php, 404.php, etc.)
• lib Répertoire: contient la configuration du thème et les fichiers utilitaires (assets.php, init.php, titles.php).
• assets Répertoire: abrite des fichiers sass / moins compilés dans main.css, ainsi que des actifs javascript et image.
• lang Répertoire: contient le fichier sage.pot pour la traduction du thème.
• templates Répertoire: détient des modèles basés sur HTML5.

Personnalisation:

Personnaliser le sage via le fichier

. Les points de personnalisation des clés comprennent: lib/init.php

• TAGE TITRE: Activer / Désactiver la modification de la balise de titre en utilisant . add_theme_support('title-tag')
• Menus de navigation: Enregistrer les menus de navigation en utilisant . register_nav_menus()
• Poster les miniatures: Activer / désactiver les images en vedette en utilisant . add_theme_support('post-thumbnails')
• Formats de post: Gérer les formats de post activés en utilisant . add_theme_support('post-formats')
• HTML5 Marquage: Ajouter la prise en charge des éléments HTML5 en utilisant . add_theme_support('html5')
• Editor Stylesheet: Spécifiez le chemin de la feuille de style de l'éditeur à l'aide de . add_editor_style()
• Barbars latérales: Enregistrer les barres latérales en utilisant dans la fonction register_sidebar(). widgets_init()

flux de travail: Le flux de travail de Sage s'appuie sur les packages Node.js et NPM. Installez les outils nécessaires à l'aide de NPM:

git clone https://github.com/roots/sage.git theme-name

en utilisant Bower:

Utilisez des commandes Bower pour gérer les packages frontaux:

: Recherchez des packages.
• bower search <query></query>
: Installer des packages.
• bower install <package></package>
: Liste des packages installés.
• bower list
: Désinstaller les packages.
• bower uninstall <package></package>

en utilisant Gulp:

Installez les plugins Gulp:

Exécutez

define('WP_ENV', 'development');

pour compiler et optimiser les actifs.

fournit des mises à jour en temps réel. Le fichier gulp contrôle le processus de construction. Personnalisez les tâches et les paramètres au besoin dans gulp watch et gulpfile.js. gulpfile.js assets/manifest.json

Conclusion:

Sage offre une approche puissante et efficace du développement du thème WordPress. En tirant parti des outils modernes et un flux de travail rationalisé, les développeurs peuvent créer facilement des thèmes réactifs de haute qualité. L'explication détaillée des options de processus et de personnalisation fournies dans cet article devrait vous permettre d'utiliser efficacement Sage pour votre prochain projet de thème WordPress.

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!