Table des matières
Ajouter des paramètres personnalisés
L'aperçu change instantanément avec JS
Panneau d'organisation et structure de blocs
Maison Tutoriel CMS WordPresse Comment utiliser l'API WordPress Customizer

Comment utiliser l'API WordPress Customizer

Jul 19, 2025 am 12:11 AM

Les étapes clés de l'utilisation de l'API de personnalisation WordPress sont les suivantes: 1. Ajoutez des paramètres, du contrôle et de la section au crochet personnalisé_agister pour enregistrer les options personnalisées, telles que l'ajout d'un sous-titre de site Web; 2. Définissez le transport sur PostMessage et utilisez JavaScript pour réaliser des effets d'aperçu instantané; 3. Utilisez le panneau et la section pour organiser des structures d'options personnalisées pour améliorer l'expérience utilisateur; Maître ces concepts et techniques de base pour atteindre des fonctions de personnalisation de thème flexibles.

Il n'est pas difficile d'utiliser l'API WordPress Customizer, mais il faut comprendre son flux de travail et sa structure. Son rôle principal est de vous permettre d'ajouter des options personnalisables au thème, afin que les utilisateurs puissent prévisualiser instantanément les modifications sans rafraîchir la page.

Les parties suivantes sont les fonctions et techniques les plus couramment utilisées dans votre opération réelle:


Ajouter des paramètres personnalisés

Pour ajouter de nouveaux paramètres dans le personnalisateur, vous devez les enregistrer dans customize_register . Cela comprend le réglage des éléments eux-mêmes, les éléments de contrôle et les panneaux ou blocs correspondants.

