WordPress: Comment créer un site WordPress presque sans tête

WordPress: Comment créer un site WordPress presque sans tête

Je crois qu’un thème traditionnel devrait être capable de fonctionner aussi efficacement qu’un site statique ou une application Web sans tête. L’écrasante majorité des sites Web sont construits avec un bon thème à l’ancienne. La plupart d’entre eux ont même de bonnes couches de mise en cache et des optimisations de dépendances qui permettent à ces sites de fonctionner assez rapidement. Mais en tant que développeurs, nous avons trouvé des moyens de créer de meilleurs résultats pour nos sites Web. L’utilisation d’un sans tête a permis à de nombreux sites d’avoir des vitesses de chargement plus rapides, de meilleures interactions avec les utilisateurs et des transitions transparentes entre les pages.

Le problème? Maintenance. Laissez-moi vous montrer une autre possibilité !

Commençons par définir ce que j’entends par « traditionnel », « sans tête », puis « presque sans tête ».

Sites Web traditionnels

Traditionnellement, un site Web est construit à l’aide de PHP pour rendre le balisage HTML qui est rendu sur la page. Chaque fois qu’un lien est cliqué, le navigateur envoie une autre demande au serveur et PHP affiche le balisage HTML du site sur lequel on a cliqué.

C’est la méthode que la plupart des sites utilisent. C’est le plus facile à entretenir, la technologie la moins complexe et avec les bons outils de mise en cache côté serveur, il peut fonctionner assez bien. Le problème est que, puisqu’il s’agit d’un site Web traditionnel, il se sent comme un site Web traditionnel. Les transitions, effets et autres fonctionnalités modernes et élégantes ont tendance à être plus difficiles à créer et à entretenir dans ce type de site.

Avantages:

  1. Le site est facile à entretenir.
  2. La technologie est relativement simple.
  3. Il y a une grande compatibilité avec les plugins .

Les inconvénients:

  1. Votre site peut sembler un peu daté, car la société s’attend à des expériences similaires à celles d’une application dans le navigateur.
  2. JavaScript a tendance à être un peu plus difficile à écrire et à maintenir car le site n’utilise pas de framework JavaScript pour contrôler le comportement du site.
  3. Les sites Web traditionnels ont tendance à fonctionner plus lentement que les options sans tête et presque sans tête.

Sites sans tête

Un site Web sans tête utilise du JavaScript moderne et une sorte de service RESTful côté serveur, tel que l’API REST ou GraphQL. Au lieu de construire et de rendre le HTML en PHP, le serveur envoie un minimum de HTML et un gros fichier JavaScript qui peut gérer le rendu de n’importe quelle page du site. Cette méthode charge les pages beaucoup plus rapidement et ouvre la possibilité de créer des transitions vraiment sympas entre les pages et d’autres choses intéressantes.

Peu importe comment vous le faites tourner, plus sites sans tête exiger un développeur disponible pour apporter toute modification importante au site Web. Vous voulez installer un plugin de formulaires ? Désolé, vous avez probablement besoin d’un développeur pour le configurer. Vous voulez installer un nouveau plugin SEO ? Non, va avoir besoin d’un développeur pour changer l’application. Vous voulez utiliser ce bloc fantaisie ? Dommage, vous aurez d’abord besoin d’un développeur.

Avantages:

  1. Le site Web lui-même sera moderne et rapide.
  2. Il est facile à intégrer avec d’autres services RESTful en dehors de .
  3. L’ensemble du site est construit en JavaScript, ce qui facilite la création de sites Web complexes.

Les inconvénients:

  1. Vous devez réinventer beaucoup de choses que les plugins font pour vous.
  2. Cette configuration est difficile à maintenir.
  3. Comparé à d’autres options, l’hébergement est complexe et peut coûter cher.

Voir «  et Jamstack » pour une comparaison plus approfondie des différences entre et l’hébergement statique.

J’aime le résultat que sans tête peut créer. Je n’aime pas l’entretien. Ce que je veux, c’est une application Web qui me permette d’avoir des vitesses de chargement rapides, des transitions entre les pages et un comme une application sentir sur mon site. Mais je veux aussi pouvoir utiliser librement l’écosystème de plugins qui a rendu si populaire en premier lieu. Ce que je veux, c’est quelque chose sans tête. Presque sans tête.

Je n’ai rien trouvé qui corresponde à cette description, alors j’en ai construit un. Depuis lors, j’ai créé une poignée de sites qui utilisent cette approche et j’ai créé les bibliothèques JavaScript nécessaires pour permettre aux autres de créer plus facilement leur propre thème presque sans tête.

Présentation de presque sans tête

