Wordpress шаблон

Подборка лучших тем для WordPress поможет вам выбрать дизайн-шаблон для сайтов разного типа. Описание каждой темы включает ссылку на шаблон в официальном каталоге, скриншот, краткий список возможностей и технических характеристик.

Оглавление:

Критерии выбора лучших тем

Откровенно говоря, к подборкам лучших дизайн-шаблонов я отношусь скептически. Авторы таких списков практически никогда не указывают критерии, по которым выбирают темы. Из-за этого подборки должны называться так: «Список тем, которые больше всего нравятся автору» или даже «Шаблоны, которые первыми попались мне под руку».

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

Оценивать визуальную привлекательность бессмысленно, так как вкусы у всех разные. Составлять списки лучших тем по техническим характеристикам тоже бесполезно. Все дизайн-шаблоны из официального каталога WordPress соответствуют требованиям сообщества. А сравнить темы по отдельным параметрам тоже не удастся.

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

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

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

Четыре первых места в списке самых популярных занимают дефолтные шаблоны семейства Twentieth: Twenty Seventeen, Twenty Sixteen, Twenty Fifteen и Twenty Fourteen. Это отличные темы, но своей популярностью как минимум частично они обязаны установкой на новые сайты по умолчанию.

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

Представленную ниже подборку можно считать субъективно-объективным рейтингом шаблонов. Темы отобраны по следующим признакам:

Визуальная привлекательность.
Кастомизируемость.
Совокупность технических характеристик.
Функциональность.

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

Скорость загрузки измеряется на примере сайта, который работает на виртуальном Linux-хостинге. Для измерения использовался сервис Pingdom.

Шаблоны для блогов

В этом разделе представлены лучшие шаблоны для блогов.

1. Realistic

Минималистичная тема в стиле Material Design. Характеристики:

Рейтинг 4 из 5 звезд, более тысячи установок.
Скорость загрузки — 1,65 секунды.
Доступен выбор положения сайдбара, блок похожих публикаций, социальный виджет Follow Me.

2. Triad

Тема для классических блогов в стиле Material Design. Параметры:

5 звезд, более 1000 установок.
Скорость загрузки — 1,13 секунды.
Пять областей для виджетов, меню-гамбургер.

3. Twenty Sixteen

Дефолтная тема WordPress от 2016 года была создана специально для блогеров. Характеристики:

Рейтинг 4 звезды, более 800 тыс. установок.
Скорость загрузки — 522 мс.
Три зоны виджетов, включая две под контентом.

4. Shuban

Блог-тема в стиле Material. Характеристики:

4,5 звезды, более 600 установок.
Скорость загрузки 686 мс.
Два сайдбара, пять зон для виджетов.

5. Yosemite Lite

Тема для блогов с простым и приятным дизайном. Параметры:

Нет рейтинга, более 600 установок.
Скорость загрузки — 575 мс.
Виджеты в сайдбаре и футере, фиксированный сайдбар.

6. The Clean Blog

Современная визуально привлекательная тема для личного или коммерческого блога. Подробности:

5 звезд, более 700 установок.
Страница загружается за 694 мс.
Дизайн без сайдбара обеспечивает полную фокусировку на контенте. Гибкие настройки внешнего вида.

7. Skil

Ультраминималистичная тема для блогов. О Skil:

Без рейтинга, более 300 установок.
Скорость загрузки — 1,57 секунды.
Виджеты в сайдбаре и футере, меню-гамбургер, выбор левого или правого сайдбара.

8. Scaffold

Простая и визуально привлекательная тема для блогеров. Характеристики:

5 звезд, более 1000 установок.
Страница загружается за 639 мс.
Возможность добавить фото в хедер, гибкие настройки цветов.

9. MH HealthMag

Классическая блог-тема. О шаблоне:

Без рейтинга, более 1000 установок.
Скорость загрузки 676 мс.
12 зон виджетов, включая возможность установить виджет или объявление внутри публикации.

Поддерживает специальные виджеты. Гибкие настройки макета и цветов сайта.

10. Publisherly

Тема для блогов с встроенными социальными кнопками. О Publisherly:

Без рейтинга, более 400 установок.
Загружается за 538 мс.
Пять зон для виджетов, возможность менять текст в футере через кастомайзер.

11. Dax

Блог-тема с привлекательной и удобной структурой страниц. Характеристики:

5 звезд, более 500 установок.
Скорость — 538 мс.
4 зоны виджетов, гибкие настройки внешнего вида.

12. Lana Site

Тема для блогов с возможность расширения функциональности. О шаблоне:

Нет рейтинга, более 600 установок.
Загружается за 3,8 секунды.
Пять зон для виджетов, закрепленное меню, гибкие настройки внешнего вида и функциональности.

13. BasePress

Аккуратная блог-тема с элементами Material Design. О свойствах:

5 звезд, более 1000 установок.
Скорость — 2,83 секунды.
Шесть виджет-зон, возможность добавить изображение в хедер, выбор правого и левого сайдбара, макет без сайдбара.

