Нюансы коммерческой разработки на 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. Используется для создания элементов вида Список элементов -> Отдельная страница элемента. Шаблоны вида 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 часов. Возможно это и не результат, но сравнивать мне пока не с чем, буду благодарен диалогу.

ссылка на оригинал статьи http://habrahabr.ru/post/252393/