Share
Dans cette partie de la série, nous commencerons à écrire notre code. Étant plus précis, nous allons:
Ce sera un didacticiel très chargé en code, ouvrez votre éditeur de code préféré et prenez une tasse de café.!
Avant de passer à l'écriture du code actuel, nous allons commencer par définir des constantes pour nos chemins. Cela nous aidera plus tard lors de l’enregistrement de nos scripts et de nos feuilles de style..
Tout d'abord, ouvrez le coming-events.php fichier, ajoutez le code suivant:
Accentsconagua
define ('ROOT', plugins_url (", __FILE__)); define ('IMAGES', ROOT. '/ img /'); define ('STYLES', ROOT. '/ css /'); define ('SCRIPTS', ROOT. '/ Js /'); Dans le code ci-dessus, nous avons utilisé plugins_url () fonction pour obtenir notre chemin de répertoire racine. Il accepte deux paramètres, à savoir. $ path et plugin $.
Comme nous n’avons besoin de faire référence à aucun fichier, mais au répertoire racine de notre plugin, nous n’avons pas fourni $ path argument et pour la plugin $ argument, nous avons fourni le fichier en cours. Nous avons ensuite simplement ajouté les noms d’autres répertoires au RACINE constante pour leurs chemins respectifs.
WordPress est capable de contenir différents types de contenu. Nous pouvons créer autant de types de contenu que nécessaire, en fonction du scénario dans lequel nous travaillons. Pour ajouter plusieurs types de contenu (généralement connus sous le nom de «types de publication personnalisés»), WordPress propose une fonction register_post_type () qui accepte deux arguments:
Dans le second argument, c'est-à-dire le tableau d'arguments supplémentaires, nous définissons les étiquettes du type de publication et d'autres détails concernant la visibilité, les capacités et les taxonomies, etc..
dans lecoming-events.php fichier, ajoutez le code suivant pour enregistrer le type de publication personnalisé pour les événements:
$ labels = array ('name' => __ ('Events', 'uep'), 'singular_name' => __ ('Event', 'uep'), 'add_new_item' => __ ('Ajouter un nouvel événement', 'uep'), 'all_items' => __ ('Tous les événements', 'uep'), 'edit_item' => __ ('Éditer l'événement', 'uep'), 'new_item' => __ ('Nouvel événement' , 'uep'), 'view_item' => __ ('Voir événement', 'uep'), 'not_found' => __ ('Aucun événement trouvé', 'uep'), 'not_found_in_trash' => __ ('Non Événements trouvés dans la corbeille ',' uep ')); $ supports = array ('titre', 'éditeur', 'extrait'); $ args = array ('label' => __ ('Événements', 'uep'), 'labels' => $ labels, 'description' => __ ('Une liste des événements à venir', 'uep'), ' public '=> true,' show_in_menu '=> true,' menu_icon '=> IMAGES.' event.svg ',' has_archive '=> true,' rewrite '=> true,' supports '=> $ supports); register_post_type ('event', $ args); Dans le code ci-dessus, nous avons défini les étiquettes de notre type de publication d'événement et rendu le type de publication visible au public via la définition de la Publique la clé de vrai. Pour l’écran de nouvelle publication ou de post-édition, nous avons inclus trois champs pour le titre, le contenu et l’extrait..
Notez également que nous avons marqué les champs de texte statiques pour la traduction à l'aide du domaine de texte uep qui est unique à notre plugin. Une icône 20X20 SVG a également été incluse pour le menu Événements.
le register_post_type () la fonction doit être appelée à travers le init action pour que cela fonctionne correctement. Alors enveloppez-le dans une fonction et accrochez-le à la init action:
function uep_custom_post_type () $ labels = array ('name' => __ ('Events', 'uep'), 'singular_name' => __ ('Event', 'uep'), 'add_new_item' => __ (' Add New Event ',' uep '),' all_items '=> __ (' Tous les événements ',' uep '),' edit_item '=> __ (' Edit Event ',' uep '),' new_item '=> __ ('New Event', 'uep'), 'view_item' => __ ('Voir événement', 'uep'), 'not_found' => __ ('Aucun événement trouvé', 'uep'), 'not_found_in_trash' = > __ ('Aucun événement trouvé dans la corbeille', 'uep')); $ supports = array ('titre', 'éditeur', 'extrait'); $ args = array ('label' => __ ('Événements', 'uep'), 'labels' => $ labels, 'description' => __ ('Une liste des événements à venir', 'uep'), ' public '=> true,' show_in_menu '=> true,' menu_icon '=> IMAGES.' event.svg ',' has_archive '=> true,' rewrite '=> true,' supports '=> $ supports); register_post_type ('event', $ args); add_action ('init', 'uep_custom_post_type'); Nous avons maintenant notre type de message d'événement prêt. Accédez au tableau de bord WordPress et vous verrez un menu pour les événements situé sous le menu des commentaires:
Après avoir enregistré avec succès notre type de publication personnalisé pour les événements, nous devons maintenant ajouter trois champs de métadonnées permettant à l'utilisateur d'ajouter la date de début de l'événement, la date de fin et le lieu de l'événement. Ces méta-champs sont contenus dans une metabox personnalisée. Nous pouvons facilement ajouter une metabox personnalisée à l’administrateur WordPress en utilisant le add_meta_box () une fonction.
Il accepte sept arguments définis ci-dessous:
$ idest cet identifiant du metabox. C'est aussi l'attribut id pour la metabox rendue à l'écran.$ title est le titre de la metabox.$ callback est le nom de la fonction qui sera utilisée pour rendre le contenu de la métabox.$ post_type est le nom du type de message auquel nous voulons ajouter cette metabox.$ contexte est la zone de la page à laquelle nous voulons ajouter le metabox. Il y a trois contextes: Ordinaire, avance et côté. $ priorité du metabox dans le contexte donné qui peut être l’un des haute, coeur, défaut ou faible. $ callback_argsest un tableau d'arguments pouvant être passé à la fonction de rappel.dans le coming-events.php fichier ajouter le code suivant après la uep_custom_post_type () une fonction:
function uep_add_event_info_metabox () add_meta_box ('uep-event-info-metabox', __ ('Informations sur l'événement', 'uep'), 'uep_render_event_info_metabox', 'event', 'side', 'core'); add_action ('add_meta_boxes', 'uep_add_event_info_metabox'); Accédez au Ajouter un nouveau page sous le Événements menu et vous verrez un avertissement pour la fonction de rappel indéfinie. C’est parce que nous n’avons pas encore défini notre fonction de rappel pour restituer le contenu de la métabox..
Faisons cela maintenant:
function uep_render_event_info_metabox ($ post) // génère un champ de nonce wp_nonce_field (nom_polote (__FILE__), 'uep-event-info-nonce'); // récupère les méta-valeurs précédemment sauvegardées (le cas échéant) $ event_start_date = get_post_meta ($ post-> ID, 'event-start-date', true); $ event_end_date = get_post_meta ($ post-> ID, 'event-end-date', true); $ event_venue = get_post_meta ($ post-> ID, 'event-venue', true); // s'il existe une valeur précédemment sauvegardée, récupérez-la, sinon définissez-la sur l'heure actuelle $ event_start_date =! vide ($ event_start_date)? $ event_start_date: time (); // nous supposons que si la date de fin n'est pas présente, l'événement se termine le même jour $ event_end_date =! vide ($ event_end_date)? $ event_end_date: $ event_start_date; ?>
Dans le code ci-dessus, nous avons d’abord généré un champ nonce WordPress. Ceci est important car nous devons nous assurer que personne ne détournera notre demande de formulaire, compromettant ainsi la sécurité du site..
Nous avons ensuite récupéré notre méta de poste pour la date de début, la date de fin et le lieu de l'événement à l'aide de la fonction get_post_meta (). S'il s'agit d'une nouvelle publication, l'horodatage actuel sera utilisé pour les dates de début et de fin de l'événement. Sinon, si le message est en cours d'édition, les valeurs précédemment sauvegardées seront affichées dans les champs méta.
Pour les champs de méta, nous avons rendu trois étiquettes et champs de saisie avec des textes de substitution pour donner à l'utilisateur un indice sur le format de saisie..
Il est maintenant temps d'ajouter le widget datepicker de l'interface utilisateur jQuery au champ de date de début d'événement et de date de fin d'événement pour permettre à l'utilisateur plus de facilité lors de la saisie des dates.
Rappelez-vous du dernier article, nous avons expliqué que l’interface utilisateur jQuery et le widget Datepicker de l’interface utilisateur jQuery étaient déjà inclus dans la bibliothèque JavaScript WordPress. Nous avons également téléchargé une version personnalisée du site Web officiel de jQuery UI et déposé le fichier de feuille de style dans notre dossier css. Si vous ne l'avez pas encore fait, récupérez-en une copie sur le site officiel de jQuery UI et placez la feuille de style dans le dossier css..
Créer un fichier nommé script.js dans le dossier js. C’est le fichier dans lequel nous initialiserons le widget Datepicker de jQuery UI pour nos dates de début et de fin d’événement..
Nous allons maintenant mettre en file d'attente le JavaScript et la feuille de style qui l'accompagne dans notre admin en utilisant l'action admin_enqueue_scripts:
function uep_admin_script_style ($ hook) if ('post.php' == $ hook || 'post-new.php' == $ hook) wp_enqueue_script ('événements-à venir', SCRIPTS. 'script.js', tableau ('jquery', 'jquery-ui-datepicker'), '1.0', true); wp_enqueue_style ('jquery-ui-calendar', STYLES. 'jquery-ui-1.10.4.custom.min.css', false, '1.10.4', 'tous'); add_action ('admin_enqueue_scripts', 'uep_admin_script_style'); Vous avez peut-être remarqué que nous n’avons pas mis en file d'attente jQuery et le datepicker de l’interface utilisateur jQuery, mais les avons plutôt ajoutés en tant que dépendance du script.js fichier.
Ce faisant, WordPress s'assurera que jQuery et jQuery UI Datepicker (ainsi que ses propres dépendances) soient mis en file d'attente AVANT la script.js fichier.
La fonction de rappel accepte un argument pour le raccordement de page, c'est-à-dire la page actuelle du tableau de bord. Étant donné que nous ne souhaitons pas inclure ce fichier JavaScript sur chaque page du tableau de bord, nous vérifions d'abord si l'état de la page en cours est correct. post.php ou post-new.php.
De cette façon, nous avons restreint le JavaScript uniquement pour qu'il soit inclus sur les écrans de publication ou de publication, mais que se passe-t-il si quelqu'un crée ou met à jour une publication ou une page normale? Le fichier JavaScript ci-dessus sera également inclus sur ces pages car le crochet est le même pour ces deux-là aussi.
À cette fin, nous vérifierons plus avant si le message en cours de modification est un message de type événement:
function uep_admin_script_style ($ hook) global $ post_type; if (('post.php' == $ hook || 'post-new.php' == $ hook) && ('événement' == $ post_type)) wp_enqueue_script (script 'événements à venir', SCRIPTS. ' .js ', array (' jquery ',' jquery-ui-datepicker '),' 1.0 ', true); wp_enqueue_style ('jquery-ui-calendar', STYLES. 'jquery-ui-1.10.4.custom.min.css', false, '1.10.4', 'tous'); add_action ('admin_enqueue_scripts', 'uep_admin_script_style'); Maintenant, le fichier JavaScript ci-dessus ne sera inclus que si le crochet de page est post.php ou post-new.php et le poste en cours de création ou de modification est de type un événement.
Initialisons le Datepicker de l'interface utilisateur jQuery. Ouvrez le script.js fichier de la js répertoire et ajoutez le code suivant:
(function ($) $ ('# uep-event-date-de-début') .datepicker (dateFormat: 'MM jj, yy', onClose: fonction (dateDate) $ ('# uep-event-end-date ') .datepicker (' option ',' minDate ', selectedDate);)) $ (' # uep-event-end-date ') .datepicker (dateFormat:' MM jj, yy ', onClose: function ( selectedDate) $ ('# uep-event-start-date') .datepicker ('option', 'maxDate', selectedDate););) (jQuery); Notez que nous avons restreint la date de début de l'événement pour qu'elle ne soit pas supérieure à la date de fin de l'événement et inversement..
Vérifiez si l’initialisation a réussi en accédant à la Ajouter un nouveau page de l'événement et en cliquant sur l'une des dates de début ou de fin de l'événement. La fenêtre du sélecteur de date doit apparaître et vous pouvez entrer la date en naviguant dans le calendrier et en cliquant sur la date souhaitée..
Jusqu'à présent, nous avons écrit pas mal de code, mais notre plugin manque toujours de la fonctionnalité la plus fondamentale: Sauvegarder et mettre à jour les valeurs du champ méta de l'événement.
Maintenant que nous avons créé notre type de publication personnalisé et ajouté trois champs méta pour la date de début, la date de fin et le lieu de l'événement, nous devons nous assurer que les valeurs de ces champs méta sont enregistrées dans la base de données..
WordPress fournit un crochet à cet effet qui se déclenche chaque fois qu'un message est enregistré. Le crochet est save_post et sa fonction de rappel accepte un argument pour l'identifiant de la publication en cours de sauvegarde. En utilisant ce crochet, nous pouvons sauvegarder les valeurs de nos champs méta dans la base de données avec les champs de poste réguliers tels que le titre et le contenu..
function uep_save_event_info ($ post_id) add_action ('save_post', 'uep_save_event_info'); Mais encore une fois, nous devons vérifier si le message en cours de sauvegarde est de type un événement. Pour cela, nous allons vérifier le $ _POST variable globale:
function uep_save_event_info ($ post_id) // vérifiant si la publication sauvegardée est un 'événement', // sinon, retourne if ('événement'! = $ _POST ['type_appel']) retour; Nous allons maintenant vérifier le statut de sauvegarde, c’est-à-dire si la publication est automatiquement enregistrée ou si elle est une révision. WordPress fournit deux balises conditionnelles à cette fin:
wp_is_post_autosave ($ post_id)wp_is_post_revision ($ post_id)Nous pouvons utiliser ces deux balises conditionnelles comme suit:
$ is_autosave = wp_is_post_autosave ($ post_id); $ is_revision = wp_is_post_revision ($ post_id);
Mais nous devons également nous assurer que le nonce est valide. Rappelez-vous que nous avons défini un champ de nonce en utilisant le wp_nonce_field () fonctionner lors du rendu de la metabox? Nous allons vérifier la valeur du même nonce:
$ is_valid_nonce = (isset ($ _POST ['uep-event-info-nonce'])) && (wp_verify_nonce ($ _POST ['uep-event-info-nonce'], nomfichier (__FILE__))))? vrai faux;
Mettez ces trois conditions dans une seule déclaration et nous sommes prêts à partir:
if ($ is_autosave || $ is_revision ||! $ is_valid_nonce) return;
Après avoir effectué les opérations nécessaires avant d’enregistrer les méta-valeurs, nous sommes maintenant prêts à les insérer dans la base de données:
function uep_save_event_info ($ post_id) // vérifiant si la publication sauvegardée est un 'événement', // sinon, retourne if ('événement'! = $ _POST ['type de message']) retour; // recherche du statut 'enregistrer' $ is_autosave = wp_is_post_autosave ($ post_id); $ is_revision = wp_is_post_revision ($ post_id); $ is_valid_nonce = (isset ($ _POST ['uep-event-info-nonce'])) && (wp_verify_nonce ($ _POST ['uep-event-info-nonce'], nomfichier (__FILE__))))? vrai faux; // quitte en fonction de l'état de sauvegarde ou si le nonce n'est pas valide si ($ is_autosave || $ is_revision ||! $ is_valid_nonce) return; // recherche les valeurs et exécute les actions nécessaires si (isset ($ _POST ['date-début-événement-')])) update_post_meta ($ post_id, 'date-début-événement', strtotime ($ _POST [' uep-event-start-date '])); if (isset ($ _POST ['uep-event-end-date'])) update_post_meta ($ post_id, 'event-end-date', strtotime ($ _POST ['uep-event-end-date']) ) if (isset ($ _POST ['uep-event-venue'])) update_post_meta ($ post_id, 'event-venue', sanitize_text_field ($ _POST ['uep-event-venue']))); add_action ('save_post', 'uep_save_event_info'); Ici, nous avons sauvegardé les méta-valeurs de la base de données en utilisant la fonction update_post_meta () qui accepte quatre arguments dont nous avons passé les trois premiers:
$ post_id est l'id de la publication à laquelle appartient la méta-valeur.$ meta_keyest la clé du champ méta personnalisé.$ meta_valueest la nouvelle méta valeur.$ prev_valueest la méta valeur précédente à remplacer.Notez que nous n’enregistrons pas la date dans la description textuelle, mais nous la convertissons d’abord en horodatage UNIX à l’aide de PHP. strtotime () une fonction. De cette façon, il deviendra beaucoup plus facile de comparer des dates entre elles tout en effectuant la méta-requête sur le front-end.
À ce stade, la partie la plus fondamentale de notre tutoriel est terminée. Il est temps d'ajouter des colonnes personnalisées à l'écran d'événements du tableau de bord post..
Les événements ayant des informations spécifiques contenues dans leurs champs personnalisés, il convient de les afficher dans les colonnes personnalisées de l'écran de post-administrateur pour une meilleure accessibilité à l'utilisateur..
Par défaut, WordPress affiche les colonnes titre et date pour le type de publication personnalisé, mais nous ajouterons trois colonnes supplémentaires pour la date de début de l'événement, la date de fin et le lieu.
Nous pouvons contrôler quelles colonnes ajouter et lesquelles masquer à l'aide du hook WordPress manage_edit- $ post_columns où $ post est le nom du type de message personnalisé. La fonction de rappel accepte un tableau pour les colonnes déjà affichées.
function uep_custom_columns_head ($ defaults) unset ($ defaults ['date']); $ defaults ['event_start_date'] = __ ('Date de début', 'uep'); $ defaults ['event_end_date'] = __ ('Date de fin', 'uep'); $ defaults ['event_venue'] = __ ('Lieu', 'uep'); retourne $ par défaut; add_filter ('manage_edit-event_columns', 'uep_custom_columns_head', 10); Dans le code ci-dessus, nous avons désactivé la colonne de date par défaut et ajouté nos trois colonnes personnalisées..
Mais le contenu des colonnes respectives ne sera pas affiché tant que nous ne le définirons pas avec les manage_ $ post_posts_custom_column hook où $ post est le nom du type de message personnalisé.
function uep_custom_columns_content ($ column_name, $ post_id) if ('event_start_date' == $ column_name) $ start_date = get_post_meta ($ post_id, 'event-start-date', true); echo date ('F d, Y', $ date_début); if ('event_end_date' == $ column_name) $ end_date = get_post_meta ($ post_id, 'event-end-date', true); echo date ('F d, Y', $ end_date); if ('event_venue' == $ nom_colonne) $ venue = get_post_meta ($ post_id, 'lieu-événement', true); echo $ venue; add_action ('manage_event_posts_custom_column', 'uep_custom_columns_content', 10, 2); Nous avons d'abord vérifié la colonne affichée, puis répercuté le contenu en conséquence. Le dernier paramètre de la add_action () appel de fonction est le nombre d'arguments acceptés par la fonction de rappel - dans notre cas, il s'agit de deux.
Dans ce tutoriel, nous avons enregistré avec succès un type de publication personnalisé pour les événements. Nous avons également appris à inclure une métabox personnalisée et un widget datepicker d'interface utilisateur jQuery UI intégré dans le tableau de bord WordPress. De plus, pour donner à l'utilisateur une plus grande accessibilité, nous avons ajouté des colonnes personnalisées dans notre écran post-administrateur..
Bien que nous ayons presque terminé le tableau de bord, il nous reste encore quelque chose à faire: le système frontal..
Dans le prochain épisode de la série, nous créerons un widget personnalisé pour afficher la liste des événements à venir dans la barre latérale. Nous allons regarder le WP_Query classe de plus près pour récupérer les messages en fonction de leurs méta-valeurs.
