En raison du fait que la plupart des sites développés par moi sont créés avec en utilisant cms. WordPress et doivent constamment traiter avec des tâches non triviales, j'ai décidé de partager avec vous l'expérience d'utilisation de divers plugins. Gratuit et payé, et je vais essayer d'adhérer à ce format: un article est un plugin. Je vais essayer de ne considérer que vraiment digne de développement, et ici dans la première histoire, je vous dirai sur Optiontree - Beautiful, à mon avis, solution pour créer une page avec des paramètres de site personnalisés.

Quels sont les paramètres personnalisés?

Les modèles WordPress (thèmes) que nous pouvons utiliser sur notre site Web vous permettent souvent de personnaliser certains options supplémentairesPar exemple, la couleur des en-têtes. Tous les thèmes payés que je devais utiliser sont de manière significative la fonctionnalité du groupe d'administration en raison de l'interface individuelle. Ci-dessous, je cite un exemple d'une telle extension, s'il vous plaît regarder.

Lorsqu'un site unique est créé (sous le caractère unique, je veux dire le site qui utilise un modèle conçu spécifiquement pour le client avec une conception et une fonctionnalité uniques), il est souvent nécessaire de créer la possibilité de modifier certains paramètres pour les administrateurs. Il est presque toujours nécessaire de donner la possibilité de changer le fichier de logo, des éléments de la page principale, des icônes réseaux sociaux, couleur de fond dans le "sous-sol" du site, etc. C'est une telle opportunité pour les développeurs avec un plugin OptionTree, qui peut être téléchargé gratuitement à partir du site Web officiel WordPress.

Après l'installation...

En installant et en activant le plugin, nous, conditionnellement, obtenez deux parties: une pour les développeurs de site, autres - pour les utilisateurs. La première pièce est disponible à partir de l'élément de menu Optiontree - "Paramètres", qui apparaît après l'activation du plug-in à gauche de la partie administrative de WordPress. Nous appuyez audacieusement et obtenez une interface unique pour former un ensemble de champs utilisateur, qui seront disponibles pour les utilisateurs de la deuxième partie du plug-in - "Apparence" - "Options de thème".

Options de thème UI Builder

Alors, comment créer des paramètres? Dans un contexte séparé, je garderai à l'esprit certains champs qui seront disponibles pour l'utilisateur, l'administrateur de site pour l'édition. UI Builder vous permet de créer des sections ou des partitions, appelons-le mieux, à l'intérieur de laquelle ces paramètres ou d'autres sont situés. Dans la figure ci-dessus, j'ai mené un exemple de paramètres constitué de deux sections: "Basic" et "Services". Ceux. Il est entendu que dans la section "Basic" sera placé certains réglages généraux Site et dans la section "Services" - Page de service spécifique. Voyons comment les sections recherchent l'utilisateur. Allez à «l'apparence» - «Options de thème» et - Hourra! Voici les paramètres de page!

Sur la gauche, nous voyons des partitions pouvant être commutées à droite - un ensemble de paramètres à l'intérieur de la section. Les sections sont créées à l'aide des options de thème UI Builder par la touche "Ajout de la section", et il est nécessaire de saisir son titre et un identifiant unique pour la section. Créons la section "Avancé" et ajoutons plusieurs paramètres.

Bien sûr, toutes les modifications sont corrigées en cliquant sur le bouton "Enregistrer les modifications". Maintenant, ajoutez le réglage de l'utilisateur, eh bien, par exemple la couleur des en-têtes. Cliquez sur "Ajouter un réglage" et voir quel ensemble de champs est disponible pour la sélection. Vous pouvez dire énorme! Sélectionnez "ColorPicker" et entrez un titre et un identifiant unique. Soyez prudent avec les identifiants, c'est sur l'identifiant unique, puis dans le code de modèle, nous pourrons accéder à la valeur de ce champ.

Voyons ce qui est maintenant disponible pour l'utilisateur à éditer: apparu nouvelle section et nouveau cadre, champ "en-têtes de couleur" que l'utilisateur de manière commode Peut-être maintenant éditer. Voir, je ne m'arrêterai pas sur liste complète Disponible pour créer des champs, il est bien entendu dans la documentation du plugin et sur le site officiel des développeurs. Si certains champs vous causeront d'intérêt - écrire, je mettrai à jour cette publication avec une description d'un ou plusieurs types de champs proposés. En principe, sa signification est claire par le nom du domaine, mais je répète, si quelque chose vous cause des difficultés, n'hésitez pas à contacter, je vais certainement expliquer.

Modifier le modèle

Maintenant, nous sommes avec vous, en tant que développeurs, vous devez modifier le modèle de site afin d'obtenir la valeur d'un champ entré ou sélectionné de l'utilisateur. Pour cela, une certaine caractéristique est responsable, par exemple pour notre sélection des couleurs des en-têtes que je cite ci-dessous. De plus, je note que les options d'utilisation de ce plugin peuvent être un énorme ensemble, dans l'exemple du fichier Header.php du modèle dans la section d'en-tête de la section d'en-tête, le style d'en-tête sera affiché, à savoir leur couleur, selon la valeur du champ H_Color.

Ceux. La fonction ot_get_option correspond à la valeur de champ ($ option_id, $ par défaut), dont les paramètres sont l'identifiant de champ que nous avec vous, en tant que développeurs, nous spécifions, dans notre cas, nous affichons la valeur du champ H_Color. Le deuxième paramètre de la fonction est le format de sortie, tombons dessus un peu plus. Par exemple, nous devons faire une option permettant à l'utilisateur de créer vos propres icônes définies pour les réseaux sociaux. Pour ce faire, nous utiliserons le champ d'élément de liste (ci-dessous).

Ce champ vous permet de créer un ensemble de champs répétés lorsque l'utilisateur peut ajouter les mêmes paramètres dans un paramètre. Un peu incompréhensible, je vais essayer d'expliquer puis montrer comment cela fonctionne. Dans notre cas, nous attribuons le champ d'élément de liste l'identifiant Social_icons et dans ce champ (Remarque, un autre bouton "Ajouter un paramètre") Ajouter deux champs: icônes de fichier et lien. Le type du premier champ sera téléchargé, le type de la seconde est le texte. Le premier identifiant de terrain sera icon_Image, le deuxième identifiant est icon_link.

Que va obtenir l'utilisateur? Il peut maintenant ajouter plusieurs icônes de réseau social en cliquant sur le bouton "Ajouter un nouveau" de la page Paramètres. De plus, faites attention, le nombre de ces paramètres est maintenant illimité et dépend uniquement de l'utilisateur.

Pour afficher maintenant dans le gabarit un tel champ complexe, vous devez utiliser un format de sortie légèrement différent, ci-dessous - un morceau de code pour PHP pour un tel cas. Les commentaires vont essayer de clarifier ce qui se passe.

"; // Affiche le champ dans le champ)))?\u003e

En garde à vue