Par exemple:
Si vous souhaitez ajouter une zone de saisie de texte pour un sous-titre de site Web, vous pouvez l'écrire comme ceci:

 fonction mytheme_customalize_register ($ wp_customalise) {
    $ wp_customalize-> add_setting ('subtitle_text', array (
        'par défaut' => 'sous-titre par défaut',
        'transport' => 'rafraîchir', // ou postmessage pour une mise à jour instantanée));

    $ wp_customalize-> add_control ('subtitle_text', array (
        'label' => __ ('home subtitle', 'mytheme'),,
        'section' => 'title_tagline',
        'paramètres' => 'subtitle_text',
        'type' => 'text',
    ));
}
add_action ('personnaliser_register', 'mytheme_customalize_register');

Que noter ici est:

  • setting est l'endroit où les valeurs sont stockées.
  • control est un élément d'interface d'interface utilisateur, tel que des zones de texte, des menus déroulants, etc.
  • section détermine quelle zone cet élément de contrôle est placé.

L'aperçu change instantanément avec JS

Si vous souhaitez que les utilisateurs voient des modifications en temps réel lors de l'ajustement des paramètres, au lieu de cliquer sur "Publier" pour prendre effet, vous devez utiliser la méthode de transmission postMessage de JavaScript.

Par exemple, vous souhaitez modifier la couleur du titre du site Web en temps réel:

  1. Définissez le transport vers postMessage en PHP:

     $ wp_customalize-> add_setting ('title_color', array (
     'par défaut' => '# 000000',
     'transport' => 'postmessage',
    ));
  2. Écoutez les modifications et mettez à jour le DOM dans JS:

     (fonction ($) {
     wp.customalize ('title_color', fonction (valeur) {
         value.bind (fonction (to) {
             $ ('.site-title a') .css ('couleur', to);
         });
     });
    }) (jQuery);

N'oubliez pas de charger ce script et de l'introduire dans functions.php du thème à l'aide du crochet customize_preview_init .


Panneau d'organisation et structure de blocs

Le personnalisateur WordPress prend en charge le regroupement des éléments de contrôle connexes dans différents panneaux et sections. Si votre thème a de nombreuses options de personnalisation, une structure organisationnelle raisonnable améliorera l'expérience utilisateur.

Par exemple, créez un panneau appelé "Paramètres d'accueil":

 $ wp_customalize-> add_panel ('homepage_settings', array (
    'title' => __ ('Home Parsets', 'mytheme'),,
    'Description' => 'Ajuster le contenu affiché sur la page d'accueil',
    'priority' => 160,
));

$ wp_customalize-> add_section ('slider_settings', array (
    'Title' => __ ('SIDAGRAM SIGNIFICATION DU CARROUSEL', 'mytheme'),
    'panneau' => 'homepage_settings',
));

De cette façon, vous pouvez gérer de manière centralisée les paramètres connexes dans le personnalisateur, qui semble plus organisé.


Fondamentalement, c'est tout. L'API WordPress Customizer possède de nombreuses fonctions, telles que la prise en charge de plusieurs types d'éléments de contrôle (case à cocher, radio, pages déroulantes, etc.), et peut également être personnalisée en conjonction avec les modifications du thème. Tant que vous maîtrisez la relation entre le réglage, le contrôle, la section et le panneau, plus un peu de compétences en prévisualisation en temps réel, vous pouvez créer des fonctions de personnalisation de thème très pratiques.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

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 !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Sujets chauds

Tutoriel PHP
1512
276
Comment mettre à jour les plugins à l'aide de WP-CLI Comment mettre à jour les plugins à l'aide de WP-CLI Jul 20, 2025 am 01:07 AM

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.

Comment gérer les travaux cron avec WP-CLI Comment gérer les travaux cron avec WP-CLI Jul 21, 2025 am 12:50 AM

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

Comment exclure les catégories de la boucle Comment exclure les catégories de la boucle Aug 07, 2025 am 08:45 AM

Il existe trois façons d'exclure des catégories spécifiques dans WordPress: utilisez query_posts (), utilisez le crochet pre_get_posts ou utilisez le plug-in. Tout d'abord, utilisez Query_Posts () pour modifier directement la requête de boucle principale dans le fichier de modèle, tel que Query_Posts (array ('catégorie__not_in' => array (3,5))), ce qui convient à un ajustement temporaire mais peut affecter la pagination; Deuxièmement, il est plus sûr d'ajouter des fonctions de fonctions.php via le crochet pre_get_posts. Par exemple, à l'exclusion de l'ID de classification spécifié lors de la jugement de la boucle principale de la page d'accueil, cela n'affectera pas la logique d'une autre page; Enfin, WPCate peut être utilisé

Comment utiliser le compositeur avec WordPress Comment utiliser le compositeur avec WordPress Jul 18, 2025 am 01:06 AM

L'utilisation du compositeur pour gérer les projets WordPress peut améliorer la gestion de la dépendance et l'efficacité du chargement automatique, en particulier pour les multi-plug-ins, les thèmes et le développement personnalisé. 1. Vous pouvez installer WordPress Core et Plug-ins via Johnpbloch / WordPress et Wpackagist; 2. Utilisez la configuration Autoload pour réaliser le chargement automatique des classes d'espace de noms; 3. Utilisez le compositeur pour introduire des bibliothèques tierces telles que Guzzle, et introduire manuellement le fournisseur / autoload.php; 4. Il est recommandé de placer le fournisseur dans le répertoire racine et d'ignorer Git Commits; 5. Effectuer soigneusement le composerpdate dans l'environnement de production. Après s'être adapté à ce processus, la maintenance du projet et

Comment migrer un site multisite vers un seul site Comment migrer un site multisite vers un seul site Jul 19, 2025 am 12:18 AM

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.

Comment échapper et désinfecter les données dans WordPress Comment échapper et désinfecter les données dans WordPress Jul 21, 2025 am 12:17 AM

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

Comment stocker les options de plugin dans WordPress Comment stocker les options de plugin dans WordPress Jul 27, 2025 am 12:29 AM

Dans WordPress Plug-In Development, la façon recommandée de stocker correctement les options de plug-in consiste à utiliser register_setting () combinée avec get_option () et update_option (). Tout d'abord, enregistrez l'élément de réglage via registre_setting ('section', 'option_name'); Deuxièmement, utilisez Update_option ('option_name', $ value) pour enregistrer les données lors de la soumission du formulaire; Encore une fois, utilisez get_option ('option_name', 'default_value') pour obtenir la valeur lors du chargement de la page; De plus, il est recommandé de fusionner plusieurs champs.

Comment créer des modèles de page personnalisés Comment créer des modèles de page personnalisés Jul 21, 2025 am 12:52 AM

La clé pour créer un modèle de page personnalisé est de comprendre le mécanisme de la plate-forme et de suivre les spécifications. 1. Premièrement, clarifiez le type de plate-forme et la structure du modèle. Par exemple, WordPress définit les modèles via des fichiers PHP avec des annotations spécifiques, Hugo place les modèles dans le répertoire de mise en page et React introduit les dispositions de manière composée. 2. Organisez des fichiers en fonction des règles de dénomination et de stockage, telles que la mise en place de modèles WordPress sur le répertoire racine du thème, Hugo utilise BaseOf.html comme modèle de base, et Jekyll fait référence au modèle via le champ de mise en page dans le dossier \ _layouts pour éviter les erreurs de chemin de chemin ou de configuration. 3. Utilisez l'héritage du modèle pour améliorer la réutilisabilité, définir le modèle de base et couvrir un contenu dans la page spécifique, réduire le code en double et maintenir

See all articles