Share
Dans la première partie de ce didacticiel, nous avons examiné les éléments à prendre en compte avant de vous mettre au travail et de créer votre modèle de site Web de billetterie. Maintenant, nous allons ajouter toutes les fonctionnalités d’un site Web de billetterie.
Nous allons plonger directement dans le modèle créé à partir de l'installation par défaut de Twenty Eleven par WordPress et construire nous-mêmes une requête élégante utilisant des données de champ personnalisées. Ensuite, nous allons souscrire à TicketTailor et apprendre à créer des appels à l'action pour que nos utilisateurs puissent acheter facilement..
Une des choses qui me surprend constamment lors de la rédaction de code à utiliser avec WordPress est la quantité de tâches avancées pouvant être accomplies avec un extrait de code relativement simple et un peu de réflexion latérale. J'ai perdu le compte du nombre de fois où j'ai utilisé une solution trop compliquée à un problème, mais je me suis rendu compte que le fait de changer une ligne de code à une date ultérieure élimine le besoin de 100 lignes que j'ai écrites lorsque j'ai remis le projet à mon ordinateur. client.
Le site Web de billetterie est l'un de ces exemples. Mon client souhaitait un site séparant les événements futurs des événements passés. J'ai résolu le problème avec un plugin qui changeait automatiquement la catégorie d'un événement de «futur» à «passé» à une certaine heure un jour donné. Ce n'était pas du tout nécessaire.
Les requêtes de publication WordPress nous permettent d'interroger par champ personnalisé. Cela signifie que nous pouvons définir un champ personnalisé sur nos messages, appelé "Date", par exemple, puis organiser nos messages de cette manière. Comme vous pouvez probablement le constater, cela signifie que nous pouvons également supprimer des publications ou faire tout ce que nous souhaitons simplement en écrivant une bonne requête, puis en utilisant soigneusement nos champs personnalisés..
Continuons et écrivons une requête pour notre page d'index. Nous voulons faire les choses suivantes:
Voici la requête que nous allons utiliser pour faire cela:
Accentsconagua
query_posts (array ('post_type' => 'post', 'posts_per_page' => 4, 'meta_key' => 'Date', 'meta_value' => date ("Y / m / d"), "meta_compare" => '> =', 'orderby' => 'meta_value', 'order' => 'ASC', 'paged' => get_query_var ('paged'))); Cela contient beaucoup de symboles et de lettres, alors décomposons-le:
Hou la la! Profonde respiration. Nous venons d'écrire le code qui va désormais alimenter la majorité de notre travail - bon travail! Maintenant, déposons-le dans notre fichier index.php. Voici à quoi devrait ressembler le fichier index.php:
'post', 'posts_per_page' => 4, 'meta_key' => 'Date', 'meta_value' => date ("Y / m / d"), 'meta_compare' => '> =', 'orderby' = > 'meta_value', 'order' => 'ASC', 'paged' => get_query_var ('paged'))); ?>
Cliquez sur Enregistrer, puis chargez votre site. Quelque chose ne va pas ici non? Tous vos messages ont disparu:
Ne pas s'inquiéter! Cela signifie que notre requête a fonctionné. N'oubliez pas que vous avez dit à WordPress d'utiliser le champ personnalisé "Date" pour afficher vos publications? Aussi astucieux que soit WordPress, si vous ne définissez pas de champ personnalisé "Date" dans vos publications, vos publications ne seront pas affichées! Maintenant, nous devons remédier à notre problème.
Chargez votre tableau de bord WordPress et accédez à l'un de vos messages. Cliquez sur 'modifier'. Si vous n'avez jamais utilisé de champs personnalisés sur votre site, il est probable que les champs seront masqués dans votre panneau d'édition. Pour les activer, cliquez sur "Options d'écran" dans le coin supérieur droit de votre fenêtre, puis cochez la case en regard de "Champs personnalisés". Cela devrait vous donner la possibilité d'ajouter des champs personnalisés en faisant défiler l'écran jusqu'en bas. Ajouter un nouveau champ personnalisé avec le nom 'Date'
Le champ personnalisé est sensible à la casse. Peu importe ce que vous tapez tant que cela correspond au nom du champ personnalisé dans votre requête.
Maintenant, vous devez également ajouter une date au format correct. Plus tôt, nous avons précisé dans notre requête que nous allions utiliser le format de date: AAAA / MM / JJ - Vous devez vous en tenir à ce format pour ce tutoriel. Si vous ne le faites pas, votre code ne fonctionnera pas. En effet, WordPress est incroyablement efficace pour comparer les dates et, en commençant par l'année en premier, garantit que seuls les messages de cette année et à l'avenir seront diffusés. Ensuite, il en va de même pendant des mois. Puis pendant des jours.
Bien que ce format de date ne vous semble pas naturel, il vous épargnera beaucoup de tracas. Vous devriez avoir quelque chose qui ressemble à ceci:
Ajoutez des dates à toutes vos publications en utilisant le champ personnalisé "Date" maintenant. Rechargez ensuite votre fichier index.php et vous verrez que vous avez les quatre concerts (posts) avec la date la plus proche affichée. Quatre auront également disparu (en supposant que vous utilisiez le fichier XML que je vous ai donné dans la première partie). Il y a une raison pour cela et nous allons examiner cela dans un instant.
TicketTailor est un site formidable proposant un service de billetterie aux organisateurs de concerts. Outre un service client incroyable, ils disposent également d'une plate-forme dorsale étendue fournissant des statistiques sur la vente de billets, des capacités de lien d'affiliation, des capacités de billetterie avancées telles que différents niveaux de tarification, ainsi que la possibilité d'imprimer des listes d'invités conviviales pour des concerts..
Vous pourrez peut-être utiliser ces fonctionnalités ailleurs, mais ce que vous ne pouvez obtenir nulle part ailleurs, c’est l’aide fournie par le personnel de TicketTailor pour la personnalisation. Avec les trois principaux forfaits dans leur plan de tarification, l'équipe derrière TicketTailor personnalise votre page de vente sur son serveur pour ressembler exactement à votre site WordPress - et ce, quel que soit le résultat. C'est assez intelligent.
Ceci n'est pas inclus dans les forfaits Basic ou Promoter, mais si vous ne voulez pas payer, vous pouvez aussi utiliser ces services..
Inscrivez-vous sur TicketTailor et configurez un événement pour que vous ayez une URL de billetterie à laquelle envoyer des personnes et que vous pourrez utiliser dans ce tutoriel..
Si vous avez sauté l'étape 3, vous ne vous serez pas inscrit pour TicketTailor et vous serez maintenant perdu. Tu devrais y retourner et le faire maintenant.
Ainsi, votre événement test est configuré sur TicketTailor et vous pouvez accéder à votre «magasin» en utilisant le lien situé sur le panneau d'administration de TicketTailor. Connectons maintenant notre site WordPress et notre site TicketTailor. Nous ferons cela en utilisant des boutons d'appel à l'action qui sont alimentés dynamiquement.
Rappelez-vous comment nous avons ajouté un champ personnalisé pour "Date" à l'étape 2? Maintenant, nous allons faire la même chose pour notre lien de ticket. Sauf que cette fois nous n'avons pas besoin d'écrire une requête.
Ouvrez l'éditeur de publication et ajoutez le champ personnalisé "Ticket", puis entrez l'URL de l'événement test que vous avez configuré sur TicketTailor afin que votre panneau de publication ressemble à ceci:
Nous devons utiliser le champ personnalisé "Ticket" pour générer un bouton sous l'affiche pour le concert - mais nous voulons seulement qu'il affiche le bouton s'il existe un champ personnalisé "Ticket" pour la publication. Ouvrez le fichier content.php et déposez le code suivant juste en dessous de la ligne 14 (qui appelle le contenu de l'article)
ID, 'Ticket', true); if ($ Ticket):?> "> Obtenir des billets
Maintenant, actualisez votre page d'index et tant que votre événement est:
Vous devriez voir quelque chose comme ça:
Internet est plein de mots à la mode - aucun domaine n’est aussi plein de mots à la mode que le monde de la conception Web. L’une des grandes tendances du design est l’idée d’utiliser un bouton pour inciter quelqu'un à faire quelque chose. C'est ce qu'on appelle un "appel à l'action" et ils fonctionnent vraiment - nous allons donc transformer ce simple lien de ticket en appel à l'action en utilisant quelques lignes de CSS et une balise de classe sur notre code HTML. J'ai utilisé l'exemple suivant, mais vous pouvez utiliser ce que vous voulez. Ajoutez simplement ce qui suit à votre fichier style.css:
a.btn width: 100px; remplissage: 10px 10px 10px 10px; marge inférieure: 10px; taille de police: 16px; texte-décoration: aucun; Couleur blanche; text-shadow: -1px -1px 2px #fff; arrière-plan: # ff00cc; bordure: 1px solide #ccc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; a.btn: hover text-shadow: -1px -1px 2px #fff; arrière-plan: # 00bafb; bordure: 1px solide #ccc;
Ensuite, mettez à jour votre fichier content.php afin d’adapter ces nouveaux styles en modifiant votre lien:
"> Obtenir des billets
Actualisez-le et vous aurez un beau fichier de gabarit qui renverra à une page TicketTailor qui utilise un joli bouton d’appel à l’action, une boucle intelligente et un peu de réflexion latérale pour vous offrir un très bon site web de billetterie ressemblant à ceci:
Bien que nous puissions nous arrêter ici et avoir un site Web vraiment fonctionnel, il y a quelques autres choses que nous pouvons faire..
Il y a quelques choses que tout le monde qui va vivre des concerts de musique aiment et ceux-ci sont:
Étant donné que vous avez déjà la plupart des outils au bout des doigts pour rendre vos clients encore plus heureux, pourquoi ne pas aller plus loin, ils aimeraient davantage venir à vos émissions si vous les rendez un peu plus heureux que d'autres promoteurs.
Rappelez-vous que nous avons coupé la moitié de nos affiches de concert de notre requête en définissant le nombre de concerts à afficher comme «4» à l'étape 1? Nous en venons maintenant à la raison. Ne serait-il pas agréable de permettre à vos clients de voir tous les spectacles que vous avez présentés à côté de tous les spectacles à venir? Sûr que ce serait!
Pour ce faire, ouvrez votre fichier index.php et modifiez-le comme suit:
'post', 'posts_per_page' => -1, 'meta_key' => 'Date', 'meta_value' => date ("Y / m / d"), 'meta_compare' => '> =', 'orderby' => 'meta_value', 'order' => 'ASC',)); ?>Événements passés
'post', 'posts_per_page' => -1, 'meta_key' => 'Date', 'meta_value' => date ("Y / m / d"), 'meta_compare' => '<', 'orderby' => 'meta_value', 'order' => 'DESC', 'paged' => get_query_var ('paged'))); ?>C’est une grande section de code, alors divisons-la en morceaux faciles à gérer.
Vous reconnaîtrez déjà la première partie car c’est la requête que nous avons utilisée précédemment. La seule différence est que j'ai défini l'argument posts_per_page sur -1, ce qui signifie que la page d'accueil ne paginera jamais..
La deuxième requête, la deuxième moitié du code, devrait également vous sembler très familière, car elle est presque identique au code que nous avons écrit précédemment, à deux exceptions près:
- 'meta_compare' est défini sur '<' so that WordPress knows we want to display posts which are in the past.
- 'ordre' est réglé sur décroissant pour afficher en premier les événements passés les plus récents. Si vous voulez d'abord afficher les événements les plus anciens, vous pouvez définir ceci sur ASC plutôt que sur DESC.
L'autre différence dans le code est que nous avons appelé une nouvelle partie de modèle pour les événements passés, car les billets pour les événements passés ne sont plus en vente. Nous pourrions écrire des instructions conditionnelles et utiliser simplement le standard content.php, mais cela est inutilement difficile. Il vous suffit donc de dupliquer le fichier content.php et de supprimer les lignes qui affichent le bouton 'Obtenir des tickets':
ID, 'Ticket', true); if ($ Ticket):?> "> Obtenir des billetsEt comment vendre de la marchandise?
Vous savez déjà comment procéder, car vous avez déjà configuré les liens de ticket et les champs personnalisés correspondants. Vendre des affiches ou des t-shirts via BigCartel ou un service équivalent est exactement la même chose. Configurez simplement un champ personnalisé appelé "Merch" par exemple, entrez l'URL de votre produit et appuyez sur Mettre à jour. Ensuite, ajoutez une ligne de code juste en dessous de votre code "Get Tickets" qui ressemble à ceci:
ID, 'Merch', vrai); if ($ Merch):?> "> Obtenez MerchVous pouvez également ajouter cet extrait de code à votre fichier d'événements passés (content-past.php) afin que les clients puissent toujours acheter des produits chez vous..
Conclusion
C'est ça! Vous avez maintenant un site Web de billetterie qui intègre WordPress avec un fantastique fournisseur de billetterie, affiche les boutons d’appel aux boutons d’action et organise votre contenu sans que vous utilisiez une catégorie, un type de message personnalisé ou une taxonomie.
Il y a tellement de choses pour lesquelles vous pourriez utiliser cette idée. Laissez un commentaire pour nous dire ce que vous faites avec le code de ce tutoriel. S'amuser!