Les types de champs que vous pouvez utiliser sont vraiment beaucoup, les développeurs du plug-in essayé à la renommée: c'est la sélection de la date, le choix de la couleur, vous pouvez créer des galeries d'image, des commutateurs, etc. Combinant de tels champs et les retirer de manière compétente dans le modèle, le développeur de site fournira à l'utilisateur une interface pratique pour modifier certains paramètres. Je note que dans l'un des derniers sites, j'ai dû créer plus de 50 champs différents afin que les clients puissent changer les couleurs sur le site les en-têtes, les textes de la page principale, modifier le nombre d'informations affichées sur la page, modifier les contacts et Carte de voyage et beaucoup d'autres.

Créer votre propre sujet pour WordPress est un excellent moyen de donner votre blog ou un autre site basé sur WordPress, une vue individuelle. Cependant, même le plus attrayant et beau thème Il ne sera pas parfaitement adapté si vous devez grimper "sous le capot" et éditer son code PHP et HTML chaque fois que vous avez besoin de modifier quelque peu ses aspects. Surtout si cela ne vous doit pas vous faire, et votre client. Heureusement, la création de la page Paramètres de votre sujet dans WordPress n'est pas si compliquée et, après avoir lu ce manuel, vous pouvez créer votre propre page de paramètres sans aucun travail.

Étape 1. Nous découvrons quels paramètres nous avons besoin.

Tout commence avec les besoins: Pour créer une page claire et utile des paramètres, vous devez définir ce que vous souhaitez modifier, laissant tout le reste inchangé. Chaque nouveau paramètre que vous ajoutez au menu Administrateur augmente la complexité. interface utilisateur - Vous risquez de dessiner le sujet difficile à utiliser. C'est pourquoi il est préférable de faire preuve de prudence et de sélectionner soigneusement ces options qui changent souvent, jetant les paramètres, modifiés une fois, ce qui peut être facilement effectué en ajustant les fichiers thématiques concernés.

Une autre question à garder à l'esprit: "Qui va changer ces paramètres?" Si l'utilisateur connaît bien que WordPress et PHP, il serait raisonnable de s'attendre à ce qu'il puisse implémenter le code Google Analytics. Au sujet du sujet, mais vous ne devez pas y avoir besoin d'un graphiste, sans parler des auteurs qui n'ont pas besoin de connaître HTML ni CSS.

Les idées générales pour les composants qui doivent être prises dans les paramètres de sujet sont les suivantes:

• Code de suivi Google Analytics
• Le nombre de barres d'espace et leur emplacement (gauche, droite, peut-être même en haut et en bas)
• Largeur des pages
• Contenu dans futur
• Options pour les fonctionnalités spécifiques au thème, telles que, par exemple, des formats teaser.

Une fois que vous avez collecté une liste des fonctionnalités de thème que vous souhaitez gérer via la page Paramètres, vous êtes pratiquement prêt à démarrer leur mise en œuvre. Avant d'aller plus loin et créez votre propre page de paramètres, vous pouvez enregistrer votre temps en vous assurant que WordPress n'a aucune fonction de ce type disponible. Widgets, menus arbitraires, sagrônes arbitraires et images pour hadera - tout cela outils utiles Afin de rendre votre sujet personnalisable, avec beaucoup moins d'effort nécessaire pour créer votre paramètres propres. TRUE, tous ces composants sont le sujet pour un autre manuel.

Paramètres créés dans ce manuel

Pour ce manuel de formation, j'ai pris la page principale composée d'une grille avec un nombre différent de documents populaires pouvant être sélectionnés, modifiés et réorganisés par l'administrateur à l'aide d'une page arbitraire des paramètres.

Dans l'éditeur, les éléments de la page principale seront présentés sous la forme d'une liste auxquels vous pouvez ajouter de nouveaux éléments à l'aide de JavaScript et JQuery.

J'aime avoir un aperçu de la page de l'administrateur dans la console WordPress, lorsque j'écris HTML, donc je commence généralement par le fait que je lie la page des paramètres à WordPress, puis ne tourne que du contenu du contenu de la page. C'est pourquoi notre prochaine étape sera la création page blanche Paramètres et le reculez vers WordPress.

Étape 2. Pattez les paramètres de page sur WordPress.

La création de la page Paramètres commence par la fonction d'écriture qui définit le menu et le rend à l'action de Admin_menu. Il est indiqué WordPress que vous devez appeler une fonction lors de la création d'un menu, de sorte que tout soit terminé à l'heure appropriée. Ajoutez le code suivant au fichier Fonctions.php de votre sujet:

