Cara Membangun Situs Web Penjualan Tiket Dengan WordPress dan TicketTailor, Hari Kedua: Membangun

Pada bagian pertama dari tutorial ini kami melihat hal-hal yang perlu Anda pertimbangkan sebelum Anda mulai bekerja dan membuat templat situs web tiket Anda. Sekarang, kita akan menambahkan semua fungsi yang Anda inginkan dari situs web tiket.

Kami akan terjun langsung ke templat yang dibuat dari pemasangan WordPress default dari Twenty Eleven dan membangun kueri keren yang menggunakan data bidang khusus. Kemudian kami akan mendaftar ke TicketTailor dan mempelajari cara membuat ajakan bertindak untuk memastikan bahwa pengguna kami dapat membeli dengan mudah.

Langkah 1 Pertanyaan Tentang Pertanyaan

Salah satu hal yang saya selalu terkejut ketika menulis kode untuk digunakan dengan WordPress adalah jumlah tugas lanjutan yang dapat diselesaikan dengan cuplikan kode yang relatif sederhana dan sedikit pemikiran lateral. Saya telah kehilangan hitungan berapa kali saya menggunakan solusi yang terlalu rumit untuk masalah hanya untuk menemukan bahwa mengubah satu baris kode di kemudian hari menghilangkan kebutuhan untuk 100 baris yang saya tulis ketika saya mengirimkan proyek ke saya klien.

Situs web tiket adalah salah satu contohnya. Klien saya menginginkan sebuah situs yang membuat pemisahan antara peristiwa masa depan dan masa lalu. Saya memecahkan masalah dengan plugin yang secara otomatis mengubah kategori event dari 'future' menjadi 'past' pada waktu tertentu pada hari tertentu. Ini sama sekali tidak diperlukan.

Permintaan posting WordPress memungkinkan kami untuk melakukan kueri menurut bidang khusus. Itu berarti bahwa kita dapat mengatur bidang kustom pada posting kami yang disebut 'Date', misalnya, dan kemudian mengatur posting kami dengan itu. Seperti yang mungkin Anda lihat, itu berarti bahwa kami juga dapat membuat tulisan hilang atau melakukan apa pun yang kami inginkan hanya dengan menulis kueri yang bagus dan kemudian menggunakan bidang khusus kami dengan hati-hati.

Mari kita lanjutkan dan menulis pertanyaan untuk halaman indeks kami. Kami ingin melakukan hal-hal berikut:

1. Tampilkan 4 konser berikutnya
2. Sembunyikan yang sudah berlalu
3. Atur mereka berdasarkan tanggal yang akan mereka tayangkan daripada tanggal saat kami membuat postingan

Berikut kueri yang akan kita gunakan untuk melakukan itu:

1

query_posts(

2

  array (

3

		'post_type' => 'post',

4

		'posts_per_page' => 4,

5

		'meta_key' => 'Date',

6

		'meta_value' => date("Y/m/d"),

7

		'meta_compare' => '>=',

8

		'orderby' => 'meta_value',

9

		'order' => 'ASC',

10

		'paged' => get_query_var('paged')

11

	)

12

);

Itu punya banyak simbol dan huruf di dalamnya, jadi mari kita hancurkannya:

• post_type – Ini hanya memberitahu WordPress bahwa kami ingin menggunakan posting daripada halaman atau jenis posting lain
• posts_per_page – Atur jumlah posting yang ingin Anda tampilkan. Kami telah menggunakan 4 untuk contoh tetapi Anda dapat mengatur angka apa pun yang 1 atau lebih tinggi
• meta_key – Ingat bahwa kita dapat mengquery posting oleh suatu field kustom? Ini memberitahu WordPress apa bidang yang kita gunakan disebut
• meta_value – Karena kami menggunakan tanggal sebagai permintaan kami, ini memberitahu WordPress format tanggal apa yang diharapkan
• meta_compare – Ini persis seperti yang dikatakannya: membandingkan nilai meta dari semua posting dalam loop. Di sini, membandingkannya dengan tanggal yang ditetapkan pada server web Anda dan memastikan hanya menampilkan posting yang memiliki tanggal yang sekarang atau di masa mendatang
• order_by – Mengatakan WordPress bahwa kami ingin posting kami ditampilkan dalam urutan meta_value daripada tanggal posting standar
• order – Ini memungkinkan WordPress tahu bahwa kami akan menampilkan pos dalam urutan tanggal naik: pertunjukan terdekat pertama, tanggal terjauh di bagian bawah halaman
• paged – jika pagination diaktifkan pada tema Anda, Anda akan membutuhkan ini. Jika tidak, itu tidak akan mempengaruhi template Anda

