Нюансы коммерческой разработки на WordPress

Доброго времени суток, уважаемый читатель. Судьба сложилась так, что я один из тех, кто отвечает за разработку проектов интернет-агентства в любимом, для меня, городе Хабаровск. И хотел бы поведать о том, как мы сохраняем должное качество продукта для клиентов, при условии довольно низких бюджетов, в сравнении с центральной частью России, что сказывается на требованиях к скорости сборки проекта. И цель моя — сократить издержки на разработку и дальнейшее обслуживание, что выливается в необходимость как можно быстрей сделать сайт с как можно большим количеством редактируемых в админ-панели элементов.

По большей части информация будет «технического плана», касательно 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 ^[1]. Используется для создания элементов вида Список элементов -> Отдельная страница элемента. Шаблоны вида archive-$type.php и single-$type.php, или вывод, используя WP_Query.
• Билдер новых полей для таксономии, использую Tax-Meta-Class ^[2]
• Кастомизатор для экранов редактирования. Использую Advanced СustomFields ^[3]. Незаменим для следующего кейса. Имеется шаблон контактов, к примеру tpl-contacts.php, с прописанным внутри Template Name: Шаблон страницы контактов. И необходимо, чтобы при выборе этого шаблона в админ-панели, на странице редактирования контактов, появлялись дополнительные поля, такие как координаты карты, привязанная форма обратной связи etc. И тут он нам и помогает.
• Билдер форм перезвона, обратной связи, заказа, etc. Contact Form 7 ^[4]
• Билдер глобальных настроек сайта. Используется для телефонов в шапке, соц.сетей и прочей информации такого типа. 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 ^[5])
• Копирования сниппетов со второго монитора и наполнение верстки смыслом.
• Деплой на сервер и чашка кофе

Примерное содержание файлика со сниппетами:

<?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

Источник ^[6]