Themler (Темлер): делаем шаблон для WordPress за 5 минут и немного о том, как я менял дизайн блога и что из этого вышло

image

Привет, друзья IdeaFox!

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

Ладно, посмотрим, что будет дальше. Но я сегодня совсем о другом.

Когда я задумался о том, что пора менять шаблон блога, то в первую очередь вспомнил про замечательную программу Artisteer, которая верно служила мне с 2008 года. Прежний вариант “дизайна” моего блога был как раз сделан в Artisteer буквально за 30 минут. На одной коленке, да.

Многие спецы мне часто говорили, что у моего старого шаблона был “тяжелый и неуникальный” код. Что мол, это негативно влияет на трафик и .т.д и т.п. Честно говоря, никакого негативного влияния шаблона на продвижение блога я вообще не заметил, используя используя старый вариант, запиленный в Артистере.

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

Дело в том, что последняя версия Artisteer выдает довольно чистый код, который часто выглядит гораздо лучше, чем у многих платных шаблонов. А предвзятое отношение к этой программе – всего лишь устойчивое заблуждение среди вебмастеров. Да, действительно, первые версии Артистера 8 лет назад генерили жуткий код, но с тех пор все изменилось.

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

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

Но вот незадача – программа Artisteer больше не обновляется разработчиком

То есть, использовать её далее нет никакого смысла. Правда, я об этом еще не знал, когда продлевал лицензию еще на один год. Узнал только тогда, когда в полученном емайл увидел не ссылку на новый Artisteer, а на неведомый мне Themler.

Связался с разработчиками, а они мне сообщили, что действительно: ”Теперь все силы брошены Themler, который стал наследником Artisteer”. Вот так дословно и написали.

Ладно, посмотрим, что за Themler такой

Скажу сразу, что эта программа платная, но есть и бесплатный вариант, который позволяет создавать сайты на “голом” HTML5 & CSS3. То есть, в бесплатной версии Themler можно сделать обычный небольшой сайт-визитку, или симпатичный лендинг.

Но если хотите делать шаблоны для WordPress, то придется купить версию за 49 долларов. Ссылка ниже не реферальная, смотрите, пробуйте.

Цены на темлер

У меня установлена версия за 129 долларов, которая позволяет делать шаблоны не только для WordPress, но и для Joomla с неведомым мне движком DotNetNuke.

Более дорогие версии Темлера поддерживают следующие CMS:

  1. Drupal
  2. WooCommerce (шаблоны для магазинов на WordPress + плагин WooCommerce)
  3. Virtuemart (шаблоны для магазинов на Joomla + компонент Virtuemart)
  4. DonNetNuke (понятия не имею, что за движок такой)
  5. Magento (очень продвинутый движок для создания интернет-магазинов)
  6. PrestaShop (тоже довольно популярный движок для магазинов)

Набор, как видите впечатляет. Напомню, что это все сделано для тех, кто вообще ничего не понимает в HTML и CSS.

Поддерживаемые CMS

Но повторюсь, что и бесплатная версия может пригодиться для создания продажников или для небольших сайтов-визиток (до 10 страниц в free-версии).

Как это работает?

Нужно установить Themler на компьютер, как обычную программу:

http://themler.com

Поддерживаемые CMS

Обратите внимание, что можно обойтись без установки, а попробовать ее в режиме онлайн, прямо на сайте разработчика.

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

После запуска сразу видим вот такой интерфейс программы:

Интерфейс программы

Все готово, чтобы создать шаблона для WordPress с нуля. Но так как у меня была цель просто попробовать, то я сразу загрузил готовый шаблон из их каталога готовых данных. Да, там есть пара десятков шаблонов, которые можно импортировать в Темлер и уже на их основе делать что-то свое.

Импорт готового шаблона

Выбрал первый попавшийся шаблон для ВордПресс:

готовый шаблон

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

Можно изменить абсолютно все:

  1. Фон
  2. Шрифты
  3. Сделать слайд-шоу
  4. Изменять цвета
  5. Схему расположения виджетов
  6. Посмотреть как будет отображаться шаблон на мобильных устройствах
  7. Вообще ВСЕ МОЖНО изменить в шаблоне

