Доска объявлений на WordPress

Первым проектом, с которого мы начнем свое рассмотрение специфических аспектов применения WordPress, будет создание доски объявлений. Вероятно, вы не раз сталкивались с сайтами указанного рода. Работодатели, в лице которых могут выступать как простые люди, так и солидные фирмы, публикуют на них объявления об освободившихся вакансиях. Для хранения каждой открытой вакансии идеально подойдут записи, которые затем можно будет рассортировать по рубрикам. Метки, примененные к записям, разумно было бы соотнести с названием компании, предлагающей указанную вакансию, что значительно упростило бы процесс поиска подходящей работы и позволило бы в дальнейшем проводить сортировку по названию компании.

Основная загвоздка состоит в том, каким образом предоставить работодателю возможности размещения доступной вакансии. Естественно, вы можете создать определенного пользователя, и затем разрешить публиковать объявления от его лица, или открыть форму регистрации, и затем предоставить пользователям права редактора, однако, является ли этот путь самым лучшим? И так ли необходимо давать посторонним людям доступ к панели адинистратора? Мой ответ — нет. Этот путь не является ни самым удобным, ни самым дружественным по отношению к пользователям. Все, что от нас потребуется — создать форму для ввода информации о вакансии, которая затем будет отправлена на премодерацию и, в случае правильности заполнения всех полей, появится на сайте. Для реализации указанной функциональности нам понадобится специальный плагин.

Таким образом, схема добавления материалов на сайт выглядит следующим образом: работодатель заполняет поля формы и отправляет ее модераторам сайта, которые, в свою очередь, публикуют вакансию в виде отдельной записи в соответствующей рубрике с соответствующими метками. Мы постараемся максимально использовать имеющиеся функциональные возможности плагина, исключив любое вмешательство в его код, вследствие чего какой-то процент информации придется добавлять вручную.

Процесс создания доски объявлений будет проходить в два этапа. На первом этапе мы постараемся в короткие сроки построить основную структуру, не задумываясь о ее отлаженности и детальности. На втором этапе указанная структура будет оптимизирована, в результате чего доска объявлений примет свой должный вид.

Итак, приступим к работе.

Выбор темы

Доска объявлений должна обладать довольно простым дизайном. Все, что нам понадобится: это заголовок, обладающий горизонтальным меню, и три столбца, в каждом из которых будет размещена информация о вакансиях. Первый столбец отведем под доступные на данный момент вакансии, второй столбец — под объявления от соискателей работы, третий столбец — под дополнительную информацию, включающую в себя различные текстовые блоки, рекламу, форму поиска, облако тегов и т.д. Наконец, указанные три столбца будут обернуты областью подвала, в которой мы также разместим некоторую информацию.

Иначе говоря, нам понадобится выбрать шаблон для главной страницы (home.php), заголовка (header.php) и подвала (footer.php). Главная страница будет содержать первый и второй столбцы, а третий столбец мы поместим в сайдбар (sidebar.php). Естественно, для того, чтобы подробно рассмотреть вакансию, нам понадобится шаблон отдельной записи (single.php). Ну и, наконец, чтобы тема не выглядела совсем уж пресной, добавим к ней таблицу стилей style.css.

Управление всеми списками (списками рубрик, меток и т.д.) будет осуществляться при помощи страницы index.php, которая, напомним, используется в тех случаях, когда в теме отсутствуют некоторые из основных файлов шаблона.

Для того чтобы запуск нашего проекта был осуществлен как можно быстрее, воспользуемся темой Notes Blog Core, которая будет выступать в качестве дочерней темы. Тем самым мы избежим утомительных работ, связанных с построением фундамента и перейдем сразу к делу.

Итак, мы хотим создать простую тему для доски объявлений, которая позволила бы нам выводить на экран последние добавленные вакансии и резюме. Что ж, приступим к разработке указанной темы.

Шаблоны заголовка и подвала

С файлом заголовка все просто: мы не будем вносить в него никаких кардинальных изменений. Все работы, относящиеся к заголовку, будут носить косметический характер, и затронут лишь связанную с ним область виджетов Submenu. Таблица стилей дочерней темы, размещенная в папке wp-content/themes/notesblog-jobboard, переопределит стилевое представление родительской темы Notes Blog Core.

Что касается подвала — он получит лишь небольшие стилевые изменения. По умолчанию подвал в теме Notes Blog Core включает в себя четыре области виджетов: в них можно отображать последние добавленные объявления (с помощью плагинов), графическую рекламу и т.д.

Шаблон главной страницы