14. ClubBlog

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

Без оценок, более 700 установок.
Загружается за 1,76 секунды.
Две зоны для виджетов, возможность загрузить логотип в хедер.

15. Blog Way

Отличная тема для тех, кто выбрал путь блогера. О шаблоне:

5 звезд, более 2000 установок.
Загружается за 1,18 секунды.
Пять виджет-зон, виджет с биографией автора. Выбор макета, добавление изображения в шапку, настройки цветовой схемы.

16. Bookmark

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

Без рейтинга, 400+ активных установок.
Загружается за 824 мс.
Возможность добавить изображение в хедер, зона виджетов в подвале.

17. Bhari

Минималистичная тема для блогеров. О шаблоне:

5 звезд, более 1000 установок.
Скорость — 1,07 секунды.
Шесть вариантов макета, настройки цветов, добавление изображения в шапку.

18. Wellington

Простая и визуально привлекательная блог-тема. О шаблоне:

5 звезд, более 8000 установок.
Скорость — 556 мс.
Три виджет-зоны, уникальные виджеты для отображения контента, выбор правого и левого сайдбара, выбор макета главной страницы.

19. Azalea

Блога-тема с минималистичным дизайном. Подробности:

5 звезд, более 2000 установок.
Загружается за 1,58 секунды.
Четыре зоны для виджетов, загрузка изображения в шапку, выбор левого и правого сайдбара, пагинация на главной странице.

20. Sanse

Тема для блогов без сайдбара с организацией контента на главной в две колонки. Характеристики:

Без оценки, 800+ установок.
Скорость — 1,81 секунда.
Четыре зоны виджетов, настройки цветовой схемы, изображение в шапке.

Темы для контент-проектов

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

21. Elif Lite

Тема для контент-проектов в стиле material Design с организацией контента на главной типа «кирпичная кладка» или Masonry Grid. Характеристики:

5 звезд, более 300 установок.
Загружается за 2,74 секунды.
Выбор макета, правый или левый сайдбар, изображение в заголовке. Отображение связанных публикаций, гибкие настройки внешнего вида.

22. SpiderMag

Тема для новостных и тематических ресурсов. О шаблоне:

Без оценки, 400+ установок.
Загружается за 3,48 секунды.
Слайдер, 10 зон виджетов, предустановленные виджеты для рекламы. Специальные виджеты для промоутирования контента.

23. Telegraph

Минималистичная тема для СМИ и контент-проектов. Подробности:

Без рейтинга, 1000+ установок.
Скорость — 2,36 секунды.
5 зон для виджетов, отображение постов из заданной категории в визуально привлекательном блоке на главной.

24. Zomer

Тема для контент-проектов без сайдбара с организацией контента на главной в три колонки. Подробнее:

Без рейтинга, более 500 установок.
Скорость — 2,36 секунд.
Две зоны виджетов, выбор цветовой схемы.

25. Daily Insight

Классическая тема для СМИ. О шаблоне:

5 звезд, более 700 установок.
Загружается за 1,20 секунды.
7 зон для виджетов, специальные виджеты для анонсирования контента. Слайдер, блоки актуального и тематического контента, настройки цветовой схемы.

26. Cassions

Журнальная тема с минималистичным дизайном. Подробнее:

Три звезды, более 600 установок.
Скорость — 1,25 секунды.
Шесть зон для виджетов, специальные виджеты для промоутирования контента на главной. Выбор цветовой схемы, изображение в хедере.

27. Magazine Plus

Тема для новостных ресурсов и других контент-проектов. Подробности:

5 звезд, более 3000 установок.
Скорость — 625 мс.
Восемь виджет-зон, слайдер, специальные виджеты для анонсирования контента. Выбор макета, гибкие настройки внешнего вида.

28. Deadline

Тема для контент-проектов с акцентом на читабельности контента. Подробности:

5 звезд, более 1000 установок.
Загружается за 1,04 секунды.
Пять виджет-зон, отображение контента из выбранных категорий в визуально привлекательном формате на главной.

29. Typist

Минималистичная тема с великолепной типографикой. Характеристики:

Без оценки, 600+ установок.
Скорость — 972 мс.
Выбор правого или левого сайдбара, настройки ширины страницы, предустановленный виджет Follow Me, выбор цветовой схемы.

30. Haxel

Тема для контент-проектов с гигантским хедером и параллакс-эффектом. О шаблоне:

Без рейтинга, более 1000 установок.
Загружается за 985 мс.
Четыре виджет-зоны, слайдер, блоки для промоутирования контента из выбранных категорий. Выбор макета: классический блог или сетка в две и три колонки.

31. SuperNews

Тема с гибкими настройками внешнего вида. Характеристики:

5 звезд, более 5000 установок.
Скорость — 1,64 секунды.
Восемь зон для виджетов, предустановленные области для рекламы, очень гибкие настройки внешнего вида главной и внутренних страниц.

32. MH Joystick lite