Fonction setup_theme_admin_menus () (// Nous écrirons très bientôt la fonction de contenu.) // Elle dit WP, ce que vous devez appeler la fonction "setup_theme_admin_menus" // Lorsque vous devez créer une page de menu. Add_action ("admin_menu", "setup_theme_admin_menus");

Nous allons maintenant placer le code pour créer la page Paramètres à la fonction que nous venons d'écrire:

Lors de la création de la page Paramètres, vous avez le choix - ajoutez une page en tant que sous-menu à l'un des groupes de paramètres existants ou créez votre propre menu de niveau supérieur.

L'ajout d'un sous-menu est effectué à l'aide de la fonction add_submenu_page:

• $ Parent_slug est un identifiant unique pour le menu de niveau supérieur auquel le sous-menu sera ajouté.
• $ Page_title Ajouté Titre de la page.
• Titre de $ menu_title affiché dans le menu (souvent courte version $ page_title)
• Capacité de $ est les droits d'accès minimum requis par l'utilisateur pour accéder à ce menu.
• $ Menu_slug est un identifiant unique pour le menu créé.
• $ FONCTION - Nom de la fonction appelée Traitement (et représentation) de cette page de menu.

Si vous souhaitez ajouter une page de menu sous forme de sous-menu au groupe WordPress déjà existant, vous pouvez utiliser les valeurs suivantes comme paramètre $ parent_slug:

• Dashboard: index.php.
• Posts: edit.php.
• Media: upload.php.
• Liens: link-manager.php
• Pages: edit.php? Post_type \u003d page
• Commentaires: Modifier-commentaires.php
• Apparence: themes.php.
• Plugins: plugins.php.
• Utilisateurs: utilisateurs.php.
• Outils: Outils.php.
• Paramètres: options-general.php

Apparence Group est un bon candidat à la publication de notre page Paramètres. Restons dessus et essayons de créer notre première page de paramètres. Ici version mise à jour Notre fonction d'installation du menu:

Fonction setup_theme_admin_menus () (add_submenu_page ("themes.php", "éléments de la page avant", "éléments de devant-page", "theme_front_page_setings");)

Nous devons toujours créer une fonction theme_front_page_setting pour fonctionner avec les paramètres. Voici le plus facile de sa forme:

Fonction Theme_front_Page_Settings () (Echo "Bonjour, Monde!";)

C'est ainsi que cela ressemblera à l'action:

Nous devons également vérifier si un utilisateur dispose des droits nécessaires pour modifier la page Paramètres. Pour ce faire, ajoutez le code suivant au tout début de la fonction de page Paramètres:

// Vérifiez que l'utilisateur peut mettre à jour si les paramètres ("gérer_options")) (wp_die ("Vous n'avez pas suffisamment d'autorisations pour accéder à cette page."););

Maintenant, si un utilisateur qui ne peut pas être géré par la page Paramètres, celle-ci verra le message habituel: "Vous n'avez pas assez de droits pour accéder à cette page."

Si vous avez besoin de nombreuses pages de paramètres pour votre sujet, vous pouvez confondre l'utilisateur, car il devra les rechercher dans le menu. Dans ce cas, la création de votre propre groupe de paramètres simplifiera considérablement la recherche de pages dans le menu.

Pour ajouter votre propre groupe de paramètres, vous devez créer une page de menu de niveau supérieur et connecter les pages du sous-menu avec elle. Ici une nouvelle version Notre fonction pour créer un menu. La fonctionnalité Add_Menu_Page crée un menu de niveau supérieur par analogie avec add_submenu_page, à l'exception du seul qu'il n'a pas besoin de $ parent_slug.

Fonction setup_theme_admin_menus () (add_menu_page ("Paramètres de thème", "Exemple thème", "Gestion_OPTIONS", "TUT_THEMES_SETTENS", "THINE_SETTES_PAGE"); add_submenu_page ("TUT_THEME_SETTENS", "ELLES DE PAGE AVANT", "GESTION_OPTIONS" , "Eléments de première page", "theme_front_page_settings");) // Nous devons ajouter la fonction de fonction de traitement du menu de haut niveau Theme_Settings_page () (écho "Page des paramètres";)

Si vous testez le code et mettez à jour la console WordPress, vous verrez un nouveau groupe de menu présenté au bas de la liste de menus.

Cependant, bien que cela ne soit pas entièrement vrai. En cliquant sur l'élément de menu supérieur, vous ne figurez pas sur la page de menu de la page d'accueil, ainsi que sur l'exemple de page de thème. Cela ne coïncide pas de la manière dont l'autre menu WordPress fonctionne, car vous faisons une autre chose: changer l'attribut $ MENU_SLUG dans l'appel add_submenu_page à la même valeur que dans le menu de niveau supérieur, nous pouvons associer deux menus afin que le choix de l'élément supérieur Peut se connecter à la LED à l'apparition du menu de la page d'accueil.

Fonction setup_theme_admin_menus () (add_menu_page ("Paramètres de thème", "Exemple thème", "Gestion_OPTIONS", "TUT_THEMES_SETTENS", "THINE_SETTES_PAGE"); add_submenu_page ("TUT_THEME_SETTENS", "ELLES DE PAGE AVANT", "GESTION_OPTIONS" "Tut_theme_Settings", "theme_front_page_settings");) Fonction Theme_Settings_Page () ()

Ça a l'air mieux. Si vous souhaitez toujours améliorer la présentation de votre groupe de menu, vous pouvez utiliser deux champs supplémentaires Dans la fonction add_menu_page. Il suffit d'ajouter des valeurs après le nom de la fonction dans la méthode appel:

• $ icon_url - Spécifie les icônes d'URL pour le menu de niveau supérieur.
• $ Position - Détermine la position de votre groupe de menu dans la liste des menus. Que plus de valeur, plus la position dans le menu est basse.

Étape 3. Créez un formulaire HTML pour les pages de paramètres.

Maintenant que nous avons créé la page Paramètres, et il est affiché dans le menu latéral, il est temps de commencer à ajouter du contenu. Revenons à la liste des paramètres et nous concevons la page pour les éditer.

Dans ce manuel, nous avons besoin d'un champ pour déterminer combien d'éléments doivent être affichés en une seule ligne et la liste de déterminer les éléments existants. Commençons par un plus simple: Créons une zone de texte pour le nombre d'éléments d'une ligne. Modifiez la fonction de la page Paramètres:

Fonction theme_front_page_setstings () (?\u003e

Lorsque vous redémarrez la page Paramètres, vous verrez le premier champ:

Pour que la page Paramètres respecte l'expérience d'interaction WordPress existante, et votre plug-in examinait professionnellement, vous devez utiliser des classes et des styles CSS utilisés dans WordPress pour créer des pages de paramètres de base. Un moyen merveilleux de faire cela consiste à aller à la page Paramètres et à analyser sa source.

La partie la plus importante de notre travail consiste à envelopper la page Paramètres dans DIV avec la classe Wrap. Dans cet élément div, vous pouvez utiliser de nombreux styles prédéfinis pour les en-têtes, les boutons et les éléments de forme. Stylisez le titre de nos paramètres de page:

• Nous allons créer H2 pour la page (vous pouvez utiliser des titres de H2 en H6).
• Nous allons afficher l'icône de la page Paramètres avant la position (vous pouvez utiliser les icônes WordPress prédéfinies à l'aide de la fonction Screen_icon. La fonction prend l'un des paramètres suivants: Index, Modifier, Télécharger, Link-Manager, Pages, Commentaires, Thèmes, Plugins, Utilisateurs , Outils ou options générales).
• Nous allons placer l'élément d'entrée sous la forme et la table avec la classe de formulaire.

Fonction theme_front_page_setstings () (?\u003e

Éléments de la page d'accueil.

Nombre d'éléments sur une ligne:

Pour ce faire, nous utilisons JQuery, car JQuery est un peu plus simple que JavaScript lors de la création de quelque chose à partir de zéro, en plus de cette bibliothèque avec WordPress. Si vous avez déjà utilisé JQuery avant, vous devrez juste prendre en compte ce qui suit: la notation du $ que vous utilisez habituellement à JQuery ne fonctionne pas dans WordPress - vous devez utiliser tout le mot jQuery au lieu de cela.

Premièrement, nous créerons un élément pour modifier les paramètres d'un bloc de la page principale, qui servira de modèle pour les éléments ajoutés par l'utilisateur. Ajoutez ce code entre la balise de la table de fermeture et la balise de fermeture du formulaire.

Après sélectionnée: titre de l'article; ?\u003e. Supprimer.

Nous verrons maintenant ce qui suit:

Maintenant que nous avons un modèle, il est temps de le masquer et de créer JavaScript pour utiliser le modèle lors de la création de nouvelles lignes d'enregistrements populaires. Définissez le style de l'élément LI dans l'affichage: Aucun;

Ensuite, nous créerons une liste pour la correction des éléments de la page principale lorsque vous les ajoutez et le lien sur lequel l'utilisateur cliquera sur l'ajout de nouveaux éléments. J'ai apporté entièrement tout le code HTML afin que vous puissiez voir où les changements ont eu lieu:

Éléments de la page d'accueil.

Nombre d'éléments sur une ligne:

Postes en vedette.

Ajouter la poste en vedette.

Après sélectionnée: !}titre de l'article; ?\u003e. Supprimer.

Pour un vrai sujet, une bonne pratique consiste à ajouter tout le code JS à un fichier distinct, cependant, pour simplifier ce manuel, j'ai décidé d'ajouter JS à la même fonction avec HTML, immédiatement avant d'envelopper DIV:

Le code JS ci-dessus crée une fonction appelée lorsque l'utilisateur clique sur le lien avec ID \u003d Add-Featured-Post. Cette fonctionnalité close le modèle de liste que nous avons créé précédemment et met à jour ses champs dans lesquels un identifiant et des noms uniques sont maintenant contenus. Ainsi, tous seront envoyés correctement avec le formulaire lorsque l'utilisateur clique sur Soumettre. La variable ElementCounter contient l'identifiant suivant à ajouter. Il est également stocké dans un champ caché de sorte que lors de l'envoi d'un formulaire, nous savions combien d'articles seront sur la page principale.

Toutefois, lorsque vous cliquez sur le bouton Supprimer, vous verrez que rien ne s'est passé. Ajoutons une fonctionnalité pour supprimer des éléments de la liste.

Remenue de la fonction (élément) (élément) .Retirer (););)

