Comment construire un site Web WordPress presque sans tête

Les thèmes traditionnels WordPress peuvent également fonctionner aussi efficacement que des sites Web statiques ou des applications Web sans tête. La grande majorité des sites Web WordPress sont construits à l'aide de thèmes WordPress traditionnels. Beaucoup de ces sites Web ont même de bons niveaux de mise en cache et des optimisations de dépendance, ce qui les rend assez rapidement. Mais en tant que développeurs, nous avons maîtrisé les moyens de créer de meilleurs résultats pour nos sites Web. L'utilisation de WordPress sans tête permet à de nombreux sites Web d'atteindre un chargement plus rapide, une meilleure interaction utilisateur et des transitions transparentes entre les pages.

Le problème est: la maintenance. Laissez-moi vous montrer une autre possibilité!

Définissons d'abord de quoi je parle de WordPress "traditionnel" "WordPress sans tête" et WordPress "presque sans tête".

Sites Web WordPress traditionnelles

Traditionnellement, les sites Web WordPress utilisent PHP pour rendre les balises HTML rendues sur des pages. Chaque fois qu'un lien est cliqué, le navigateur envoie une autre demande au serveur et PHP rend la balise HTML du site Web cliqué.

Ceci est la méthode utilisée par la plupart des sites Web. Il est plus facile à entretenir, a la complexité technique la plus faible et utilise le bon outil de mise en cache côté serveur et il fonctionne également assez bien. Le problème est que, parce que c'est un site Web traditionnel, cela ressemble à un site Web traditionnel. Dans ce type de site Web, les transitions, les effets et autres fonctionnalités modernes élégantes sont souvent plus difficiles à construire et à entretenir.

avantage:

1. Le site Web est facile à entretenir.
2. La technologie est relativement simple.
3. Bonne compatibilité avec les plugins WordPress.

défaut:

1. Comme la société s'attend à une expérience d'application dans le navigateur, votre site Web peut sembler un peu dépassé.
2. Étant donné que les sites Web n'utilisent pas de cadres JavaScript pour contrôler le comportement des sites Web, JavaScript est souvent plus difficile à écrire et à maintenir.
3. Les sites Web traditionnels ont tendance à fonctionner plus lentement que les options sans tête et presque sans tête.

Site Web WordPress sans tête

Les sites Web WordPress sans tête utilisent JavaScript moderne et une sorte de service Restful côté serveur, tel que l'API WordPress REST ou GraphQL. Au lieu de construire et de rendre HTML dans PHP, c'est le serveur qui envoie un HTML minimal et un grand fichier JavaScript qui gère le rendu de n'importe quelle page sur le site Web. Cette approche charge la page plus rapidement et offre l'occasion de créer des transitions vraiment cool et d'autres fonctionnalités amusantes entre les pages.

Peu importe ce que vous dites, la plupart des sites WordPress sans tête nécessitent un développeur pour apporter des modifications majeures. Vous voulez installer le plugin de formulaire? Désolé, vous devrez peut-être un développeur pour le configurer. Vous voulez installer un nouveau plugin SEO? Non, les développeurs doivent modifier l'application. Vous voulez utiliser ce bloc fantaisie? Dommage - vous avez d'abord besoin d'un développeur.

avantage:

1. Le site Web lui-même se sentira moderne et rapide.
2. Il est facile de s'intégrer à d'autres services Restful en dehors de WordPress.
3. L'ensemble du site Web est construit dans JavaScript, ce qui facilite la création de sites Web complexes.

défaut:

1. Vous devez réinventer les nombreuses fonctionnalités que le plugin WordPress vous offre hors de la boîte.
2. Ce cadre est difficile à maintenir.
3. L'hébergement est complexe et peut être coûteux par rapport à d'autres options.

Voir "WordPress et Jamstack" pour une comparaison plus approfondie des différences entre WordPress et l'hébergement statique.

J'adore les résultats que WordPress peut créer. Je n'aime pas l'entretien. Je veux une application Web qui me permet d'avoir une vitesse de chargement rapide, des transitions entre les pages et la sensation globale de l' application du site Web. Mais je veux aussi être libre d'utiliser l'écosystème du plugin qui rend WordPress si populaire. Je veux quelque chose de sans tête. Presque sans tête .

Je n'ai rien trouvé qui correspond à cette description, alors j'en ai construit un. Depuis lors, j'ai construit plusieurs sites Web qui utilisent cette approche et construit les bibliothèques JavaScript nécessaires pour faciliter la création de leurs propres thèmes WordPress presque sans tête.

Introduction à WordPress presque sans tête