Тема с удобной организацией контента на главной. Подробности:

Без оценок, более 2000 установок.
Скорость — 1,84 секунды.
Слайдер, выбор макета, изображение в шапке.

33. VT Grid Mag

Тема для контент-проектов с минималистичным дизайном. О шаблоне:

5 звезд, 600+ установок.
Скорость — 1,26 секунды.
Выбор положения сайдбара, выбор сетки на главной в две или три колонки, гибкие настройки цветов.

34. MagZen

Универсальная тема с удобным для контент-проектов дизайном. Характеристики:

4 звезды, более 700 установок.
Скорость — 1,75 секунды.
Восемь виджет-зон, отображение постов из выбранной категории на главной. Анонс последних публикаций в виде бегущей строки, гибкие настройки внешнего вида.

35. Numinous

Тема для контент-проектов, готовая к монетизации с помощью рекламы. О шаблоне:

5 звезд, более 900 установок.
Скорость — 1,52 секунды.
Пять виджет-зон, включая специальный сайдбар для WooCommerce. Выбор цветовой схемы, гибкие настройки отображения контента на главной.

36. Bezel

Тема с организацией контента на главной в сетку с двумя колонками. Подробнее:

Без оценки, более 1000 установок.
Скорость — 635 мс.
Выбор правого и левого сайдбара, изображение в хедере.

37. Newsbuzz

Журнальная тема в стиле Material Design с гибкими настройками функциональности и внешнего вида. О шаблоне:

5 звезд, более 700 установок.
Загружается за 1,20 секунды.
Восемь виджет-зон, кастомизация главной страницы, выбор цветовой схемы.

38. BlackWhite Lite

Классическая журнальная тема. Характеристики:

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

39. NewsPro

Тема для новостных ресурсов. Подробнее:

5 звезд, более 600 установок.
Скорость — 1,25 секунды.
Анонс контента в формате бегущей строки, виджеты для рекламы и промоутирования контента. Слайдер и карусель на главной.

40. NovaPress

Тема с организацией контента на главной в три колонки. О шаблоне:

4 звезды, 900+ установок.
Загружается за 1,73 секунды.
В бесплатной версии возможности кастомизации ограничены.

Шаблоны для корпоративных сайтов

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

41. Decree

Корпоративная тема, разработчики которой сделали акцент на строгости и солидности внешнего вида. Характеристики:

Без оценки, 200+ установок.
Загружается за 756 мс.
Телефон и конверсионная кнопка в хедере, слайдер на главной, раздел для портфолио.

42. Business Page

Корпоративная тема с полноэкранным слайдером. Характеристики:

5 звезд, более 300 установок.
Скорость — 717 мс.
Виджет подсчета числа подписчиков, полноэкранный слайдер на главной, произвольное изображение в хедере, выбор макета.

43. Twenty Seventeen

Дефолтная тема WordPress 2017 года разрабатывалась для корпоративных сайтов. Подробности:

4,5 звезды, более 1 млн установок.
Загружается за 1,49 секунды.
Фото или видео в шапке сайта, выбор цветовой схемы и макета, кастомизация главной страницы.

44. VW hospital Lite

Тема для медицинских учреждений. Но ее можно использовать и в других отраслях. Характеристики:

5 звезд, более 400 установок.
Загружается за 1,02 секунды.
Слайдер, блоки «Наши услуги», «Выбор специалиста», «Свяжитесь с нами» на главной.

45. Enlighten

Тема с широкими возможностями кастомизации. Подробнее:

5 звезд, более 3000 установок.
Скорость — 1,38 секунды.
Контактные данные в шапке, информация о компании и избранные публикации на главной.

46. Book Landing Page

Корпоративная тема, адаптированная к продаже инфопродуктов. Характеристики:

3,5 звезды, более 900 установок.
Загружается за 647 мс.
Возможность превратить главную или другие статические страницы в конверсионные лендинги. Баннер, отзывы, обзоры на главной.

47. Pranayama Yoga

Корпоративная тема, которая подойдет не только преподавателям йоги. Подробности:

5 звезд, более 800 установок.
Скорость — 642 мс.
Баннер, конверсионная промо-секция, информация об услугах на главной. Отзывы, информация о компании на главной.

48. Integral

Классическая корпоративная тема. Подробности:

4,5 звезды, более 3000 установок.
Скорость — 1,83 секунды.
Гибкие настройки внешнего вида, секция для отзывов клиентов, семь виджет-зон.

49. SKT Design Agency

Бизнес-тема для дизайн-агентства и других типов организаций. Характеристики:

5 звезд, более 1000 установок.
Скорость — 916 мс.
Настройки цветовой схемы, изображение в хедере, слайдер и блоки для промоутирования контента или разделов сайта на главной, контактная информация в шапке.

50. Education Hub

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

5 звезд, более 10 000 установок.
Скорость — 848 мс.
Контактная информация и быстрые ссылки в шапке, гибкие настройки внешнего вида, слайдер.

51. Enliven