Nous devons également appeler une fonction. Ajoutez le code suivant directement avant d'augmenter l'élévateur:

Var removelink \u003d jQuery ("A", Elementrow) .Cliquez sur (Fonction (); renvoyer false;));

Avant de passer à la préservation de la forme, nous devons faire une autre chose. Nous utilisons UI.Sortable JQuery-Plug-in pour établir les éléments de la page principale triée en les faisant glisser sur la page. Pour activer la fonctionnalité de tri, nous devons connecter le fichier JS correspondant (qui est également livré avec WordPress). Vous pouvez le faire en utilisant la ligne suivante du code à la fin de la fin des fonctions.php:

Si (is_admin ()) (wp_enqueue_script ("jquery-ui-triable"););)

Ensuite, nous ajoutons le prochain JS immédiatement avant (ou après) la fonctionnalité JQuery ("# \u200b\u200bAjouter-latrat-poste"). Cliquez sur Défini ci-dessus:

JQuery ("# \u200b\u200bfiguri-poste-liste"). Soyable (STOP: fonction (événement, UI) (var i \u003d 0; jQuery ("Li", cette). Fonction () (Ceci, i ); I ++;)); ElementCounter \u003d i; jQuery ("entrée"). Val (ElementCounter);)));

Ce fragment rend la liste telle que triée et ajoute un événement appelé lorsque l'utilisateur termine le tri. Le gestionnaire d'événements met à jour l'ensemble de l'identifiant pour les éléments afin que la nouvelle commande soit acceptée tout en maintenant le formulaire (il devient clair lorsque nous réalisons la sauvegarde). Lors de la rédaction d'un guichet, j'ai noté que le code d'identification du contenu de la gabarit était dupliqué à deux endroits, donc je l'ai donc restructuré à une fonction placée immédiatement avant la ligne avec jQuery (document) .Readady ():

Fonction STEEMENTID (ELEMENT, ID) (VAR NEWID \u003d "AVANT-PAGE-ELEMENT-ELEMENT-" + ID; JQUERY (ELEMENT) (ELEMENT) .ATTR ("ID", NEWID); VAR INPUTFIELD \u003d JQUERY ("SELECT", ELEMENT); INTERPORTFIELD. Extrart ("nom", "élément-pad-id-" + id); varbelfield \u003d jQuery ("étiquette", élément); Labelfield.attr ("pour", "Element-ID-ID-" + ID); )

Maintenant, lorsque vous ajoutez des éléments, leur tri et la suppression de fonctionnement, il est temps de sauvegarder des données. Dernier code à barres: ajoutez un bouton d'envoi immédiatement avant la fermeture du formulaire:

Étape 4. Nous enregistrons le formulaire.

La page de paramètre a l'air géniale, mais il manque quelque chose: cela ne fait rien. Il est temps d'enregistrer certaines données. WordPress fournit un système simple de sauvegarde des paramètres du thème et des plug-ins - quelques clés de la base de données en tant que fonction Get_Option et Update_Option. Les données stockées par ces fonctions peuvent être aussi simples que les valeurs numériques, ou si complexes car les tableaux sont incorporés plusieurs fois.

Le traitement de formulaire est effectué par la même fonction que le rendu du formulaire. Pour comprendre si le formulaire a été envoyé ou non, nous ajouterons un champ caché, mettre à jour_settings, pour former, puis vérifier si ce champ a été envoyé ou non, dans la fonction de traitement:

Si (Isset ($ _ Post ["update_settings"])) (// gagner)

Le champ caché, marchant avec la forme, est comme suit:

Gardons un réglage simple, Num_elements. Nous supprimons tous les caractères supplémentaires pour vous assurer que l'utilisateur ne transmet pas les logiciels malveillants, puis enregistrez la valeur sur le stockage de paramètres WordPress. Lorsque vous utilisez update_option, nous n'avons pas à craindre de savoir si la configuration a déjà été enregistrée ou non.

$ num_elements \u003d esc_attr ($ _ post ["Num_elements"]); Update_option ("theme_name_num_elements", $ num_elements);

Avant de sauvegarder la liste, ajoutons la valeur actuelle des num_elements au formulaire des paramètres afin que l'utilisateur envoie toujours quelle valeur elle est entrée avant de sélectionner le paramètre suivant. Cela nous aidera également à comprendre quelle valeur a été enregistrée.

!}

Et au cas où nous ne sauverions rien, nous devons obtenir la valeur actuelle des options; Ajoutons le code suivant qui sera exécuté lorsque le formulaire n'a pas été envoyé.

$ num_elements \u003d get_option ("theme_name_num_elements");

Lorsque le formulaire est enregistré, il est important de notifier à l'utilisateur que tout s'est passé avec succès. Créons une notification simple, des paramètres enregistrés, immédiatement après Update_Option:

?>

Enregistrons maintenant les éléments de la page principale. Le plus grand identifiant de valeur pour les éléments de page principale est transmis comme un élément-max-id, de sorte que nous puissions obtenir cette valeur et passer à travers tous les éléments à cet identifiant dans le cycle, tout en maintenant leurs données dans un tableau correct. :

$ Fronte_page_elements \u003d tableau (); $ max_id \u003d esc_attr ($ _ POST ["ELEMENT-MAX-ID"]); pour ($ i \u003d 0; $ i< $max_id; $i ++) { $field_name = "element-page-id-" . $i; if (isset($_POST[$field_name])) { $front_page_elements = esc_attr($_POST[$field_name]); } } update_option("theme_name_front_page_elements", $front_page_elements);

Nous enregistrons ici les données, cependant, nous devons présenter les valeurs de la page Paramètres. Faisons la même chose que nous avons faite avec les options Num_elements sur le terrain - Chargez les options standard au tout début de la fonction:

$ fronte_page_elements \u003d get_option ("theme_name_front_frage_éléments");

Maintenant, apportez des éléments existants lors de l'exécution d'un formulaire:

Nous devons également définir la valeur initiale de la variable ElementCounter utilisé dans JS, à l'aide de la valeur initiale du champ masqué en PHP et de la lire lorsque vous initialisez la variable JS:

Voici une partie JS:

Var ElementCounter \u003d jQuery ("entrée"). Val ();

Étape 5. Utilisez les paramètres du sujet.

Sauver et épargner des valeurs de paramètre dans la zone de l'administrateur est une grande action, mais en réalité, nous devons comprendre comment changer notre sujet, nous allons donc maintenant obtenir nos paramètres et les appliquer dans le sujet.

Cette section change affectera index.php. Tout d'abord, nous lisons les options variables:

Ensuite, passez de manière cyclique les éléments de la liste $, regroupant les éléments d'une chaîne avec un nombre de blocs $ NUM_ELS dans chaque ligne.