Presque sans tête est une méthode de développement Web WordPress qui vous offre de nombreux avantages des applications similaires apportées par l'approche sans tête, ainsi que la facilité de développement d'utiliser des thèmes WordPress traditionnels. Il le fait avec une petite application JavaScript qui gérera le routage et rendra votre site Web comme une application sans tête, mais a un mécanisme de repli qui peut charger la même page avec des demandes WordPress normales. Vous pouvez choisir les pages à charger en utilisant la méthode de secours, et vous pouvez injecter la logique en JavaScript ou PHP pour déterminer si la page doit être chargée comme ceci.

Vous pouvez voir comment cela fonctionne réellement sur le site Web de démonstration que j'ai construit, ce qui montre ce que cette approche peut réaliser.

Par exemple, un site Web mettant en œuvre cette méthode vend des cours WordPress en ligne à l'aide d'un système de gestion d'apprentissage appelé Lifterlms. Ce plugin possède des fonctionnalités de commerce électronique intégrées et dispose de l'interface nécessaire pour configurer le contenu du cours d'hébergement et le mettre derrière un mur payant. Ce site utilise de nombreuses fonctionnalités intégrées de Lifterlms - dont une grande partie est le panier de caisse. Au lieu de reconstruire la page entière pour fonctionner dans mon application, je l'ai simplement configuré pour charger en utilisant la méthode de secours. Donc, cette page fonctionne comme n'importe quel ancien thème WordPress et fonctionne donc exactement comme prévu - tout sans moi reconstruire quoi que ce soit.

avantage:

1. Une fois installé, c'est facile à entretenir.
2. L'hébergement est aussi simple qu'un thème WordPress typique.
3. Le site Web se sent aussi moderne et rapide qu'un site Web sans tête.

défaut:

1. Vous devez toujours envisager deux façons différentes de rendre votre site Web.
2. Cette méthode a des choix limités pour des bibliothèques JavaScript efficaces.
3. Cette application est étroitement liée à WordPress, donc l'utilisation d'une API de repos tierce est plus difficile que sans tête.

Comment ça marche

Pour être presque sans tête, cela nécessite la capacité d'effectuer plusieurs actions, notamment:

1. Utilisez la demande WordPress pour charger la page,
2. Pages de chargement à l'aide de JavaScript,
3. Permettez aux pages d'être les mêmes, peu importe comment elles rendent,
4. Fournit un moyen de savoir quand charger une page en utilisant JavaScript ou PHP, et
5. Assurez-vous une cohérence à 100% de toutes les pages de routage, qu'elle soit rendue en JavaScript ou PHP.

Cela permet au site Web de profiter de l'amélioration progressive . Étant donné que la page peut être consultée avec ou sans JavaScript, vous pouvez utiliser la version la plus appropriée en fonction des demandes que vous avez faites. Y a-t-il un bot de confiance qui rampe votre site Web? Envoyez-leur une version non-javascript pour assurer la compatibilité. Existe-t-il une page de paiement qui ne fonctionne pas comme prévu? Forcez temporairement à se charger sans application et à le réparer plus tard.

Pour terminer ces projets, j'ai publié une bibliothèque open source appelée Nicholas, qui comprend un chauffeur préfabriqué.

Rester au sec

Le plus gros problème que je souhaite surmonter lors de la création d'une application presque sans tête est de maintenir le rendu de la page cohérent dans la façon dont il se trouve dans PHP et JavaScript. Je ne veux pas construire et maintenir mon balisage à deux endroits différents - je veux utiliser autant de code source unique que possible. Cela limite immédiatement la bibliothèque JavaScript que je peux réellement utiliser (désolé, réagir!). Après quelques recherches et beaucoup d' expériences, j'ai fini par utiliser des Alpinejs. Cette bibliothèque maintient mon code à sec plausible. Certaines pièces doivent absolument être réécrites pour chaque partie (par exemple, en boucle), mais la plupart des blocs de balisage peuvent être réutilisés.

Un seul modèle de publication rendu à l'aide de PHP peut ressembler à ceci:

 <code><?php if ( have_posts() ) { while ( have_posts() ) { the_post(); if ( is_singular() ) { echo nicholas()-?>templates()->get_template( 'index', 'post', [ 'content' => Nicholas::get_buffer( 'the_content' ), 'title' => Nicholas::get_buffer( 'the_title' ), ] ); } } } ?></code>

Le même modèle de publication rendu à l'aide de JavaScript d'Alpine:

<code><template :key="index" x-for="(post, index) in $store.posts"> = nicCholas () -> Templates () -> get_template ('index', 'post')?>
</template></code>

Ils utilisent tous le même modèle PHP, donc tout le code à l'intérieur de la boucle réelle est sec:

 <code>$title = $template->get_param( 'title', '' ); // 获取传递到此模板的标题，回退到空字符串。 $content = $template->get_param( 'content', '' ); // 获取传递到此模板的内容，回退到空字符串。 ?></code> = $ title?>

  <div x-html="content">= $ Contenu?></div>