Wow! Napas dalam. Kami baru saja menulis kode yang akan menggerakkan sebagian besar pekerjaan kami mulai sekarang - kerja bagus! Sekarang mari kita masukkan ke file index.php kami. Inilah yang file index.php akan terlihat seperti setelah itu:

1

<?php

2

/**

3

 * The main template file.

4

 *

5

 * This is the most generic template file in a WordPress theme

6

 * and one of the two required files for a theme (the other being style.css).

7

 * It is used to display a page when nothing more specific matches a query.

8

 * E.g., it puts together the home page when no home.php file exists.

9

 * Learn more: https://codex.wordpress.org/Template_Hierarchy

10

 *

11

 * @package WordPress

12

 * @subpackage Twenty_Eleven

13

 */

14

15

get_header(); ?>

16

17

		<div id="primary">

18

			<div id="content" role="main">

19

20

21

				<?php twentyeleven_content_nav( 'nav-above' ); ?>

22

23

				<?php if (have_posts()) : ?>

24

25

 <?php 

26

            query_posts( array ( 

27

                'post_type' => 'post',

28

                'posts_per_page' => 4,

29

                'meta_key' => 'Date',

30

                'meta_value' => date("Y/m/d"),

31

                'meta_compare' => '>=',

32

                'orderby' => 'meta_value',

33

                'order' => 'ASC',

34

                'paged' => get_query_var('paged')

35

                ) ); 

36

37

               ?>	

38

 <?php while (have_posts()) : the_post(); ?>

39

40

					<?php get_template_part( 'content', get_post_format() ); ?>

41

42

				<?php endwhile; ?>

43

44

				<?php twentyeleven_content_nav( 'nav-below' ); ?>

45

46

			<?php else : ?>

47

48

				<article id="post-0" class="post no-results not-found">

49

					<header class="entry-header">

50

						<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>

51

					</header><!-- .entry-header -->

52

53

					<div class="entry-content">

54

						<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>

55

						<?php get_search_form(); ?>

56

					</div><!-- .entry-content -->

57

				</article><!-- #post-0 -->

58

59

			<?php endif; ?>

60

61

			</div><!-- #content -->

62

		</div><!-- #primary -->

63

64

<?php get_footer(); ?>

Klik simpan lalu muat situs Anda. Ada yang salah di sini kan? Semua postingan Anda telah hilang:

Kemana Saja Kiriman Saya Lewat?

Tidak perlu khawatir! Itu artinya permintaan kami berhasil. Ingat bahwa Anda memberi tahu WordPress untuk menggunakan bidang khusus 'Date' untuk menampilkan posting Anda? Yah, sepintar Wordpress adalah, jika Anda tidak mengatur bidang kustom 'Date' pada posting Anda, itu tidak akan menampilkan posting Anda! Sekarang kita harus memperbaiki masalah kita.

Langkah 2 Menambahkan Kustom Bidang 'Date'

Muatkan dashboard WordPress Anda dan arahkan ke salah satu posting Anda. Klik 'edit'. Jika Anda belum pernah menggunakan bidang khusus di situs Anda sebelumnya, kemungkinan bidang tersebut akan disembunyikan di panel pengeditan tulisan Anda. Untuk mengaktifkannya, klik 'Screen Options' di pojok kanan atas jendela Anda dan kemudian centang kotak di sebelah 'Custom Fields.' Itu seharusnya memberi Anda opsi untuk menambahkan bidang khusus dengan menggulir ke bagian bawah jendela mulai sekarang. Tambahkan bidang khusus baru dengan nama 'Date'

Bidang khusus peka huruf besar kecil. Tidak masalah apa yang Anda ketik asalkan cocok dengan nama bidang kustom dalam permintaan Anda.

Sekarang Anda juga perlu menambahkan tanggal dalam format yang benar. Sebelumnya pada kami ditentukan dalam permintaan kami bahwa kami akan menggunakan format tanggal: YYYY/MM/DD - Anda harus tetap menggunakan format ini untuk tutorial ini. Jika tidak, kode Anda tidak akan berfungsi. Itu karena WordPress sangat efisien dalam membandingkan tanggal dan dimulai dengan tahun pertama memastikan bahwa hanya posting tahun ini dan di masa depan akan ditampilkan. Kemudian ia melakukan hal yang sama selama berbulan-bulan. Kemudian berhari-hari.

