Guide du débutant sur le framework Titan comment fonctionne Titan

Ceci est le troisième article de la série et jusqu'à présent, j'ai discuté de l'importance et des fonctionnalités de Titan Framework ainsi que de la configuration de base. Dans le tout premier article, j'ai parlé de la configuration en trois étapes de Titan Framework, qui se présente comme suit: 

  1. Configurez votre projet.
  2. Créer des options.
  3. Obtenir des valeurs.

J'ai expliqué la première étape de l'article précédent, dans laquelle nous avons appris que Titan Framework est un framework plug and play, c'est-à-dire qu'il s'agit d'un plugin, même s'il peut également être intégré en l'intégrant à votre projet de développement Web. Alors continuons de là où je me suis arrêté et passons aux deux prochaines étapes.

Ici, je vais expliquer comment et à quelle capacité Titan Framework fonctionne dans votre projet de développement Web. Ensuite, je vais passer au concept de création Les instances et Les options à partir de laquelle je vais obtenir le sauvé Valeurs au début. Alors commençons! 

1. Configurez votre projet

Tout d'abord, voyons ce dont vous aurez besoin pour mettre en œuvre le tutoriel d'aujourd'hui. Nous allons créer un thème WordPress simple avec lequel nous utiliserons Titan Framework pour explorer les différentes options qu’il peut créer. Tu auras besoin:

  1. Configuration WordPress locale, par exemple J'utilise DesktopServer (croyez-moi, c'est incroyable!).
  2. Un thème WordPress de base, je vais utiliser Neat à cette fin. J'ai créé une nouvelle branche appelée Neat: TitanFramework pour ce tutoriel..

Ma configuration

Comme je vais utiliser le thème Neat WordPress, il est important que j'explique d'abord sa structure. Ouvrez le dossier de thème dans votre éditeur de texte à l’intérieur du répertoire. les atouts répertoire j'ai créé un nouveau dossier nommé admin. Son but est de gérer tout le code pertinent pour les options d’administrateur. Dans ce est un autre répertoire, titanframework,et un fichier PHP, admin-init.php.

admin-init.php Fichier

Ce fichier PHP gérera toutes les activités liées à l’administrateur. Si vous faites défiler son code, vous découvrirez que j'ai utilisé le get_template_directory () fonction pour inclure quatre fichiers de la titanframework annuaire. Le code suivant est assez explicite, mais je vais expliquer dans un instant le but de chacun de ces fichiers..

Voici le code pour admin-init.php:

Répertoire appelé titanframework

J'ai déjà discuté du fait que Titan Framework vous aide à créer Tableaux et onglets d'administration, métaboxes et Personnalisateur de thème sections et panneaux. J'ai donc créé des fichiers séparés pour chacun d'entre eux. De toute évidence, ils peuvent être créés avec des lignes de code distinctes. J'aborderai chacun de ces points dans mes prochains articles, mais pour le moment, tout ce que vous avez à comprendre est de savoir à quoi servent ces fichiers..

  • titan-framework-checker.php: est responsable d'inclure Titan Framework dans votre thème.
  • adminpanel-options-init.php: contient le code pour créer un panneau d'administration et des onglets avec un ensemble d'options.
  • metabox-options-init.php: Contient le code permettant de créer des métaboxes pour les types d'article avec un ensemble d'options.
  • customizer-options-init.php: Contient le code permettant de créer des panneaux et des sections de personnaliseur de thème avec un ensemble d'options.

Incluant le admin-init.php Fichier

Jusqu'à présent, vous devez vous demander pourquoi j'ai créé tant de nouveaux fichiers. Pourquoi n'ai-je pas ajouté tout le code dans le functions.php fichier? Eh bien, je ne considère pas que ce soit une bonne approche en matière de conception d’architecture. Pour construire un produit maintenable, vous devez définir un bon modèle de conception.. 

Quel est le point de déconner votre functions.php fichier avec autant de lignes de code? Je l'ai moi-même expérimenté: à la fin de tout projet de développement, le code devient si massif qu'il devient difficile de tout gérer dans un seul fichier, en particulier pour le débogage et la correction des erreurs. Il est toujours préférable de créer des fichiers séparés, alors considérez ces fichiers comme des modules..

Incluons admin-init.php dans notre functions.php fichier.

