Sélectionner une page


Il semble que tout le monde dans la sphère WordPress parle de WordPress sans tête (c’est nous) également). Découpler le backend du frontend est susceptible d’être une grande partie de l’avenir de WordPress, et le CMS headless en général est quelque chose que nous verrons davantage.

Au cours des dernières années, WordPress a jeté les bases de ce développement, notamment avec l’introduction du API WP REST. Avec tout le battage médiatique, que pouvez-vous réellement réaliser avec WordPress stupide et, plus important encore, à quoi les gens l’utilisent-ils déjà?

Pour répondre à ces questions, dans cet article, nous allons passer en revue quelques exemples de WordPress sans tête dans la nature. De cette manière, nous voulons vous aider à mieux comprendre les possibilités techniques de cette approche et ce à quoi vous pouvez vous attendre de plus à l’avenir.

Prêt à continuer? Marchez moins! (Je suis vraiment désolé pour le jeu de mots.)

WordPress sans tête: exemples pratiques

Voici quelques sites Web qui ouvrent la voie à l’avenir et utilisent déjà un WordPress insensé pour alimenter leurs sites.

1. TechCrunch

échantillons WordPress sans tête Techcrunch

TechCrunch est souvent l’un des plus connus Exemples de sites Web bien connus avec WordPress. C’est l’un des plus grands blogs technologiques sur le Web et il est hébergé sur WordPress.com VIP.

En 2018, ils ont terminé reconstruit leur site Web. Non seulement ils ont réfléchi à la manière de rendre la conception plus conviviale et accessible, mais ils souhaitaient également adopter une approche de pointe.

Nous savions également dès le départ que nous voulions bénéficier des avancées du développement web depuis notre dernière révision. Cela nous aiderait à offrir ce type d’expérience et nous permettrait de développer plus facilement notre travail à l’avenir.

Ils ont atteint une application React / Redux sur un backend WordPress découplé et l’ont connectée via l’API REST.

Les avantages qu’ils ont vus dans cette solution:

  • Élimine le besoin de charger complètement les pages à chaque fois
  • Plus facile à entretenir
  • Des performances plus rapides
  • Le site Web se comporte plus comme une application native

Le site Web est l’œuvre de Travail & Co. et L’homme fait. Ces derniers sont à la pointe de WordPress sans tête depuis un moment maintenant.

Dans l’ensemble, ils ont fait du bon travail. Le nouveau TechCrunch a une conception de page très propre qui coule bien et se charge à merveille. J’aime particulièrement le symbole retour / fermeture, qui sert également d’indicateur pour le processus de lecture.

Affichage de l'état du bouton de fermeture Techcrunch

2. Le musée Guggenheim

exemples WordPress sans tête le musée Guggenheim

Le Guggenheim, l’un des musées les plus célèbres au monde, a choisi WordPress comme système de gestion de contenu pour la refonte du site Web en 2016. De plus, ils ont opté pour une version découplée du CMS avec un frontend AngularJS.

Toute l’affaire a été réalisée par Ruelle interactive qui utilisent l’API REST comme d’habitude. Pour que tout fonctionne, ils ont également utilisé types de publication personnalisés et Responsable de terrain pour créer divers objets de données requis.

L’un des principaux avantages de cette approche était la réduction du temps de chargement et la flexibilité nécessaire pour s’adapter à une architecture complexe de site et d’information. Si vous souhaitez en savoir plus sur la réflexion derrière le site Web et le processus de conception, vous pouvez Ici et Ici.

3. Frontité

Frontity d'exemples WordPress sans tête

Frontity est un framework dynamique pour utiliser WordPress sans tête avec un front-end React.js. Le co-fondateur et développeur principal Luis Herranz a en fait donné une conférence WordCamp Europe 2020 en ligne dans lequel il a discuté de ce qu’est WordPress sans tête, pourquoi c’est une bonne idée de l’utiliser avec React, ainsi que des défis restants de WordPress découplé.

Bien sûr, la page d’accueil de Frontity elle-même est créée de la manière décrite et entièrement gérée avec l’éditeur Gutenberg afin de démarrer! Si vous souhaitez approfondir ce sujet, vous pouvez regarder la vidéo ci-dessous (elle démarrera automatiquement sur la présentation de Luis lorsque vous appuierez sur la lecture).

Le site Web est super rapide et chic. Je vous encourage à regarder autour de vous. Si vous aimez ce que vous voyez, vous pouvez également utiliser Frontity pour créer votre propre site Web et tester vous-même la configuration. Un bon début est-ce Documentation.

4e nous deux

exemples WordPress sans tête ustwo

Un autre exemple de WordPress à l’arrière et une application React unilatérale à l’avant. Il semble que Human Made a également contribué à cela, comme vous pouvez le lire dans le leur. Étude de cas. Pour un chargement plus rapide, un serveur Node.js est également fourni pour permettre le rendu à la fois du côté serveur et du côté client. Voici un diagramme facile à lire:

