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 dansmain.css
, ainsi que des actifs javascript et image. -
lang
Répertoire: contient le fichiersage.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
Utilisez des commandes Bower pour gérer les packages frontaux:
- : Recherchez des packages.
-
bower search <query>
: Installer des packages. -
bower install <package>
: Liste des packages installés. -
bower list
: Désinstaller les packages. -
bower uninstall <package>
Installez les plugins Gulp:
Exécutez
define('WP_ENV', 'development');
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
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds











Récemment, nous vous avons montré comment créer une expérience personnalisée pour les utilisateurs en permettant aux utilisateurs d'enregistrer leurs publications préférées dans une bibliothèque personnalisée. Vous pouvez porter des résultats personnalisés à un autre niveau en utilisant leurs noms à certains endroits (c'est-à-dire des écrans de bienvenue). Heureusement, WordPress facilite l'obtention d'informations sur les utilisateurs connectés. Dans cet article, nous vous montrerons comment récupérer des informations liées à l'utilisateur actuellement connecté. Nous utiliserons le get_currentUserInfo (); fonction. Cela peut être utilisé n'importe où dans le thème (en-tête, pied de page, barre latérale, modèle de page, etc.). Pour que cela fonctionne, l'utilisateur doit être connecté. Nous devons donc utiliser

Il existe quatre façons d'ajuster la liste des articles WordPress: utilisez des options de thème, utilisez des plugins (tels que l'ordre des types de publication, la liste des publiques WP, des trucs boxy), utilisez du code (ajoutez des paramètres dans le fichier functions.php), ou modifiez directement la base de données WordPress.

Les blogs sont la plate-forme idéale pour que les gens expriment leurs opinions, opinions et opinions en ligne. De nombreux débutants sont impatients de créer leur propre site Web, mais hésitent à s'inquiéter des obstacles techniques ou des problèmes de coûts. Cependant, comme la plate-forme continue d'évoluer pour répondre aux capacités et aux besoins des débutants, il commence maintenant à devenir plus facile que jamais. Cet article vous guidera étape par étape comment créer un blog WordPress, de la sélection de thème à l'utilisation des plugins pour améliorer la sécurité et les performances, vous aidant facilement à créer votre propre site Web. Choisissez un sujet et une direction de blog Avant d'acheter un nom de domaine ou d'enregistrer un hôte, il est préférable d'identifier les sujets que vous prévoyez de couvrir. Les sites Web personnels peuvent tourner autour des voyages, de la cuisine, des critiques de produits, de la musique ou de tout passe-temps qui suscite vos intérêts. Se concentrer sur les domaines qui vous intéressent vraiment peuvent encourager l'écriture continue

Voulez-vous savoir comment afficher les catégories d'enfants sur la page des archives de la catégorie parent? Lorsque vous personnalisez une page d'archive de classification, vous devrez peut-être le faire pour le rendre plus utile à vos visiteurs. Dans cet article, nous vous montrerons comment afficher facilement les catégories d'enfants sur la page des archives de la catégorie parent. Pourquoi les sous-catégories apparaissent-elles sur la page des archives de la catégorie des parents? En affichant toutes les catégories d'enfants sur la page des archives de la catégorie parent, vous pouvez les rendre moins génériques et plus utiles aux visiteurs. Par exemple, si vous exécutez un blog WordPress sur les livres et que vous avez une taxonomie appelée "thème", vous pouvez ajouter une sous-taxonomie telle que "roman", "non-fiction" afin que vos lecteurs puissent

Dans le passé, nous avons partagé comment utiliser le plugin PostExpirator pour expirer les publications dans WordPress. Eh bien, lors de la création du site Web de la liste d'activités, nous avons trouvé ce plugin très utile. Nous pouvons facilement supprimer les listes d'activités expirées. Deuxièmement, grâce à ce plugin, il est également très facile de trier les publications par date d'expiration du post. Dans cet article, nous vous montrerons comment trier les publications par date d'expiration post-expiration dans WordPress. Code mis à jour pour refléter les modifications du plugin pour modifier le nom du champ personnalisé. Merci Tajim de nous avoir fait savoir dans les commentaires. Dans notre projet spécifique, nous utilisons des événements comme types de publication personnalisés. Maintenant

Cherchez-vous des moyens d'automatiser votre site Web WordPress et vos comptes de médias sociaux? Avec l'automatisation, vous pourrez partager automatiquement vos articles de blog WordPress ou vos mises à jour sur Facebook, Twitter, LinkedIn, Instagram et plus encore. Dans cet article, nous vous montrerons comment automatiser facilement WordPress et les médias sociaux en utilisant IFTTT, Zapier et Uncanny Automator. Pourquoi automatiser WordPress et les médias sociaux? Automatiser votre wordpre

Pour créer un site Web à l'aide de WordPress Host, vous devez: sélectionner un fournisseur d'hébergement fiable. Acheter un nom de domaine. Configurez un compte d'hébergement WordPress. Sélectionnez un sujet. Ajoutez des pages et des articles. Installez le plug-in. Personnalisez votre site Web. Publiez votre site Web.

L'un de nos utilisateurs a demandé à d'autres sites Web comment afficher le nombre de requêtes et de temps de chargement dans le pied de page. Vous voyez souvent cela dans le pied de page de votre site Web, et il peut afficher quelque chose comme: "64 requêtes en 1,248 secondes". Dans cet article, nous vous montrerons comment afficher le nombre de requêtes et de temps de chargement de page dans WordPress. Collez simplement le code suivant partout dans le fichier de thème (par exemple Footer.php). requêtes
