20 лучших тем для wordpress
Содержание:
- Добавляем меню
- Остальные простые и легкие шаблоны WordPress
- Подборка бесплатных лучших шаблонов для создания блогов
- Akea
- Начните с требований
- Темы (шаблоны) для блога на WordPress
- Советы по файлам шаблонов
- single.php и page.php
- MH UrbanMag
- Способ 1: шаблон страницы через файл с произвольным названием (классический способ)
- Разнообразие и ужас сторонних WordPress тем
- Что такое тема WordPress
- HTML шаблон
- Как упростить создание свой WordPress темы
- На что обращать внимание при выборе темы
Добавляем меню
Давайте изменим статичное меню из нашего шаблона так, чтобы его можно было редактировать из админки WordPress. Для начала регистрируем меню в файле functions.php:
register_nav_menus(array( 'top' => 'Верхнее меню', // идентификатор меню и название ));
Теперь в разделе Внешний вид → Меню добавляем пункты меню и сохраняем:
Добавление пунктов меню
Осталось вывести меню в шаблоне. Заменяем в файле header.php код нашего статичного меню следующей функцией с указанием идентификатора меню:
<?php wp_nav_menu('theme_location=top');?>
Более подробно о том, как сделать меню в WordPress читайте в этой статье.
Остальные простые и легкие шаблоны WordPress
В одной из прошлых статей про SEO шаблоны, говорил что при выборе бесплатных тем, лучше руководствоваться минимализмом потому если в бесплатной теме много функций и расширений, то ничего хорошего не жди. Бесплатные варианты в большинстве случаев не оптимизируются и не дорабатываются, на скорую руку сделаны, чтобы работало, а об остальном не заботятся. Ниже представленные продукты загружаются с официального репозитория WordPress.
Actions – самая простая тема
Actions самая простая тема WordPress, обновлялась в последний раз в 2017 году, но код без лишних подключений и мусора. Функции WP остаются, меняется их вывод. Для тренировки или начала пути в создании сайтов, советую к использованию.
Actions
Twenty Sixteen – лучший бесплатный продукт от WordPress
Стандартные темы WordPress зря обходят стороной, потому что созданы по все правилам разработки и верстки. Почему Twenty Sixteen, из всего семейства Twenty самая простая в освоении и построении файловой логики. Разрабатывалась на шаблоне Underscores, то есть структура аналогична, но с применением дополнительных настроек, что имеет:
Twenty Sixteen
- Много возможностей изменения цветов
- Изображения заголовка и фона
- Правильная микроразметка json
- Валидный html
- Несколько методов отображения контента
Iconic One – для лендинга
Iconic One представлен в классическом стиле: верхняя панель с описанием и заголовком, контент, сайдар. Если не нужны лишние навороты, то Iconic One вариант простого шаблона для лендинга WordPress.
Iconic One
- Легкость кода обеспечивает скорость по gmetrix 96/93
- Отдельный файл дополнительных стилей
- Безконфликтный с плагинами
- Имеет свой вывод миниатюр
- Совместим с SEO
- Простая панель настроек внешнего вида
- HTML5 и CSS3 сетка
Steady Blogging – оптимизированный CSS
Steady Blogging не особо отличается от предыдущего. Но понравилась особенность – сжатый код CSS, продуманная и логичная верстка. На базе темы без исправлений, а только добавлений создать продукт не плохого качества.
Steady Blogging
- Адаптивна ко всем экранам
- Мгновенная загрузка по pagespeed 100% скорости
- Изменение цветов и фона
- Базовая микроразметка
Poseidon – красивая сетка постов
Poseidon красивая полупремиальная тема, соответствующая желаниям пользователей. Чтобы расширить функционал шаблон предлагает установить три сборки: общие плагины для улучшения, набор виджетов и блоки для магазина.
Poseidon
- Липкое меню
- Два положения сайдбара
- Управление отрывками в карточках постов
- Изменение метаинформации у записей
- Простой слайдер
- Виджет социальных кнопок
Scaffold – бесплатный вариант
Scaffold сжатый во внешнем виде, но не по внутренним возможностям. Имеет правильный код, всего 6 ошибок при проверке на W3C. Скорость по показателям не ниже 94%.
Scaffold
- Настраиваемая шапка: отступы, фон (его положение и размножение)
- Фоны и цвета
- Полностью бесплатный не имеет PRO версии
- Пользовательские виджеты
Закончу статью, вывел лучший простой шаблон для WordPress и показал еще 9 вариантов легких в кастомизации тем начинающим вебмастерам и программистам. Не стал рассматривать bootstrap, потому что считаю его мусорным фреймворком.
Мне нравитсяНе нравится
Подборка бесплатных лучших шаблонов для создания блогов
Чтобы сделать простой блог на WordPress, зачастую крутых шаблонов не надо, тем более если планируется сайт для души, чтобы просто делиться своими мыслями с читателями. Приведу 6 лучших вариантов, которые как минимум не навредят новому ресурсу, но лучше его точно не сделают, потому что нет достойной оптимизации и инструментов.
Семейство шаблонов Twenty – бесплатные шаблоны для блога от создателей WordPress
Шаблоны семейства Twenty это разработки от создателей самого WordPress, команды Automatic. У них сложилась традиция каждый год выпускать новый шаблон с номером года – Twenty Seventeen, Twenty8teen и так далее, вплоть до 21 года. Каждая имеет свой функционал и определенный уникальный внешний вид. По настройкам одинаковы, но есть множество плюсов.
Twenty
- Совместимость со всем плагинами, которые сделали именно Automatic – WooCommerce, BBpress, Jet Pack и остальные.
- Наличие микроразметки для блога.
- Довольно валидный код.
- Некоторые возможности кастомизации шаблона.
- Не требуют установки дополнительных шаблонов.
- Уровень доверия у них больше, чем к остальным разработкам.
Balanced Blog – красивая адаптивная сетка
Balanced Blog интересный шаблон, исполненный в нестандартном формате адаптивного шахматного порядка на главной странице. Плюс отличный дизайн шрифтов и шапки. Изначально понравился вкраплением желтого цвета вместе с основным серым и черным. Есть небольшие включения скриптовых движущихся элементов.
Balanced
Poseidon – бесплатный премиум темплейт
Poseidon очень старая тема WordPress, но поддерживается постоянно и обновляется своевременно. Именно этот шаблон я выбрал бы если начинал без копейки в кармане делать свой первый блог. В нем много встроенных фишек, которых нет в премиум темах, можно настроить множество параметров, причем создано на собственной разработке, без применения плагинов и конструкторов.
Poseidon
Writer Blog от знаменитой в своих кругах фирмы VW, занявшая нишу условно бесплатных продуктов для WordPress. Отличаются только изменением дизайна и верстки в некоторых местах. Но начинка с опциями управления стандартные, но их предостаточно, чтобы создать хороший блог на начальном этапе. Много блоков на главной странице, которые без труда настраиваются из кастомайзера.
VW Writer
Envo Blog – интересный дизайн слайдера
Envo Blog такой же легкий в оформлении, но имеющий не обычный слайдер записей WordPress на главной, точнее как бы листы при наведении, перелистывающие на другую страницу. Выглядит эффектно, дизайн блога в стиле минимализма, с заточенным угловатым интерфейсом, изначально, лазурного цвета.
Envo
VT Blogging – подойдет для блога програмиста
VT Blogging по построению подойдет для ведения IT блога, например, для программиста, про строительство и такие более серьезные темы. Сдержанное содержание, узкая шапка, продуманные цвета и типографика строгого стиля с разнообразием гаммы. Чистый и ускоренный, преимущество, почти всех бесплатных шаблонов для блога, это отсутствие необходимости ставить дополнительные инструменты.
VT Blogging
Akea
Следующую тему можно назвать идеальной для личного блога. Разработчики позволяют добавить не только объемные статьи, но и прикрепить к ним необходимое количество изображений как в промежутках между текстом, так и в качестве логотипа. Главная особенность Akea – возможность читателей ставить лайки на записи, а не только комментировать их. Это дает обратную связь, поощряет и добавляет стимула автору.
С помощью Akea делите свои статьи на категории, выводя их в меню справа, прикрепляйте к каждой из них теги, чтобы обычному пользователю было проще ориентироваться во всем и находить интересную для него информацию быстро, без мониторинга всех статей от новых до самых старых. Akea распространяется платно, но ее цена не так высока, чтобы обходить этот шаблон стороной.
Начните с требований
Неопытные пользователи начинают выбор темы с каталога. Их можно понять, ведь это весело: открываешь то одну, то другую; разглядываешь дизайн; представляешь, что это твой сайт и предвкушаешь успех. Но пользы от такого занятия мало.
Сначала надо подумать, зачем создаётся сайт и что там будет размещено, а потом уже подбирать дизайн. Поэтому до выбора темы WordPress стоит ответить на вопросы:
- Какие цели у сайта?
- Какие страницы нужны?
- Что будет на каждой странице?
- Какие материалы будут использоваться: фото, текст, видео?
- Какая функциональность необходима: приём оплаты, размещение товаров, загрузка пользовательских файлов, форум?
Составьте список страниц. Исходя из ответов на вопросы выше, составьте список страниц и требований к ним. Описывая, будьте детальны. Запись о странице с ключевыми лицами компании может выглядеть так: «Страница сотрудников: профили четырех менеджеров, в каждом — фото, описание на 150 слов, ссылки на соцсети».
Посмотрите на сайты конкурентов. Это поможет учесть то, о чём вы забыли или не подумали. Откройте пару проектов компаний, который работают на одном с вами рынке, и посмотрите, какие страницы там есть; какой контент и функциональность; что сделано удачно, а что нет. Полезными находками дополните свой список, а ошибки учтите.
Темы (шаблоны) для блога на WordPress
Для начала объясню, что такое шаблоны в WP. Да, понимаю, например, в Joomla принято называть шаблоном, но в Вордпресс немного иначе. Шаблон для WP – часть темы.
Это всё шаблоны, которые являются составляющей темы
Например, стрелками я отметил шаблоны подвала (footer.php), шапки (header.php), главной страницы (index.php). И в папке templates можно найти ещё под десяток шаблонов, способных кардинально изменить внешний вид сайта.
Конечно, у каждой темы иерархия шаблонов строится немного по-разному, но запомните, не называйте тему шаблоном, на форумах вордпресеры вас сожрут. Нет, проблему решить помогут, но каждый посчитает нужным сообщить о том, что шаблоны нужно искать для некоторых других CMS.
Во-первых, не качайте премиум-темы из неофициальных источников. Левые пиратские сайты часто встраивают в ворованные материалы всякую вирусню, майнеры, сборщики данных и прочую дрянь. Скачивая пиратку, подвергаете свой сайт, а также его посетителей, нешуточному риску. Не надо так.
Во-вторых, блоговые темы для WordPress не всегда могут быть хорошо заточены под поисковую оптимизацию (SEO). Неопытному человеку такие мелочи заметить трудно, но придётся учиться. Давайте банальный пример.
Пример плохой поисковой оптимизации у блоговой темы для WP
Здесь получается два заголовка h1. И если захотим исправить сей недочёт, то придётся переписывать шаблон, отвечающий за вывод заголовка в шапке. Это не фатальная ошибка, но очень неприятная. И такие встречаются повсеместно.
К примеру, можно купить красивую тему, которая полностью на Ajax. А продвигать её станет очень трудно, ибо поисковые системы до сих пор с Ajax работают с треском.
Так что выбрал для вас качественные темы, с хорошей проработкой по SEO, а также не вызывающих никаких проблем при установке и настройке.
Если решите покопаться самостоятельно, вот несколько моментов, на которые следует обратить внимание при выборе темы. В общем, рассказал в видео
Советы по файлам шаблонов
Здесь приведены несколько советов по созданию файлов шаблонов:
- Отслеживайте открывающие и закрывающие теги
- Файлы шаблона подразумевают использование тегов и ссылок на . Элементы HTML и ссылки на CSS могут «пересекать» файлы шаблона, т.е. начинаться в одном файле и заканчиваться в другом. Например, HTML элементы html и body обычно начинаются в header.php и заканчиваются в footer.php. Большинство тем WordPress используют HTML элементы div, которые также могут охватывать несколько файлов. Например, основной div для контента страницы может начаться в header.php и закончиться либо в index.php, либо в single.php. Отслеживание начала и конца элементов HTML может быть довольно сложным в процессе разработки или изменения тем. Используйте комментарии чтобы отмечать в файлах шаблона, где открываются и закрываются теги большого контейнера, так что вы сможете отслеживать, где какой div, и в какой секции.
- Тестируйте разные файлы шаблона с разными типами страниц
- Если вы сделали изменения в шаблоне комментариев, боковой панели, форме поиска или любом другом файле шаблона, протестируйте их на разных типах страниц (одиночная запись блога, разные типы архивов, страницы).
- Дополнительные комментарии
- Если вы разрабатываете темы для публикации, то учтите, что тот, кто скачает вашу тему, возможно захочет немного модифицировать ее для собственного использования. Так что будет весьма полезным оставлять комментарии в ваших файлах шаблона в тех местах, где вы сделали изменения относительно стандартной логики классических тем. Также неплохо будет добавить комментарий, если вы подключили свою собственную таблицу стилей где-нибудь в header.php.
- Не забывайте закрывать HTML теги
- Таблицы стилей CSS в шаблонах
- Вы можете использовать любые HTML и CSS теги и стили, которые захотите. Однако, мы рекомендуем следовать стандартной структуре тем WordPress (см. Site Architecture 1.5). Это сделает ваши темы более понятными для других пользователей.
single.php и page.php
Как я уже говорил single.php выводит запись, а page.php страницу. В нашем шаблоне эти страницы будут идентичные. Они похожи на другие шаблоны, в них так же подключается хедер и футер, но только без цикла WP:
<?php get_header();?> <?while(have_posts()): the_post();?> <h1 class="my-4 page-title"><?wp_title();?></h1> <img class="img-fluid rounded" src="<?php echo get_the_post_thumbnail_url(null, 'full');?>" alt="<?the_title();?>"> <p><small class="text-muted"><?the_time('j F Y');?> <?php the_tags('');?></small></p> <?the_content();?> <?php comments_template(); ?> <?endwhile;?> <?php get_footer();?>
MH UrbanMag
MH UrbanMag включает в себя настраиваемые макеты для разного стиля сайтов, включая варианты для блогов, интернет-журналов и новостей. Пользователю доступны для изменения все присутствующие виджеты, типографские функции и цветовая схема. Все это можно реализовать бесплатно, установив данный шаблон из списка тем на официальном сайте WordPress.
Что касается самого простого макета, то именно он станет хорошим решением для ведения блога, где каждая история помещается в отдельную статью. Так посетители, войдя на главную страницу, смогут посмотреть все записи, переходя к ним из-за завлекающего названия, описания или установленного логотипа. Дополнительно на панель справа выводятся виджеты уже в зависимости от требований самого автора личного блога. Это могут быть разделения на категории, теги или отдельные страницы, например, с лучшими статьями или биографией автора.
Способ 1: шаблон страницы через файл с произвольным названием (классический способ)
Это самый распространенный способ создать шаблон страницы в WordPress. Для этого нужно создать .php файл, например, tpl_my-page.php в папке темы и в самом начале файла вписать метку, что созданный файл является шаблоном для страниц:
<?php /* Template Name: Мой шаблон страницы */ ?> <!-- Здесь html/php код шаблона -->
Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать «шаблон»:
С версии WordPress 4.7. такие шаблоны страниц можно создать для любого типа записи, а не только для page. Для этого дополните комментарии строкой: , где post, page — это названия типов записей к которым относится шаблон.
/* Template Name: Мой шаблон страницы Template Post Type: post, page, product */
Подробнее читайте в отдельной статье.
Преимущества:
-
Создав один шаблон, мы можем удобно применять его для разных страниц. Например, можно создать шаблон без боковой панели и использовать его на разных страницах.
- Можно получить только записи с указанным шаблоном. Например, можно вывести все страницы с шаблоном «Услуги» (файл servises.php). Иногда это удобно. Название файла шаблона хранится в метаполе , поэтому чтобы вывести страницы с указанным шаблоном нужно создать запрос по метаполю (см. WP_Query).
Недостатки:
После создания файла шаблона в папке темы, нужно зайти в админ-панель и установить шаблон для страницы. При разработке это не всегда удобно. Поэтому если подразумевается использовать шаблон только для одной страницы, используйте второй метод.
Как это работает:
Когда вы заходите в админ-панель на страницу редактирования записи древовидного типа, WordPress просматривает все файлы шаблона на наличие в них строки:
Template Name: ***
Строка может располагаться где угодно и как угодно в файле.
Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок «Атрибуты страницы».
При публикации страницы, в произвольное поле записывается название файла шаблона или , если шаблон не указан:
_wp_page_template = default_wp_page_template = tpl_my-page.php
Далее, когда пользователь посещает страницу, WordPress проверят метаполе , если шаблон установлен, то используется файл шаблона. В противном случае поиск шаблона страницы продолжается по иерархии.
Локализация названия шаблона
Название задается в php комментариях, поэтому нет возможности перевести эту строку обычным способом: через функцию перевода, заключенного в теги <?php … ?>. Однако WP сам пытается перевести эту строку при выводе, используя подгруженные данные перевода. Таким образом, для перевода нам нужно как угодно добавить эту строку в список переводов темы. Сделать это удобнее всего сразу после заголовка — так всем будет понятно зачем нужен такой странный вызов функции переводов __():
/** * Template Name: Мой шаблон страницы * Template Post Type: post, page, product */ __( 'Мой шаблон страницы', 'my-theme' );
— это ID перевода — параметр Text Domain:, который указывается в заголовках темы и при подключении файла перевода, см. load_theme_textdomain().
Разнообразие и ужас сторонних WordPress тем
Для WordPress создано очень много тем. На любой вкус и цвет. И большинство из них имеет ряд недостатков.
Много ненужных классов и стилей
В погоне за универсальностью, в каждый шаблон вносят сотни функций и стилей. Многие названия стилей в темах даже не описываются в файлах стилей. А внедрены в тему, на всякий случай, если кто-то захочет изменить дизайн сайта. Предполагается, что это проще, не надо будет лезть в файлы шаблона и добавлять свои стили.
Другая значительная часть CSS правил, которые всё же прописаны в файле style.css, не используется. Потому что часть из них описывает вывод каких-нибудь сторонних плагинов, которую поддерживает тема, дополнительных менюшек, виджетов и Бог знает чего ещё. Предусмотрено всё что только задумал создатель такой WordPress темы.
Сбросы настроек CSS
Кроме того стили в файле style.css напичканы сбросами настроек, которые должны помочь сайту иметь правильный вид. Ведь куча различных элементов на одном сайте может привести к непредсказуемому результату, если заранее не сделать сброс всех параметров.
Что делает большая их часть мне, например, не всегда понятно. Изучать каждую непонятную строчку порой некогда, а верить, что так и должно быть не мой случай.
Верстки с помощью фреймворков
Стоит ли говорить, что большинство тем верстаются с помощью фреймворков (framework), которые значительно ускоряют процесс вёрстки, но добавляют одновременно столько «хлама», что потом копаться внутри темы без того же самого фреймворка просто невозможно.
Чрезмерно усложнённая структура темы
В результате CSS файл чужой WordPress темы разрастается до неимоверных размеров. А в самих файлах чего только нет.
Когда хочется что-то изменить, приходится рыскать среди большого количества непонятных функций и стилей. Отступ поправить и то сделать трудно. Правишь в одном месте, ничего не происходит, потому что это же свойство зачем-то дублируется и в других местах. Если спустя какое-то время всё-таки удаётся найти и поменять нужное свойство, то это может привести к неожиданным результатам. Где-то и что-то в дизайне «поплывет».
А если хочется отцентрировать что-то, там смешиваются ещё десяток других стилей и обычные правила просто-напросто отказываются работать. Приходится искать на просторах Интернета другие способы центровки и ко всему этому внедрять !important;, который не желателен и в большинстве случае, если правильно верстать совсем не обязателен.
Что такое тема WordPress
Тема — это макет сайта, созданный на движке WordPress. Она определяет общий дизайн страниц, стиль шрифтов, цвета, размещение виджетов. Темы создают профессиональные разработчики и распространяют бесплатно или за деньги.
Но не все темы хороши: одни устарели, другие несовместимы с популярными плагинами, у третьих сложная админка. Проблемы могут проявиться сразу или позже, когда сайт уже будет наполнен контентом. Но тогда изменить выбор будет сложно.
Как сразу выбрать ту, что точно подойдет? Расскажем дальше.
Тема или шаблон?
Часто слова «тема» и «шаблон» используют в одном значении. Но если строго следовать терминологии WordPress, это неверно.
Тема (theme) — это макет целого сайта: как выглядит шапка и подвал, сколько колонок, какой шрифт и т. д. Twenty Nineteen — вот это тема.
Шаблон (template) — это часть темы, макет одной страницы или секции в блоге. Например, Header.php, который определяет вид верхнего блока на всех страницах, — вот это шаблон.
С терминологией разобрались, можно переходить к делу.
HTML шаблон
Bootstrap v4 начальный шаблон
Для его работы понадобятся файлы bootstrap.min.css и bootstrap.min.js, которые мы соответственно добавляем в папки css и js нашей темы. Скачать их можно по кнопке Download source code на той же странице.
Перед тем, как тема будет «разрезана» на шапку и футер вы можете добавить весь исходный код шаблона в файл index.php и увидеть, что тема работает. Путь до папки с темой указывается функцией — это чтобы сразу в теме указать ссылки для скриптов. Должно получится примерно следующее:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> <title>Starter Template for Bootstrap</title> <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/starter-template/"> <!-- Bootstrap core CSS --> <link href="<?=get_template_directory_uri();?>/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="<?=get_template_directory_uri();?>/css/starter-template.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <main role="main" class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </main><!-- /.container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="<?=get_template_directory_uri();?>/js/vendor/jquery-slim.min.js"><\/script>')</script> <script src="<?=get_template_directory_uri();?>/js/vendor/popper.min.js"></script> <script src="<?=get_template_directory_uri();?>/js/bootstrap.min.js"></script> </body> </html>
Если все сделано верно, то на главной странице сайта отобразится тема Bootstrap 4.
Как упростить создание свой WordPress темы
Если верстать сайты на заказ, то вряд ли конечному пользователю захочется копаться во внутренних файлах сайта. Тогда использование всех WordPress фишек в ущерб минимализму, вполне оправданы. Для своих же любимых сайтов можно заморочиться, чтобы сделать всё с «нуля». Тем более что с нуля то и не придётся делать.
Там будут самые необходимые файлы для WordPress темы. Внутри этих файлов будет основная структура и функции: вывод заголовков, навигации, меню и т.д.
Для перфекционистов вроде меня можно потереть всё непонятное и ненужное. Например, из файла functions.php можно удалить такую конструкцию:
function ploshadka_content_width() { $GLOBALS = apply_filters( ‘ploshadka_content_width’, 640 ); } add_action( ‘after_setup_theme’, ‘ploshadka_content_width’, 0 );
Зачем она нужна можете прочитать в интернете, но обычно вносит только сложности.
Ещё удалить всё что непонятно (а значит не нужно). Удалить некоторую структуру из стилей, разбить файлы как удобнее лично тебе. Удалить ненужные файлы вроде rtl.css. Если только кто-то не собирается верстать сайт для тех кто читает справа на лево. И т.д. На конечном этапе получим файлы лишенные всего «хлама».
Затем, если нет своего предпочтения в дизайне, смотрим другие сайты или уже готовые шаблоны в Интернете и верстаем на приготовленную базу что-то понравившееся себе.
На что обращать внимание при выборе темы
Не давайте дизайну шаблона ввести вас в заблуждение: красивые фотографии на демо-версиях, графичные шрифты и плавная анимация могут легко сбить с толку и отвлечь от того, что тема полчаса загружается или не оптимизирована для SEO. Вот простой чек-лист, как проверить тему «на прочность».
Мобильная версия
Самое первое, на что стоит обратить внимание — это наличие у темы WordPress мобильной версии. Не устаем повторять: трафик с мобильных устройств рос, растет и будет расти
Поэтому, если ваша тема не будет оптимизирована для просмотра со смартфонов и планшетов, читатели могут просто уйти, оставив за собой высокий показатель отказов.
В 2020 году встретить тему без адаптации под мобильные устройства сложно, но если вдруг такая попадется — рекомендуем смело вычеркивать ее из списка. Даже в блоги со сложной экспертной тематикой люди заходят с телефонов, поэтому обязательно просмотрите мобильную версию темы и походите по разным страницам — это покажет, насколько грамотно она сверстана.
Как проверить мобильную версию?
Вы можете просто открыть демо-версию шаблона с телефона, но есть еще один способ: проверьте ее через специальный сервис от Google.
Сервис покажет, удобна ли страница для просмотра с мобильных и выдаст отчет
Дизайн
Дизайн — это дело вкуса, поэтому выбирайте то, что понравится вашим пользователям
Чтобы не затруднять чтение, обращайте внимание на минималистичные темы с небольшим количеством декоративных элементов — это поможет читателю сосредоточиться на контенте
Чем проще, тем лучше
И интерфейс
Оценивайте не только внешний вид, но и удобство: легко ли прицелиться в кнопку? Очевидно ли расположение элементов? Насколько просто ориентироваться по сайту? Понятно ли, что происходит по нажатию на какие-либо кнопки?
Чем понятнее и очевиднее интерфейс, тем проще посетителю пользоваться сайтом.
SEO
Для блогов оптимизация для поисковых систем очень важна — скорее всего, читатели будут приходить к вам за ответами на вопросы, которые они обычно ищут в интернете. Поэтому оцените, насколько тема SEO-оптимизирована: чаще всего создатели тем сами охотно об этом рассказывают, но если вы не нашли таких пунктов в презентации, это повод насторожиться.
Проверьте:
- как организованы заголовки и хлебные крошки в теме
- насколько быстро загружается шаблон
- как оформлены страницы рубрик, есть ли в них заголовки и описания
Например, тема Root от WPShop позволяет задавать свои заголовки и описания для рубрик
Конечно, только то, что тема оптимизирована для SEO — не гарантия того, что ваш блог будет выйдет в ТОПы поисковых систем, но чем лучше продуман этот аспект, тем выше вероятность.
Скорость и производительность
Хорошая тема быстро загружается
Это важно не только для поисковых систем, но и для читателей — чем меньше им придется ждать загрузки страницы, тем с большей охотой они будут читать ваш блог.
Как проверить скорость загрузки темы?
Чтобы проверить, насколько быстро будет работать ваш сайт, вы можете проверить демо-версию шаблона с помощью Google PageSpeed Insights. Скопируйте адрес демо-версии, вставьте его в поле ввода на сервисе и нажмите «Анализировать» — PageSpeed Insights выдаст оценку скорости загрузки.
Обновления
Обновления темы часто становятся головной болью для владельцев сайтов — если внести в тему собственные изменения, при обновлении их легко потерять.
На самом деле обновления темы очень важны: они ускоряют загрузку и добавляют новые функции, но главное — закрывают уязвимости, с помощью которых злоумышленники могут получить доступ к вашему блогу. Поэтому при выборе темы проверьте, когда выходило последнее обновление — если это было не больше года-полутора назад, значит, разработчики поддерживают и улучшают тему.
Тема Sky от BeeWise обновлялась примерно полтора года назад — можно уточнить у разработчиков, поддерживают ли они тему
Возможности монетизации
Если вы собираетесь размещать на сайте блоки рекламы AdSense или Яндекс.Директ, обратите внимание на рекламные блоки в теме. Отлично, если такая возможность предусмотрена сразу, потому что доделывать ее на живом сайте потребует дополнительных затрат денег и времени
Фирменный стиль
Это применимо не только к корпоративным блогам: следите за тем, чтобы тема соответствовала вашему фирменному стилю. К такому стилю может относиться как только логотип, так и какие-то элементы графического оформления баннеров, обложек и другого.
Например, если в вашем логотипе используются скругления и мягкие формы, обращайте внимание на темы с похожими формами и не рассматривайте слишком «квадратные» темы — это поможет создать у читателей впечатление целостности