diagramme d'architecture ustwo.com

En outre, le site Web exécute un générateur de page personnalisé qui permet aux auteurs d’entrer du contenu de manière modulaire. Ensuite, il est livré au frontal sous forme de données JSON via des points de terminaison d’API.

Le résultat est impressionnant. C’est une page élégante avec beaucoup d’espace et une animation subtile. Tout se charge rapidement et le contenu s’affiche en douceur sur le saut de page sans avoir besoin d’un rechargement complet. Je suis un grand fan.

5. Beachbody à la demande

exemples WordPress headless Beachbody sur demande

Notre prochain exemple WordPress sans tête est Beachbody on Demand, une plate-forme de streaming d’entraînement. Il est livré avec une interface utilisateur soignée qui semble être une interface JavaScript basée sur WordPress et éventuellement basée sur React.

Si vous regardez autour de vous, vous découvrirez de nombreuses fonctionnalités personnalisées, vidéos, cours, produits et recettes. Il existe également un blog bien conçu:

Blog de Beachbody on Demand

La page a été créée par XWP, qui l’a également publiée en tant que Étude de cas. Selon eux, ils ont principalement choisi d’utiliser WordPress sans tête pour rationaliser la gestion de contenu et automatiser la gestion des actifs tels que les images. Le découplage de WordPress vous permet de le connecter à de nombreux points de terminaison et points de vente différents, qui nécessitent tous des formats personnalisés.

Ils ont même réussi à tout configurer pour fonctionner avec le personnalisateur WordPress afin que vous puissiez prévisualiser les modifications avant de les finaliser. Fondamentalement, WordPress en a fait un système nerveux central à partir duquel tout le contenu circule là où il est nécessaire. Vous pouvez en savoir plus Ici.

6e Haruki Murakami

exemples WordPress sans tête Haruki Murakami

Le site Web de l’auteur célèbre Haruki Murakami est également le résultat d’une construction de CMS découplée. Vous pouvez même toujours voir le logo WordPress comme son Favicon.

Haruki Murakami Favicon

Dans cet exemple WordPress sans tête, un frontal s’exécute sur AngularJS. Cette configuration permet une navigation transparente d’un côté à l’autre. Il y a beaucoup de transitions et d’animations, y compris des effets de défilement sympas sur la page principale.

En tant que Mark Llobera de Bluecadet, la société derrière le site Web, écrit sur A List ApartVous avez initialement créé le site à l’aide du plug-in JSON API en 2015. Nous pouvons supposer qu’actuellement, les points de terminaison intégrés de l’API fusionnée sont susceptibles d’être utilisés.

Le site Web lui-même offre une expérience utilisateur vraiment agréable. Cela ne ressemble pas vraiment à un site Web car il n’y a pas de recharges. Le site ressemble plus à une application interactive. Cela vous encourage à explorer ce qui est bon car il y a beaucoup à découvrir. Fans de Murakami et grande conception de sites Web les deux l’aimeront.

7e Centre de ressources de marque Facebook

Échantillons WordPress sans tête Centre de ressources de la marque Facebook

La dernière entrée de notre liste est la page Facebook Brand Resource Center. C’est un site que le réseau social utilise comme un Directive de conception pour utiliser leurs valeurs de marque. C’est aussi un exemple de site Web construit avec WordPress stupide.

Comme d’autres entrées, il a un design très cool et ouvert qui s’adapte lorsque vous cliquez sur l’un des sites Web de marque.

sous-page de la marque okulus

Il est également visible sur les sous-pages que lorsque vous cliquez, seules des parties de la page sont chargées. Les éléments statiques tels que le menu restent visibles à l’écran. J’aime aussi les effets de défilement fluide lors de l’utilisation des menus de gauche, ainsi que les petites animations agréables lorsque vous les survolez Soumettre une candidature Bouton.

Dans l’ensemble, cela semble beaucoup plus fluide et interactif que vos sites Web PHP habituels. C’est probablement à quoi ressemble l’avenir du Web moderne.

Quels sont vos exemples préférés de WordPress sans tête?

Headless WordPress est un sujet très débattu, mais il n’a pas encore fait son entrée dans le courant dominant. Il est facile de penser qu’en dehors des cercles de développeurs, ce n’est pas pertinent et jusqu’à présent, c’est juste une chose technique.

Cependant, un regard sur des exemples de sites Web construits avec WordPress insensé montre clairement qu’ils sont déjà là dans le monde réel et connaissent un grand succès.

Avec WordPress découplé, vous pouvez fusionner l’incroyable puissance de WordPress en tant que CMS avec des interfaces utilisateur claires et semblables à des applications. Cela facilite également la gestion et la diffusion de contenu sur différents canaux. Nous sommes ravis de voir quelles autres choses sortiront à l’avenir.

Connaissez-vous d’autres exemples de sites Web construits avec WordPress stupide? Partagez vos favoris dans les commentaires ci-dessous!



Source link

Recent Posts