Titre

regalTheme

J’ai décidé de faire un thème WordPress le plus simple possible en utilisant au maximum les blocs par défaut avec optimisation via CSS et Javascript Vanilla, en particulier grâce au menu « Avancé » des blocs qui permet d’appliquer des classes spécifiques.

Par exemple avec classe .fright le bloc se positionne sur la droite de la zone de #content et le texte est ferré à droite. Sur le même principe, le rajout d’une classe .full-width étend le bloc sur toute la largeur de l’écran et certaines autres classes comme .regal-slider ou .regal-sound transforment les blocs en éléments interactifs.

Pour l’interactivité, juste des effets CSS et du Javascript Vanilla (pas de jQuery pour minimiser le poids des pages mais aussi pour avoir la maîtrise complète du code). Voir en particulier le regalDiaporama et la Galerie regal-slider mais aussi les popins média.

Le regalTheme nécessite quelques interventions avant d’être 100% opérationnel, en particulier la création des Custom Fields nécessaires à son bon fonctionnement mais aussi la mise à jour des CSS pour adapter le look-and-feel aux besoins du site. Mais c’est une très bonne base de travail pour un intégrateur chevronné !

Bloc image avec lien

Petit effet rollover en pure CSS.

Ouverture popin média automatique lorsqu’on choisit de lier le bloc à Fichier média.

Fonctionnement standard avec Lien personnalisé.

Pas de popin non plus avec Page du fichier joint.

Default Gallery

Avec Rollover + popin média via pure CSS et vanilla JS.

Default Gallery avec .regal-slider

La galerie devient un Slider Flickity avec rollovers et popin média (si on sélectionne Lien vers fichier média of course).

Avec .full-width en plus.

Default gallery avec .regal-masonry

Pour un affichage à la mode « masonry »* en pure CSS.

* « maçonnerie » : chaque image est une brique du mur !

Avec .full-width et sur 5 colonnes

Bloc bannière

Bloc bannière avec classes .full-width et .dark .

Attribut “ Arrière plan fixe ” activé.

Id mea sonet epicuri platonem, ex cum habeo definiebas percipitur, ius libris aliquam dissentiet te. Atqui assum mazim sit ex, per everti repudiandae conclusionemque cu. Mundi graece electram duo an, eos te oporteat repudiare adversarium. Ea nam prompta euripidis. Dolores inciderint disputando vis te, eu pri populo phaedrum. Fuisset mediocritatem eam eu, ius inani iudico petentium in.

Populo nominati ut mei, pericula ullamcorper mediocritatem eam et. Sit ad habeo modus adversarium. Est et saepe periculis, quo placerat voluptaria ex. Pro te eirmod maiorum, munere deterruisset ei duo, his at vitae affert comprehensam.

Bloc bannière avec classes .full-width et .light.

Attribut “ Arrière plan fixe ” activé.

Bloc Citation

Habillage automatique des blocs sans avoir besoin de rajouter une classe.

Bloc Citation.

Passque WordPress c’est quand même pas si mal.

regaloeb

Bloc Citation avec .fright.

En plus avec la nouvelle version dite « Gutemberg », les possibilités de base sont déjà assez épatantes, alors avec la régal-touch en plus, c’est juste formidab !

regaloeb

RegalDiaporama avec Block Lab et Flickity

Comme je suis un adepte du Javascript Vanilla et que je n’ai pas trouvé de plugin WP sans jQuery, j’ai fait un petit diaporama avec Flickity qu’on peut placer où on veut dans le contenu d’un article ou d’une page grâce au plugin Block Lab qui permet de générer des blocs Gutemberg personnalisés.

Les 40 ans de Patatatoine

Pour ses 40 ans, Patatatoine a organisé une grosse fête dans une belle maison du Pyla et les Never Ending High Patatas y ont fait un petit concert. Retour sur l’événement en photos.

Devant le bassin

Entre deux petites pauses, Patataloeb tape dur sur ses peaux.

Complicité

C’est beau la complicité entre patates.

Bonheur

Et la joie explose après le show !

Un regalDiaporama fullwidth et autoplay

Par défaut, le regalDiaporama remplit tout l’espace du bloc principal du site (#content) mais on peut aussi le configurer pour qu’il remplisse tout l’espace de l’écran.
Le format des visuels est 1900x780px pour un meilleur rendu.

La forêt en automne

C’est tellement jouli !

Grand arbre

C’est bâeau !

Les fleurs carnivores

Les fleurs pas carnivores

Bloc audio HTML5

Quelque Chose de Grandiose

Bloc audio HTML5 .regal-sound

En ajoutant la classe .regal-sound au bloc audio, mon plugin javascript vanilla-regalSpectrum.js affiche le spectre du son, les players ont le même aspect quel que soit le navigateur utilisé et on ne peut lire qu’un son à la fois (celui en cours est coupé par celui qu’on lance).

Et ça marche aussi avec les blocs vidéo (voir plus bas) !

Quelque Chose de Grandiose
I Don’t Think So

Bloc vidéo HTML5

Standard

Little Words

Avec classe .full-width

Little Words

Avec classe .regal-sound

Little Words
Bloc Couplet
Mais c'est quoi un bloc couplet ?
C'est une balise <pre class="wp-block-verse">.
Bloc code
C'est quoi un bloc code ?
C'est une balise <pre class="wp-block-code"> contenant une balise <code>.

Plugin regalDiaporama

Voici, en complément du RegalDiaporama avec Block Field décrit plus haut, un petit plugin de diaporama que j’ai développé.

Première diapo

C’est une bien belle image.
Et voici un lien hypertexte.
A utiliser uniquement si on n’applique pas de lien à l’ensemble de la diapo.

Troisième diapo

Et un visage apparait.

Quatrième diapo

Ceci est une pipe.

Recent Posts Extended régalisé

Plugin Recent Posts Extended modifié pour le rendu HTML.
Possibilité de choisir le nombre de Posts, les catégories à prendre en compte, le tri, l'affichage de la date, du résumé, de la vignette...
Jusqu'à 5 posts tiennent sur une ligne avec des tailles en pourcentage. Au-delà, plusieurs lignes de 5.

Meilleures ventes woocommerce