0,0
рейтинг
6 марта 2015 в 22:33

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

Проголосовало 838 человек. Воздержалось 111 человек.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Валерий Захаров @Valeriy_tw3eX
карма
17,0
рейтинг 0,0
Программист
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (32)

  • +3
    Всё стандартненько, никакого rocket science :)
    Но, думаю, когда на сайт приходится каких-нибудь 10000 рублей, то это и нормально.

    Такой вопрос. Многие студии пытаются зарабатывать ещё и на поддержки проектов, создавая сайт на «уникальном коробочном продукте». Вы делаете всё на wordpress. Как-то привязываете клиентов к себе? Или всё абсолютно честно, и клиент вас в любую секунду заменит на фрилансера с одекса (условно).
    • +1
      Собственно и цель том, чтобы не было никакого rocket science. Пришел новый человек к нам, одна-две недели и он включается в работу. Ну и соответственно удешевить сборку проекта настолько, насколько это вообще возможно, сохраняя уровень качества выше, чем у конкурентов.

      По поводу привязки — да, в любую секунду клиент может заменить нас на фрилансера с одеска. Даже более того — практически всегда он может решить свою задачу вообще без участия фрилансеров/программистов, стараемся максимально гибкий шаблон собирать. Но фишка в том, что если делать клево, то к фрилансерам никто не уйдет. Бизнесу нужны гарантии, а в подавляющем большинстве своем фрилансеры их могут дать только на словах. А те, кто не только на словах — дорого стоят ;)
    • 0
      Да, забыл добавить. Когда на проект приходятся в десятки раз большие суммы — почему нет? Клиенту удобно пользоваться, нам удобно собирать (есть оговорки), разработчика удобно найти нового в офис. Много нюансов конечно, связанных с самим WP, но какое дело клиенту до этого всего. Кучу перебробовал цмсок, остановились на wp/netcat для «типичных» проектов.
      • 0
        Я сам люблю wp :)
        Просто когда проект стоит не 10000, а, условно, 150000, вряд ли wordpress-а там хватит. Скорей всего это уже будет проект из вашей третьей категории, где всё будет построено на каком-нибудь фреймворке.

        P.S. Вам удавалось «продать» wordpress хотя бы за 150к? Если это конечно некоммерческая информация.
        • +1
          Тут же надо подходить «любовно» к этому вопросу. Конечная цена проекта не только из программной части складывается. Бывает и wp хватает для целей клиента. А бывает и для простеньких штук можно на laravel или django написать штуки.
        • +3
          А в чем собственно проблема продавать сайт на ВП за 150к? Многие сайты сейчас стоят столько в основном из-за продвинутого фронтэнда, функционально сам сайт мало уходит от простой визитки за 10к, просто ко всему добавляется вау-эффект.
          • 0
            Да нет проблем, думаю. Особенно, если это красивая морда, как вы заметили.
  • +1
    Я уже в постах про ВП люто пиарил ACF, и делаю это снова. Вот эти вот плагины — Magic fields 2, Tax-Meta-Class, Theme Options заменяются одним лишь ACF, тем более, что он уже стоит у вас и уже используется для редактирования кастомных полей.
    • 0
      Да, верно, заменяется, в последнее время его использую. Мой список — не догма, я больше акцентировал внимание не на названиях плагинов, а на их функционале.
  • +4
    Возможно, вопрос не совсем в тему статьи, но все же очень связан с ней. И вы наверняка имеете все знания и данные, чтобы прокомментировать его. Когда я был школьником и фрилансил, я делал огромное кол-во недорогих сайтов на собственном велосипеде. Пусть это были не сайты на вордпрессе, но они были достаточно дешевы для клиента и делались достаточно быстро. Так вот, вспоминая то время, я начинаю понимать вот что: пользы от этих сайтов в большинстве своем было ровно 0. Как это происходило: приходит клиент в «студию» с такой мыслью: «мне нужен сайт». Как этот сайт поможет бизнесу — хз, но он должен быть. Менеджер тоже не заинтересован помочь бизнесу, его задача — продать сайт. Потом они утверждают дизайн и неделю играются со шрифтами. Потом я программирую это все. В итоге на свет рождается очередной никому не нужный сайт, пусть и не очень дорого. И мне теперь очень печально от такого, потому что все (и мы в том числе в то время) из-за конфликта интересов (бизнесу не нужен сайт, но нам нужно его продать) продавали сайты, а не помогали бизнесу.

    В связи с этим такой вопрос. Есть ли у вас реальные примеры того, как дешевые быстро делающиеся сайты на вордпресс помогают бизнесу экономить деньги на разработке действительно нужных им вещей (а не очередного никому не нужного сайта-визитки)? Задумываетесь ли вы над этими вопросами, когда продаете очередному клиенту очередной сайт?
    • +1
      Конечно задумываемся! Политика нашей компании в этом и состоит, чтобы не продать клиенту сайт, с ненужными свистелочками, а помочь ему увеличить продажи/найти больше заказов. Логика тривиальна. У клиента есть деньги — у нас есть деньги. Да, бывает когда не получается мягко «обработать» клиента и подтолкнуть его в сторону хорошего решения (опыта все-таки побольше у нас в создании сайтов, чем у него), но что поделать. Да и с моей точки зрения, если я смогу заказать себе флешку в фотоаппарат по интернету, а не идти в холод в магазин — я только выиграю.

      Вот навскидку несколько сайтов, критерий отбора — сравнительно низкая цена и wp.

      fort-andreevskiy.ru/ — база отдыха.
      a-kalinov.ru/ — куча заказов на шаржи.
      procleandv.net/ — их стартап, хорошо дело идет.
      evakuator-27.ru/ — думаю, ценник, по которому сделан это сайт ясен и понятен.
      virtamebel.ru/ — кухонные штуки.
      pushkarev-adv.ru/ — адвокат, клиентов куча.
      ve27.ru/ — пассажирские перевозки.

      По поводу внешнего вида разговор не ведем, но эти сайты позволили нашим клиентам довольно успешно решать свои задачи.
      • 0
        А часто бывает так, что приходит клиент и хочет ну совершенно не то что ему надо, и никак не переубедить? Скажем, хочет, чтобы нарисовали дизайн, хотя можно сделать в 100 раз красивее и в 10 раз дешевле на готовом бесплатном или купленном за 15$.

        Я недавно делал проект достаточно большой и сложный, там прикидывали на дизайн надо было тыщ 50-100, наверное, если делать дизайнером и потом верстать это все. В итоге мы купили за 15$ на wrapbootstrap тему и еще за 20$ сделали логотипчик. И даже без помощи верстальщика все сделали. И получилось очень норм в итоге. Есть похожие примеры у вас из вашей практики?
        • 0
          Постараюсь ответить на ваш вопрос, он довольно много включает в себя.

          Практически всегда клиенты делятся на два типа у нас. Первый тип — не было сайта, слабо представляет себе, что ему нужно. Второй тип — уже заказывал где-то, «обжегся», не получил результата, есть сайт — необходимо сделать круто.

          И для первого типа, про который собственно и вопрос, есть фраза — «нет необходимости вам в сайте за 100-200-1000000, заказывайте разработку типовую (шаблон -> сайт), т.к. это у вас первый, через год-полтора вернетесь, заработав, мы тщательно проанализируем ваш бизнес и сделаем уникальный продукт, который порвет всех на рынке Хабаровска». Ресейл рулит. И начинается — анализ аудитории, требований, брендинг, бизнес-консалтинг в плане IT, адаптивочки, прототипы, фокус-группы, тесты через айтрекер, дизайн, верстка, разработка, сплит-тесты etc.

          По поводу примеров — все выше это и есть примеры данного типа :) Хотелось звезд с неба, но бюджет не позволял, а делать что-то надо было.
          По большей части разработка это треть дела. Главное это потом сделать так, чтобы на этот сайт пришли люди и заказали товар/услугу etc. На моей практике типовой сайт и индивидуальный отличаются в одной цифре — в конверсии. Это если не брать заморочки с нагрузкой и прочим, что для нашего региона некритично.
          • 0
            И сильно, бывает, отличается конверсия? Как это замерялось? Вы брали смотрели конверсию на старом сайте и сравнивали ее с конверсией после редизайна?
            • 0
              В большинстве своем для замера это гугл аналитика или яндекс метрика + клиенты сообщают информацию по звонкам/приходам. Что-то типа скажи код с сайта и получи скидку в 5 процентов.

              По поводу сравнения к сожалению я не имею информации, не мой отдел этим занимается. Примерно представляю, что в среднем не более 10 процентов разница. Тут мысль такая у меня, что если разница в 10% конверсии для вашего бизнеса ощутима и чек по клиенту окупает затраты на разработку в нормальное для вашего бизнеса время — почему бы и нет? Да и на престиж и статус бренда влияет это в какой-то степени.
    • 0
      Еще хотел бы добавить важный нюанс.
      Если «продавать» сайты, а не помогать бизнесу — это заводит в тупик. Основные деньги делаются на ресейле существующим клиентам. И понимание этого очень помогает на «фриланс шарашках» лично мне.
      • 0
        Все верно говорите, помогать бизнесу — это главная задача. Сам я уже давно не занимаюсь поиском клиентов, участвую только как исполнитель. К моему постоянному менеджеру обращаются все клиенты сами, по рекомендации от довольных клиентов. И проекты, которые мы делаем, я бы совсем не назвал дешевыми. Однако, аналогичные сайты во всамделишной студии, я думаю, стоили бы гораздо дороже.
        • 0
          Верно, в студиях дороже, чем у фрилансеров, это давно известный факт. Но бизнесу необходимы гарантии, саппорт и прочие плюшки, за которые они готовы платить. И найти людей на фрилансе, которые эти гарантии дадут, крайне нелегкий процесс. И просто удобней обращаться в студии довольно часто. Это как с доставкой еды например. Я люблю готовить всякие вкусности, но бывают такие моменты, когда проще натыкать в корзину еды, подождать 1 час и поесть.
          • 0
            Верно. Если честно, я, сам как фрилансер, не представляю как сегодня обычному заказчику вообще что-то заказывать на фрилансе, так как ни опыт ни репутация исполнителя зачастую не гарантирую положительный результат.
  • 0
    А можно выложить архив с подобранными плагинами и сборкой WP?
    Сам собрал подобный, хочу сравнить.
    • –1
      К сожалению не имею возможности дать исходники, т.к. чистить его от штук, которые не хотелось бы в паблик выкладывать — довольно затратная по времени операция. Без обид :)
      • +2
        Как всегда, пользоваться неплохим бесплатным продуктом — готовы всегда, а делится тем же — никогда, печальная тенденция.
        • 0
          В статья я описал, что есть в репозитории :) И вычищать архивчик дольше, чем по списку скачать плагины, думаю я.
          • 0
            отлично было бы скачать по списку плагины и дать просящему, без лишних слов :-)
  • –2
    Вот воистину: WP не лучший, но и не худший вариант в роли основы для сайта. Не быстрый, не оптимальный, но развитый, и не забытый. Увы только, что кривая вхождения в него так полога, что криворукие бандерлоги строгают на нем такие поделия, что приличные девелоперы кучу сил вынуждены тратить на отмывание движка. Такое впечатление, что бандерлоги читают ic.pics.livejournal.com/droids_life/68035718/427/427_600.jpg что-то такое, даже и не знаю…
  • 0
    А дайте пример плагина которые реализует Theme Options. Как раз чтобы был билдер глобальных настроек сайта.

    • 0
      Этот вот, но билдер не в админ-панели, а в файлике массивом, мне нравится. А вообще ACF позволяет такие штуки делать, с дополнением этим.
    • +1
      OptionTree, отличное решение, вот ссылка . Позволяет создавать страницу настроек любой сложности и содержит огромное количество типов полей.
  • +1
    А магазины на чем собираете?
    • 0
      Woocommerce для WP. Netcat/1C Bitrix. Если брать cms именно.
  • 0
    ve27.ru — меню навигации по сайту не работает в Firefox.
    • 0
      Спасибо за фидбек, ОС и версию Firefox не затруднит подсказать?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.