WordPress
22 March 2011

Тема-Конструктор для Wordpress

Wordpress Constructor Theme

Уже прошел год с момента анонса темы Конструктор на Хабре, и все это время проектик продолжал жить и развиваться, и дальше я опишу до чего же он дорос…


Начну с предистории — данную тему я создавал прежде всего для своих нужд — вы не представляете, как часто знакомые-знакомых просят «да простенький сайтец, что тебе стоит», хотя, может, и представляете ;) В итоге я решил создать тему-заготовку, которая минимизирует время, необходимое на создание «простеньких» и уникальных сайтов визиток на базе CMS Wordpress. Затем решился залить тему в репозиторий wordpress.org, и там тема нашла свою нишу — т.н. тем-фреймворков. На момент попадания темы в топ репозитория я не смог найти в нем темы с подобным функционалом, сейчас ситуация, правда, изменилась.

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


Все настройки темы вынесены на отдельную страничку /wp-admin/themes.php?page=functions.php, которая, в свою очередь, разделена на закладки.

Темы


В Конструкторе существует понятие подтем, т.е. все настройки, доступные для изменения, можно сохранить в качестве темы, и перенести на другой хостинг путем копирования папки с подтемой по FTP (в дальнейшем постараюсь реализовать заливку через админку). Совсем недавно реализовал возможность создавать подтемы, которые будут завязаны на определнный блог и не будут видны в других блогах (это я про организацию Network на базе WP 3.x):

image

Каждая подтема представляет из себя файл настроек config.php и файл стилей styles.css (аналогично с обычными темами для wordpress). Если со вторым всё более-менее понятно, то первый представляет из себя следующее:

<?php
return array(
            "sidebar"   => 'right',   // sidebar position
            'layout'    =>  array(     // layouts styles
                       /* ... */
                                 ),
            'title'     => array(            // title
                        'pos' => 'left top', // - position
                        'hidden' => false    // - hidden title text
                        ),
            "content"   => array(           // content
                        "author" => 0,       // - link to author page
                        ),
            'comments'  => array(
                       /* ... */
                        ),
            "footer"    => array(            // footer text
                        "text" => null,
                        ),
            "fonts"     => array(            // fonts
                       /* ... */
                        ),
            "menu"     => array(             // menu with links
                       /* ... */
                        ),
            "slideshow" => array(            // Slideshow options
                        /* ... */
                        ),
            'design'   => array(
                        /* ... */
                        ),
            "images"   => array(             // background images
                       /* ... */
                        ),
            "opacity"   => 'light',          // type of opacity
            "color"     => array(            // theme colors
                       /* ... */
                        )
            );


Думаю из данного листинга будет понятен смысл файла, полный листинг доступен в репозитории проекта.

Ах да — еще в теме может быть куча картинок.

Макет



В теме можно выбрать один из шести вариантов расположения сайдбаров, с возможностью настройки размеров всех секций:

image

Шаблоны


Можно легко изменить представление информации в блоге, используя один из семи доступных шаблонов, либо создав свой собственный:

image

«Шапка» сайта


В данном разделе сбраны опции по настройке заголовка сайта (расположение) и меню:

image

Так же меню сайта можно настроить используя стандартный функционал wordpress.

Контент



Тут настроек не так уж много — это опция отображения ссылки на страницу автора, а так же выбор места для вывода виджетов при отображении списка постов (например: выводить виджеты сразу после первого поста и запихнуть туда рекламный блок):

image

При редактировании постов можно использовать один следующих шаблонов:

  • Архив
  • Страница авторов
  • Одноколоночный шаблон
  • Карта сайта


Поддерживаются shortcodes:
  • [attachments type=image preview=1] — вывод приатаченных файлов
  • [subpages] — подстраницы списком
  • [widgets] — выводит виджеты из сайдбара «In Posts»


Комментарии


Настраивается размер аватара и его расположение:

image

«Подвал» сайта


Тут лишь большое текстовое поле, будет вставлено as is в самый низ странички, идеально для копирайта или для каких-нибудь счетчиков, т.к. поддерживает вставку HTML+CSS+JavaScript:

image

Шрифты


На данный момент можно установить шрифты для названия и описания сайта, заголовков и текста. На выбор представлены стандартные safe-web шрифты, а так же более 30-ти font-face шрифтов от Google (кириллица так же поддерживается):
image

Цвета


На данной закладке можно выбрать цвета для различных элементов страницы — заголовки, текст, границы, фон:

image

Дизайн


Данная закладка выделена под фишки CSS3, которые доступны для изменения в рамках данной темы:

image

CSS


Для продвинутых пользователей есть возможность изменять CSS конкретной темы:

image

Изображения



Данная опция — для изощренных — вы можете устанавливать фоновые изображения для различных элементов страницы:

image

Вот собственно и элементы:

image

Слайдшоу



На данной закладке можно включить отображение слайдшоу. По умолчанию слайдшоу использует картинки из постов с thumbnail, но так же можно использовать галлерею из плагина NextGen Gallery:

image

Сохранение


Все текущие изменения желательно сохранять как свою собственную под-тему, дабы при обновлении темы они не пропали (обновление темы по wp — удаляем старую версию, устанавливаем новую):

image

Ваша под-тема будет сохранена в папке uploads/constructor/themes

Очистка


Очищаем настройки темы и все существующие пользовательские под-темы.

image

Помощь


Ссылки на полезную информацию и прочее собрано на соответствующей закладке.

Еще немного о виджетах


В данной теме реализовано много т.н. «сайдабров» для виджетов:

  • Top Menu — в верхнем меню так же можно добавить виджеты, только за правильное отображение я не ручаюсь (работает с виджетами страниц, категорий).
  • After N Post — число «N» мы указываем на закладке контента, выводим виджеты после N-го поста на главной и в категориях
  • In Posts — выводит виджет по shortcode [widgets]
  • Sidebar, Sidebar for Categories, Sidebar for Posts, Sidebar for Pages — «Sidebar» это голубая колонка на закладке макета, данная связка работает следующим образом: по умолчанию отображаются виджеты из сайдбара Sidebar (ну что за название то для place for widgets); если для Sidebar for Categories так же назначены виджеты, то на странице категорий отображаем именно этот сайдбар.
  • Extrabar и другие — зеленая колонка, поведение аналогично Sidebar
  • Footer и другие — сайдбар выводится после контента, до строчки с копирайтом.


Не для всех


Если вы администратор network wp, то советую обратить внимание на файл constructor/admin/admin.php — тут вы сможете отключить модули темы, которые вам не нравятся:

$constructor_modules = array(
    __('Themes',  'constructor') => 'themes',
    __('Layout',  'constructor') => 'layout',
    __('Templates', 'constructor') => 'templates',
    __('Header',  'constructor') => 'header',
    __('Content', 'constructor') => 'content',
    __('Comments','constructor') => 'comments',
    __('Footer',  'constructor') => 'footer',
    __('Fonts',   'constructor') => 'fonts',
    __('Colors',  'constructor') => 'colors',
    __('Design',  'constructor') => 'design',
    __('CSS',     'constructor') => 'css',
    __('Images',  'constructor') => 'images',
    __('Slideshow', 'constructor') => 'slideshow',
    __('Save',    'constructor') => 'save',
    __('Clean',   'constructor') => 'clean',
    __('Help',    'constructor') => 'help'
);


Планы на будущее


  • Рассмотреть возможность перехода конфигурационных файлов с формата PHP на более удобный и менее «рискованный» JSON (или YAML) — чтобы предоставить возможность заливать подтемы через интерфейс админки
  • Вынести настройки темы в отдельный раздел меню
  • Добавить интеграцию социалок (сделано в 1.5.7)
  • Стандартное слайдшоу сделать более симпатичным
  • Поддержка HTML5
  • Еще больше подтем
  • Еще больше различных шаблонов


Итого



На данный момент > 300 000 скачиваний темы, рейтинг чуть более 4-х при 70-ти проголосовавших. Работа над данной темой вполне окупается ;)

Для сравнения советую просмотреть следующие ссылки (хоть что-то полезного в этом посте должно же быть):
  • 23 theme frameworks compared
  • Atahualpa — тема в которой более 200 настроек
  • Platform — качественная тема с одним недостатком — полная версия лишь за деньги
  • Thesis — кроме проблем с ценой, есть еще проблемы с кодом (мой далек от идеала, но их еще дальше)

+125
39k 261
Comments 34
Top of the day