Meskipun format tanggal ini mungkin tidak terasa alami bagi Anda, ini akan menghemat banyak kerumitan. Anda harus memiliki sesuatu yang terlihat seperti ini:

Tambahkan tanggal ke semua pos Anda menggunakan bidang 'Date' khusus sekarang. Kemudian muat ulang file index.php Anda dan Anda akan melihat bahwa Anda telah mendapat empat konser (posting) dengan 'Date' terdekat yang ditampilkan. Empat akan hilang juga (dengan asumsi Anda menggunakan file XML yang saya berikan di bagian pertama). Ada alasan untuk itu dan kita akan melihatnya sebentar lagi.

Langkah 3 Mendaftar ke TicketTailor

TicketTailor adalah situs hebat yang menyediakan layanan tiket dan pembayaran untuk promotor konser. Selain memiliki layanan pelanggan yang luar biasa, mereka juga memiliki platform back end yang luas yang memberikan statistik penjualan tiket, kemampuan tautan afiliasi, kemampuan tiket yang canggih seperti tingkatan harga yang berbeda, dan juga kemampuan untuk mencetak daftar tamu yang ramah pengguna untuk konser.

Meskipun Anda mungkin bisa mendapatkan kemampuan tersebut di tempat lain, apa yang tidak dapat Anda dapatkan di mana saja adalah bantuan penyesuaian dari staf TicketTailor. Dengan tiga rencana teratas dalam rencana harga mereka, tim di balik TicketTailor menyesuaikan halaman penjualan Anda di server mereka agar terlihat persis seperti situs WordPress Anda - terlepas dari apa yang telah Anda lakukan untuk itu. Itu sangat pintar.

Ini tidak termasuk dalam paket Dasar atau Promotor tetapi jika Anda tidak ingin membayar, Anda juga dapat menggunakan layanan tersebut.

Mendaftar untuk TicketTailor dan mengatur acara sehingga Anda mendapat URL tiket untuk mengirim orang dan gunakan dalam tutorial ini.

Langkah 4 Menambahkan Tautan Tiket

Jika Anda melewatkan Langkah 3, Anda tidak akan mendaftar ke TicketTailor dan sekarang Anda akan hilang. Anda harus kembali dan melakukannya sekarang.

Jadi Anda telah menyiapkan acara pengujian Anda di TicketTailor dan Anda dapat mengakses 'store' Anda menggunakan tautan di panel admin TicketTailor. Sekarang mari kita menghubungkan situs WordPress dan situs TicketTailor kami. Kami akan melakukan ini menggunakan tombol ajakan bertindak yang dinyalakan secara dinamis.

Bidang Khusus untuk Tautan Tiket

Ingat bagaimana kami menambahkan bidang khusus untuk 'Date' pada Langkah 2? Sekarang kita akan melakukan hal yang sama untuk tautan tiket kami. Kecuali kali ini kami tidak perlu menulis pertanyaan.

Buka editor pos dan tambahkan kolom kustom 'Ticket' dan kemudian masukkan URL acara tes yang Anda siapkan di TicketTailor sehingga panel pos Anda terlihat seperti ini:

Kita perlu menggunakan bidang kustom 'Ticket' untuk menghasilkan tombol di bawah poster untuk konser - tetapi kami hanya ingin menampilkan tombol jika ada bidang kustom 'Ticket' untuk posting. Buka file content.php dan letakkan kode berikut tepat di bawah baris 14 (yang memanggil konten posting)

1

<!-- Display a ticket link only if it exists -->

2

3

<?php $Ticket = get_post_meta($post->ID, 'Ticket', true);

4

5

	if($Ticket) : ?>

6

7

		<a href="<?php echo $Ticket; ?>">Get Tickets</a>

8

9

	<?php endif; ?>

Sekarang segarkan halaman indeks Anda dan selama acara Anda:

• Tidak di masa lalu,
• Salah satu dari empat peristiwa berikutnya,

Anda akan melihat sesuatu seperti ini:

Langkah 5 Mengubah Itu Menjadi Panggilan untuk Bertindak

