Installation

⚠️ Prérequis :

Node >= 8.0 – nodejs.org
npm >=5.0 – npm

 npm install -g npm@latest

gulp – gulp

npm install -g gulp

php >= 7.1 (S’assurer que short_open_tag est true dans votre VM/Webserver).

🔧 Installation avec Yeoman

Yeoman est un générateur de webapp. En quelques lignes de commandes votre thème Stan Lee est installé et paramétré !

Installer `yeoman`

npm install -g yo

Installer le générateur

npm install -g generator-stanlee

Installer le thème avec le générateur

Dans le dossier themes de wordpress, créez votre dossier mon-theme et entrez dedans :

mkdir mon-theme && cd $_

Lancer l’installation du thème:

yo stanlee

🎉 Vous n’avez plus qu’à suivre les instructions pour entrer vos configurations. 🎉

📘 Workflow

Gulp

Stanlee utilise WP Gulp.

Commandes

# Commencer votre projet
npm start

# Arrêter le projet CTRL (⌃) + C

# Optimizer les images.
npm run images

# Générer les fichiers de traduction WP POT.
npm run translate

# Générer les feuilles de style et Sourcemap.
npm run styles-rtl

# Générer le zip du thème.
npm run zip

HTML Structure

<nav>La navigation principale</nav>
<header>
  Le header de la page qui contient le titre de la page et/ou l'image
</header>
<main>
  Contient tout sauf le header, le footer et la sidebar
  <section>
    Sert de container et/ou de fullwidth-background
    <article>
      Contient le contenu quand l'tuilisation du tag article est semantiquement
      correcte.
    </article>
    <div class="element">
      Contient le contenu quand l'utilisation du tag article n'est pas correct
    </div>
  </section>
</main>
<sidebar> Contient les widgets de la page </sidebar>
<footer>
  Le footer de la page, peut contenir des liens en plus et des informations
  comme l'adresse ou le logo
</footer>

C’est parti !

Première choses à faire quand on crée un nouveau site avec Stanlee:

ouvrir functions/functions-setup.php et ajouter ses propres settings
vérifier les autres fichiers dans /functions pour s’assurer que tout vous convient
ouvrir assets/styles/vars.scss et ajouter vos tailles, breakpoints, couleurs …
ajouter vos templates comme templates/temp-montemplate.php
ajouter vos acf-blocks dans functions-sections.php et créer un template comme templates/temp-section-masection
utiliser les fichiers SASS dans assets/styles pour ajouter votre css

Pour des informations plus détaillées se référer à « Fichiers/Dossiers important »

Deploiement

gulp build pour compiler et créer un fichier zip pour votre thème
Note: le dossier npm_modules n’est pas nécessaire.

Usage

General

Tout les fichiers importants contiennent une description. Assurez vous de la lire dabord.

Fichiers/Dossiers important

Functions

functions-sections.php      fonctions pour afficher les ACFs flexible blocks (appelé "sections" dans Stanlee)
functions-custom.php      espace pour vos propres fonctions (ex: shortcodes ...)
functions-dev.php         fonctions utiles au développement
functions-settings.php    paramètres du thème et fonctions générales qui ne nécessite pas beaucoup de modifications
functions-setup.php       point de départ pour paramètrer le nouveau thème, c'est là que les paramètres par défaut se trouvent.

CSS

assets/styles/_base.scss        style des éléments html
assets/styles/_essentials.scss  mixins, fonctions SASS et mixins pour le responsive
assets/styles/fonts.scss        fonts stoquées en local
assets/styles/_layout.scss      style des contenus
assets/styles/_module.scss
assets/styles/_nav.scss         navigation du site
assets/styles/state.scss
assets/styles/_vars.scss        gestion des tailles, toutes les couleurs, fonts et autres variables
assets/styles/styles.scss       récupère tous les fichiers .scss pour la compilation gulp

Javascript

assets/scrips/essentials.js   javascript/jQuery fonctions/variables réutilisables
assets/scrips/functions.js    javascript/jQuery
modernizr-config.json         Modernizr configuration, voir la section "Modernizr"
modernizr.js                  Modernizr modules, voir la section "Modernizr"

Templates

Les templates par défaut de WordPress (page.php, single.php) reçoivent leur contenu depuis leur fichier associé dans le dossier template. Ainsi tous les templates sont groupés ensemble.

Tous les templates sont séparés en deux catégories reconnaissables par leur préfix:

temp: templates du site.
wp: templates par défaut de wordpress.

temp-sections.php         charge les acf-blocks (utilisant "Flexible Element" field-type) depuis `functions-sections.php`
temp-section-***.php     charge vos acf-block personnalisés et affiche son contenu (voir l'exemple `temp-section-text`)
temp-home.php           affiche le contenu par défaut et l'image mise en avant
temp-subsites.php       affiche le contenu par défaut et le contenu de chage page enfant
wp-home.php             WP blog par défaut
wp-page.php             WP page par défaut
wp-single.php           WP post par défaut

Responsive/Fluid

Taille

Par défaut, le layout s’adapte à la largeur de la fenêtre (viewport) puisque toutes les unités sont en rem et html utilise font-size comme unité de base. La mise à l’échelle peut être configurée dans la section SIZE/SCALING dans vars.scsss. Vous pouvez aussi arrêter la mise à m’échelle sur certaines largeurs de fenêtre. Voir les instructions dans vars.scsss.

Mixins/Classes

definie par des variables

La largeur des deux variables disponibles mobile et desktop sont définies dans vars.scss.

min 800px @include desktop {...}
max 799px@include mobile {...}

définie par la largeur en pixel

au moins 750px: @include vpw_min(750px)
au maximum 500px: @include vpw_max(500px)
entre 1000px et 1200px: @include vpw(1000px, 1200px)

definie par ascepct-ratio

au moins 16:9: @include asr_min(16,9) { ... }
au maximum 4:3: @include asr_max(4,3) { ... }

definie par css-class Les deux variables disponibles mobile et desktop fonctionnent ainsi (avec les valeurs par défaut):

.desktop {
	// caché tant que < 800px;
}
.mobile {
	// caché tant que > 799;
}

À propos

Auteur: ThatMuch Contact: contact@thatmuch.fr