Для того чтобы значительно облегчить и ускорить работу, мы создадим в дочерней теме файл шаблона home.php. Два столбца с основными списками будут представлены как div#content. Третий столбец, являющийся сайдбаром, будет управляться с помощью виджетов. Никакой потребности в использовании дополнительного файла sidebar.php в дочерней теме нет.

Блок div с классом welcome вложен в div#content и занимает его полную ширину. Чуть ниже расположены два блока div с классом homecol, один из которых обладает левым, а другой правым позиционированием. Эти блоки ответственны за представление левого и правого столбца. Каждый из них содержит в себе цикл, использующий query_posts() для вывода на экран десяти записей из соответствующей рубрики. Помните, что первый столбец отведен под доступные вакансии, а второй — под резюме соискателей работы.

Ниже приведен код, выполняющий указанные действия:

<?php get_header(); ?>
<div id="content">
<div>
Welcome to the <span>Job Board</span> - a place where you can fi nd the gig of your
dreams. Start browsing the jobs below, or <a href="/post-a-job">post one yourself!</a>
</div>
<div>
<h1><a href="/category/jobs/" title="Jobs Available">Jobs Available</a></h1>
<?php query_posts('category_name=jobs&showposts=10'); ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('homephp'); ?>>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title();
?>"><?php the_title(); ?></a></h2>
<div>
<span><?php the_tags('',', ',''); ?></span>
<span><?php the_time(__('F jS, Y', 'notesblog')) ?></span></div>
</div>
<?php endwhile; ?>
<div><a href="/category/jobs/">There's More &rarr;</a></div>
</div>
<div>
<h1><a href="/category/positions/" title="Looking for Work">Looking for Work</a></h1>
<?php query_posts('category_name=positions&showposts=10'); ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('homephp'); ?>>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title();
?>"><?php the_title(); ?></a></h2>
<div>
<span><?php the_tags('',', ',''); ?></span>
<span><?php the_time(__('F jS, Y', 'notesblog')) ?></span>
</div>
</div>
<?php endwhile; ?>
<div><a href="/category/positions/">There's More &rarr;</a></div>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Помните, что шаблон home.php будет использоваться только в том случае, если посетитель зайдет на главную страницу сайта. В любом другом случае будет применяться шаблон index.php (при отсутствии каких-либо из стандартных шаблонов, переопределяющих представление).

Представление отдельной записи

В общих чертах представление вакансии практически ничем не отличается от представления отдельной записи. Единственное, чего стоит избегать, это использования приевшейся «блоггерской» терминологии, начиная комментариями (действительно, зачем они нужны на доске объявлений?) и заканчивая постоянными ссылками и лейблами рубрик. Все, что вам потребуется — это обычный страничный вид, разбавленный следующими рубриками:

— Похожие вакансии (расширяют процесс подбора требуемых условий)
— Последние обновления (заставляют посетителя изучить как можно большее количество рубрик)
— Метки (позволяют посетителю быстро подобрать требуемый вариант работы)
— Контактная информация (важная деталь во всех списках вакансий)

Списки, а также иные результаты

Списки записей, результаты поиска, а также ошибка 404 привязаны в теме Notes Blog Core к файлу index.php. Указанный подход, безусловно, хорош, однако в нашем случае он терпит фиаско, поскольку как поисковые, так и ошибочные результаты выдаются на одной странице. Рациональным подходом стало бы их разграничение.

Начнем со списков. Естественно, каждое объявление в списке должно быть представлено в сокращенном варианте, что означает, что будет использован шаблон archive.php, исключающий применение the_content(). Удобнее всего представить списки в виде таблиц:

<?php get_header(); ?>
<div id="content">
<?php
if (is_category()) {
echo '<h1><strong>';
single_cat_title();
echo '</strong></h1>';
} if (is_tag()) {
echo '<h1><strong>';
single_tag_title();
echo '</strong></h1>'; }
?>
<table width="100%">
<thead><tr><td colspan="3">You found the current job listings:</td></tr></thead>
<tbody>
<?php
query_posts($query_string.'&posts_per_page=20');
while (have_posts()) : the_post(); ?>
<tr>
<td><?php the_time('M j, Y') ?></td>
<td id="post-<?php the_ID(); ?>" <?php post_class('joblisting'); ?>><h2
class="joblisted"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>
"><?php the_title(); ?></a></h2></td>
<td><?php the_tags('Tags: ',', ',''); ?></td></tr>
<?php endwhile; ?>
</tbody>
</table>
<div>
<div><?php next_posts_link('Older Jobs') ?></div>
<div><?php previous_posts_link('More Recent Jobs') ?></div>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Не забывайте, что файл шаблона archive.php будет применяться в качестве основного для любых архивных страниц (в случае отсутствия специализированных шаблонов), к которым относятся страницы, не содержащие актуального контента, не являющиеся главной страницей и не служащие для отображения результатов поиска.