Internet penuh dengan kata-kata buzz - tidak ada bidang yang lebih penuh dengan kata-kata buzz daripada dunia desain web. Salah satu tren besar dalam desain adalah ide menggunakan tombol untuk membuat seseorang melakukan sesuatu. Ini disebut 'call to action' dan mereka benar-benar berfungsi - jadi kami akan mengubah tautan tiket sederhana menjadi ajakan bertindak menggunakan beberapa baris CSS dan tag kelas pada HTML kami. Saya menggunakan CSS berikut sebagai contoh tetapi Anda dapat menggunakan apa pun yang Anda suka. Cukup tambahkan yang berikut ini ke file style.css Anda:

1

a.btn {

2

  width: 100px;

3

  padding: 10px 10px 10px 10px;

4

  margin-bottom: 10px;

5

  font-size: 16px;

6

  text-decoration: none;

7

  color: white;

8

  text-shadow: -1px -1px 2px #fff;

9

  background: #ff00cc;

10

  border: 1px solid #ccc;

11

  border-radius: 3px;

12

  -moz-border-radius: 3px;

13

  -webkit-border-radius: 3px;

14

}

15

16

a.btn:hover {

17

  text-shadow: -1px -1px 2px #fff;

18

  background: #00bafb;

19

  border: 1px solid #ccc;

20

}

Dan kemudian perbarui file content.php Anda untuk mengakomodasi gaya baru tersebut dengan mengubah tautan Anda menjadi ini:

1

<a class="btn" href="<?php echo $Ticket; ?>">Get Tickets</a>

Refresh itu dan Anda punya file template yang tampak bagus yang terhubung ke halaman TicketTailor yang menggunakan tombol panggilan aksi yang indah, lingkaran cerdas, dan sedikit pemikiran lateral untuk membuat Anda situs web tiket yang sangat bagus yang terlihat seperti ini:

Langkah Tambahan Menambahkan Beberapa Berkembang

Meskipun kami hanya bisa berhenti di sana dan memiliki situs web yang benar-benar berfungsi, ada beberapa hal lagi yang dapat kami lakukan.

Ada beberapa hal yang semua orang yang pergi untuk konser musik seperti dan mereka adalah:

• Menghidupkan kembali kenangan konser favorit mereka
• Membeli barang dagangan

Melihat karena Anda sudah mendapatkan sebagian besar alat di ujung jari Anda untuk membuat pelanggan Anda lebih bahagia, mengapa tidak melangkah dua langkah lebih jauh - mereka lebih suka datang ke acara Anda jika Anda membuat mereka sedikit lebih bahagia daripada promotor lainnya .

Bantu Mereka Menghidupkan Kembali Kenangan Mereka

Ingat kami memotong setengah poster konser kami dari kueri kami dengan menetapkan jumlah pertunjukan untuk ditampilkan sebagai langkah '4' di Langkah 1? Sekarang kami datang untuk alasan itu. Bukankah ini akan menjadi sentuhan yang bagus untuk memungkinkan pelanggan Anda melihat semua acara yang pernah Anda tampilkan di samping semua acara yang akan Anda hadirkan? Tentu saja!

Untuk melakukan itu, buka file index.php Anda dan ubah ke yang berikut:

1

<?php

2

/**

3

 * The main template file.

4

 *

5

 * This is the most generic template file in a WordPress theme

6

 * and one of the two required files for a theme (the other being style.css).

7

 * It is used to display a page when nothing more specific matches a query.

8

 * E.g., it puts together the home page when no home.php file exists.

9

 * Learn more: http://codex.wordpress.org/Template_Hierarchy

10

 *

11

 * @package WordPress

12

 * @subpackage Twenty_Eleven

13

 */

14

15

get_header(); ?>

16

17

		<div id="primary">

18

			<div id="content" role="main">

19

20

21

				<?php twentyeleven_content_nav( 'nav-above' ); ?>

22

23

				<?php if (have_posts()) : ?>

24

25

 <?php 

26

            query_posts( array ( 

27

                'post_type' => 'post',

28

                'posts_per_page' => -1,

29

                'meta_key' => 'Date',

30

                'meta_value' => date("Y/m/d"),

31

                'meta_compare' => '>=',

32

                'orderby' => 'meta_value',

33

                'order' => 'ASC',

34

                ) ); 

35

36

               ?>	

37

 <?php while (have_posts()) : the_post(); ?>

38

39

					<?php get_template_part( 'content', get_post_format() ); ?>

40

41

				<?php endwhile; ?>

42

43

				<?php twentyeleven_content_nav( 'nav-below' ); ?>

44

45

			<?php else : ?>

46

47

				<article id="post-0" class="post no-results not-found">

48

					<header class="entry-header">

49

						<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>