Presque sans tête est une approche de développement Web pour qui vous offre de nombreux avantages similaires à ceux d’une application qui viennent avec une approche sans tête, ainsi que la facilité de développement qui accompagne l’utilisation d’un thème traditionnel. Il accomplit cela avec une petite application JavaScript qui gérera le routage et rendra votre site un peu comme une application sans tête, mais a une solution de repli pour charger le exactement la même page avec une requête normale à la place. Vous pouvez choisir les pages à charger à l’aide de la méthode de secours et injecter une logique dans JavaScript ou PHP pour déterminer si la page doit être chargée de cette manière.

Vous pouvez le voir en action sur le site de démonstration que j’ai construit pour montrer ce que cette approche peut faire.

Par exemple, l’un des sites mettant en œuvre cette méthode utilise un système de gestion de l’apprentissage appelé LifterLMS pour vendre des cours en ligne. Ce plugin a des capacités de commerce électronique intégrées et configure l’interface nécessaire pour héberger et placer le contenu du cours derrière un paywall. Ce site utilise beaucoup des fonctionnalités intégrées de LifterLMS pour fonctionner – et une grande partie de cela est le panier de paiement. Au lieu de reconstruire toute cette page pour qu’elle fonctionne dans mon application, je la configure simplement pour qu’elle se charge à l’aide de la méthode de secours. Pour cette raison, cette page fonctionne comme n’importe quel ancien thème et fonctionne exactement comme prévu, le tout sans que je reconstruise quoi que ce soit.

Avantages:

  1. Ceci est facile à entretenir, lors de l’installation.
  2. L’hébergement est aussi simple qu’un thème typique.
  3. Le site Web est aussi moderne et rapide qu’un site Web sans tête.

Les inconvénients:

  1. Vous devez toujours penser à deux méthodes différentes pour rendre votre site Web.
  2. Il existe des choix limités pour les bibliothèques JavaScript qui sont efficaces avec cette méthode.
  3. Cette application est très étroitement liée à , il est donc plus difficile d’utiliser des API REST tierces que sans tête.

Comment ça fonctionne

Pour que quelque chose soit presque sans tête, il doit être capable de faire plusieurs choses, notamment :

  1. charger une page à l’aide d’une requête ,
  2. charger une page en JavaScript,
  3. permettre aux pages d’être identiques, quel que soit leur rendu,
  4. fournir un moyen de savoir quand charger une page en utilisant JavaScript ou PHP, et
  5. Assurez une parité à 100 % sur toutes les pages routées, qu’elles soient rendues avec JavaScript ou PHP.

Cela permet au site d’utiliser amélioration progressive. Étant donné que la page peut être consultée avec ou sans JavaScript, vous pouvez utiliser la version la plus logique en fonction de la demande qui a été faite. Un bot de confiance explore votre site ? Envoyez-leur la version non-JavaScript pour assurer la compatibilité. Vous avez une page de paiement qui ne fonctionne pas comme prévu ? Forcez-le à se charger sans l’application pour le moment, et peut-être à le réparer plus tard.

Pour accomplir chacun de ces éléments, j’ai publié une bibliothèque open source appelée Nicholas, qui comprend un passe-partout prédéfini.

Garder au sec

La plus grande préoccupation que je voulais surmonter lors de la création d’une application presque sans tête est de maintenir la parité entre le rendu de la page en PHP et en JavaScript. J’ai fait ne pas veux avoir à construire et maintenir mon balisage à deux endroits différents – je voulais une source unique pour autant de balisage que possible. Cette immédiatement limité les bibliothèques JavaScript que je pouvais utiliser de manière réaliste (désolé React!). Avec quelques recherches et beaucoup d’expérimentation, j’ai fini par utiliser AlpineJS. Cette bibliothèque a gardé mon code raisonnablement SEC. Il y a des parties qui absolument ont à réécrire pour chacun (boucles, par exemple), mais la plupart des morceaux importants de balisage peuvent être réutilisés.

Un modèle de publication unique rendu avec PHP peut ressembler à ceci :

templates()->get_template( 'index', 'post', [
        'content' => Nicholas::get_buffer( 'the_content' ),
        'title'   => Nicholas::get_buffer( 'the_title' ),
      ] );
    }
  }
}
?>

Ce même modèle de publication rendu en JavaScript, en utilisant Alpine :

Les deux utilisent le même modèle PHP, donc tout le code à l’intérieur la boucle réelle est DRY :

$title   = $template->get_param( 'title', '' );

// Get the title that was passed into this template, fallback to empty string.
$content = $template->get_param( 'content', '' ); // Get the cotent passed into this template, fallback to empty string.

?>

= $title ?>

= $content ?>

En rapport: Cette approche Alpine.js est similaire dans son esprit à l’approche Vue.js abordée dans « Comment créer des composants Vue dans un thème » par Jonathan Land.

Détecter quand une page doit s’exécuter en mode de compatibilité