Шаблон search.php практически ничем не отличается от шаблона archive.php. Единственное, что стоит в нем продумать — это сообщение об ошибке, выдаваемое в том случае, когда поисковая строка не была найдена.

Стилевая таблица

Основные стили для нашей доски объявлений мы будем брать из темы Notes Blog Core. Естественно, вы будете нуждаться в некоторых ручных корректировках стилей, для того чтобы придать своей теме большую красоту и выразительность.

/*
Theme Name: JobBoard (built on Notes Blog Core)
Theme URI: http://notesblog.com/core/jobboard/
Description: <a href="http://tdhedengren.com/">Made by TDH</a> and maintained at <a href="http:// notesblog.com/">notesblog.com</a>. Requires WordPress 2.8 or higher.
Version: 1.0
Tags: two columns, fi xed width, custom, widgets
Author: Thord Daniel Hedengren
Author URI: http://tdhedengren.com/
Template: notes-blog-core-theme
Requires the Notes Blog Core Theme:
http://notesblog.com/core/
*/
@import url('../notes-blog-core-theme/style.css');
a:link, a:active, a:visited { color: #0cf; }
a:hover, div#header h1 a:hover, div.homecol h1 a:hover { color: #f90; }
div.welcome a:link, div.welcome a:active, div.welcome a:visited, div.homecol div.more a
{ color: #f90; }
body { background: #effffe; }
div.column { width: 290px; }
div#header { border-bottom-color: #0ad; } /* add bg img */
div#header h1 { text-align:center; }        div#header h1 a { border: 0; }
div#header h1 span { display:none; }
Next are some simple overrides for link colors and setting the background as well as the header
details. Following this is some styling for the submenu, and giving the main part of the design
residing in div#blog a white background. After that is the welcome text block, div.welcome.
Nothing fancy.div#submenu-nav { border:0; background: #0cf; }
div#submenu-nav div.textwidget {}
div#submenu-nav div.textwidget p { padding: 10px; margin:0; text-align:center; font-size:
14px; line-height: 14px; }
div#submenu-nav div.textwidget p a { margin: 0 2px; text-decoration: none; color:
#fff; font-weight: bold; padding: 10px 5px 20px 5px; }
div#submenu-nav div.textwidget p a:hover { background: #0ad; }
div#blog { background: #fff; }
div.welcome { margin: 0 0 20px 0; padding: 0 20px; font-size: 24px; line-height: 30px; color:
#888; }
div.welcome a:hover { color: #000; }
div.welcome span { color: #444; }
div.homecol { margin-left: 20px; margin-bottom: 20px; border: 1px solid #0cf; border-width: 1px
0; }
div.homecol h1 { font-size: 18px !important; line-height: 18px !important; padding: 10px 5px
!important; }
div.homecol h1 a { border: 0; }
div.homecol div.more { width: 100%; text-align:right; padding-bottom: 10px; font-size: 11px;
text-transform: uppercase; font-weight: bold; }
div.homephp { margin-bottom: 10px; padding: 0 5px 5px 5px; border: 1px solid #eee; border-width:
0 0 1px 0; }
div.homephp h2 { font-size: 16px !important; line-height: 16px !important; font-weight:bold
!important; }
div.homephp div.postmeta {}
div.homephp div.postmeta span.timestamp { margin-left: 3px; padding-left: 6px; border:
1px dotted #888; border-width: 0 0 0 1px; }
div.homephp div.postmeta a { font-weight:normal; }
table.joblistings { fl oat:left; margin:0; padding: 0 10px 20px 10px; border:0; }
table.joblistings thead { margin: 0 10px 8px 10px; background: #f90; font-size: 14px;
font-weight:bold; color: #fff; }
table.joblistings thead tr td { padding: 5px; text-align:center; }
table.joblistings tbody {}
table.joblistings tbody tr { fl oat:left; width:100%; padding: 8px 0; border: 1px dotted
#888; border-width: 0 0 1px 0; }
table.joblistings tbody tr td { font-size: 11px; }
table.joblistings tbody tr td.timestamp { width: 80px; }
table.joblistings tbody tr td.post { width: 330px; }
h2.joblisted { margin-bottom:0 !important; font-size: 14px !important; line-
height: 14px !important; font-weight:bold !important; }
table.joblistings tbody tr td.tags { width: 190px; text-align:right; }
div.nav div.left { padding-left: 10px; }
div.nav div.right { padding-right: 10px; }
ul#sidebar {}
ul#sidebar a:link, ul#sidebar a:active, ul#sidebar a:visited { color: #fff; }
ul#sidebar h2.widgettitle { color: #fff; text-align:center; border-color: #d70 !important;
text-transform: none !important; font-size: 18px !important; font-weight:normal; }
ul#sidebar li.widget { background: #f90; color: #fbead9; padding: 12px 15px 15px 15px; bor-
der: 5px solid #d70; border-width: 5px 0 0 0; }
ul#sidebar li.widget_search { padding:0; border: 0; background: none; text-align:center; }
ul#sidebar li.widget_tag_cloud { text-align: center; }
ul#sidebar li.widget_text { background: #e8e8e8; border: 0px solid #b8b8b8; color: #777; }
ul#sidebar li.widget_text h2.widgettitle { color: #f90; border-color: #b8b8b8; }
div#footer { border-bottom-color: #0ad; }
div#copy { background: none; }
/* FONTS */
body
{ font-family: Helvetica, Arial, sans-serif; }
div.welcome, h2.widgettitle
{ font-family: Adobe Garamond, Garamond, Georgia, Times New Roman, serif; }

Для того чтобы увидеть, как все это работает, необходимо добавить хотя бы несколько вакансий.

Добавление вакансий

Существует множество способов, связанных с получением актуальной информации для списков вакансий. Одним из таких способов является получение требуемой информации на e-mail, а затем уже ее ручное размещение. Однако, указанный способ является довольно утомительным. Все, что нам понадобится, это форма для вакансий, состоящая из нескольких полей, которая в случае заполнения будет отсылаться на премодерацию.

Плагин, позволяющий создать описанную выше форму, называется TDO Mini Forms (wordpress.org/extend/plugins/tdo-mini-forms/). Форма должна включать в себя следующие поля:

— Тип объявления (предложение вакансий или размещение резюме)
— Автор (обязательные поля: Имя и E-mail, а также необязательное поле — URL Web-сайта)
— Заголовок объявления
— Текст объявления
— Контактная информация

Конечно, к этим пунктам можно добавить также защиту от спама.

Плагин TDO Mini Forms позволяет сохранять поступающую информацию о вакансиях в виде черновика записи, к которой можно добавить контактную информацию об отправителе, в результате чего вам не понадобится создавать отдельную учетную запись для каждого пользователя, желающего разместить свое объявление. Можно пойти и иным путем, разрешив размещать объявления только зарегистрированным пользователям. В таком случае удобным представляется создание архивов для каждого отдельного работодателя. Также существует возможность утверждения списка надежных работодателей, которым можно дать право публиковать свои объявления без прохождения модерации.

Определите путь, который вам представляется наиболее удобным, и приступайте к дальнейшей разработке.

Дальнейшая разработка

На данном этапе мы имеем полнофункциональную доску объявлений. Итак, на чем нам необходимо теперь заострить свое внимание? Первое, над чем стоит задуматься — каким образом будет взиматься оплата за предоставленные списки с вакансиями и как будет осуществляться управление временем видимости записей. Большинство создателей сайтов не гнушаются брать плату за оказание своих услуг. Прикрепление каких-либо популярных сервисов оплаты — естественный шаг в разработке доски объявлений. Управлять временем показа записей можно при помощи скрипта, который автоматически по прошествии какого-либо конкретного промежутка времени переводит записи из рязряда опубликованных в разряд черновиков. Другими вариантами решения проблемы служит добавление специальной строки к заголовкам записей (к примеру, «Запись устарела») или скрытие устаревшего объявления от посетителей. Все это может быть легко реализовано с помощью PHP-кода и условных тегов.

Другие улучшения касаются непосредственного представления объявления. Помимо стандартных полей формы можно добавить возможность прикрепления графических элементов, использование разметки и определение географической локализации.

С помощью прилепленных записей можно вывести наиболее важные объявления в самый верх сайта. Крупные размеры шрифтов, яркие цвета, отличный от основного бэкграунд призваны сразу же завладеть вниманием посетителя. Оформление прилепленных записей мы уже рассматривали в предыдущих разделах, так что этот процесс не составит особого труда.

Разработка доски объявлений, безусловно, на данном этапе не заканчивается. Вы можете сами продумать следующие шаги в создании убойного, мощного сайта. Приведенным выше примером мы лишь подтвердили те слова, что WordPress идеально подходит для реализации сайтов любой сложности, в частности, он справляется с такой непростой задачей, как реализация доски объявлений. Все остальные работы лежат уже полностью на вас. Удачи!