50

					</header><!-- .entry-header -->

51

52

					<div class="entry-content">

53

						<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>

54

						<?php get_search_form(); ?>

55

					</div><!-- .entry-content -->

56

				</article><!-- #post-0 -->

57

58

			<?php endif; ?>

59

60

			<h2>Past Events</h2>

61

<div id="container_division">

62

<?php if (have_posts()) : ?>

63

64

     <?php 

65

            query_posts( array ( 

66

                'post_type' => 'post',

67

                'posts_per_page' => -1,

68

                'meta_key' => 'Date',

69

                'meta_value' => date("Y/m/d"),

70

                'meta_compare' => '<',

71

                'orderby' => 'meta_value',

72

                'order' => 'DESC',

73

                'paged' => get_query_var('paged')

74

                ) ); 

75

                ?>	

76

77

    <?php while (have_posts()) : the_post(); ?>

78

79

<?--Use a new template for the content-->

80

<?php get_template_part( 'content-past', get_post_format() ); ?>

81

82

83

<?php endwhile; else: ?>

84

<?php endif; ?>

85

86

			</div><!-- #content -->

87

		</div><!-- #primary -->

88

89

<?php get_footer(); ?>

Itu bagian besar dari kode jadi mari kita hancurkan menjadi bagian yang dapat dikelola.

Bagian pertama yang akan Anda kenali karena itu adalah kueri yang kami gunakan sebelumnya. Satu-satunya perbedaan adalah bahwa saya telah mengatur argumen posts_per_page ke -1 yang berarti halaman depan tidak akan pernah menjadi nomor halaman.

Kueri kedua, paruh kode yang terakhir, seharusnya juga terlihat sangat familier bagi Anda karena hampir persis sama dengan kode yang kami tulis sebelumnya dengan dua pengecualian:

• 'meta_compare' disetel ke '<' sehingga WordPress tahu kami ingin menampilkan posting yang ada di masa lalu.
• 'order' diatur ke descending untuk membuat peristiwa masa lalu yang paling terakhir ditampilkan lebih dulu. Jika Anda ingin menampilkan acara tertua terlebih dahulu, Anda dapat mengatur ini ke ASC daripada DESC.

Perbedaan lain dalam kode adalah bahwa kami telah memanggil bagian templat baru untuk acara sebelumnya karena tiket untuk acara yang lalu tidak lagi dijual. Kita bisa menulis beberapa pernyataan bersyarat dan hanya menggunakan konten standar.php tetapi itu tidak perlu sulit, cukup gandakan file content.php dan hapus baris yang menampilkan tombol 'Get Ticket':

1

<!-- Display a ticket link only if it exists -->

2

3

<?php $Ticket = get_post_meta($post->ID, 'Ticket', true);

4

5

	if($Ticket) : ?>

6

7

	<a class="btn" href="<?php echo $Ticket; ?>">Get Tickets</a>

8

9

	<?php endif; ?>

Dan Bagaimana Menjual Beberapa Merchandise?

Anda sudah tahu cara melakukan ini karena Anda telah menyiapkan tautan tiket dan bidang khusus untuk mereka sebelumnya. Menjual poster atau t-shirt melalui BigCartel atau layanan yang setara persis sama. Hanya mengatur bidang khusus yang disebut 'Merch' misalnya, masukkan URL produk Anda dan tekan pembaruan. Kemudian tambahkan baris kode tepat di bawah kode 'Get Ticket' Anda yang terlihat seperti ini:

1

<!-- Display a merch link only if it exists -->

2

3

<?php $Merch = get_post_meta($post->ID, 'Merch', true);

4

5

	if($Merch) : ?>

6

7

	<a class="btn" href="<?php echo $Merch; ?>">Get Merch</a>

8

9

	<?php endif; ?>

Anda juga dapat menambahkan potongan ini ke file peristiwa masa lalu (content-past.php) agar pelanggan selalu dapat membeli barang dagangan dari Anda.

Kesimpulan

Seperti itu! Sekarang Anda memiliki situs web tiket yang mengintegrasikan WordPress dengan penyedia tiket fantastis, menampilkan tombol ajakan bertindak dan mengatur konten Anda tanpa Anda pernah menggunakan kategori, jenis posting kustom atau taksonomi.

Ada banyak hal yang bisa Anda gunakan untuk ide ini. Berikan komentar untuk memberi tahu kami apa yang Anda buat dengan kode di tutorial ini. Selamat bersenang-senang!