Универсальная бизнес-тема. Подробности:

5 звезд, более 1000 установок.
Загружается за 655 мс.
Фиксированный хедер, конверсионный лендинг на главной, гибкие настройки внешнего вида и функциональности.

52. Bluestreet

Популярная бизнес-тема. О шаблоне:

5 звезд, более 7000 установок.
Скорость — 821 мс.
Баннер на главной, настройки типографики, выбор цветовой схемы, контактная информация в шапке.

53. Sento

Корпоративная тема с минималистичным дизайном. О шаблоне:

3,5 звезды, более 2000 установок.
Скорость — 650 мс.
Девять виджет-зон, выбор макета, три типа слайдеров, блоки для промоутирования разделов сайта.

54. Innovation Lite

Бизнес-тема со слайдером на главной. Подробнее:

4,5 звезды, 1000+ установок.
Скорость — 729 мс.
Закрепленный хедер, слайдер, портфолио, раздел «Наша команда».

Тема Innovation Lite

55. Travelify

Универсальная тема, которую можно использовать для корпоративных сайтов. Характеристики:

5 звезд, более 20 000 установок.
Скорость — 1,32 секунды.
Слайдер, выбор цветовой схемы, изображение в хедере.

56. Busiprof

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

5 звезд, 1000+ установок.
Загружается за 1,36 секунды.
Инфобар, слайдер, анонсирование контента или услуг на главной.

57. Baton

Корпоративная тема в материальном стиле. О шаблоне:

5 звезд, 800+ установок.
Скорость — 653 мс.
Выбор макета, ширины области контента, цветовой схемы. Возможность превратить главную в конверсионный лендинг.

58. Sauna Lite

Фемининная тема для бизнеса соответствующей направленности. Подробнее:

Без оценки, 200+ установок.
Скорость — 1,76 секунды.
Слайдер на главной, выбор макета, зоны для анонсирования разделов сайта или продуктов на главной.

59. Restau Lite

Тема для заведений общепита. Подробнее:

Нет рейтинга, 200+ установок.
Скорость — 815 мс.
Выбор цветовой схемы, баннер и галерея на главной.

60. Resortica Lite

Тема для отелей и туристических комплексов. О шаблоне:

5 звезд, более 1000 установок.
Загружается за 1,33 секунды.
Баннер, отзывы, конверсионный блок на главной.

Темы для интернет-магазинов

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

61. Storefront

Дефолтная тема WooCommerce. Подробнее:

4,5 звезды, более 100 000 установок.
Скорость — 1,47 секунды.
Гибкие настройки внешнего вида, блок для промоутирования товаров на главной, изображение в шапке.

62. Shopper

Популярная ecommerce-тема. О шаблоне:

5 звезд, 1000+ установок.
Скорость — 1,48 секунды.
Выбор макета, изображение в хедере, гибкие настройки внешнего вида, удобный поиск по продуктам.

63. Basic Store

Тема для магазина с минималистичным дизайном. Характеристики:

Без оценки, более 700 установок.
Скорость — 943 мс.
Изображение в хедере, блоки для промоутирования новых товаров, а также продуктов из выбранных категорий, приклеенная шапка.

64. Shopress

Тема для магазинов со стильным дизайном. Подробности:

Без оценки, 600+ установок.
Скорость — 718 мс.
Изображение в шапке, слайдер, промо-блок на главной.

65. ClassicRGB lite

Тема с минималистичным дизайном и минимум настроек. Подробнее:

Без оценки, 300+ установок.
Загружается за 820 мс.
Галерея товаров на главной, сайдбар слева.

66. BuzzStore

Визуально привлекательная тема для магазинов. Подробнее:

5 звезд, 1000+ установок.
Загружается за 1,32 секунды.
Промо-виджеты на главной, выбор макета, настройки цветовой схемы.

67. Hypermarket

Ecommerce-тема с необычным дизайном. Подробности:

5 звезд, 600+ установок.
Скорость — 2,93 секунды.
Дизайн карточки товара ориентирован на демонстрацию ярких изображений товара.

68. StoreOne

Ecommerce-тема со слайдером и галереей товаров на главной. Характеристики:

Без оценки, 1000+ установок.
Загружается за 3,95 секунды.
Галерея товаров на главной, контактная информация в шапке.

69. Craze

Разработчики рекомендуют тему для магазинов одежды, книг и электроники. Подробнее:

5 звезд, 700+ установок.
Скорость — 2,63 секунды.
Контактные данные в шапке, промо-блоки на главной.

70. Jstore

Тема для магазинов. Подробности:

5 звезд, 400+ установок.
Скорость — 3,39 секунд.
Баннер и последние продукты на главной, изображение в шапке, настройки цветов.

71. MetroStore

Ecommerce-тема с красивой анимацией. О шаблоне:

5 звезд, более 2000 установок.
Загружается за 4,10 секунды.
Слайдер на главной, изображение в заголовке, удобная навигация.

72. Sabino

Ecommerce-тема для разных типов магазинов. Подробности:

Без оценки, 3000+ установок.
Скорость — 3,37 секунды.
Настройки цветовой схемы и типографики, выбора макета страниц.

73. Bento

Разработчики позиционируют тему в качестве универсального решения корпоративного класса. Подробнее:

4,5 звезды, более 7000 установок.
Скорость — 3,91 секунды.
Очень гибкие настройки функциональности и внешнего вида.

74. Fluid Magazine

Тема для магазинов с женской аудиторией. Характеристики:

4 звезды, более 400 установок.
Загружается за 4,29 секунды.
Слайдер на главной, промо-блоки для товаров из выбранных категорий.

75. Fashion Store lite

Мультиязычная тема для магазинов. Подробнее:

Без оценки, более 600 установок.
Скорость — 3,61 секунды.
Галерея товаров на главной, восемь виджет-зон.

Темы для сайтов-портфолио

Портфолио можно оформить с помощью любого шаблона WordPress. Но вы можете воспользоваться классными специализированными темами.

76. Click

Тема с удобной организацией контента на главной и страницах категорий. Подробнее:

Без оценки, 200+ установок.
Загружается за 4,19 секунды.
Слайдер на главной, промо-блоки публикаций из выбранных разделов.

77. Hamilton

Тема с минималистичным дизайном и ориентацией на публикацию ярких фото. Характеристики:

5 звезд, 600+ установок.
Загружается за 2,75 секунды.
Меню-гамбургер, визуально привлекательный формат отображения контента на главной и страницах категорий.

78. Portfolio Lite

Минималистичная и визуально ориентированная тема. Подробнее:

5 звезд, более 1000 установок.
Скорость — 4,09 секунды.
Изображение в шапке, слайдер с двумя режимами демонстрации контента.

79. NovelLite

Тема для корпоративных сайтов и портфолио. Характеристики:

4 звезды, более 1000 установок.
Скорость — 1,53 секунды.
Шесть виджет-зон, приклеенная шапка.

80. Bizwhoop

Универсальная тема для бизнес-сайтов, портфолио и магазинов. Подробнее:

Без оценки, 300+ установок.
Скорость — 729 мс.
Слайдер, промо-блоки, конверсионный блок на главной.

81. Noah Lite

Портфолио-шаблон для фотографов, дизайнеров, иллюстраторов. Подробности:

3 звезды, более 1000 установок.
Скорость — 2,03 секунды.
Контент на главной организован в виде галереи работ.

82. Oncanvas

Шаблон с минималистичным дизайном и ориентацией на визуальный контент. О теме:

Без оценки, 300+ установок.
Скорость — 654 мс.
Шесть виджет-зон, гибкие настройки цветовой схемы.

83. Kurama

Универсальная тема, которую можно использовать для сайта-портфолио. О шаблоне:

5 звезд, 1000+ установок.
Загружается за 959 мс.
Гибкие настройки внешнего вида. В качестве изображения в шапке на страницах публикаций могут отображаться разные фотографии.

84. Nikkon

Популярный портфолио-шаблон. Характеристики:

5 звезд, более 8000 установок.
Скорость — 1,38 секунды.
Выбор макета страниц, три формата слайдера, настройки типографики, контактная информация в шапке.

85. Optics

Минималистичный дизайн, ориентация на публикацию фото. Подробности:

1 звезда, 500+ установок.
Загружается за 786 мс.
Изображение в заголовке, настройки цветов, галерея работ на главной.

86. Oxane

Портфолио-тема со стильным дизайном и красивой анимацией. Характеристики:

Без оценки, 600+ установок.
Загружается за 995 мс.
Слайдер, выбор макета, настройки типографики.

87. Nitro

Универсальная тема, которая подойдет для создания портфолио. О шаблоне:

5 звезд, 1000+ установок.
Скорость — 1,11 секунды.
Выбор макета, изображение в шапке, выбор цветовой схемы, слайдер.

88. WP Portfolio

Популярная тема для сайтов-визиток. Характеристики:

5 звезд, более 2000 установок.
Загружается за 1,55 секунды.
Выбор макета, изображение в хедере.

89. Attirant

Тема для портфолио с гигантским хедером. Подробнее:

Без оценки, 300+ установок.
Скорость — 2,04 секунды.
Слайдер, промо-блоки, изображение в шапке.

90. Seos Portfolio

Шаблон для портфолио с ориентацией на мобильные экраны. Характеристики:

Без рейтинга, 300+ установок.
Загрузка за 1,23 секунды.
Кастомные изображения в шапке и на главной, настройки цветов, ориентация на визуальный контент.

Необычные темы для WordPress

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

91. Muso

Шаблон для музыкальных коллективов. О Muso:

5 баллов, более 1000 установок.
Скорость — 824 мс.
Музыкальный плеер, карусель постов, полноэкранное фото на главной.

92. Octothorpe

Этот шаблон для сторонников радикального минимализма. О теме:

Без оценки, 100+ установок.
Загружается за 1,49 секунды.
Виджеты в футере, минимальные возможности кастомизации.

93. Anchorage

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

Без оценки, более 100 загрузок.
Скорость 2,44 секунды.
Минималистичный дизайн, меню вызывается с помощью незаметной кнопки в правом верхнем углу экрана.

94. Verbosa

Многофункциональный шаблон с гибкими настройками внешнего вида и функциональности. Информация:

5 звезд, более 4000 загрузок.
Скорость — 1,18 секунд.
Masonry Grid, выбор макета, очень гибкие настройки внешнего вида.

95. Alladin

Шаблон для визиток-одностраничников с параллакс-эффектом. Однако его можно использовать и для создания блога или сайта. Информация:

Без рейтинга, более 100 загрузок.
Скорость — 1,32 секунды.
16 виджет-зон, гибкие настройки внешнего вида.

96. Sidespied

Шаблон претендует на звание самого странного. Ориентирован на мобильные устройства, а на большом экране половина страницы остается незадействованной. Тема предназначена для фото-портфолио. Подробнее:

Без оценок, более 80 установок.
Загружается за 1,69 секунды.
Ориентация на мобильные экраны и визуальный контент. Настройки цветов.

97. Yuuta

Шаблон для блога фотографа, портфолио, публикации визуального контента. Подробнее:

5 звезд, 1000+ скачиваний.
Загружается за 1,13 секунд.
Большое изображение в хедере, минимальные возможности кастомизации.

98. Zeal

Многофункциональная тема с необычной организацией контента. Характеристики:

4 звезды, более 2000 установок.
Загружается за 1,51 секунду.
Джамботрон для демонстрации избранных фото на главной, гибкие настройки внешнего вида.

99. Eryn

Шаблон с необычной организацией контента. Подробнее:

5 звезд, 700+ установок.
Скорость — 1,20 секунд.
Изображение в сайдбаре, гибкие настройки внешнего вида.

100. Burger Factory

Шаблон с радикально минималистичным дизайном. Подробности:

5 звезд, более 700 установок.
Скорость — 509 мс.
Виджет-зоны в сайдбаре и под контентом, выбор цвета фона.

Встречают по одежке

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

100-luchshikh-besplatnykh-tem-dlya-wordpress

texterra.ru

Введение

В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.

Добавление темы

Для начала в папке themes создадим папку нашего шаблона «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css.

Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.png.

После этого мы уже можем использовать нашу тему. Зайдите в панель администратора по адресу http://{site-name}/wp-admin, а затем в управление темами (Appearance -> Themes). В списке уже должна появиться наша тема whitesquare. Наведитесь на тему и нажмите «Activate».

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

Предварительный осмотр

Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.

Структура страниц

Большинство руководств по созданию тем для WordPress ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на WordPress в рамках предоставленных макетов.

Давайте начнем со структуры страниц. Прежде чем добавлять страницы, нужно сначала зайти в настройки и указать стиль ссылок: Settings -> Permalink settings -> Post name. Это позволит сделать ссылки в виде «http://site_name/page_name».

Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.

После добавления, список страниц должен выглядеть вот так:

Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.

Header.php и Footer.php

Шапка в терминологии WordPress, это не только визуальная шапка на макете сайта. По сути, она содержит весь общий код, который встречается в начале всех страниц сайта. Давайте создадим файл header.php в папке нашего шаблона и наполним его содержимым.

<!doctype html> <html> <head> 	<meta http-equiv="Content-type" content="text/html; charset=<?php bloginfo('charset'); ?>"> 	<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 	<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> 	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> 	<?php wp_head(); ?> </head> <body <?php body_class(); ?>> 	<div class="wrapper">

Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».

Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:

function enqueue_styles() { 	wp_enqueue_style( 'whitesquare-style', get_stylesheet_uri()); 	wp_register_style('font-style', 'http://fonts.googleapis.com/css?family=Oswald:400,300'); 	wp_enqueue_style( 'font-style'); } add_action('wp_enqueue_scripts', 'enqueue_styles');  function enqueue_scripts () { 	wp_register_script('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js'); 	wp_enqueue_script('html5-shim'); } add_action('wp_enqueue_scripts', 'enqueue_scripts');

В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.

Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.

	</div> 	<footer></footer> 	<?php wp_footer(); ?> </body> </html>

Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.

Шаблон страницы

Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.
Создайте в папке темы файл page.php и добавьте в него следующий код:

<?php get_header(); ?> <div class="main-heading"> 	<h1><?php the_title(); ?></h1> </div> <section> 	<?php if (have_posts()): while (have_posts()): the_post(); ?> 		<?php the_content(); ?> 	<?php endwhile; endif; ?> </section> <?php get_footer(); ?>

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

Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:

В результате должна получиться вот такая картина:

Логотип

После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В шаблон шапки, в файле header.php вставьте разметку для логотипа:

<div class="wrapper"> 	<header> 		<a href="/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Whitesquare logo"></a> 	</header>

Форма поиска

WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:

<form name="search" action="<?php echo home_url( '/' ) ?>" method="get" class="search-form"> 	<input type="text" value="<?php echo get_search_query() ?>" name="s" placeholder="<?php echo __('Search', 'whitesquare'); ?>" class="input"> 	<button type="submit" class="button"><?php echo __('GO', 'whitesquare'); ?></button> </form>

А в файл стилей запишите стили для формы:

Всё, что осталось сделать – это подключить searchform.php внутри header.php.

<header> 	… 	<?php get_search_form(); ?>  </header>

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

if (function_exists('add_theme_support')) { 	add_theme_support('menus'); }

После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.

Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:

<nav class="main-navigation"> 	<? wp_nav_menu(array('menu' => 'top-menu', 'menu_class' => 'top-menu')); ?> </nav>

Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».

После этого меню уже появится на страницах но без стилей. Стилизуем его:

Футер

Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок

Далее делаем вёрстку в файле footer.php:

<footer> 	<div class="footer-content"> 		<div class="twitter"> 			<h3 class="footer-heading"><?php echo __('Twitter feed', 'whitesquare'); ?></h3> 			<time datetime="2012-10-23"><a href="#" class="twitter-time">23 oct</a></time> 			<p><?php echo __('In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug', 'whitesquare'); ?></p> 		</div> 		<div class="sitemap"> 			<h3 class="footer-heading"><?php echo __('Sitemap', 'whitesquare'); ?></h3> 			<div class="column first"> 				<a href="/home/"><?php echo __('Home', 'whitesquare'); ?></a> 				<a href="/about/"><?php echo __('About', 'whitesquare'); ?></a> 				<a href="/services/"><?php echo __('Services', 'whitesquare'); ?></a> 			</div> 			<div class="column"> 				<a href="/partners/"><?php echo __('Partners', 'whitesquare'); ?></a> 				<a href="/customers/"><?php echo __('Support', 'whitesquare'); ?></a> 				<a href="/contact/"><?php echo __('Contact', 'whitesquare'); ?></a> 			</div> 		</div> 		<div class="social"> 			<h3 class="footer-heading"><?php echo __('Social networks', 'whitesquare'); ?></h3> 			<a href="http://twitter.com/" class="social-icon twitter-icon"></a> 			<a href="http://facebook.com/" class="social-icon facebook-icon"></a> 			<a href="http://plus.google.com/" class="social-icon google-plus-icon"></a> 			<a href="http://vimeo.com/" class="social-icon-small vimeo-icon"></a> 			<a href="http://youtube.com/" class="social-icon-small youtube-icon"></a> 			<a href="http://flickr.com/" class="social-icon-small flickr-icon"></a> 			<a href="http://instagram.com/" class="social-icon-small instagram-icon"></a> 			<a href="/rss/" class="social-icon-small rss-icon"></a> 		</div> 		<div class="footer-logo"> 			<a href="/"><img src="<?php bloginfo('template_url'); ?>/images/footer-logo.png" alt="Whitesquare logo"></a> 			<p><?php echo __('Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation', 'whitesquare'); ?></p> 		</div> 	</div> </footer>

И прописываем стили в style.css:

В итоге главная страница сайта должна выглядеть вот так:

Главная страница

Если вы посмотрите на psd макеты, то увидите, что разметка главной страницы отличается от внутренних. В частности, на главной странице нет сайдбара и заголовка страницы.

WordPress позволяет задавать разные шаблоны для разных страниц. Такой шаблон должен храниться в файле page-{название страницы}.php. Если шаблон не найден, то будет подключаться шаблон по умолчанию page.php.

Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:

<?php get_header(); ?> <section> 	<?php if (have_posts()): while (have_posts()): the_post(); ?> 		<?php the_content(); ?> 	<?php endwhile; endif; ?> </section> <?php get_footer(); ?>

Он отличается от кода page.php только тем, что в нем нет заголовка страницы.

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

Прежде, чем добавить контент главной страницы – необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media -> Library. Назовём эти изображения так:

home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png

Далее, перейдите в панели администратора к форме редактирования главной страницы Pages -> Home -> Edit Page и в поле text введите содержимое страницы:

Не забудьте поправить пути до картинок. Они зависят от даты добавления.

Теперь осталось стилизовать данный код.

Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:

<?php remove_filter('the_content', 'wpautop');

После этого, главная страница должна отобразиться правильно.

Сайдбар

Теперь, когда главная страница готова, давайте вернемся к шаблону внутренних страниц и добавим в него сайдбар.

Для этого создайте файл sidebar.php и поместите в него следующий код:

<aside> 	<nav class="aside-navigation"> 		<? wp_nav_menu(array('menu' => 'aside-menu', 'menu_class' => 'aside-menu')); ?> 	</nav> 	<h2 class="sidebar-heading"><?php echo __('Our offices', 'whitesquare'); ?></h2> 	<div class="map"> 		<img src="<?php bloginfo('template_url'); ?>/images/sample.png" width="230" height="180" alt="<?php echo __('Our offices', 'whitesquare'); ?>"> 	</div> </aside>

Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов. Для полноты картины в качестве подменю предлагаем показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали меню. При создании подменю в разделе админки Appearance -> Menus создадим новое меню с именем aside-menu. Чтобы добавить в него посты, кликните наверху в Screen options и отметьте галочкой Show on screen: Posts. Блок карты особых вопросов не вызывает.

