Доброго времени суток, уважаемый читатель. Судьба сложилась так, что я один из тех, кто отвечает за разработку проектов интернет-агентства в любимом, для меня, городе Хабаровск. И хотел бы поведать о том, как мы сохраняем должное качество продукта для клиентов, при условии довольно низких бюджетов, в сравнении с центральной частью России, что сказывается на требованиях к скорости сборки проекта. И цель моя — сократить издержки на разработку и дальнейшее обслуживание, что выливается в необходимость как можно быстрей сделать сайт с как можно большим количеством редактируемых в админ-панели элементов.
По большей части информация будет «технического плана», касательно CMS Worpdress, «по верхушкам». Я рассказываю лишь про наш путь, для кого использование технологий, путей, приемов etc. вопрос религии — просьба воздержаться от холиваров. Приступим.
Для начала небольшое отступления. В общей своей массе, у нас именно, проекты делятся на несколько типов по принципу разработки:
- HTML шаблон с themeforest -> сборка на CMS;
- Дизайн -> верстка -> сборка на CMS;
- Разработка индивидуальных решений.
Сразу оговорюсь, что рассматривать в этой статье я буду только первых два пункта, ибо обобщить третий мне представляется довольно сложной задачей, т.к. любимые/самые лучшие/все остальные плохие технологии у каждого свои и в небольших городах бывает сложно найти разработчика хорошего уровня на RoR/Flask и иже с ними. И пробегусь по ним обзорно. Если возникнет интерес к этой теме — почему бы и не быть развернутой статье-туториалу «Как собрать сайт на WP за 4-8 часов, которым клиент будет доволен».
Почему WordPress?
Низкие бюджеты и желание привносить в мир меньше энтропии обосновало выбор. Более подробно:
- Удобство админ-панели для клиентов. Я серьезно, после введения этой CMS все обучение заказчиков свелось к тому, что мы высылаем пароль администратора. Воспоминания о записи видео “Как создать новость”, “Как поменять телефон на сайте” перестали мне сниться.
- Скорость сборки сайта. Около 4-8 часов на проект это здорово. Конкурентное преимущество.
- Кривая обучения разработчиков для сборки проектов. Пока мой рекорд — 1.5 недели обучения с нуля (то есть аббревиатура HTML кажется заклинанием, вызывающим Сатану) до полноценной сборки сайта за срок, который меня устраивает.
- Красивые графики для клиентов с рейтингом CMS :)
- Freeware, нет необходимости приобретать лицензии.
И да, я не буду стучаться в вашу дверь с брошюрой в руках и говорить “Не хотите ли вы поговорить о WP?”. Просто мы используем эту CMS и об этом и есть заметка. Фактически здесь монолог в печатном формате, который я произношу всем новым веб-мастерам, приходящим к нам.
Какие нюансы следует учитывать при верстке проекта?
Считаю, что задумываться о нюансах сборки сайта следует уже на данном этапе. Здесь собрано немного общих и частных рекомендаций, возможно очевидных, исходящих из набора плагинов и сниппетов, которые использую я.
Шаблон должен легко разделяться на “шапку сайта”, собственно контент и “подвал”. Если необходимо скрывать некоторые элементы шапки/подвала — WP предоставляет довольно много замечательных функций-условий. (is front page(), is_404() etc.). Если необходимо изменять внешний вид — CSS умеет, body_class() имеется.
Когда верстаются различные меню, которые будут управляться через Внешний вид -> меню сайта, необходимо придерживаться следующей структуры:
<ul>
<li>
<a href="">Пункт меню</a>
</li>
<li>
<a href="">Пункт меню</a>
<ul class="sub-menu">
<li>
<a href="">Пункт меню</a>
</li>
<li>
<a href="">Пункт меню</a>
</li>
</ul>
</li>
<li>
<a href="">Пункт меню</a>
</li>
</ul>
Из нюансов здесь важно то, что подменю должны иметь css класс sub-menu. Это избавит вас от необходимости писать кастомный волкер при сборке сайта, для функции wp_nav_menu($args);.
Буду как капитан очевидность, но все динамические позиции в верстке должны быть либо отдельным элементов (если телефон, то, к примеру + 7 XXX XXX etc. без извращений), для дальнейшей замены плейсхолдера, либо быть похожи на следующую логическую структуру:
Верстка до списка
Верстка элемента списка
…
Верстка элемента списка
Верстка после списка
Обязательно создать отдельное правило в CSS для контента, который клиенты вставляют через wysiwyg в админ-панели. Что-то вроде этого (пусть это будет LESS):
.user-content{
...
a{
&:hover{ ... };
&:active{ ... };
&:focus{ ... };
}
p{ ... }
table{
thead {
...
th { ... }
}
tbody {
tr{
...
td{ ... }
}
}
}
h1, h2, h3, h4, h5, h6, h7{ … }
h1{ ... }
...
h7{ ... }
ul{
...
li{
...
}
}
img{ … }
}
В дальнейшем убережет от звонков вида “Почему я вставила картинку и у меня все поехало!”
Если у вас есть на сайте галереи изображений (по три в ряд, по шесть в ряд etc.), то необходимо привести верстку этих галерей в верстку, которую генерирует WP шорткодом gallery. Или переопределить этот шорткод и сделать верстку просто придерживаясь правила “Верстка до списка, Верстка элемента списка, Верстка после списка”, если функционал WP по части количества колонок и прочего избыточен.
Верстка постраничной навигации, генерируемая WP, принимает примерно следующий вид:
<div class="pagination">
<a class="prev page-numbers" href="#">Предыдущая страница</a>
<a class="page-numbers" href="#">1</a>
<span class="page-numbers current">2</span>
<a class="page-numbers" href="#">3</a>
<a class="next page-numbers" href="#">Следующая страница</a>
</div>
Верстка «хлебных крошек» тривиальна. Либо ul li список, либо <a/>, разделенный " >> " и иже с ними.
Еще хоче сказать, что весь блок вышесказанного умещается в одну фразу — верстайте, стилизуя разметку, которую генерирует WP/плагины/сниппеты-функции и будет счастье.
Получили набор html/css/js файлов, что дальше?
В данный момент времени практика такова, что мы имеем репозиторий, который называем kosher_wordpress, дабы на каждом проекте не устанавливать кучу плагинов каждый раз снова. Что в нем имеется и что, по моему мнению, на данный момент достаточно:
- Самая свежая версия WP.
- Не дефлотный пароль на администраторе ;).
- Билдер новых типов постов с кастомными полями из админ панели. Мы используем Magic fields 2. Используется для создания элементов вида Список элементов -> Отдельная страница элемента. Шаблоны вида archive-$type.php и single-$type.php, или вывод, используя WP_Query.
- Билдер новых полей для таксономии, использую Tax-Meta-Class
- Кастомизатор для экранов редактирования. Использую Advanced СustomFields. Незаменим для следующего кейса. Имеется шаблон контактов, к примеру tpl-contacts.php, с прописанным внутри Template Name: Шаблон страницы контактов. И необходимо, чтобы при выборе этого шаблона в админ-панели, на странице редактирования контактов, появлялись дополнительные поля, такие как координаты карты, привязанная форма обратной связи etc. И тут он нам и помогает.
- Билдер форм перезвона, обратной связи, заказа, etc. Contact Form 7
- Билдер глобальных настроек сайта. Используется для телефонов в шапке, соц.сетей и прочей информации такого типа. Theme Options.
- Functions.php с функциями, покрывающими практически весь оставшийся функционал:
- Поддержка меню темой. register_nav_menus();
- Поддержка миниатюр у постов. add_theme_support ('post-thumbnails');
- Ресайз изображений, с поддержкой из меньшего->большее и кешированием. resize_image( $attach_id = null, $img_url = null, $width, $height, $crop = false )
- Генератор хлебных крошек. the_breadcrumb().
- Генератор постраничной навигации. wp_corenavi($wp_query)
- Кастомный волкер для wp_nav_menu() для расширения. class My_Walker extends Walker Nav Menu { оригинальный код WP }
- Задел для изменения шорткода галереи. remove_shortcode('gallery', 'gallery_shortcode');add_shortcode('gallery', 'my_gallery_shortcode');function my_gallery_shortcode($attr) {}
- Генератор постраничной навигации. wp_corenavi($wp_query)
- Файлик со сниппетами, для напоминания.
И вся сборка проекта сводится к следующему:
- Создание virtual host на компьютере
- git clone ...
- Импорт бд, ввод трех SQL команд, для того, чтобы сказать WP, какой у нас сейчас текущий URL (gist)
- Копирования сниппетов со второго монитора и наполнение верстки смыслом.
- Деплой на сервер и чашка кофе
Примерное содержание файлика со сниппетами:
<?php
/*
* Template Name: Шаблон главной
*/
?>
<?php
/*
* Выше сниппет для кастомной темы на страницу.
*/
?>
<?php
/*
* Инклуд файла header.php
*/
get_header();
?>
<?php
/*
* Вывод контента страницы
*/
?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php
/*
* Получение текущей миниатюры в главном цикле и ресайз ее, юрл изображения хранится в $image['url']
*/
$url = wp_get_attachment_url(get_post_thumbnail_id($post->ID));
$image = vt_resize(null, $url, 220, 220, true);
if (!$image['url']) $image['url'] = 'http://placehold.it/220x220&text=NO IMAGE';
?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php
/*
* Пример запроса WP_Query с паджинацией
*/
?>
<?php
/* Берем текущую страницу и создаем параметры запроса*/
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'news',
'posts_per_page' => '3',
'paged' => $paged
);
/* Делаем инстанс WP_Query */
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<?php
/*
* Получение текущей миниатюры в кастомном запросе и ресайз ее, юрл изображения хранится в $image['url']
*/
$url = wp_get_attachment_url(get_post_thumbnail_id($the_query->post->ID));
$image = vt_resize(null, $url, 220, 220, true);
if (!$image['url']) $image['url'] = 'http://placehold.it/220x220&text=NO IMAGE';
?>
<?php echo $image['url']; ?>
<?php
/*
* Вывод заголовка и контента, с читать далее (в визуальном редакторе тег more).
* Если не работает, то после $the_query->the_post(); выше втыкаем global $more;$more=0;
* Или с настройками WP шаманим по части вывода анонсов.
*/
?>
<?php the_title(); ?>
<?php the_content('Читать далее...'); ?>
<?php endwhile; ?>
<?php
/*
* Показываем паджинацию
*/
wp_corenavi($the_query);
?>
<?php
/*
* Сбрасываем запрос
*/
wp_reset_postdata();
?>
<?php else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php
/*
* Инклуд файла footer.php
*/
get_footer();
?>
По данному алгоритму собрал за последний год уже более сотни сайтов, в среднем по времени уходит от 1 до 3 рабочих дней, в зависимости от сложности дизайна и различных моушен-эффектов. Сама сборка занимает около 4-8 часов. Возможно это и не результат, но сравнивать мне пока не с чем, буду благодарен диалогу.
Автор: Valeriy_tw3eX