Et ensuite, en utilisant des données stockées pour chaque élément, nous remplissons une partie des éléments rendu:

Avec plusieurs éléments, la page aura le formulaire suivant:

Toujours moche. Les enregistrements n'ont pas de miniature et il n'y a pas de stylisation. Pour faire leur genre de meilleur, ajoutons un soutien miniature pour commencer. Cela se fait à l'aide d'une nouvelle fonctionnalité qui enregistre les miniatures immédiatement après le chargement du sujet.

Fonction setup_theme_features () (if_theme_exists ("add_theme_support")) ("post-thumbnails");) si (Function_exists ("add_image_size")) (add_image_size ("Tutoriel-Taille de la taille", 200, 200, TRUE);));); add_action ("après_setup_theme", "setup_theme_features");

La fonctionnalité Setup_theme_Features comprend des miniatures d'enregistrements utilisant la fonction add_theme_support de sorte que WordPress puisse ajouter cette fonctionnalité à la page de stockage d'écriture. Sur la page Record, nous pouvons maintenant ajouter une miniature en sélectionnant Utiliser comme image en vedette.

La fonction définit également la nouvelle taille d'image, la taille du tutoriel-thumb, qui est utilisée lors de la réception d'une vignette dans le code de traitement.

Après avoir sélectionné Miniatures, nous enregistrons les modifications et redémarrons la page principale. Maintenant, elle a l'air plus intéressante:

Enfin, ajoutons des styles à style.CSS afin que les miniatures et les enregistrements sur la page principale semblent plus attrayants:

