В начале прошлого года ко мне подошел местный концертный промоутер и попросил меня создать сайт по продаже билетов для его компании. Он хотел иметь возможность продавать билеты на концерты, которые он продвигает. В прошлом году объем его выступлений был слишком велик, чтобы просто писать в блоге редкие сообщения, рекламирующие их, или чирикать ссылки на онлайн-кассы.
Он хотел, чтобы каждый, кто хотел посмотреть живую музыку в моем городе (Кардифф, Великобритания), мог купить билеты на отличные шоу.
Мы решили, что WordPress будет лучшим способом удовлетворить его потребности, и я решил подумать о том, как наилучшим образом реализовать эту идею. Этот учебник, состоящий из двух частей, покажет вам, как вы можете запустить подобный веб-сайт.
В первой части мы поговорим об этапах планирования проекта и рассмотрим, что действительно необходимо для системы продажи билетов, рассмотрим, как использовать WordPress для создания приятной среды для ваших пользователей / клиентов, и мы рассмотрим взгляд на создание скелета, готового для второй части.
Во второй части мы будем опираться на решения, которые мы приняли в первой части серии, и рассмотрим настраиваемые поля и то, как мы можем автоматизировать кнопки «Купить билеты», которые будут генерироваться на каждом концерте. Мы также будем использовать идею настраиваемого поля, чтобы посмотреть, как мы можем продавать товары для концерта (в частности, плакаты, которые мы заказали для рекламы), и как мы можем устранить необходимость использовать категории, чтобы различать будущее и прошлое. События.
Затем мы взглянем на TicketTailor, который предоставляет великолепную премиальную услугу для продажи билетов, и создадим для вас собственный магазин, используя таблицу стилей вашей установки WordPress.
Шаг первый
Для начала нам нужно спланировать наш проект. Самый простой способ сделать это — выработать наши требования. В отличие от других проектов, над которыми мы могли бы работать для клиентов, веб-сайт по продаже билетов очень прост, потому что нам не приходится иметь дело со многими различными видами контента или большим количеством стилей текста. На самом деле, мы будем использовать только два или три стиля текста во всем этом уроке. Наш CSS будет в основном иметь дело со структурой наших архивов.
На сайте продажи билетов есть три требования:
- Продажа билетов — если наш сайт этого не делает, мы делаем это неправильно!
- Предоставление информации о событиях — Использование сообщений, чтобы убедиться, что клиент знает столько, сколько он может знать о событии
- Простота использования — чем проще пользоваться сайтом, тем больше вероятность того, что люди расстаться со своими деньгами
Должны ли мы отделить наш обычный контент от билетов?
Когда я начал работу по дизайну для своего клиента, я подумал, что самый простой способ управлять разделением между предстоящими событиями, на которые клиенты могут покупать билеты, и общей информацией о рекламной компании, в которой я работал, — это регистрировать различные таксономии / посты. типы.
Вы, наверное, уже знакомы с отличной пользовательской функцией типа записей WordPress, которая позволяет вам создавать способы обработки всех видов информации. Но не забывайте свой пользователь здесь!
Мы не стремимся максимально использовать Кодекс WordPress! Мы хотим, чтобы наш пользователь мог легко пользоваться сайтом. На самом деле, умное использование метаполей и пользовательских запросов избавит даже от необходимости использовать категории в нашей системе тикетов.
Давай перейдем к делу!
Поговорив о том, что нам нужно будет рассмотреть, прежде чем приступить к работе, теперь мы можем подумать о том, как мы собираемся создать наш веб-сайт. В этом уроке мы предполагаем, что вы проводите довольно много концертов, и что на главной странице вы хотите, чтобы люди могли видеть ваши постеры, чтобы они точно знали, где нажимать.
Для этого урока мы будем использовать супер базовую установку WordPress и работать с темой TwentyEleven, которая входит в стандартную комплектацию. Мы будем использовать это, потому что это уже хорошо разработано и действительно гибко, если мы просто хотим продолжить нашу работу.
Шаг 2 Настройка нашей темы
Для начала давайте очистим часть кода, который поставляется по умолчанию с TwentyEleven. Нам не нужно случайное изображение, предоставляемое WordPress, поэтому откройте header.php и выньте следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
<?php
// Check to see if the header image has been removed
$header_image = get_header_image();
if ( ! empty( $header_image ) ) :
?>
<a href=»<?php echo esc_url( home_url( ‘/’ ) ); ?>»>
<?php
// The header image
// Check if this is a post or page, if it has a thumbnail, and if it’s a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, ‘post-thumbnail’ );
else : ?>
<img src=»<?php header_image(); ?>» width=»<?php echo HEADER_IMAGE_WIDTH; ?>» height=»<?php echo HEADER_IMAGE_HEIGHT; ?>» alt=»» />
<?php endif;
</a>
<?php endif;
|
Вы можете просто удалить изображение заголовка, используя параметры темы TwentyEleven, если вы предпочитаете
Конечно, вы можете просто удалить изображение заголовка, используя опции темы TwentyEleven, если хотите, но мне нравится очищать код, который я никогда не буду использовать, когда смогу, поэтому я всегда удаляю его из header.php. Еще одна вещь, которую мы не будем использовать, — это боковая панель, потому что мы хотим широко использовать наши плакаты. Так что мы просто удалим это из кода.
Откройте index.php и удалите эту строку:
|
1
|
<?php get_sidebar();
|
Теперь, если вы просматриваете это, это выглядит немного странно, потому что наш CSS-файл все еще думает, что есть боковая панель. Давайте исправим это и откроем style.css.
Номер строки кода, который управляет нашим пространством для боковой панели, равен 89. Поэтому найдите эту строку в CSS и измените ее следующим образом:
|
1
2
3
4
|
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
|
к этому:
|
1
2
3
|
#content {
margin: 10px;
}
|
Теперь нажмите сохранить, обновите домашнюю страницу своего сайта в браузере, и вы увидите, что пространство для боковой панели исчезло. Потрясающие. Теперь мы можем приступить к работе по отображению наших концертов. Для простоты объяснения я включил XML-файл с некоторыми примерами постов, а также изображение постера макета, которое мы будем использовать в оставшейся части этого урока.
Шаг 3 Настройка наших сообщений
Импортируйте записи в административную область WordPress, а затем посмотрите на свой сайт, и вы увидите, что теперь у вас есть 8 концертов с постерами в качестве единственного контента в теле поста. Хорошо.
Позже мы будем использовать сервис билетов на концерты под названием TicketTailor для обработки информации о шоу, и поэтому единственное важное, что касается контента для WordPress, — это плакат для концерта.
Теперь давайте отобразим это аккуратно. Откройте файл content.php, чтобы мы могли извлечь из него все, что нам не нужно. Удалите все, кроме содержимого публикации, и вы останетесь с этим:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<?php
/**
* The default template for displaying content
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
?>
<article id=»post-<?php the_ID(); ?>» <?php post_class();
<?php the_content( __( ‘Continue reading <span class=»meta-nav»>→
</article><!— #post-<?php the_ID();
|
Шаг 4 Очистка нашего шаблона
Пока это все, что нам нужно включить в content.php. Теперь, когда у нас есть только изображения постеров, мы сосредоточились на самих концертах, а не на информации вокруг них. Это делает его действительно простым для нас и наших пользователей. Но мы не хотим, чтобы пользователю приходилось часами прокручивать, чтобы увидеть контент, который он действительно хочет видеть. Давайте используем аккуратный трюк CSS, чтобы все выглядело немного плотнее.
Перейдите к строке 701 в своем файле CSS, и вы должны найти классы .hentry. Они выглядят так:
|
01
02
03
04
05
06
07
08
09
10
11
|
.hentry,
.no-results {
border-bottom: 1px solid #ddd;
margin: 0 0 1.625em;
padding: 0 0 1.625em;
position: relative;
}
.hentry:last-child,
.no-results {
border-bottom: none;
}
|
Мы изменим значения первого свойства, а затем вообще удалим последнего потомка, так как нам больше не нужен стиль для этого. Вот некоторые обновленные CSS, чтобы дать нам хороший чистый макет:
|
1
2
3
4
5
6
|
.hentry,
.no-results {
margin: 0.5em;
padding: 0 0 1.625em;
float: left;
}
|
Вывод
Пока это все, что мы собираемся сделать. Во второй половине урока мы будем делать следующее:
- Настройка некоторых пользовательских полей для наших сообщений
- Написание дерзкого маленького запроса, который устраняет нашу потребность в категориях
- Реализация кнопок призыва к действию
- Настройка TicketTailor для обработки наших продаж и списков гостей