Connexes: Cette méthode Alpine.js est mentalement similaire à la méthode Vue.js introduite par Jonathan Land dans "Comment construire des composants Vue dans le thème WordPress".

Détecter quand la page doit s'exécuter en mode compatible

"Mode de compatibilité" vous permet de forcer toute demande à charger sans exécuter une version sans tête de JavaScript sur votre site Web. Lorsque la page est définie pour charger en mode compatibilité, la page ne se chargera qu'en PHP et les scripts d'application ne feront jamais de file d'attente. Cela permet aux "pages de questions" d'exécuter sans réécrire quoi que ce soit qui ne fonctionne pas comme prévu lors de l'utilisation de l'application.

Il existe un certain nombre de façons différentes de forcer la page à s'exécuter en mode compatible - certains nécessitent du code et d'autres non. Nicholas ajoute un interrupteur à bascule à tout type de message qui force les poteaux à charger en mode de compatibilité.

En dehors de cela, vous pouvez ajouter manuellement n'importe quelle URL pour le forcer à se charger en mode compatible dans les paramètres de Nicholas.

Ce sont un bon début, mais j'ai constaté que je peux généralement détecter automatiquement quand la page doit être chargée en mode de compatibilité en fonction des blocs stockés dans le post. Par exemple, supposons que les formulaires Ninja soient installés sur votre site Web et que vous souhaitez utiliser le JavaScript de validation qu'ils fournissent au lieu de recréer votre propre javascript. Dans ce cas, vous devez forcer le mode de compatibilité à utiliser sur n'importe quelle page contenant le formulaire ninja. Vous pouvez ajouter manuellement chaque URL une par une, ou vous pouvez utiliser une requête pour tout obtenir sur la page avec un bloc de formulaires ninja. Par exemple:

 <code>add_filter( 'nicholas/compatibility_mode_urls', function ( $urls ) { // 过滤Ninja Forms块$filtered_urls = Nicholas::get_urls_for_query( [ 'post_type' => 'any', 's' => 'wp:ninja-forms/form', // 查找Ninja Forms块] ); return array_merge( $urls, $filtered_urls ); } );</code>

Cela ajoute automatiquement toute page contenant le bloc Ninja Forms à la liste des URL qui sera chargée à l'aide du mode de compatibilité. Il s'agit simplement d'utiliser le paramètre WP_Query, vous pouvez donc transmettre ce que vous voulez ici pour déterminer ce qui devrait être ajouté à la liste.

Prolonger la demande

Dans les coulisses, Nicholas utilise un routeur léger qui peut être étendu à l'aide du mode middleware, tout comme la façon dont les applications Express gèrent le middleware. Lorsque la page de clic est acheminée, le système exécutera chaque élément de middleware et finira enfin la page. Par défaut, le routeur ne fait rien ;

Un exemple de base est le suivant:

 <code>// 导入WordPress特定的中间件import { updateAdminBar, validateAdminPage, validateCompatibilityMode } from 'nicholas-wp/middlewares' // 导入通用中间件import { addRouteActions, handleClickMiddleware, setupRouter, validateMiddleware } from "nicholas-router"; // 按此顺序执行这些操作，当页面被路由时。 addRouteActions( // 首先，验证URL validateMiddleware, // 验证此页面不是管理页面validateAdminPage, // 验证此页面不需要兼容模式validateCompatibilityMode, // 然后，我们更新Alpine存储updateStore, // 如果启用，则可能获取评论fetchComments, // 更新历史记录updateHistory, // 可能更新管理栏updateAdminBar ) // 设置路由器。这也使用中间件模式。 setupRouter( // 为点击设置事件监听器handleClickMiddleware )</code>

De là, vous pouvez étendre ce qui se passe lorsque vous achetez la page. Peut-être que vous souhaitez scanner la page pour mettre en surbrillance le code, ou vous souhaitez le modifier Le contenu de la balise est de correspondre à la page de la nouvelle route. Même une couche de cache peut être introduite. Quoi que vous ayez besoin de faire, ajoutez les actions requises simplement en utilisant AddrouteAction ou SETUPROUNTER.

Prochaine étape

Voici mon bref aperçu de certains des composants clés utilisés pour mettre en œuvre une approche presque sans tête. Si vous êtes intéressé à en savoir plus, je recommande de suivre mon cours à la WP Dev Academy. Ce cours est un guide étape par étape pour créer un site Web WordPress presque sans tête à l'aide d'outils modernes. Je recommande également de vérifier mon passe-partout presque sans tête qui peut vous aider à démarrer votre propre projet.

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!