После того, как блок сайдбара готов, нужно его подключить для всех подстраниц в файле page.php:

<div class="main-heading"> 	… </div> <?php get_sidebar(); ?> <section> 	…

Далее нам нужно добавить стили для вёрстки:

Ну и в заключение, добавьте несколько постов в наш блог. Делается это в панели администратора на вкладке Posts -> Add New. Мы добавили точно такие же названия, как были в psd макете.

Страница About us

Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:

about-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg

Далее перейдите в редактирование страницы в панели администратора и добавьте код:

И стили в style.css:

Шаблон поста

После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:

<?php get_header();?> <div class="main-heading"> 	<h1><?php the_title(); ?></h1> </div> <?php get_sidebar();?> <section> 	<?php while (have_posts()): the_post();?> 		<?php the_content();?> 		<?php 			if ( comments_open() || get_comments_number() ) { 				comments_template(); 			} 		?> 	<?php endwhile; ?> </section> <?php get_footer(); ?>

Этот шаблон аналогичен предыдущим шаблонам с той лишь разницей, что здесь мы сначала отображаем контент поста, а затем комментарии к нему.

Страница поиска

В самом начале, когда мы создавали шаблон шапки мы добавили в него поиск, однако страницы для отображения результатов поиска у нас еще нет. Создайте в папке темы файл search.php и добавьте в него содержимое:

<?php get_header(); ?> <div class="main-heading"> 	<h1>Search</h1> </div> <?php get_sidebar(); ?> <section> 	<h2 class="content-heading"><?php printf( __('Search Results for: %s', 'default'), get_search_query() ); ?></h2> 	<?php if (have_posts()): while (have_posts()): the_post(); ?> 		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> 		<p><?php the_excerpt(); ?></p> 	<?php endwhile;	else:?> 		<p><?php echo __('Sorry, no results found', 'whitesquare'); ?></p> 	<?php endif; ?> </section> <?php get_footer(); ?>

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

Страница архива

В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.

404

Последний шаблон, который осталось добавить — это шаблон для 404 страницы, когда WordPress не смог найти запрошенную страницу. Он будет точно такой же, как page.php только вместо вывода постов будет написано сообщение об ошибке:

<?php get_header(); ?> <div class="main-heading"> 	<h1><?php the_title(); ?></h1> </div> <?php get_sidebar(); ?> <section> 	<p><?php echo __('It looks like nothing was found at this location.', 'whitesquare'); ?></p> </section> <?php get_footer(); ?>

habr.com

Настройка хостинга

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

1 На главной странице Hostenko вы увидите фразу «Создать сайт на WordPress» со стрелкой на зеленую кнопку «14 дней бесплатно. Попробовать». Наведите курсор мыши на кнопку и кликните.

Выберите тарифный план Trial в линейке продуктов. Далее вас перенаправит на форму регистрации.

2 Вы увидите информационную форму учетной записи, которую необходимо заполнить личными данными.

Заполните данные учетной записи.

Обратите внимание! Не заполняйте форму фиктивными данными. В случае утери паролей будет тяжело восстановить учетную запись.

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

Потом Вы получите письмо с адреса Hostenko.com <[email protected]>, в теле письма найдите фразу «Для подтверждения регистрации перейдите, пожалуйста, по ссылке» и кликните по этой ссылке.

4 Вас перенаправит в личный кабинет.

5 Кликаем на зеленую кнопку «Создать сайт».

Введите имя домена. На этом этапе создается временное имя вашего сайта (субдомен hostenko.com), позже вы сможете заменить на свой домен. И нажмите «Продолжить».

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

Важно! Рекомендуем логин администратора делать отличным от слова admin и домена сайта.

После заполнения кликаем на » Создать».

7 Поздравляю! Ваш первый блог создан! Вас перенаправит в админку вашего сайта.

А на емейл вы получите письмо с сообщением: «Ваш аккаунт активирован.»

8 Теперь возвращаемся на сайт hostenko.com и кликаем на кнопку «Личный кабинет». Принимаем поздравления от хостера и видим такой скрин:

Нажимаем на кнопку «Изменить домен».

9 Подключение своего домена. В форме, которая появится на вашем экране введите свой домен:

И нажмите кнопку «Продолжить». На втором шаге в пункте 7 мы с вами уже прописали необходимые NS-сервера. Если Вы зарегистрировали домен у другого регистратора, то пропишите следующие НСы в панели регистратора: ns1.domenator.com, ns2.domenator.com, ns3.domenator.com

В течение суток эта связка сработает и ваш домен будет привязан к вашему хостингу.