Share
Au début de l'année dernière, un organisateur de concerts local est venu me voir et m'a demandé de créer un site Web de billetterie pour sa société. Il voulait pouvoir vendre des billets pour les concerts qu'il promeut. L’année dernière, le volume de ses émissions était trop important pour écrire un billet de blog occasionnel qui en faisait la promotion ou des liens tweet vers un guichet en ligne..
Il voulait un endroit où tous ceux qui voudraient regarder de la musique live dans ma ville (Cardiff, Royaume-Uni) pourraient aller acheter des billets pour de superbes spectacles..
Nous avons décidé que WordPress serait le meilleur moyen de répondre à ses besoins et je me suis mis à réfléchir à la meilleure façon de mettre en œuvre cette idée. Ce didacticiel en deux parties vous montrera comment gérer un site Web similaire..
Dans la première partie, nous parlerons des étapes de planification du projet et examinerons ce qui est vraiment nécessaire pour un système de billetterie, voyez comment utiliser WordPress pour créer un environnement agréable pour vos utilisateurs / clients, et nous allons aussi voir comment créer un squelette prêt pour la deuxième partie.
Dans la deuxième partie, nous nous basons sur les décisions que nous avons prises dans la première partie de la série et examinons des champs personnalisés et expliquons comment nous pouvons automatiser la génération de boutons «Acheter des billets» pour chaque concert. Nous utiliserons également cette idée de champ personnalisée pour voir comment nous pouvons vendre des marchandises pour le concert (en particulier les affiches que nous avons commandées pour la publicité) et comment nous pouvons éliminer le besoin d’utiliser des catégories pour différencier le passé du futur. événements.
Nous verrons ensuite TicketTailor qui fournit un excellent service premium pour les sites de billetterie et vous construira un magasin personnalisé à l'aide de la feuille de style de votre installation WordPress..
Pour commencer, nous devons planifier notre projet. Le moyen le plus simple pour nous de faire cela est de résoudre nos demandes. Contrairement aux autres projets sur lesquels nous pourrions travailler pour des clients, un site Web de billetterie est très simple car nous n’avons pas à traiter de nombreux types de contenu ou de styles de texte. En fait, nous n'utiliserons que deux ou trois styles de texte dans tout ce didacticiel. Notre CSS s'occupera principalement de la structure de nos archives.
Un site Web de billetterie a trois exigences:
Lorsque j'ai commencé le travail de conception pour mon client, je pensais que le moyen le plus simple de gérer la séparation entre les événements à venir pour lesquels les clients pouvaient acheter des billets et les informations générales sur la société de promotions pour laquelle je travaillais était d'enregistrer différentes taxonomies / publications. les types.
Vous êtes probablement déjà familiarisé avec l'excellente fonctionnalité de type de publication personnalisée de WordPress, qui vous permet de créer un moyen de traiter toutes sortes d'informations. Mais n'oubliez pas votre utilisateur ici!
Nous ne cherchons pas à tirer le meilleur parti du Codex WordPress! Nous souhaitons faciliter l’utilisation du site Web par nos utilisateurs. En réalité, une utilisation intelligente des méta-champs et des requêtes personnalisées éliminerait même la nécessité d'utiliser des catégories dans notre système de billetterie.
Après avoir discuté de ce dont nous devrons tenir compte avant de nous mettre au travail, nous pouvons maintenant réfléchir à la manière dont nous allons construire notre site Web. Pour ce tutoriel, nous allons supposer que vous organisez pas mal de concerts et que, sur la page d’accueil, vous voulez que les gens puissent voir vos affiches afin de savoir exactement où cliquer..
Pour ce tutoriel, nous utiliserons une installation super basique de WordPress et travaillerons avec le thème TwentyEleven fourni en standard. Nous allons l'utiliser car il est déjà très stylé et très flexible si nous voulons simplement continuer notre travail..
Pour commencer, nettoyons une partie du code fourni par défaut avec TwentyEleven. Nous n'avons pas besoin d'une image aléatoire telle que fournie par WordPress, alors ouvrez le fichier header.php et extrayez le code suivant:
"> ID) && (/ * $ src, $ width, $ height * / $ image = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), tableau (HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH))) && $ image <1]> = HEADER. / Houston, nous avons une nouvelle image d'en-tête! echo get_the_post_thumbnail ($ post-> ID, 'post-thumbnail'); sinon:?>; ?>)
Vous pouvez simplement supprimer l'image d'en-tête à l'aide des options de thème TwentyEleven si vous préférez
Bien sûr, vous pouvez simplement supprimer l'image d'en-tête à l'aide des options de thème TwentyEleven si vous préférez, mais j'aime bien nettoyer le code que je n'utiliserai jamais autant que je peux, donc je le supprime toujours immédiatement de header.php. L'autre chose que nous n'utiliserons pas, c'est l'encadré parce que nous souhaitons utiliser à fond nos illustrations pour affiches. Nous allons donc simplement supprimer cela du code.
Ouvrez index.php et supprimez cette ligne:
Maintenant, si vous prévisualisez cela, cela aura l'air un peu bizarre car notre fichier CSS pense toujours qu'il y a une barre latérale. Remédions à cela et ouvrons style.css.
Le numéro de ligne du code qui contrôle notre espace pour la barre latérale est 89. Donc, recherchez cette ligne dans le CSS et modifiez-la comme suit:
#contenu marge: 0 34% 0 7,6%; largeur: 58,4%;
pour ça:
#content margin: 10px;
Maintenant, appuyez sur Enregistrer, actualisez la page d'accueil de votre site dans votre navigateur et vous verrez que l'espace pour la barre latérale a disparu. Impressionnant. Nous pouvons maintenant travailler sur la manière d’afficher nos concerts. Pour faciliter l’explication, j’ai inclus un fichier XML contenant quelques exemples de publication, ainsi qu’une image de maquette d’affiche que nous allons utiliser dans la suite de ce didacticiel..
Importez les articles dans la zone d'administration de WordPress, puis jetez un coup d'œil sur votre site. Vous verrez que vous avez maintenant 8 dates de concert avec des affiches comme seul contenu dans le corps de l'article. C'est acceptable.
Plus tard, nous utiliserons un service de billetterie appelé TicketTailor pour gérer les informations sur les spectacles. La seule chose importante en ce qui concerne le contenu de WordPress est donc l'affiche du concert..
Maintenant, montrons-le d'une manière ordonnée. Ouvrez content.php afin que nous puissions sortir tout ce dont nous n’avons pas besoin d’ici. Enlevez tout ce qui est autre que le contenu de l'article et vous vous retrouverez avec ceci:
> →', 'vingt onze' ) ); ?>
Pour l’instant, c’est tout ce que nous devons inclure dans content.php. Maintenant que nous n'avons que les images des affiches, nous nous concentrons beaucoup sur les concerts eux-mêmes plutôt que sur les informations qui les entourent. Cela le rend vraiment simple pour nous et nos utilisateurs. Mais nous ne voulons pas que l'utilisateur ait à faire défiler pendant des heures pour voir le contenu qu'il veut vraiment voir. Utilisons une astuce CSS soignée pour que tout semble un peu plus étroit.
Allez à la ligne 701 dans votre fichier CSS et vous devriez trouver les classes .hentry. Ils ressemblent à ceci:
.hentry, .no-results border-bottom: 1px solid #ddd; marge: 0 0 1,625 um; rembourrage: 0 0 1.625em; position: relative; .hentry: last-child, .no-results border-bottom: none;
Nous allons changer les valeurs de la première propriété, puis supprimer le dernier enfant car nous n'aurons plus besoin d'un style pour cela. Voici quelques CSS mis à jour pour nous donner une belle mise en page propre:
.hentry, .no-results margin: 0.5em; rembourrage: 0 0 1.625em; float: gauche;
Pour l'instant, c'est tout ce que nous allons faire. Dans la seconde moitié du didacticiel, nous allons procéder comme suit:
Accentsconagua
; ?>)