Le « mode de compatibilité » vous permet de forcer n’importe quelle requête à se charger sans le JavaScript qui exécute la version sans tête du site. Lorsqu’une page est configurée pour se charger en utilisant le mode de compatibilité, la page sera chargée en utilisant uniquement PHP et le script de l’application ne sera jamais mis en file d’attente. Cela permet aux « pages à problèmes » qui ne fonctionnent pas comme prévu avec l’application de s’exécuter sans avoir à réécrire quoi que ce soit.

Il existe plusieurs manières différentes de forcer une page à s’exécuter en mode de compatibilité – certaines nécessitent du code, d’autres non. Nicholas ajoute une bascule à tout type de publication qui permet de forcer le chargement d’une publication en mode de compatibilité.

WordPress: Comment créer un site WordPress presque sans tête

Parallèlement à cela, vous pouvez ajouter manuellement n’importe quelle URL pour la forcer à se charger en mode de compatibilité dans les paramètres Nicholas.

WordPress: Comment créer un site WordPress presque sans tête

C’est un bon début, mais j’ai constaté que je peux généralement détecter quand une page doit se charger automatiquement en mode de compatibilité en fonction des blocs stockés dans un article. Par exemple, disons que Ninja Forms est installé sur votre site et que vous souhaitez utiliser le JavaScript de validation qu’ils fournissent au lieu de recréer le vôtre. Dans ce cas, vous devrez forcer le mode de compatibilité sur toute page contenant un formulaire Ninja. Tu pourrait parcourez manuellement et ajoutez chaque URL selon vos besoins, ou vous pouvez utiliser une requête pour obtenir tout le contenu comportant un bloc Ninja Forms sur la page. Quelque chose comme ça:

add_filter( 'nicholas/compatibility_mode_urls', function ( $urls ) {
  // Filter Ninja Forms Blocks
  $filtered_urls = Nicholas::get_urls_for_query( [
    'post_type' => 'any',
    's' => 'wp:ninja-forms/form', // Find Ninja Forms Blocks
  ] );

  return array_merge( $urls, $filtered_urls );
} );

Cela ajoute automatiquement toute page avec un bloc Ninja Forms à la liste des URL qui se chargeront en utilisant le mode de compatibilité. C’est juste en utilisant WP_Query arguments, vous pouvez donc passer tout ce que vous voulez ici pour déterminer quel contenu doit être ajouté à la liste.

Extension de l’application

Sous le capot, Nicholas utilise un routeur léger qui peut être étendu à l’aide d’un modèle de middleware un peu comme la façon dont une application Express gère les middleware. Lorsqu’une page cliquée est routée, le système parcourt chaque élément middleware et route finalement la page. Par défaut, le routeur fait rien; cependant, il est livré avec plusieurs intergiciels préfabriqués qui vous permettent d’assembler le routeur comme bon vous semble.

Un exemple de base ressemblerait à ceci :

// Import -specific middleware
import {
  updateAdminBar,
  validateAdminPage,
  validateCompatibilityMode
} from 'nicholas-wp/middlewares'

// Import generic middleware
import {
  addRouteActions,
  handleClickMiddleware,
  setupRouter,
  validateMiddleware
} from "nicholas-router";

// Do these actions, in this order, when a page is routed.
addRouteActions(
  // First, validate the URL
  validateMiddleware,
  // Validate this page is not an admin page
  validateAdminPage,
  // Validate this page doesn't require compatibility mode
  validateCompatibilityMode,
  // Then, we Update the Alpine store
  updateStore,
  // Maybe fetch comments, if enabled
  fetchComments,
  // Update the history
  updateHistory,
  // Maybe update the admin bar
  updateAdminBar
)

// Set up the router. This also uses a middleware pattern.
setupRouter(
  // Setup event listener for clicks
  handleClickMiddleware
)

À partir de là, vous pouvez étendre ce qui se passe lorsqu’une page est routée. Peut-être que vous voulez scanner la page pour le code à mettre en évidence, ou peut-être que vous voulez changer le contenu du tag pour correspondre à la page nouvellement routée. Peut-être même introduire une couche de mise en cache. Indépendamment de ce que vous devez faire, ajouter les actions nécessaires est aussi simple que d’utiliser addRouteAction ou setupRouter.

Prochaines étapes

Il s’agissait d’un bref aperçu de certains des composants clés que j’ai utilisés pour mettre en œuvre l’approche presque sans tête. Si vous souhaitez aller plus loin, je vous suggère de suivre mon cours à la WP Dev Academy. Ce cours est un guide étape par étape sur la façon de créer un site Web presque sans tête avec des outils modernes. Je vous suggère également de consulter mon passe-partout presque sans tête qui peut vous aider à démarrer votre propre projet.

All the CMS Templates You Could Ask For.

WordPress: Comment créer un site WordPress presque sans tête

2M+ items from the worlds largest marketplace for CMS TemplatesEnvato Market.

WordPress: Comment créer un site WordPress presque sans tête

WordPress: Comment créer un site WordPress presque sans têteWordPress: Comment créer un site WordPress presque sans tête

#Comment #créer #site # #presque #sans #tête