Ici j'ai ajouté le admin-init.php déposer via le même get_template_directory () et Demandez une fois() les fonctions.

À ce stade, nous avons examiné la configuration de base d'un thème que je vais utiliser pour expliquer le fonctionnement de Titan Framework. Nous avons terminé l’installation et l’intégration de Titan Framework dans notre thème WordPress. Créons un panneau d'administration avec des options et obtenons les valeurs pour le front-end.

Travailler avec Titan Framework

Pour utiliser Titan Framework, vous devez suivre un certain flux de travail, à savoir:

  1. Créer une instance Titan Framework par fichier.
  2. Créer un panneau d'administration / des onglets, des métaboxes ou des sections / panneaux de personnalisation de thème.
  3. Créer des options en eux.
  4. Obtenez les valeurs.

Laissez-moi d’abord écrire le morceau de code que je vais utiliser à cette fin. Ceci est le code pour le adminpanels-options-init.php fichier qui est présent à l'intérieur du assets / admin / titanframwork / annuaire.

createAdminPanel (array ('name' => 'Options ordonnées' // Nommez le menu des options)); / ** * Crée les options. * * Nous allons maintenant créer des options pour notre panel que nous venons de créer et qui s'appellent '$ aa_panel'. * / $ aa_panel-> createOption (array ('id' => 'aa_txt', // L'ID qui sera utilisé pour obtenir la valeur de cette option. 'type' => 'text', // Type d'option we sont en train de créer. 'name' => 'Mon option texte', // Nom de l’option qui sera affichée dans le panneau d’administration. 'desc' => 'Ceci est notre option' // Description de l’option qui sera affichée dans le panneau d'administration.)); / ** * Bouton Enregistrer pour les options. * * Lors de la création des options du panneau d'administration, utilisez ce code pour ajouter une option au bouton "Enregistrer" * car l'utilisateur n'a pas d'autre moyen d'enregistrer les options. Vos utilisateurs peuvent désormais enregistrer * (et réinitialiser) les options que nous venons de créer. * / $ aa_panel-> createOption (array ('type' => 'save')); 

Au tout début, j'ai ajouté quelques liens d'aide tirés de la documentation de Titan Framework. Maintenant, je vais expliquer ce code ligne par ligne.

Ligne 17

Ici nous avons un crochet appelé tf_create_options, qui est utilisé pour créer des options via Titan Framework en utilisant le aa_options_creating_function () une fonction. 

Lignes 19

Nous avons créé une fonction appelée aa_options_creating_function (), qui sera responsable de la création de ces options.

Ligne 22

A la ligne 22, j'ai créé un exemple pour Titan Framework. La création d'une instance fait partie intégrante de ce cadre, qui doit être créé dans chaque fichier chaque fois que nous devons interagir avec Titan Framework. Pour rendre votre instance unique, vous pouvez y ajouter le nom de votre produit. Par exemple, j'ai ajouté 'soigné' en tant que paramètre. 

Obtenir une instance de Titan Framework

Créer une instance de Titan Framework est assez simple. Nous obtenons une instance unique pour éviter toute confusion au cas où un autre plugin utiliserait Titan Framework pour créer des options. L'auteur déclare que: 

La fonction getInstance crée / obtient une instance unique de Titan Framework spécifique à «mytheme». C'est le espace de noms nous allons l'utiliser pour nous assurer que nos paramètres ne seront pas en conflit avec d'autres plug-ins qui utilisent Titan Framework. Assurez-vous de changer le nom de votre thème ou de votre plugin.

Voici un exemple de code pour obtenir une instance avec Titan. 

$ titan = TitanFramework :: getInstance ('mon-thème');

Dans le cas de ma soignéethème je vais utiliser le paramètre de soignéau lieu demon thème pour rendre mon code unique, c'est-à-dire. 

$ titan = TitanFramework :: getInstance ('soigné');

Créer un panneau d'administration; Lignes 33-35

Ces lignes vont créer un panneau d’administration que j’ai nommé "$ aa_panel". Titan Framework vous aide à créer des sections telles que le panneau d’administration, les onglets d’administrateur, les métaboxes et les panneaux de personnalisation de thème dans votre projet. Mais pour l’instant, je ne créerai un panneau d’administration que comme exemple pour expliquer les choses.. 

Ces lignes de code appellent notre createAdminPanel () fonction dans Titan Framework qui forme un tableau. Cette fonction va ajouter une nouvelle section dans votre tableau de bord WordPress nommée Options soignées.

L'image ci-dessus est une capture d'écran du tableau de bord WordPress où vous pouvez trouver une nouvelle section en cours d'ajout dans le panneau d'administration..

Pour résumer ce que j’ai fait jusqu’à présent: j’ai mis en place mon projet de développement Web, puis j’y ai ajouté une instance, après quoi j’ai créé un panneau d’administrateur.. 

À ce stade, si je clique sur le Options soignéesbouton, alors cette section est vide. Donc, maintenant je vais créer des options dans ce nouveau panneau d’administration. 

Création d'options dans Titan Framework

Les thèmes WordPress personnalisables sont préférés car les utilisateurs finaux souhaitent surtout configurer des thèmes sans écrire une seule ligne de code. Ceci est rendu possible en ajoutant des options flexibles au cours du développement du thème.. 

Nous pouvons ajouter de telles options dans un panneau d’administration distinct, sous forme de métaboxes ou de panneaux d’options à l’intérieur du personnalisateur de thème. Les options servent à stocker les valeurs qui seront récupérées plus tard au début du processus..

Lignes 42-47

Examinez maintenant ces lignes de code. Ceux-ci seront utilisés pour créer des options dans un panneau ou un onglet administrateur. La ligne 42 définit le createOption () fonction pour le $ aa_panel. Cette fonction est encore une fois un tableau qui porte certains paramètres comme identifiant, type, nom, description, etc. Selon ces lignes, j'ai créé une option qui est un champ de texte et qui s'appelle Mon option de texte

C’est la capture d’écran qui affiche l’option créée dans le menu Options soignées panneau.  

Lignes 56-58

Les deux dernières lignes du code créent une autre option dans ce panneau. Mais son but est de sauvegarder les paramètres. Par exemple, dans le Mon option de texte champ, l'utilisateur le remplit avec John Doe. Cela signifie que l'utilisateur souhaite modifier le paramètre par défaut, ce qui n'est possible que s'il enregistre les paramètres personnalisés..

Donc, j'ai encore utilisé le createOption () fonction et assigné la valeur du paramètre "type = enregistrer". 

Ceci est la dernière capture d'écran du développement que j'ai réalisé jusqu'à présent.. 

À ce stade, vous avez configuré Titan Framework, vous avez créé quelques options pour obtenir des résultats dynamiques. Il ne vous reste plus qu'à obtenir les valeurs des options que vous avez configurées à l'origine. Sur le slogan en trois étapes, j'ai discuté des deux premiers articles des deux articles précédents. Passons maintenant à la dernière et au plus important aspect du fonctionnement de Titan Framework..

Obtenir des valeurs

La création d'options est effectuée sur le serveur principal. Nous devons maintenant récupérer les valeurs par rapport à ces options, définies par un utilisateur final, pour les utiliser au serveur frontal. Nous pouvons récupérer les valeurs définies par rapport aux options via une fonction simple, c.-à-d.. getOption ().

Voici la structure de base du code permettant de récupérer les valeurs enregistrées:

getOption ('my_text_option'); // Fait des choses ici. 

J'ai donc créé une fonction appelée ma fonction où j'ai d'abord enregistré une instance de Titan. L’enregistrement d’une instance est une étape importante, car l’objet créé par Titan Framework pour vos paramètres est enregistré dans une variable, c.-à-d.. $ titan. Vous pouvez voir que notre instance est spécifique à notre thème, c'est-à-dire. mon thème, qui est censé être notre nom de thème ou quelque chose d'unique. 

Récupération de valeurs en amont

Utilisons les valeurs définies par rapport aux options du front-end. J'ai créé un modèle de page personnalisé vierge. Si vous vous référez à la Soigné dossier de thème, vous trouverez un fichier appelé aa_titanframework.php dans la racine. Vous pouvez aussi faire la même chose avec votre thème.

Créer un nouveau fichier dans votre éditeur de texte et copiez et collez les lignes de code suivantes.

getOption ('aa_txt'); ?> 

Avant d’expliquer le code susmentionné, référez-vous au code de mon article précédent dans lequel j’avais créé un panneau d’administrateur et ses options, car j’utilise les mêmes noms, identifiants, etc..

Les quatre premières lignes du code sont destinées à WordPress pour l’enregistrement de ce modèle de page personnalisé, qui est plutôt standard: aucune science en fusée.

Obtenir des valeurs d'option

Je vais obtenir les valeurs des options que j'ai créées dans le adminpanel-options-init.php file (référez-vous à son article précédent pour son code) ici. Deux étapes sont nécessaires pour y parvenir:

  1. Obtenez une instance unique de Titan Framework et enregistrez-la dans une variable.
  2. Obtenir la valeur via ID en utilisant le getOption () une fonction.

Ligne 12

Après la première étape, j’ai initialisé une instance unique par rapport à la variable $ titan, une seule fois pour chaque fichier dans lequel je l’utilise. Mon instance est unique depuis que je l'ai nommée soigné, c'est-à-dire le nom du paquet pour mon thème, vous pouvez lui donner un nom unique. Il est nécessaire que si un plugin utilise Titan et que votre thème l’utilise également, il doit exister un moyen de différencier les options définies par ce plugin de votre thème..

$ titan = TitanFramework :: getInstance ('soigné');

Ligne 14

La deuxième étape consiste à utiliser l'ID et à obtenir la valeur enregistrée pour cette option. Le code pour cette ligne est:

$ aa_txt_val = $ titan-> getOption ('aa_txt'); 

J'ai récupéré la valeur pour aa_txt qui est sauvegardé contre la variable $ aa_txt_val. le aa_txt paramètre fait référence à l'ID de l'option que j'ai créée dans mon premier panneau d'administration (reportez-vous à mon article précédent).

Donc, jusqu'ici, j'ai configuré la structure de base pour obtenir les valeurs sauvegardées. Utilisons maintenant les valeurs sauvegardées sur le front-end.

Lignes 22-35

Ces lignes de code sont utilisées pour afficher les valeurs enregistrées sur le front-end. Regardez la ligne 29 où j'ai utilisé le écho commande pour obtenir la sortie. La même chose est faite à la ligne 35, mais cette fois-ci, la sortie est affichée. $ aa_txt_val au format H3 (rubrique 3). Alors maintenant quelle que soit la valeur définie par l'utilisateur final pour cette option, celle-ci sera affichée au début du processus..

Résultats

Afin d'afficher les résultats pour le code que j'ai expliqué ci-dessus, procédez comme suit:

  • Allez sur votre WordPress tableau de bord
  • Créer un Nouvelle page via Pages> Ajouter un nouveau.
  • Nommez la page Cadre Titan (facultatif, vous le sauriez)

La capture d'écran ci-dessus montre la page que j'ai créée. Dans le même temps, vous pouvez également trouver le nouveau menu du panneau d’administration, c.-à-d.. Options soignées, où nous avons créé les options.

Ensuite, choisissez le modèle de page, c'est-à-dire. Cadre Titan, pour cette page avant de la publier.

le aa_titanframework.php fichier ajoute une nouvelle page Modèle appelé "Titan Framework" qui apparaît dans la liste déroulante. Choisissez ce modèle.

  • Publier la page.
  • Ensuite, allez au Options soignées menu et ajouter de la valeur contre l'option nommée Mon option de texte.

L'image montre que j'ai rempli ce champ avec Option texte AA et puis j'ai cliqué Sauvegarder les modifications.

  • Retournez à la page Titan Framework et vue la page.

L'image ci-dessus affiche le résultat final. C'est leCadre Titan page. La valeur de l’option enregistrée (c’est-à-dire AA-Text-Option) pour aa_txt est affiché sous deux formes différentes. Le premier est en paragraphe formater pendant que le second est en h3 format.

Conclusion

Vous devez maintenant avoir une certaine compréhension de Titan Framework et de son fonctionnement. Ceci est la configuration de base à suivre chaque fois que vous développez quelque chose avec Titan Framework. 

Maintenant que vous savez comment le configurer, créez quelques options et récupérez les valeurs enregistrées. essayez-le et laissez-moi savoir en cas de questions via des commentaires ou contactez-moi sur Twitter. 

Ensuite, dans cette série, nous explorerons l’ensemble des options que nous pouvons créer avec Titan Framework et comment les utiliser..