Création d'un site WordPress sans tête avec frontière

Frontity, un cadre basé sur React, simplifie la création de sites Web WordPress rapides et sans tête. Pensez-y comme Next.js pour WordPress. Alors que WordPress sans tête pourrait être un créneau maintenant, la vitrine de Frontity met en évidence sa popularité croissante, avec des sites notables comme CNBC Africa et Forbes Africa. Sa documentation et ses tutoriels se concentrent principalement sur les blogs sans tête.

Ce guide détaille la création d'un site de frontière de base et la personnalisation de son thème Mars par défaut (dans un article ultérieur). Nous couvrirons la configuration d'un site WordPress sans tête à l'aide du framework Frontity.

Table des matières

• Prérequis et exigences
• Comprendre la frontière
• Installation du site de la frontière:
  • Étape 1: Création du projet
  • Étape 2: Choisir le thème Mars
  • Étape 3: Installation du projet
  • Étape 4: Modification du répertoire et redémarrage du serveur
• Configuration du site WordPress:
  • Permettant de jolis permaliens
• Connexion frontière à WordPress:
  • Étape 1: Mises à jour du menu
  • Étape 2: Structure du dossier du projet
  • Étape 3: Modifications de style
• Déploiement à Vercel:
  • Étape 1: Construire la version de production
  • Étape 2: Création du compte Vercel
  • Étape 3: Création de vercel.json
  • Étape 4: Déploiement
• Conclusion
• Ressources

Ce n'est pas un guide d'experts, mais une procédure pratique. Pour plus de détails, consultez la documentation officielle de la frontière.

Prérequis et exigences

La familiarité avec React et ES6 JavaScript est recommandée. Exigences supplémentaires (détaillé dans la documentation de la frontière):

• Compétence HTML et CSS
• Expérience en ligne de commande
• Serveur Node.js
• Éditeur de code

Comprendre la frontière

La frontière est un framework React spécialement conçu pour WordPress. Il dispose de son propre gestionnaire d'État et de ses solutions de style CSS. Il fonctionne en deux modes:

• Mode découplé: la frontière récupère les données d'une API REST WordPress, rendant le HTML final en tant qu'application REACT isomorphe. Le domaine principal pointe vers la frontière et un sous-domaine à WordPress.
• Mode intégré: Le thème de la frontière remplace le thème WordPress. Un plugin fabrique des demandes HTTP internes au serveur Frontity pour HTML. Le domaine principal pointe vers WordPress.

La fonction AMP intégrée de la frontière optimise la vitesse de la page.

Installation du site de la frontière

Cela implique la configuration d'un projet frontalier et d'un site WordPress (comme source de données).

Tout d'abord, assurez-vous que Node.js et NPM sont installés:

Node - Version
NPM - Version
npm installer npm @ dernier -g # mise à niveau NPM si nécessaire

Étape 1: Création d'un projet frontalier

Utilisez la CLI de la frontière:

La frontière NPX créent ma frontière

Étape 2: Sélection du thème Mars

La frontière propose deux thèmes; Choisissez mars-theme .

Étape 3: Installation du projet de frontière

Le serveur Frontity installe le projet et ses dépendances.

Étape 4: Modification du répertoire et redémarrage du serveur de développement

Accédez au répertoire du projet et démarrez le serveur:

CD ma frontière
NPX FRONTITE DEV # ou FRONTITHE DE TIR

Accédez au site à http://localhost:3000 .

Installation du site WordPress

Configurez un site WordPress (localement ou existant). Assurez-vous que l'API WordPress REST est accessible (par exemple, http://mytestsite.local/wp-json ).

Activer les jolis permaliens

Activez les jolis permalinks (nom de poste) dans les paramètres> permalinks .

Connecter la frontière à WordPress

Mettre à jour frontity.settings.js :

// frontity.settings.js
Paramètres const = {
  ...,
  packages: [
    ...,
    {
      Nom: "@ Frontity / WP-Source",
      État: {
        source: {
          API: "http://your-wordpress-site.com/wp-json" // Remplacez par votre URL
        }
      }
    }
  ]]
}

Redémarrez le serveur.

Étape 1: mise à jour du menu

Ajoutez vos éléments de menu à frontity.settings.js au besoin, en suivant la structure du thème Mars.

Étape 2: Structure du dossier du projet

Comprendre la structure du projet: node_modules , package.json , frontity.settings.js , packages/mars-theme .

Étape 3: Modification des styles

La frontière utilise l'émotion pour le style. Modifiez les styles au besoin dans les composants du thème.

Déploiement à Vercel

Étape 1: Création d'une version de production

construction de frontière NPX

Étape 2: Création du compte Vercel

Créez un compte Vercel et connectez-vous:

Connexion NPX Vercel

Étape 3: Création de vercel.json

Créer vercel.json :

{
  "Version": 2,
  "Builds": [
    {
      "src": "package.json",
      "Utiliser": "@ Frontity / Now"
    }
  ]]
}

Étape 4: Déploiement

NPX Vercel

Conclusion

La frontière fournit une approche conviviale pour construire des sites WordPress sans tête.

Ressources

• Documentation de la frontière
• Blog de frontière
• Tutoriels YouTube pertinents (recherchez "Tutoriel de frontière")

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!