Comment construire un bloc Gutenberg dynamique
Un bloc Gutenberg dynamique utilise le rendu côté serveur pour afficher le contenu à jour chaque fois qu'il se charge. Contrairement aux blocs statiques, les blocs dynamiques exécutent du code PHP lorsque la page est chargée, permettant des données en temps réel comme des publications récentes ou du contenu spécifique à l'utilisateur. Les étapes de clé comprennent: 1) la configuration d'une structure de bloc de base avec Block.json, Edit.js, Save.js et un fichier de rendu PHP; 2) Enregistrer le bloc avec un rendu_callback en php; 3) Génération de sortie dynamique à l'aide d'attributs passés de l'éditeur; et 4) Gestion des entrées utilisateur via des contrôles dans edit.js qui mettent à jour les attributs de blocs utilisés dans la requête PHP. Cette approche garantit la flexibilité et les données en direct sans sacrifier la compatibilité avec l'éditeur de blocs.
La construction d'un bloc Gutenberg dynamique n'est pas trop différente de la fabrication d'un bloc régulier, mais il ajoute la torsion du rendu côté serveur. Si vous voulez que votre bloc puisse tirer de nouvelles données à chaque fois qu'elles sont visualisées - comme des messages récents ou un contenu spécifique à l'utilisateur - c'est ce dont vous avez besoin.
Ce qui rend un bloc «dynamique»
Un bloc dynamique n'enregistre pas sa sortie sous forme de HTML statique à l'intérieur du contenu de publication. Au lieu de cela, il exécute du code PHP chaque fois que le message est chargé, ce qui les permet apparaître des informations à jour. Ceci est utile pour des choses comme:
- Widgets de messages récents
- Affichage du profil utilisateur
- Le commentaire en direct compte
À l'avant, au lieu de voir HTML brut dans le contenu du post, WordPress stocke uniquement les métadonnées et les attributs de blocs. Le balisage réel est généré lorsque la page se charge, pas lorsque vous la modifiez.
Configuration de votre structure de bloc
Commencez par créer un bloc de base à l'aide du package @wordpress/create-block
ou configurez manuellement votre block.json
. Quoi qu'il en soit, la principale différence vient plus tard dans la façon dont vous enregistrez le rappel de rendu du bloc.
Voici ce que vous inclurez généralement:
- Un fichier
block.json
qui définit les métadonnées (nom, titre, catégorie, etc.) - Un fichier
edit.js
pour l'interface de l'éditeur - Un fichier
save.js
- même s'il renvoie Null, car le contenu réel sera rendu côté serveur - Un fichier php où la logique de rendu vit
Vous n'avez pas besoin d'écrire toute l'interface utilisateur en PHP, définissez simplement ce qui est sauvé et comment il se comporte lorsqu'il est rendu.
Enregistrer le bloc avec un rappel de rendu
C'est là que la magie se produit. Dans le fichier PHP de votre plugin, utilisez register_block_type()
et fournissez un argument render_callback
.
registre_block_type (__dir__, array ( 'render_callback' => 'my_dynamic_block_render_callback', ));
Définissez ensuite cette fonction. Il reçoit les attributs du bloc et doit renvoyer le HTML que vous souhaitez afficher:
fonction my_dynamic_block_render_callback ($ attributs, $ contenu, $ block) { // Répondez les données dynamiques ici - par exemple, articles récents $ récent_posts = get_posts (array ('numberposts' => 3)); $ output = '<ul>'; foreach ($ récent_posts comme $ post) { $ output. = '<li> <a href = "'. get_permalink ($ post). '">'. $ post-> post_title. '</a> </li>'; } $ output. = '</ul>'; return $ output; }
Remarque: Vous pouvez également transmettre des données de PHP à JavaScript via wp_localize_script
, surtout si votre bloc a besoin d'interactivité côté client après le chargement.
Gestion des attributs et entrée utilisateur
Même si la sortie finale est construite sur le serveur, les utilisateurs définissent toujours des options dans l'éditeur - comme le nombre d'éléments à afficher ou la catégorie à tirer.
Ainsi, dans votre fichier edit.js
, créez des contrôles à l'aide de composants comme TextControl
, SelectControl
ou RangeControl
. Ces attributs de blocage de mise à jour, qui sont ensuite transmis dans votre fonction de rendu PHP.
Par exemple:
- Ajoutez un attribut
count
dans votreblock.json
- Utilisez un
RangeControl
dans l'éditeur pour permettre aux utilisateurs de choisir le nombre de messages à afficher - Dans PHP, lisez
$attributes['count']
et utilisez-le dans votre requête
De cette façon, tout reste flexible sans avoir besoin de recharges de pages complètes ou d'appels Ajax juste pour prévisualiser les modifications.
Une fois que tout est câblé, votre bloc dynamique fonctionne comme les autres - seulement plus intelligent. Il se met à jour basé sur des données en temps réel, tout en jouant bien avec l'éditeur de blocs. C'est essentiellement ça. Pas trop mal une fois que vous avez baissé.
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!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

L'optimisation de la base de données WordPress peut efficacement améliorer la vitesse et la stabilité du site Web. Les étapes clés comprennent: 1. Nettoyez des données inutiles, telles que les commentaires de spam, les révisions et les ébauches. Vous pouvez limiter le nombre de révisions en modifiant les configurations ou les plug-ins et supprimer le contenu non valide en lots; 2. Optimiser les tables de base de données, utiliser des plug-ins ou des commandes SQL pour réparer et compresser les tables fragmentées pour améliorer l'efficacité de la requête; 3. Supprimer les données résiduelles des plug-ins et des sujets qui ne sont plus utilisés pour éviter de prendre de la place et de provoquer des conflits, et de nettoyer manuellement les configurations héritées si nécessaire; 4. La base de données doit être entièrement sauvegardée avant le fonctionnement, et les données peuvent être exportées à l'aide de plug-ins ou de panneaux de contrôle pour assurer la sécurité. Effectuez ce qui précède régulièrement pour que le site Web fonctionne efficacement.

La mise à jour des plug-ins à l'aide de WP-CLI nécessite 1. Connectez-vous au serveur via SSH et entrez le répertoire du site Web; 2. Exécutez wppluginupdatePlugin-Slug pour mettre à jour un seul plug-in ou wppluginupdate - le tout pour mettre à jour tous les plug-ins; 3. Vérifiez les autorisations, l'espace disque et les plug-ins contradictoires lors de la rencontre des problèmes. Il n'est pas nécessaire de se connecter à l'arrière-plan tout au long du processus, mais vous devez faire attention aux risques de sauvegarde et de compatibilité, et vous pouvez aider à résoudre les problèmes à travers des paramètres - run ou - debug.

ActionHook est un "point d'insertion" dans le processus d'exécution WordPress, permettant aux développeurs d'ajouter des fonctionnalités personnalisées sans modifier le code de base. Les scénarios d'utilisation communs incluent le chargement des ressources, l'exécution des opérations, la modification de la logique de saut, l'insertion du code statistique, etc. Les crochets communs incluent init, wp_enqueue_scripts, admin_init, wp_footer et sauvegoft. Pour ajouter ActionHook, vous devez utiliser la fonction add_action (), le format est: add_action ('name hook', 'nom de la fonction de rappel', priorité, nombre de paramètres). Lorsqu'il n'est pas spécifié, la priorité par défaut est 10 et le nombre de paramètres est 1. Choisissez le bon crochet

TomanageCronJobsinwordPressususingwp-Cli, youCanlist, Run, Schedule etdeleteventsViacommand-linetools.1.USUSWPCRONEVERTLOCHACKACTIVECRONEVENTSANDFILTERWIH

L'évasion des données et la désinfection sont deux étapes clés du développement de la sécurité WordPress. 1. La désinfection des données (désinfecter) est utilisée pour le stockage sûr et est traitée avant d'enregistrer la saisie de l'utilisateur, telles que l'utilisation de fonctions telles que Sanitize_text_field () et Sanitize_Email () pour nettoyer les données; 2. Data Escape (Escape) est utilisé pour un affichage sûr et est traité lors de la sortie vers l'extrémité frontale, comme l'utilisation de fonctions telles que ESC_HTML () et ESC_URL () pour empêcher l'exécution du script; 3. Utilisez des crochets et des bibliothèques de fonction appropriés, tels que wp_kses_post () pour filtrer le contenu texte riche, add_query_arg () pour utiliser en toute sécurité les paramètres URL; 4. Faites attention à différents scénarios

Pour migrer des sous-sites dans WordPress Multi-Site vers un seul site, vous devez effectuer les étapes suivantes à tour de rôle: 1. Utilisez le propre outil d'exportation de WordPress pour exporter des articles, des pages, etc.; 2. Exportez le tableau avec le préfixe correspondant de la base de données et renommez-le dans un format à site unique, et remplacez l'ancien nom de domaine en même temps; 3. Migrer manuellement les fichiers multimédias et les chemins de réparation; 4. Configurez les thèmes, les plug-ins et les paramètres du nouveau site et effectuez des tests. L'ensemble du processus nécessite une attention au nettoyage des données, au remplacement de l'URL et à la compatibilité du plug-in pour garantir les fonctions normales après la migration.

Toregisteracustommenuinwordpress, usethegister_nav_menus () functionInsideyourTheme’sfunctions.phpfile.first, defineOneOrmoreMenulocations usinganassociativaywherewhereysareinternalNames (slugs) andvaluesarehuman-readablenames.1.hookThefonfito'ftero'afterofter-lingenames.1.hookThefonfito'ftero'afteroftero-readablenames.1.hookThefonfito'to'afteroftero

Le chargement des scripts évite correctement les conflits, améliore les performances et garantit le chargement à la demande. Utilisez la fonction WP_ENQUEUE_Script pour gérer uniformément l'ordre de chargement, le chemin et les dépendances pour éviter le chargement en double et la confusion de dépendance; L'utilisation de base consiste à enregistrer et à charger des scripts dans functions.php via le crochet wp_enqueue_scripts; Les compétences avancées incluent l'utilisation de wp_register_script pour séparer l'enregistrement et le chargement pour contrôler le timing; Les précautions incluent l'utilisation de bibliothèques intégrées telles que jQuery sans chargement répété pour garantir la gestion de l'unicité; Les conseils consistent à ajouter des attributs asynchrones ou différés aux scripts via des filtres pour optimiser les méthodes de chargement.
