Как технически устроены мои статейники

Как я писал раньше в посте о том, что у меня есть на сегодня, на 150к руб., вырученные с продажи моего любимого лампового СДЛ статейника, я сделал четыре новых статейника. Ниже я коротко расскажу о том, как они устроены с технической точки зрения.

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

Структура

Все сайты, конечно, на WordPress. У всех сайтов одна и та же родительская тема. В родительской теме прописаны все функции, а также основные стили, которые свойственны для всех 4 проектов.

Настройка макетов

С помощью плагина ACF Pro, с модулем Flexible Content я создал несколько разновидностей архивов для персонализированной настройки макетов. На основных страницах сайта (главная, страница рубрики, страница архивов) можно менять расположение блоков.

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

Вот так выглядит например настройка макета главной страницы одного из сайтов:

homepage-layout

А вот так выглядит настройка одного из блока архивов:

layout-slider

Макет страницы записи выглядит, например, следующим образом:

layout-post

Т.е. к примеру, чтобы добавить баннер под статьей перед социальными кнопками, я просто нажимаю «Добавить блок» и выбираю «Контент», куда просто загружаю картинку со ссылкой.

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

Дизайн

Дочерняя тема включает переменные LESS и модификации стилей, присущих для конкретного сайта. Файл style.css у каждого сайта (дочерней темы) собирается с помощью Grunt: берутся переменные дочерней темы  и применяются ко стилям родительской темы.

Например, чтобы поменять цвет ссылок у каждой дочерней темы, надо в каждой дочерней теме поменять переменную @link-color и скомпилировать с помощью Grunt готовый CSS. В результате получается, что база остается единой для всех, а цветы ссылок персонализированные. При этом у каждого сайта свой собственный минифицированный единственный CSS-файл.

Блоки контента

С помощью не менее крутого плагина Shortcake UI, я сделал несколько блоков контента с помощью нативных шорткодов WordPress: галерея, слайдшоу, цитата, разделитель. Самое крутое, что в визуальном редакторе пост отображается 1 в 1, как и на самом сайте и при этом нет никаких страшных кодов, вроде:

[row][column size=1/3][slideshow ids=1,2,3][/column][/row]

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

Помимо этого с помощью стилей на панели форматирования визуального редактора можно выделять текст в виде «Выделенного текста» и «Лида».

Это позволяет контент-менеджерам без опыта работы (без знания HTML, шорткодов) добавлять красивые посты и наглядно контролировать контент в визуальном редакторе.

Обновление

Все темы, а это одна родительская и четыре дочерних, лежат в частном репозитории Bitbucket. Темы обновляются на сайтах через панель управления с помощью плагина GitHub Updater. Т.е. при обновлении основной родительской темы, я делаю commit и push, а далее через панель управления на каждом из сайтов из нативного интерфейса WordPress обновляю тему, как будто это обычная стоковая тема, вроде Twenty Thirteen.

Зачем такие сложности?

Вы спросите — зачем так заморачиваться с дочерними и родительскими темами, ведь можно было бы сделать и изменить четыре обычных клонированных темы.

Да, возможно, вы правы. Но, во-первых, я заморочился. Во-вторых, мне нравится, когда весь код по четырем сайтам по сути в одном единственном месте — на репозитории Bitbucket. Самое крутое, что тема по сути одна, но все 4 сайта очень разные по внешнему виду за счет:

  1. разных стилей,
  2. разного расположения блоков в макетах основных страниц,
  3. разного типа блоков в макетах основных страниц.

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

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

Комментарии (4)
  1. Хоть кто-то юзает ACF по полной программе. Молодец! 😀

  2. А вот использую Avada на многих клиентских сайтах — можно и дизайн и расположение блоков поменять и что захочешь =)

    1. Еще и деньги за это берешь? 🙂 Ну прям настоящий веб-разработчик.

      1. Ага, 15-30к за сайт беур. Я полностью делаю, ся, структуру, контент, все с душой =)

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *