Тема-Конструктор для 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 — кроме проблем с ценой, есть еще проблемы с кодом (мой далек от идеала, но их еще дальше)
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 34
    • 0
      Полезно. Спасибо!
      • 0
        Сейчас будем тестить)
        • 0
          Побольше бы внимания на WP 3.0 Network. В частности независимость (и недоступность) тем друг от друга для блогов в одной сети.
          • +1
            В рамках подтем я это реализовал, в самом же WP разрешить/запретить определенную тему можно лишь для всех сразу
          • 0
            Антон, интересно было бы любоптыно взглянуть на самые выдающиеся примеры использования вашей темы в дизайне блогов!
          • 0
            «Добавить интеграцию социалок (сделано в 1.5.7)»
            А для автоматического обновления из Wordpress доступна версия 1.4.3 ((( Печально ((
            • 0
              О! Прошу прощения! 1.5.6 доступна для обновления
              • +2
                1.5.6 уже доступна для скачивания, и я настоятельно не рекомендую пользоваться автоматическим обновлением, обновите вручную, и в вашей подтеме обновите конфиг как описано в code.google.com/p/wp-constructor/wiki/ConstructorHistory (см. 1.5.0)

                После версии 1.5.0 проблем с автоматическим обновлением быть не должно (т.к. ваша тема будет сохранятся в папке uploads)
            • +2
              С точки зрения духа WP сообщества и демонстрации ваших возможностей это прекрасно. Но если цель «простенько и без секса», то Artisteer. Можно просто ставить на компьютер пациента-«чего вам стоит», а потом его готовые шаблоны вешать на инсталяцию. Если разбирать кейс =) «друга-халявщика», то с точки зрения оптимизации времени проще повесить на недорогой хостинг, типа блухоста, где WP ставится автоматически в один клик и вменяймая бесплатная тех. поддержка. Вы бэтман на один вечер, а мозг по пустякам он пусть им выносит.

              …Выстрадано =)
              • +2
                Протестировал. Ребята вы молодцы, не чего подобного не видел от отечественных разработчиков.
                • +1
                  Добавьте ссылку на бесплатную тему wordpress.org/extend/themes/atahualpa — у них тоже немеряно настроек на всё что можно.
                  • +2
                    Добавил, но юзабилити этой темы — это что-то О_о
                  • 0
                    Пытался я пользоваться этой темой. Но в итоге решил, что быстрее написать руками что мне нужно, чем крутить горы настроек. А так для новичков штука полезная.
                    • 0
                      А интеграция социалок как выглядит? Чего ожидать?
                      • +1
                        моя любимая WP-тема! спасибо за функционал
                        • 0
                          Весьма и весьма забавно, буду сегодня юзать крутить вертеть смотреть наслаждаться.

                          Скажите, а Вы предусматривали в этом движке возможность изменения языка? Русификации например? Или интерфейс жёстко привязан к инглишу?
                          • 0
                            В теме присутствуют переводы на русский и многие другие языки, но к сожалению пока нет поддержки мультиязычных сайтов на wordpress
                          • 0
                            Товарищи, посоветуйте хороший плагин контекстной рекламы от Google AdSense для Wordpress?
                            И есть ли смысл в нем? То есть можно ли на контекстной рекламе от Google AdSense заработать хотя бы на хостинг блога??
                            • +1
                              Можно конечно.
                              AdSense проще вручную прописать куда-нибудь в шаблон.
                              • +1
                                Зависит от посещаемости и от контента на блоге, на хостинг проще заработать на какой-нить бирже ссылок
                                • +1
                                  Попробуйте whydowork adsense
                                • +1
                                  Антон, спасибо, это очень многим может быть полезно.
                                  Думаю было бы прекрасно, чтобы «продвинутые пользователи» могли создавать собственные макеты, например, с предусмотренными блоками для рекламы, и т.п.
                                  • 0
                                    Проблемы с грамматикой в записи… и есть ли русская локализация для темы? Всегда странно становится, когда русские создают проекты полностью на английском. Прям неправильно как-то.
                                    • 0
                                      И русская и украинская версия прилагается, а так же еще почти десяток локализаций (разной степени актуальности).

                                      По грамматике — в личку плиз, с русским у меня всегда туго было, надеюсь мой PHP лучше :)
                                      • 0
                                        Отлично, что есть локализации. А скриншоты почему с английской? Не совсем понятна логика этого.
                                        Отправил ошибки с исправлениями в личку.
                                        • 0
                                          Скриншоты сделаны для странички на code.google, делать отдельно еще пачку скриншотов на русском мне, откровенно, было лень…
                                          • 0
                                            А, лень-матушка… Понимаю. Но вот текст поправился, это радует.
                                    • 0
                                      > Вынести настройки темы в отдельный раздел меню
                                      Отличная мысль. Только иконку на забудьте нарисовать ;) или, если хотите — это сделать могу Я.
                                      • 0
                                        Спасибо за тему, пользовал в парочке проектиков.
                                        • 0
                                          А эта тема ещё будет поддерживаться?
                                          1. Глюки под 3.8 — если каталог темы назван с маленькой буквы, она не отображается в админке. В 3.7.1 такого эффекта не было, равно как не нашёл ни одной другой темы с таким глюком (правда, проверил всего пару-тройку).
                                          2. При подключении шрифтов с серверов гугла в них не отображается кириллица. Чтобы шрифт грузился с кириллицей, нужны соотв. параметры в запросе.
                                          3. Всё больше устаревает вёрстка. И если говорить о вёрстке, хотелось бы less.
                                          4. Не помешал бы layout и для home.
                                          5. Не всё переведено на русский в языковом файле.

                                          Ну и если активно вордпрессить, встречаются фичи, не реализованные в этой теме. Например, подключение гугл-адсенса и аналитикса, или, скажем, использование для навигации плагина pagenavi, etc.

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