Front-page-ollement-Row (débordement: auto;) .front-page-élément (flotteur: gauche; marge: 10px 10px 10px 10px; Rembourrage: 0px; Largeur: 200px; Hauteur: 200px; Largeur : 200px; hauteur: 200px; arrière-plan: #e; position: relatif;) .Thumbnail-image .title (position: absolu; basbottom: 20px; affichage: bloc; Couleur: # 000; Couleur: #FFF; Rembourrage: 10px; Font-famille: Arial; Taille de la police: 12PT; Texte-Décoration: Aucun;)

Conclusion

Nous avons créé la page Paramètres pour un thème arbitraire. Bien sûr, le sujet n'est pas terminé; J'espère que ce manuel vous aidera à créer vos propres paramètres pour modifier les éléments de votre nouveau sujet WP-Sujet.

Après avoir acheté un domaine et l'hébergement commandé, il est temps de créer des paramètres WordPress. Le blog ne peut pas être utilisé sous la forme dans laquelle il est maintenant. Vous devez configurer correctement les liens permanents, sélectionner et installer le sujet (conception), connecter tous les plugins nécessaires.

Tous ces paramètres sont nécessaires pour que le blog ait un look soigné pour les futurs visiteurs et des robots de recherche. Qu'est-ce qui aura un effet positif sur la promotion de la recherche ultérieure.

Vous devez également déterminer le menu de la console. La console s'appelle également "admin". Vous pouvez remarquer qu'il y a plusieurs paramètres supplémentaires dans l'administrateur.

Pour entrer dans le blog Adved, vous devez aller à SITE.RU/WP-ADMIN/. Au lieu de SITE.RU, remplacez le nom de votre domaine.

Sur la page principale, il existe des informations de base sur l'ensemble du blog. Sur cette page, vous pouvez ajouter un article pour produire les paramètres de base du sujet ou voir les derniers commentaires apportés à l'enregistrement.

2. Mises à jour

Vous pouvez regarder la version actuelle de WordPress dans les mises à jour et ne nécessite pas de nouvelles mises à jour. Dès que les développeurs publient une mise à jour, vous le verrez dans votre administrateur.

N'oubliez pas de mettre à jour si vous êtes interrogé à ce sujet. Cela vous protégera d'essayer de pirater les intrus.

3. Records. Tous les messages

Dans ce menu, vous pouvez voir tous les enregistrements effectués pour tous les temps. Vous pouvez également voir combien de commentaires ont marqué chaque article et qui s'adapte.

Déplacez la souris sur l'article et apparaîtrez avec un sous-menu avec lequel vous pouvez modifier, aller ou supprimer un article.

Si vous n'avez rien changé après l'installation de WordPress, vous aurez le premier enregistrement de test. Souris sur elle et retirez-la. Si vous supprimez par erreur l'enregistrement, il peut toujours être restauré du panier. Si les enregistrements ne sont plus nécessaires, n'oubliez pas de nettoyer le panier.

3.1. Ajouter un nouveau

Avant de commencer à publier des articles d'article, vous devez effectuer plusieurs paramètres très importants. Faites-les aux paragraphes 8.1 et 11.3. Après avoir mis en place des liens permanents ou comme ils sont également appelés (CNC), vous pouvez procéder à des articles publiés.

Le haut est écrit en rubrique. Ce ne devrait pas être trop long et pas trop court. Après avoir entré un en-tête en dessous, un lien permanent apparaîtra. Elle aura ce type si vous mettez un plugin spécial qui figure au paragraphe 8.1.

Ci-dessous, vous serez des outils avec lesquels vous pouvez effectuer du texte, ajouter des images et mettre des liens actifs. Si vous connaissez le mot, il n'y aura aucun problème avec cela.

Si vous rencontrez d'abord un tel éditeur, voir les leçons vidéo sur YouTube sur la manière d'ajouter un article sur le blog WordPress. Une fois que l'article est ajouté et formaté, sélectionnez ou créez une rubrique pour cela. Un article dans une rubrique, rappelez-vous!

Charger miniature, c'est une petite image de votre article. Ces images supportent la plupart des sujets. Une fois que tout est prêt à cliquer sur "Publier". Maintenant, allez à la page principale de votre blog et voyez à quoi ressemble votre entrée.

Travailler avec des images

Lorsque vous ajoutez des photos, essayez de toujours prescrire l'attribut «alt». Si vous utilisez vos photos, cela vous permettra d'attirer le trafic des moteurs de recherche de la section "Images".

Il y a suffisamment de 2-3 mots sur ce qui est représenté dans la photo elle-même. Si vous ne savez pas quoi écrire, n'écrivez rien de mieux.

La photo peut être alignée au centre ou autour du bord. Si vous avez une image importante et que vous voulez, lorsqu'il est pressé, il s'ouvre en taille réelle, sélectionnez "Lien vers le fichier multimédia". Si vous avez besoin de rediriger vers un autre site, utilisez une URL arbitraire.

Dans la taille de réglage, vous pouvez définir la taille souhaitée. N'oubliez pas que la largeur du blog lui-même dépasse rarement 1000 pixels de largeur. Je recommande de mettre complet.

Regardez toutes vos photos avant de télécharger sur le nom du blog Lettres latins, par exemple, Moy-Dom.jpg.

3.2. Rubrique

Ce menu est conçu pour créer des colonnes. Par exemple, vous avez un blog sur les recettes culinaires. Les catégories peuvent être comme:

• Salades.
• Collations
• Breuvages

Écrivez votre en-tête sur le nom. Dans le raccourci, écrivez le nom de la même catégorie, mais seulement des lettres latines. Vous pouvez prescrire cyrillique, mais je recommande de faire à titre d'exemple.

Les titres peuvent être une sous-titulaire. Par exemple, les "salades" peuvent inclure de telles sous-titres: "salades avec poulet", "salades simples", "recettes de salades pour l'hiver" ITD. Les sous-titres peuvent être créés dans le menu "Parent".

Écrivez 2-3 offres décrivant votre titre. Positionnez l'essence même. Assurez-vous de le rendre unique. Cela signifie que vous devez trouver cette description et ne pas la copier. Une fois que tous les champs sont remplis, vous pouvez cliquer sur le bouton "Ajouter une nouvelle catégorie".

3.3. Mots clés

Les balises sont nécessaires pour rendre un grand site plus pratique pour l'utilisateur. Si vous ne prévoyez pas de créer un grand portail avec beaucoup de rubriques et une sous-position, les étiquettes préfurent mieux ne pas utiliser.

4. Fichiers multimédia

Dans cette section, vous trouverez toutes les photos qui ont déjà été téléchargées sur le blog. Vous pouvez également ajouter une nouvelle photo à votre bibliothèque. Ce menu n'est pratiquement pas nécessaire pour nous, comme vous pouvez ajouter une photo à votre article à la section 3.1.

5. Pages

Ne confondez pas cette section avec des enregistrements! Ces pages sont nécessaires principalement pour information. Par exemple, mon blog a des pages séparées sur l'auteur et sur le blog. Vous pouvez créer une page avec des contacts de votre organisation ou de toute autre information.

Maintenant, vous avez une page de test. Regardez-le, essayez d'éditer puis supprimez-le.

Dans cette section, vous verrez toutes les pages établies. Si vous devez en créer un nouveau, allez simplement dans le menu "Ajouter un nouveau" et utilisez l'éditeur comme dans le menu 3.1.

6. Commentaires

Ici, vous pouvez voir tous les commentaires faits par vos utilisateurs. Commentaires que vous pouvez interdire, approuver et modifier.

7. Apparence. Les sujets

Par défaut, WordPress fournit 3 sujets. Par design, ils sont si et rarement qui les utilisent. Les trois sujets que vous pouvez voir dans ce menu. Sur Internet, il existe un grand nombre de sites proposant des modèles gratuits de téléchargement.

Je recommande de mettre des sujets à partir du magasin WordPress officiel. Premièrement, ils sont libres et d'autre part, il n'y a pas de code malveillant ou de virus. Pour installer un nouveau modèle, cliquez simplement sur "Ajouter un nouveau sujet".

Vous tomberez dans une section où vous pouvez choisir le sujet que vous aimez. Déplacez le curseur sur n'importe quel modèle et voyez comment il ressemblera. Vous pouvez choisir le sujet en réglant le filtre des caractéristiques dont vous avez besoin. Une fois le choix effectué, cliquez sur Installer et activer.

N'ayez pas peur de mettre des sujets différents. Il est très difficile de trouver celui qui aimera. Tous les thèmes inutiles, vous pouvez toujours supprimer à tout moment.

Les modèles gratuits ont des inconvénients. Ils sont mal optimisés pour les moteurs de recherche.

Ou vous pouvez immédiatement acheter un modèle peu coûteux pour votre projet, qui permettra d'économiser de toutes les erreurs techniques. Installez le sujet, configuré une fois sous vous-même et utilisez.

Si vous avez des questions sur la mise en place du sujet, vous aiderez toujours le service de support russophone gratuitement. Je recommande de faire un choix de ces trois modèles.

Aussi dans cette section, vous pouvez toujours modifier le mot de passe et le courrier électronique.

10. Outils

Cette section peut être manquante en toute sécurité, il n'y a rien de plus intéressant ici. Lors de l'ajout de nouveaux plugins, certains d'entre eux seront ici.

11. Paramètres. Général

Le menu le plus important pour une raison quelconque est à la toute fin. Avant de commencer à publier des articles et créez de nouvelles pages, vous devez effectuer des paramètres.

Écrivez le nom de votre site. La description doit être courte et compréhensible. Il doit contenir toute l'essence de votre niche. Description rapide peuvent être ignorées. Si vous avez quelque chose à écrire, remplissez-vous. Vous pouvez écrire du slogan.

Adresse WordPress et adresse du site. Ici, vous pouvez spécifier comment votre blog sera affiché. Par exemple, avec www ou sans. Https ou http. C'est un paramètre très important, remplissez-le nécessairement.

Si vous avez enregistré un domaine et un hébergement à mon avis, vous devez disposer d'un certificat du protocole HTTPS protégé. Donc, définissez les paramètres comme dans l'image. Sélectionnez le format de date et d'heure dont vous avez besoin. Menu "Écriture" Skip.

11.1. En train de lire

11.2. Discussion

Dans cette section, vous pouvez configurer votre liste noire. Si vous voyez que quelqu'un vous laisse spam, vous pouvez le mettre sur la liste noire. Il suffit d'ajouter une adresse IP qui peut être vue dans les commentaires ou de rendre votre liste de mots d'arrêt.

Par exemple, si vous ajoutez des mots: www, http: //, télécharger, gratuit, puis ces commentaires ne seront pas automatiques de modération. Les paramètres de fichier multimédia peuvent être ignorés en toute sécurité.

11.3. Liens permanents

L'un des paramètres WordPress les plus importants est ici. Cela établit des liens permanents. Mettez une tique sur «arbitrairement» et insérez le modèle ici.

/%Category%/%postname%.html

Yandex métrique

Pour savoir combien de personnes assistent au blog, il est nécessaire d'installer un compteur spécial. Ce compteur montrera des informations détaillées sur l'utilisateur. Je recommande d'installer Yandex Metric.

Si vous n'avez pas de courrier de Yandex, inscrivez-le maintenant, cela prendra quelques minutes.

Après avoir eu l'intérieur, cliquez sur "Ajouter un compteur".

Ensuite, remplissez: le nom du compteur et l'adresse du site, cochez la case "J'accepte la condition", créez un compteur. Vérifiez sur le Webmobile et cliquez sur Enregistrer. Ci-dessous, vous verrez le code du compteur à installer.

Copiez-le et accédez à la page Admin de votre blog, comme indiqué dans l'image ci-dessous.

Trouvez sur la colonne de droite et cliquez sur l'en-tête «Header.php)». Insérez le code copié dans un espace libre. Il vaut mieux faire ça où il se termine.

Cliquez sur Mettre à jour le fichier. Retour à la liste des compteurs en cliquant sur "Compteurs".

Après quelques minutes, le compteur sera mis à jour et allume le vert. Si cela ne s'est pas produit, laissez le compte et revenez.

Prêt! Après un certain temps, le compteur enregistrera tous les visiteurs sur votre blog. Cliquez sur le nom et vous entrerez dans le menu principal.

Si vous souhaitez faire face à toutes les capacités de cet outil, faites-vous référence au manuel.

robots.txt

Si vous ne savez pas ce que Robots.txt est et pour ce qu'il est nécessaire, vous pouvez lire dans l'aide Yandex. Pour ne pas souffrir et ne pas le composer vous-même, vous pouvez simplement le télécharger.

N'oubliez pas de réparer votre site en remplaçant SITE.RU et SITE.RU/SITEMAP.XML par vous-même. Aussi sucer http ou https. Maintenant, il doit être téléchargé sur le serveur dans le dossier racine où votre blog est installé.

Si vous utilisez l'hébergement "en cours d'exécution", que je recommande, vous pouvez télécharger ce fichier comme suit. Allez à l'hébergement et cliquez sur Gestionnaire de fichiers.

Trouvez le dossier avec votre site et allez-y en cliquant sur 2 fois. Vous devez voir ceci:

Allez dans ce dossier en appuyant sur 2 fois. Maintenant, vous appuyez sur le dossier racine de votre site. Maintenant, cliquez sur "Charger des fichiers" et "Parcourir ..."

Sélectionnez un fichier et cliquez sur le bouton de téléchargement. Le fichier est chargé sur le site.

Maintenant, vous pouvez vérifier. Entrez B. ligne locale Une telle demande: https://site.ru/robots.txt pour placer site.ru substitut votre site. Considérez également HTTPS ou HTTP.

Enregistrer le domaine. Personnaliser l'hébergement. Installez le blog!

Ordre d'hébergement et d'achat d'un domaine \u003e\u003e\u003e

Conclusion

Maintenant, votre blog est entièrement configuré et prêt à travailler. Commencez à le remplir avec des articles de haute qualité pour les personnes. Commencez lentement comprendre le référencement (optimisation des moteurs de recherche).

Dès que votre blog atteint la participation à 500 personnes par jour, achetez un sujet unique. Si vous avez des questions, demandez-leur définitivement dans les commentaires ci-dessous.

Sinicatement, Sergey Smirnov.

Créer votre propre thème pour Wordpress. - Un excellent moyen de donner votre blog ou un autre site Web de WordPress Image originale. Mais même le sujet le plus agréable ne sera pas si agréable si vous devez grimper sous le capot pour de petits changements et modifier le thème HTML ou Code PHP. Surtout quand il s'agit d'un client rapide utilisant votre sujet. Heureusement dans WordPress, le processus de création paramètres de pages Pour votre sujet dans WordPress n'est pas du tout difficile, et après avoir lu cette leçon, vous pouvez la créer dans les plus brefs délais!

Étape 1 La décision sur laquelle les paramètres sont nécessaires

Tout cela commence avec le besoin: Pour créer une page de paramètres clairs et utiles, vous devez déterminer ce qui peut être changé et laisser tout le reste. Chaque nouveau paramètre Ajouter au menu Administrateur Compose l'interface utilisateur et augmente la complexité de l'utilisation du sujet. C'est pourquoi il est préférable de faire attention et de choisir manuellement les paramètres qui changeront souvent et ne prennent pas en compte les paramètres mineurs pouvant être facilement modifiés à l'aide d'un fichier dans le thème.

Une autre question à garder à l'esprit: "Qui va changer ces paramètres?" Si l'utilisateur se familiarise avec PHP et WordPress, vous pouvez vous attendre à ce qu'il n'ait pas eu de problèmes avec la pièce jointe de Google Analytics dans le code, mais vous ne devez pas en avoir besoin d'un graphiste, sans oublier l'écrivain qui ne peut même pas savoir n'importe quoi sur HTML et CSS.

Idées générales pour définir des objets dans les paramètres d'objet:

• Code de suivi Google Analytics sur le site
• Le nombre de panneaux latéraux et leur positionnement (gauche, droit, peut-être même de haut en bas)
• Largeur de page
• Le contenu de votre futur
• Paramètres pour les caractéristiques caractéristiques du thème, par exemple, des formats de teaser utilisateur.

Une fois que vous avez collecté une liste de fonctionnalités que vous souhaitez contrôler sur la page Paramètres, vous êtes presque prêt à passer à la mise en œuvre. Avant de continuer et de créer la page Paramètres, vous pouvez gagner du temps en vous assurant qu'il n'y a plus une fonction WordPress pour configurer que vous allez mettre en œuvre. Widgets, menus personnalisés, arrière-plans personnalisés et en-têtes d'image - Tous ces outils utiles pour configurer votre sujet avec un nombre de travail beaucoup plus petit que nécessaire pour créer vos propres paramètres. Cependant, ce sont des thèmes pour un autre manuel.

Paramètres créés dans ce manuel

Dans ce didacticiel Je suis venu à l'esprit la page principale du sujet consistant en une grille avec un nombre différent de postes sélectionnés pouvant être sélectionnés, modifier et réorganiser par l'administrateur à l'aide d'une page. paramètres personnalisés.

Les éléments de la page principale de l'éditeur seront présentés comme une liste d'éléments auxquels une nouvelle peut être ajoutée en utilisant JavaScript et JQuery.

J'aime visualiser la page de l'administrateur dans le panneau d'administration WordPress lors du développement d'un code HTML, donc je commence généralement par la page de liaison des paramètres WordPress et que vous ne transmettez que dans le contenu du contenu de la page. Par conséquent, dans la prochaine étape, nous créons une fiche pour la page Paramètres et la connectez-la à WordPress.

Étape 2 Connexion d'une page Paramètres WordPress

La création de la page Paramètres commence par la création d'une fonction qui définit le menu et la connecte à l'administrateur_menu. Cela rapporte WordPress pour appeler votre fonction lorsque vous devez créer un menu pour que tout soit fait dans horaire d'ouverture. Ajoutez ce code dans File Functions.php votre sujet:

Fonction setup_theme_admin_menus () (// Nous écrirons le contenu de la fonction très bientôt.) // Cela indique WordPress d'appeler la fonction nommée «setup_theme_admin_menus» // lorsque vous avez le temps de créer les pages de menu. Add_theme_admin_menus ");

Nous ajouterons maintenant le code pour créer des pages de paramètres dans la fonction nouvellement créée.

Lors de la création de la page Paramètres, vous pouvez ajouter une page en tant que sous-menu dans l'un des groupes de paramètres existants ou créer votre propre menu de niveau supérieur.

L'ajout d'un sous-menu est effectué à l'aide de la fonction add_submenu_page:

• $ parent_slug - un identifiant de page unique menu principalÀ laquelle ce sous-menu est ajouté en tant que filiale.
• $ Page_title - Nom de la page ajoutée
• $ Menu_title est le nom affiché dans le menu (version souvent plus courte de $ page_title
• $ Capacité - exigences minimales Pour qu'un utilisateur accède à ce menu.
• $ Menu_slug - un identifiant unique du menu créé
• $ La fonction est le nom de la fonction appelée pour le traitement (et la visualisation) de cette page de menu

Si vous décidez d'ajouter une page de menu sous forme de sous-menu dans l'un des groupes WordPress, vous pouvez utiliser les valeurs suivantes comme paramètre $ parent_slug:

• Barre d'outils: index.php
• Messages: edit.php.
• Media: upload.php.
• Liens: link-manager.php
• Pages: edit.php? Post_type \u003d page
• Commentaires: Modifier-commentaires.php
• Apparence: themes.php
• Plugins: plugins.php.
• Utilisateurs: utilisateurs.php.
• Outils: Outils.php.
• Paramètres: options-general.php

Le groupe d'apparence ressemble à un bon candidat pour poster notre page de paramètres. Essayons et créons notre première page de paramètres. Voici la version mise à jour de notre fonction de configuration du menu:

Fonction setup_theme_admin_menus () (add_submenu_page ("themes.php", "éléments de la page avant", "éléments de devant-page", "theme_front_page_setings");)

Pour ce faire, nous devons toujours créer une fonctionnalité theme_front_page_setting. Ici, c'est dans la forme la plus simple:

Fonction Theme_front_Page_Settings () (Echo "Bonjour, Monde!";)

Et c'est comme ça que cela semble en action:

Nous devons également vérifier que l'utilisateur dispose des droits nécessaires pour modifier la page Paramètres. Pour ce faire, ajoutez le code suivant au début de la fonction de page Paramètres:

// Regarde ça. l'utilisateur. Est autorisé à mettre à jour les options si ("Gestion_OPTIONS")) (WP_DIE ("Vous n'avez pas suffisamment d'autorisations pour accéder à cette page.");););

Maintenant, si l'utilisateur qui n'est pas autorisé à gérer les paramètres tombe sur la page Paramètres, il ne verra rien, sauf le message "Vous n'êtes pas autorisé à accéder à cette page."

Si votre sujet est nécessaire de multiples pages de paramètres, il peut embarrasser l'utilisateur lorsque vous devez les rechercher dispersés dans la structure du menu. Dans ce cas, la création de votre propre groupe de paramètres facilite l'utilisateur de rechercher toutes les pages de menu du sujet.

Pour ajouter votre propre groupe de paramètres, vous devez créer une page de menu de niveau supérieur et relier le sous-menu de la page avec elle. Voici une nouvelle version de notre fonction de configuration du menu. La fonction add_menu_page utilisé pour créer le menu de niveau supérieur est similaire à celle add_submenu_page, sauf qu'il n'accepte pas le paramètre $ parent_slug.

Fonction setup_theme_admin_menus () (add_menu_page ("Paramètres de thème", "Exemple thème", "Gestion_OPTIONS", "TUT_THEMES_SETTENS", "THINE_SETTES_PAGE"); add_submenu_page ("TUT_THEME_SETTENS", "ELLES DE PAGE AVANT", "GESTION_OPTIONS" , "Eléments de première page", "theme_front_page_settings");) // Nous devons également ajouter la fonction de gestionnaire pour la fonction de menu de haut niveau Theme_Settings_page () (écho "Page des paramètres";)

Si vous vérifiez le code et mettez à jour le panneau WordPress Admin, vous verrez quoi votre un nouveau groupe Le menu apparaîtra au bas de la liste de menus:

Mais alors que quelque chose n'est pas entièrement correct. Cliquez sur l'élément de menu supérieur ne vous mènera pas au menu " Page d'accueil", Et à la page de menu" Exemple theme ". Cela ne correspond pas à la manière dont l'autre fonction de menu WordPress, alors faites donc une autre chose: changer l'attribut $ MENU_SLUG dans l'appel add_submenu_page à la même valeur que dans le menu de niveau supérieur, nous pouvons associer deux menus pour sélectionner le menu principal à sélectionner La page principale du menu:

Fonction setup_theme_admin_menus () (add_menu_page ("Paramètres de thème", "Exemple thème", "Gestion_OPTIONS", "TUT_THEMES_SETTENS", "THINE_SETTES_PAGE"); add_submenu_page ("TUT_THEME_SETTENS", "ELLES DE PAGE AVANT", "GESTION_OPTIONS" "Tut_theme_Settings", "theme_front_page_settings");) Fonction Theme_Settings_Page () ()

On dirait maintenant mieux. Si vous voulez améliorer apparence Votre groupe de menus, il existe deux champs optionnels dans la fonctionnalité Add_Menu_Page que vous trouverez utile. Il suffit d'ajouter des valeurs après le nom de la fonction dans la méthode appel:

• $ Icon_url indique l'adresse URL de l'icône pour le menu de niveau supérieur.
• $ Position Spécifie la position de votre groupe de menu dans la liste de menus. Plus la valeur est élevée, plus la position dans le menu est basse.

Étape 3 Création de formulaires HTML pour les paramètres de page

Maintenant que nous avons créé la page Paramètres, et il est correctement affiché dans le menu côté, il est temps de commencer à ajouter du contenu. Donc, retour à la liste des paramètres que nous voulions dire et créer une page pour les modifier.

Dans cette leçon, nous avons besoin d'un champ pour déterminer le nombre d'éléments spécifiés dans une ligne et la liste pour déterminer les éléments réels. Pour commencer avec briquet, créez une zone de texte pour le nombre d'éléments d'une ligne. Modifier la fonction de page Paramètres:

Fonction theme_front_page_setstings () (?\u003e

Lorsque vous redémarrez la page Paramètres, vous verrez le premier champ Paramètres:

Pour que notre page de réglages soit facilement installée dans WordPress, il est préférable d'utiliser des classes et des styles de CSS que WordPress utilise sur leurs propres paramètres. Un bon moyen d'explorer ces astuces est juste d'y aller et d'analyser le code source WordPress.

La chose la plus importante consiste à envelopper la page de paramètres en utilisant div avec la classe Wrap. À l'intérieur de cet élément div, vous pouvez utiliser de nombreux styles prédéfinis, tels que des titres, des boutons et des champs de formulaire. Commençons par le titre de nos paramètres de page:

• Nous allons créer un en-tête H2 pour la page (vous pouvez utiliser des balises de titre de H2 à H6 pour créer des titres de différentes tailles.)
• Avant de se diriger, nous montrons l'icône de la page des paramètres de sujet. (Vous pouvez utiliser les icônes de WordPress prédéfinies à l'aide de la fonction Screen_icon. La fonction peut prendre l'un des paramètres suivants: Index, modifier, télécharger, lien-manager, pages, commentaires, thèmes, plugins, utilisateurs, outils ou options générales.)
• Nous allons placer l'élément d'entrée sous la forme et la table avec la classe de formulaire.

Ensuite, il est temps de commencer à ajouter des éléments.

Pour ce faire, nous utiliserons JQuery parce que cela simplifie le travail que si nous écrivions JavaScript à partir de zéro et vient avec WordPress. Si vous utilisiez l'habitude d'utiliser jQuery, vous devez garder à l'esprit une seule chose: une notation $ que vous utilisez habituellement avec JQuery ne fonctionne pas dans WordPress - vous devez entrer dans un mot complet jQuery.

Premièrement, nous allons créer un élément pour éditer des paramètres d'un bloc de la page principale qui servira de modèle pour les éléments ajoutés par l'utilisateur. Ajoutez ce code directement entre la balise de fermeture et la balise de fermeture de la forme immédiatement après.

Maintenant, ça ressemble à ceci:

Maintenant, lorsque nous avons notre modèle, il est temps de le masquer et de créer JavaScript pour l'utiliser pour créer de nouvelles lignes pour les messages sur la page Paramètres. Définissez le style de l'élément LI à l'écran: aucune valeur;