И еще раз напомню, что это все можно сделать буквально бабушке, которая впервые взялась за разработку дизайна для корпоративного сайта ГазПрома =)

Но у этой легкости есть и обратная сторона, о которой расскажу чуть ниже.

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

панель инструментов содержимого

Работа с содержимым сайта. Здесь задается оформление шрифтов, картинок и.т.д.

панель инструментов вставки элементов

Вставка всевозможных элементов сайта.

instrument-3

Работа с дизайном сайта. Здесь задаются базовые цвета оформления и.т.д

управление слоями

Короче, возможностей, ОЧЕНЬ много. То, чего не хватало в Artister –  теперь можно с легкостью сделать в Themler.

Я не буду здесь ваять шаблон и настраивать его именно под блоговый стиль. А просто возьму и сразу запилю его не тестовый блог win4blog.ru

И посмотрю, что там с кодом. Для этого необходимо готовый шаблон экспортировать в zip-архив.

экспорт шаблона

Обратите внимание, что при экспорте готового шаблона необходимо оставить галку напротив “Include Themler for customizing this theme”. Зачем это нужно, расскажу чуть ниже.

image

Установил готовый шаблон на win4blog:

вид на сайте

Разумеется, нормальным шаблоном ЭТО назвать нельзя. Он требует тщательного допиливания и так далее…

Самое интересное

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

Плагин Themler

То есть, прямо на сервере сайта подгружается Themler и можно все править “на лету”, не покидая админку сайта.

Честно говоря, более продвинутого фреймворка для шаблонов на WordPress я не видел. Это действительно что-то новенькое:

доработка шаблона прямо в в админке

Но меня в первую очередь интересует, что там с кодом?

А вот здесь пока еще далеко от идеала. На мой взгляд, он пока перегружен и явно сырой. Слишком много всего наверчено-накручено, как в первых версиях Artisteer. Я не зря вспомнил первые версии Артистера, так как там тоже было все грустно в этом плане. Именно тогда и было много воплей о том, что Артистер является идеальным генератором говнокода для быдлосайтов =)

Но со временем, разработчики довели код до нормального уровня.

Видимо, здесь история повторяется. И наверняка через несколько месяцев они доведут генерируемый код до хорошего уровня. То что это произойдет – сомнений нет, так как сама программа постоянно обновляется.

Это хорошо заметно по баг-трекеру и бурной (с матерком) жизни на форуме поддержки =)

Вывод

Мой вердикт таков: Themler заслуживает самого пристального внимания со стороны автономных блогеров. Продукт действительно интересный и удобный. У конкурентов вообще нет ничего подобного для тех, кто не понимает в программировании.

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

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

На чем остановился я сам?

После недолгих опытов с Темлером, я решил не ждать пока ситуация с кодом улучшится, а купил готовый шаблон за 40 долларов. Да и дизайнер из меня прямо скажем – сомнительный =) Да, в моем новом шаблоне тоже есть проблемы, которые сейчас решаю.

Например, там есть стена CSS-кода, с которой тоже нужно что-то делать…

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

Пока я склонен ему верить.

P.S. И, конечно, поздравляю всех читателей с Новым Годом! Желаю всего самого наилучшего и удачи!

Советую прочитать:

  1. WordPress.com for Windows: новый способ управлять блогами прямо с компьютера
  2. Встречаем новый Вебмастер от Яндекса: три главных нововведения, которые порадуют блогеров
  3. Шесть вопросов, которые бесят начинающих блогеров

Только для блогеров и вебмастеров:

Один комментарий к «Themler (Темлер): делаем шаблон для WordPress за 5 минут и немного о том, как я менял дизайн блога и что из этого вышло»

  1. М.. да если честно не в восторге. Белая шапка сразу бросается в глаза, уже скучаю по старому шаблону ideafox.

    • =) Старый шаблон уже не отрабатывал толком мобильный трафик, а это критичная проблема.

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

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

      • Дмитрий, немного возражу. Это примерно как в поговорке — «встречают по одежке, а провожают по уму».
        Да — текст главное, но надо чтобы захотелось на него смотреть. Уже сколько раз в выборе дизайна для сайтов руководствовался логикой, а как жену или знакомых не причастных к вэбмастерингу не спрошу — «какой вам сайт больше нравится?». Отвечают примерно так — «тот на который приятно посмотреть и на котором уютно», а полезность информации отмечают где-то после удобства доступа к ней. То есть: 1. приятный сайт, 2. Удобство, 3. Информативность… Бабах и все, нет больше логики.:-)))
        Но само собой — это больше мои умозаключения, реальность может быть другой конечно.:-)

        • Кай, не совсем согласен. Точнее, совсем не согласен.
          Я когда захожу на сайт, то сразу пробегаюсь по тексту в поисках нужной мне информации. Если же все с помпой оформлено, то я в тяжелых случаях вынужден даже использовать сочетание CTRl+F, чтобы найти нужное мне.

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

          Но я возьму на заметку твои мысли.

  3. давайте и я свой кирпич вброшу:-))) не по злобе душевной, конечно же…
    Старый по оформлению был однозначно лучше и был лучше «брэндирован»(цвета, лого и т.д.). Текущий получился совсем минималистичным, как шаблон под MFA. Хочется побольше индивидуальности, это же персональный блог как никак.
    Правда идея с верхним меню хорошая, надо взять на заметку!

  4. Давно слежу за блогом Дмитрия и сегодня впервые пишу комментнарий. Моё мнение- старый шаблон был очень хорош, в нём была душа и выглядел он хорошо. Как выглядит этот шаблон на компьютере пока нет возможности, но думаю стили нежно применить со старого шаблона. Это моё личное мнение. Всё равно буду активным потребителем ваших курсов и чтецом статей. Ваши статьи интересны и нравится как вы относитесь к своим читателям-это много стоит. Спасибо и с наступающии Вас Новым годом!

  5. А вообще ребята вот что скажу: анализируя ПС яндекса, в первую очередь, можно сделать следующий вывод. Ведь на первых местах ПВ заметьте стоят сайты совсем даже невзрачные — с минималистичным дизайном, независимо от их пузомерков. А вот на первых местах ПВ с супер-пупер разрисованным дизайном пока не встречала.

  6. Вау! Ты таки решился! Поздравляю! Нормальный шаблон, вот только цветовую гамму я бы вернул старую, а так отличный вариант: минималистично и удобно.

    ПС Как у меня мама говорила: «Не было у бабу заботы, купила баба порося» Как раз тебе занятие на все праздники))) Будет нужна помощь, стучись

  7. А мне этот дизайн больше понравился.

    И успевшие полюбиться знакомые форма подписки и баннеры в правом сайдбаре. Главное — основные (негласные) каноны соблюдены и блог читается легко и приятно.

    Это ли не показатель удачности выбранного варианта?

    Идея же с верхним меню приятно удивила. Оригинально и просто вместе с тем. Логотип, символизирующий движение ( это, как я понял, не знаю, верно или нет) можно было бы сделать в одном цвете (либо в красном, либо в зеленом).
    Но это, опять же — сколько людей, столько и мнений.

    В любом случае, Дмитрий, ничего не помешает тебе дорабатывать внешний вид твоего детища ровно столько, сколько потребуется — ведь хозяин-то ты! И главным в нем все равно остается контент, кто бы что ни говорил.

    А он у тебя интересный и, главное, полезный. С обновлением тебя!

  8. Эх, так и знал, что однажды сменишь шаблон, Дмитрий((
    Не знаю, я свой сделал также в Artister, после того, как узнал, что твой прежний шаблон был выполнен в этой программке. Так вот у меня нормально адаптируется на мобильник, без всяких проблем.
    Ну не нравится мне эти резиновые, огромные холсты, как твой нынешний шаблон.
    Что поделаешь, придётся привыкать, ведь всё таки автор важнее фантика, в который он оборачивает свои мысли. С наступающим тебя и всех блогеров!

    • Спасибо)
      Я так и не понял, кстати, что за фигня с мобильной версией была. Скорее всего дело в том, что сайт уже больше трех лет, что там перекосило в недрах движка.
      Но сам Артистер больше развиваться не будет, так-что тянуть дальше не было смысла.

  9. У нового дизайна общепринятая структура. Теперь конечно понадобится немного времени к нему привыкнуть)
    С наступающим Новым годом, Дмитрий!
    Всех благ и творческих успехов в Новом году!)

  10. Дмитрий, приветствую!
    Ура-ура! Новый шаблон! Очень даже классненько получилось. Понимаю, что еще пилить и пилить, индивидуализировать/брендировать. Но даже на начальном этапе в разы лучше, чем было. Типографика хорошая, светло, просторно, поиск сразу виден))) В общем, супер. На планшете тоже отлично смотрится. Ну, вот такие первые впечатления.
    Что первым бросилось в глаза из негативного — шрифт (и его размер) у заголовков внутри статей. Слишком уж большой, весь первый экран загораживает, по крайней мере в этой статье.

    PS: поздравляю всех с Новым годом!
    PPS: Дмитрий, а тебя еще отдельно поздравляю с новой «головной болью» =)

    • Спасибо, Александр)
      Шрифт и правда огромный в заголовке (еще говорят, что в firefox что-то не так)
      разбираюсь

  11. DotNetNuke судя по описаниям неплохой движок, но отсутствие шаблонов делает его не сильно популярным, я пробовал ставить — вроде ничего, но… вордпресс есть вордпресс ( хотя мои симпатии с ВП разделяет и ImageCMS )

  12. Cупер шаблон, давно являюсь вашим читателем. Шрифт супер, читается легко и без напряга, ничего лишнего, пример идеального шаблона для блогера. Но и старый был тоже неплох был, в нем была своя изюминка, особенно фото суслика на главной.

  13. Мы будем скучать по старому доброму шаблону.. Придется привыкать к тебе заново, новые букавки, новые цвета.. Как же противится мозг всему новому!?! Но что поделать, прогресс без сего не возможен.
    С обновкой Дима, с Наступающим!

  14. Дмитрий, с Новым Годом! И с новым шаблоном! Шаблон вполне нормальный, но мне бы хотелось, чтобы появилось немного оранжевого цвета, твоего родного :)

  15. Дима, поздравляю с тем новым, что тебя ждёт в 2016 году. Ахнула, увидев новый шаблон. Зашла с третьей попытки, после того, как с двух ссылок показалась мне только белая страница. Я уж испугалась, не случилось ли чего. Теперь вижу, что случилось только хорошее. Видимо, в данный момент ты работаешь на сайте.

    Сразу скажу о первом впечатлении, еще только начавши читать. Читать трудно. Чем больше захватывает взгляд, тем легче читать и тем быстрее прочитываешь и усваиваешь прочитанное. Так у тебя было в старой теме, читалось достаточно легко, потому что текст располагался компактно. Сейчас глаз напрягается и отвлекаешься от смысла.

    2. Очень растянута вниз по странице статья. Из-за растянутости сверху вниз не хочется возвращаться вверх, как делала всегда на старом шаблоне. Для «закрепления» материала))) я возвращалась и видела всё целиком.
    Сейчас в конце не помню, о чём было начало. Ну, может быть, это та самая болезнь памяти, которая прогрессирует у нас с возрастом)))

    3. Теперь немного привыкнув. Прочитала статью, спасибо за информацию. Всё же первое впечатление подтвердилось. Хочется компактности и более мелких букв. Особенно в заголовке.

    Возможно, это моё личное восприятие. Кроме того и на мониторе я смотрю почти квадратном. А главное, если это даёт бОльшие возможности блогу, то меняться надо. Привыкнем.)
    Лемур — окончательно в прошлом, нет и следа. Ну и ладно, надо вылезать из коротких штанишек.
    Классное меню, просто шик.
    Много воздуха, свободней чувствуешь себя.
    Общее впечатление новизны, современности. Я не большой знаток, но и перечисленного уже немало в пользу перемен. Интересно будет узнать, оправдались ли надежды на обновление.
    Лёгкой тебе дороги в будущее.

    • Тамара, и Вас с НГ)

      На небольшом мониторе текст действительно огромный. Но дело в том, что сейчас преобладают HD-мониторы, на которых такой шрифт смотрится хорошо (а старый мелковат).
      Скоро будут преобладать мониторы с еще большим разрешением (4К), где этот шрифт будет мелковат, и история снова повторится)

      • Дмитрий у меня обычный комп с разрешением 1900 с чем-то… и то такой шрифт кажется довольно непривычно — огромным. Возможно для тех у кого со зрением проблемы, будет и нормально это…

        • Ну, я видел свой прежний шаблон на мониторе 4К — что-то мелко совсем было.
          Вы сами не заметите, как быстро они завоюют рынок… Если помните, года три назад при создании сайта нормой было учитывать мониторы разрешением 1024*768.
          А теперь про них и не вспоминают даже. Тоже самое будет и с HD-мониторами года через два.

  16. Дмитрий поздравляю с Новым годом и с Новым шаблоном. Успехов во всем!
    Тоже недавно поменял шаблон на платный (Sahiva). Скорость не ахти (в основном из за виджетов соц. сетей в сайдбаре), но теперь зато отлично смотрится на всех устройствах.

  17. Дима, старый шаблон мне нравился (за индивидуальность), но новый нравится еще больше. Более современный какой-то, все лишнее убрано…Думаю, многие будут переходить на подобные шаблоны.
    Ты сказал, что купил шаблон за 40 долларов. То есть, ты купил эту программу за 129 долл, а к ней еще купил шаблон за 40? Поясни, пожалуйста.
    Еще вопрос: если покупаешь Themler, ползуешься lifetime, или лицензия на год, через год надо опять платить, и так далее?
    Можно ли вставлять рекламу, контекстную рекламу и пр. в шаблон? У меня один сайт, подходит вариант Personal, как быть с рекламой?
    И еще: на твоем сайте в полной версии на пол-экрана открыто голубое верхнее меню. Оно никак не убирается, приходится смотреть сайт в нижней половине экрана. Браузер файрфокс.

    • 1. Нет, не так. Themler позволяет делать шаблоны для сайтов. Я купил совсем другой шаблон, который никак не привязан к этой программе.
      2. Да, они просят за обновления каждый год докупать лицензию. (50 долларов, вроде, в моей версии за 129 долларов).
      3. Да, можно вставлять рекламу. Она ведь вставляется в тело статьи или в виджеты на самом сайте, а не в код шаблона.
      4. Ладно, проверю, спасибо.

  18. Привет Дима, поздравляю с Наступившим.

    Все таки решился сменить дизайн) Непривычно пока, но в целом симпатично смотрится.
    Поисковики пока никак не реагировали?

    По мне дороговата программка, если для личных целей использовать то проще наверно купить готовый шаблон. А вот если сайтов много и дизайнерская кость покоя не дает, а учить CSS не барское дело, то может и стоит обзавестись)

    • Спасибо)
      Пока никак Яндекс не отреагировал (апдейтов еще не было). В Гугле пока тоже без изменений.

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

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

  19. Дмитрий, поздравляю со сменой темы (можете закидать меня камнями но все таки тема, а не шаблон)! На мой взгляд стало свежее. Читать легко и приятно. Одинарная боковая колонка всем привычнее и удобнее. )
    Спасибо за обзор этой программы, очень полезно для вебмастеров. Думаю, в будущем вообще все темы будут редактироваться именно в спец. редакторах, а не в коде.

    • Ну, под дорогие проекты все-таки врукопашную будут писать код. Или на менее известных фреймворках, но точно не Темлере)
      А для простых сайтов и продажников он сгодится.

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

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