Как сделать тему вордпресс уникальной
Как выбрать тему для сайта на Вордпрессе: инструкция для новичков
Создание сайта кажется непосильной задачей. Это правда сложно для тех, кто не чувствует уверенности в технических вопросах. Но мы предлагаем разделить задачу на понятные шаги и прямо сегодня выбрать тему для сайта на Вордпрессе. Наталья Солодовник написала инструкцию, с помощью которой вы сами подберёте, скачаете и установите шаблон, чтобы потом наполнить его контентом.
Выбор темы (или шаблона) — один из ключевых этапов настройки сайта на Вордпрессе. Именно тема определит не только то, как будет выглядеть ваш веб-ресурс, но и то, каким функционалом он будет обладать.
Что такое тема для Вордпресса и какие темы бывают
Любая тема Вордпресс (wordpress theme) — это набор файлов, которые определяют внешний вид вашего сайта. Именно они используются для оформления и вывода информации на экран пользователя. Чаще всего администратору или владельцу сайта приходится сталкиваться с файлами:
В интернете также прижился термин «шаблон» (template) и чаще всего имеется в виду то же, что и тема. Это файлы, собранные в один архив, который можно сразу загрузить в админ панель Вордпресса, в разделе Внешний вид — Темы.
Вордпресс-темы для создания сайта
К созданию сайта можно подойти двумя способами. Первый — заказать визуальное оформление дизайнеру (дизайн-макет сайта), а затем привлечь программиста для создания авторской темы под этот дизайн и нужные вам задачи. В этом случае разработчик будет по сути создавать набор файлов, про которые написано выше.
Второй вариант — выбрать одну из готовых тем Вордпресса. Их можно разделить на платные и бесплатные. Это хорошая возможность создать сайт быстро, самостоятельно и даже с минимальным бюджетом.
Что нужно знать, чтобы выбрать тему для сайта на Вордпрессе
Что сделать заранее, чтобы правильно и быстро выбрать тему-Вордпресс:
1. Составить структуру контента своего сайта. Расписать список страниц, рубрик, продумать пункты меню — их количество и названия.
2. Нарисовать примерный прототип (схему) главной страницы сайта и других ключевых страниц. Например, страницы «Услуги», «Портфолио», «Блог». Учесть, какие блоки и формы вам нужны на сайте. Ранее мы писали о том, что такое прототип и как его создать.
3. Походить по любимым блогам и популярным сайтам. Из списка элементов оформления, которые вам нравятся, составить список своих «хотелок».
4. Если вы создаёте сайт без дизайнера и пока не имеете фирменного стиля для своего проекта, нужно выбрать цветовую схему оформления, которая нравится вам и подходит к вашей тематике.
Полезные инструменты для выбора цветовой гаммы сайта
Цветовой круг для генерации схем.
Результат подбора цветовой схемы по картинке
После того как вы провели минимальную подготовку, можно идти к разработчику. Если делаете сайт самостоятельно, идите на ресурсы, где можно посмотреть демо-версии тем, а затем скачать или купить понравившиеся.
Основные критерии выбора идеального шаблона
Безопасность вордпресс-темы
Чтобы не столкнуться с вирусами, чужими «вшитыми» в сайт ссылками и прочими неприятностями на самом старте, выбирайте шаблон на wordpress.org, сайте разработчика тем или в крупном магазине шаблонов.
Каталог бесплатных тем на официальном сайте WordPress.org
Перед попаданием в каталог Вордпресса все темы тестируются на соответствие стандартам в области безопасности, кросс-браузерности, соответствие лицензии GPL и так далее.
Адаптивность шаблона для Вордпресс
Убедитесь, что в теме есть мобильная версия для основных устройств — смартфонов и планшетов. Либо используется так называемая «резиновая вёрстка», когда блоки сайта сами меняют ширину под разные размеры окна браузера.
Функциональность темы для сайта
На что обратить внимание при выборе темы? На наличие в теме достаточного количества макетов страниц — с сайдбаром и без него, во всю ширину и без шапки, под разные задачи. Например, для страницы отзывов и портфолио. Посмотрите, какое количество блоков меню, их внешний вид, блоки (виджеты) в боковой колонке, набор элементов типографики (цитаты в тексте, списки, заголовки разных уровней), есть ли слайдер и выводятся ли похожие записи в блоге. Эти параметры в разных темах могут отличаться или вовсе отсутствовать.
Гибкие настройки темы для сайта
Удобно, когда есть возможность менять цвет, шрифт и другие элементы оформления на сайте. Когда можно включать и выключать отдельные элементы страниц прямо из админ-панели сайта, не редактируя код шаблона. Проверьте, позволяет ли ваша тема это делать.
Демо-версии тем для Вордпресса: на что смотреть
Помимо того, что тема должна вам нравиться чисто внешне, обратите также внимание на следующие моменты.
Иллюстрации и картинки для сайта
Помните, что как бы хороша ни была тема в демо, в жизни все картинки на сайте будут вашими.
Подумайте, насколько гармонично по стилю и цветам ваши личные фото впишутся в «оправу» — основные блоки шаблона? Есть ли у вас достаточное количество изображений нужного формата, чтобы сайт сыграл так, как в демо-версии?
Старайтесь выбирать светлые темы в минималистичном стиле со шрифтами без засечек и завитушек, с базовыми цветами в оформлении. Такой шаблон универсально будет сочетаться с любым наполнением. Основной акцент — на выбор кириллических шрифтов и удобство чтения текста с экрана любого размера. Однозначно «нет» тёмному фону и белому шрифту на нём. Для большинства проектов этот выбор будет неудачным.
Шрифты для сайта
Шрифты часто являются изюминкой темы (особенно необычный логотип — название сайта), но не все шрифты поддерживают кириллицу.
Протестируйте шрифт в демо шаблоне. Если он не на русском, попробуйте выбрать «перевести страницу» в браузере. Если поддержки кириллицы нет (вы увидите не исходный шрифт, а что-то простое), то подумайте, готовы ли вы потратить усилия по поиску и установке подходящего по стилю шрифта на замену.
Возможности шаблона для сайта на Вордпрессе
Оцените возможности шаблона. Чтобы запустить демоверсию и посмотреть работу шаблона, найдите в его описании кнопку «Live preview» или «Demo».
Меню с вариантами шаблона главной страницы (Home) на демо-сайте
Просмотр мобильных версий страницы на демо-сайте
Доработка шаблона для сайта
Сравните возможности темы в демоверсии со списком ваших хотелок, прототипом и цветовыми предпочтениями.
Если элементов, которые бы вам хотелось добавить или заменить много, то лучше искать другой шаблон. Потому что к доработкам дизайна и шаблона придётся привлечь разработчиков.
Шаблон стоит брать, если в нём нужно только перекрасить цвета, добавить свои формы подписки и обратной связи или дополнительные элементы типа слайдера, галереи. Это решается при помощи плагинов и не требует существенных правок кода.
Платные темы
Не отказывайтесь от платных тем, только потому, что на них нужно потрать деньги.
Очень часто вложения в удачный и максимально близкий к вашему идеалу шаблон гораздо ниже стоимости «допиливания под себя» при помощи студии или фрилансеров-разработчиков. Можно сразу получить нестандартный и гармоничный дизайн под свои задачи, просто вдумчиво пересмотрев платные шаблоны.
Такие платные темы обычно регулярно обновляются и поддерживаются разработчиками. Значит, при очередном обновлении Вордпресса вы не столкнётесь с какой-либо глобальной проблемой или будете знать, куда обращаться за помощью.
Каталог шаблонов (тем) для Вордпресса
В каталоге Вордпресса множество хороших тем. Часто тут расположены лайт-версии (Lite), которые можно скачать и протестировать, а на странице разработчика купить платную версию с расширенными функциями. Платные версии от бесплатных часто отличаются количеством блоков на главной странице, набором готовых макетов страниц или слайдов в слайдере. А также гибкостью настроек и возможностью менять цвета, шрифты и редактировать содержимое подвала.
Где искать платные и бесплатные варианты тем
Где взять бесплатный шаблон для Вордпресса
На этих сайтах есть бесплатные (free) версии и платные шаблоны.
Где искать платные шаблоны Вордпресса
А вот список крупных магазинов, где собраны темы от разных авторов:
Как выбрать тему для сайта и не пожалеть потом?
Обязательно читайте описание платного шаблона (Theme Features). Даже гугл-переводчика будет достаточно, чтобы узнать, входит ли в стоимость демо-контент (с ним удобно быстро настроить шаблон) и техподдержка от разработчика (обычно даётся на год, часто на английском, но даже при этом — полезная опция). Кроме того, пользуйтесь фильтрами и тегами — они помогут быстро отобрать шаблоны под нужную нишу, интернет-магазин на Вордпресс, темы совместимые с конструкторами страниц-лендингов или с самим конструктором внутри.
Что ещё нужно помнить при работе с готовыми темами Вордпресса
Ещё один вариант, который в этой статье не рассмотрен, — тема Вордпресс или готовый сайт из шаблонов плагина-конструктора, об этом мы расскажем в следующих публикациях. Если вы будете выбирать тему оформления под свой проект, его задачи и контент, то результат вас порадует. А вот идти от обратного и выбрать красивый шаблон просто на свой вкус, а после думать, чем же его наполнить, — не очень хорошая идея.
Узнайте больше о плюсах и минусах самостоятельной настройки темы для сайта. Читайте больше полезных материалов в Клубе «Маркетинга с азов» и Телеграм-канале. И удачного выбора и красивых сайтов!
Наталья Солодовник, интернет-маркетолог, разработчик сайтов и лендингов на WordPress, технический продюсер онлайн-проектов.
Темы для WordPress — из каких шаблонов они состоят и как все это работает
Сегодня хочу поговорить про темы оформления для блога на WordPress (читайте о том, как создать свой блог). Зная как принципиально устроена любая тема, вам будет легче вносить в нее необходимые изменения или дополнения. В принципе, ничего сложного в этом нет, но по началу все равно может возникнуть ряд непонятностей и вопросов, поэтому я постараюсь рассказать все максимально подробно и доступно.
Скачать тему для Вордпресс можно бесплатно, например, отсюда. После того, как вы скачали шаблон, ее нужно распаковать. Затем необходимо будет получить доступ к вашему сайту по протоколу FTP и скопировать полученную после разархивирования папку с темой оформления Вордпресс в директорию:
Далее вы заходите в админку и выбираете из левого меню пункт «Дизайн». В открывшемся меню выберите пункт «Тема».
Как устроена и из каких шаблонов состоит тема в WordPress?
Вроде все просто и понятно. Но вряд ли вы найдете такую тему для Вордпресс, которая отвечала бы всем вашим требованиям на сто процентов. Наверняка, вам захочется что-нибудь поменять, убрать или добавить. Но как это сделать? Не особо сложно, но для этого необходимо знать и понимать, как она устроена, из каких файлов (шаблонов) состоит и за что конкретно каждый из этих файлов отвечает.
Тема всегда включает в себя определенный набор шаблонов, которые отвечают за оформление отдельных участков любой вебстраницы вашего блога. Получается, что все вебстраницы собираются из отдельных файликов, подобно конструктору.
Некоторые из этих файлов, например, HEADER и FOOTER, используются на всех страницах блога, другие используются только в определенных случаях. Схематично структуру шаблонов темы в WordPress можно изобразить примерно так:
HEADER отвечает за отображение шапки всех страниц, т.е. верхней части. В нем же формируются мета-теги, которые включаются в шапку HTML кода всех вебстраниц — заголовок страницы TITLE, задается кодировка русского языка, указывается путь к файлу таблицы стилей, который должен подключаться для задания оформления данной вебстраницы и т.д.
Как я уже писал в статье Оптимизируем темы Вордпресс блога, вы можете заменить в HEADER участки кода с ненужными обращениями к базе данных на статичный код HTML для того, чтобы снять лишнюю нагрузку на сервер при формировании вебстраниц.
Шапка, так же формируемая в HEADER, остается неизменной для всех вебстраниц, но содержимое области контента блога формируется разными шаблонами темы, в зависимости от того, какое именно содержимое выводится. Рассмотрим это подробнее:
За формирование футера (footer) в WordPress (подвала, нижней части вебстраницы) отвечает файл FOOTER. Обычно в нем выводится название блога со словами, что все права защищены (называется это копирайт и тут написано как защищать свои авторские права с помощью него). Так же в FOOTER можно добавить код счетчиков посещений (например, от Ливинтернета), если вы их будете использовать на своем ресурсе.
За вывод сайдбара (sidebar — боковая панель WP блога) справа или слева от центральной части страниц отвечает файл SIDEBAR. В каждой конкретной теме кроме SIDEBAR могут использоваться еще несколько шаблонов сайдбаров. В моем случае, сначала боковая панель формируется из кода SIDEBAR, но потом из него осуществляется обращение к SIDEBAR1 и SIDEBAR2, которые формируют его двухколоночное продолжение (сейчас они отключены).
Зная устройство используемой вами темы, вы можете легко понять, в какой именно файл нужно будет внести изменения для получения желаемого эффекта. Причем, возможны варианты использования разных шаблонов в зависимости от того, какие именно из них есть в наличии. По началу это кажется запутанным, но прочитав окончание статьи вы поймете, что все здесь довольно логично и продуманно.
Пример подключения шаблонов из состава темы
Проще всего рассказать о порядке использования шаблонов для отображения той или иной страницы блога на каком-то примере. Допустим, что посетитель открывает вебстраницу со списком статей какой-либо категории (рубрики). Какой файл из папки текущей темы должен при этом запуститься?
На основании того, что было написано выше, вы можете сделать вывод, что для отображения содержимого этой вебстраницы движок WordPress должен использоваться ARCHIVE. При этом вы будете правы лишь отчасти. Да, действительно, этот шаблон будет использоваться для отображении категорий, но только при выполнении ряда условий.
Давайте рассмотрим действия Вордпресса при переходе посетителя по ссылке, ведущей в категорию. Сначала в папке текущей темы:
этот движок будет искать файл, который отвечает за вывод именно этой категории. А т.к. они идентифицирует по ID, то и искать он будет CATEGORY-n. Здесь N — номер ID данной категории (Как узнать ID рубрики или страницы в WordPress). Но такой файл в папке вашей темы может появится только в том случае, если вы сами специально его создали для данной категории.
Но если вы этого не делали, то Вордпресс, не найдя такой файл (например, CATEGORY-12), будет искать уже общий для всех категорий (вне зависимости от их ID) CATEGORY. Если и такого файла тоже найдено не будет, то он уже будет искать общий шаблон для вывода всех архивов под названием ARCHIVE.
ARCHIVE он скорее всего найдет в папке с вашей текущей темой, но если случится страшное — даже его не будет — WordPress будет вынужден использовать основной файлик под названием INDEX.
Порядок обращения Вордпресса к различным шаблонам текущей темы
Рассмотрим все возможные варианты вебстраниц, которые обычно используются и последовательность использования файлов имеющихся в папке с темой:
файл HOME, а не найдя его обратится к INDEX:
Для отображения статичной страницы можно будет задать конкретный шаблон прямо из админки WordPress. Для этого при создании или редактировании поста вы должны выбрать из выпадающего списка «Шаблон» нужный:
Эти файлы необходимо создать заранее и добавить в папку с вашей темой. В его начале обязательно нужно вставить название таким вот образом:
Если вы не выберете из этого списка что-либо, то WordPress будет искать файл PAGE, а не найдя его будет использовать все тот же INDEX:
Создание разных шаблонов для страниц и WordPress записей
Подобная задача может возникнуть, когда вам в пределах одного сайта нужно иметь разные шаблоны страниц в плане оформления. Самая простая ситуация, что приходит на ум: скрытие рекламы/баннеров в избранных статьях; либо вдруг захотите удалить в некоторых публикациях списки похожих заметок или, допустим, какие-то элементы сайдбара. Сегодня научу вас это делать.
К данному вопросу возвращаюсь уже не первый раз, захотел собрать все нюансы и знания в одном месте. К счастью, современные методы по сравнению с прошлыми модификациями, максимально просты. Вам даже не надо ставить дополнительные модули, как раньше. Разработчики WordPress действительно упрощают и улучшают систему.
Итак, сегодня рассмотрим:
Разные шаблоны страниц / записей в WordPress
Теоретически все, что вам нужно в этом случае — размещение некого кода в самом верху соответствующего файла:
В первой строке указывается название для WP админки, во второй определяются типы записей, в которых можно этот макет применять (в примере: post, page и product).
То есть по факту, вам достаточно сделать один новый шаблон страницы WordPress, что будет задавать правила отображения информации на сайте для всех заметок с контентом. Однако тут все зависит от того, отличаются ли коды в single.php и page.php — если да, то придется выполнить модификацию каждого из них.
Общий алгоритм действий:
1. С помощью FTP клиента FileZilla заходите на свой хостинг в директорию с названием установленной темы wp-content/themes/имя_темы (или дочерней).
2. Копируете файл, используемый для отображения постов/страниц (single.php и page.php) на локальный компьютер.
3. Переименовываем, например, в page-new.php или page-noads.php и т.п. (название роли не играет).
4. Дальше приступаем к его редактированию с помощью Sublime Text или Notepad++. В самом верху добавляете упомянутый ранее код (заменяя существующий, если он там есть). Получится вот так:
5. Загружаете новый вариант обратно на хостинг в ту же директорию.
Выбор шаблона страницы в WordPress
Теперь переходим в админку системы, открываем любую публикацию для редактирования и ищем там следующий блок:
Отображаемое здесь название задается в строке Template Name.
Кстати, удобно, что доступно массовое редактирование постов, то есть изменить шаблон страниц можно сразу у нескольких объектов. Переходите в пункт «Все записи», где отмечаете парочку статей и выбираете в «Действиях» значение «Изменить».
После выбора не забудьте кликнуть «Обновить».
Разный сайдбар, хедер, футер и не только
Внимательно посмотрев на установленную тему, увидите, что для вывода базовых элементов там применяются стандартные функции: get_sidebar, get_header, get_footer. Если вы модифицировали свой макет, но оставили их там, то на сайте будет отображаться такое же содержимое, что и в основном варианте.
Разберем самую простую ситуацию — у нас получился новый исправленный page.php, но в сайдбаре также требуется внести некоторые коррективы. В таком случае вместо get_sidebar я использую конструкцию:
Разумеется, вам нужно создать соответствующий файл sidebar-category-noads.php. Хотя, теоретически, можно сразу в новом макете писать код без include, но так структура становится менее наглядной.
Понятно, что фишка применима не только к этим трем блокам на сайте, а и любым другим — внимательно изучайте исходники, которые используете в работе.
Отдельные шаблоны записей по категориям
Тут, по сути, имеется два способа. Я лично предпочитаю тот, что попроще — открываете единичный пост single.php в редакторе, и размещаете код:
Условный оператор in_category проверяет какому разделу принадлежит публикация: если с то грузится single-category5.php, в противном случае — single-forall.php. Конечно, эти два файла следует добавить на FTP заранее (можно опять же скопировать из исходного и слегка подправить) + названия допускаются любые.
Второй вариант рассмотрен тут. Вам нужно разместить следующий код в functions.php:
После этого в директории темы создаете новую папку «single» по типу /wp-content/themes/ваша_тема/single/ куда загружаете файлы, название которых имеет следующий формат single-cat-
Дополнительные нюансы
Напоследок 2 небольших замечания. Иногда бывает, что в премиальной теме в админке нет выбора макета для постов (post), а вместо них разработчики внедрили форматы. В таком случае можно использовать для альтернативного вывода инфы один из них.
Метод, конечно, не самый грамотный, но работает. Не забудьте внести правки в соответствующий файл.
Вторая фишка — когда нужно скрыть/показывать виджет в зависимости от выбранного варианта макета. В таком случае на помощь приходит плагин Widget Logic и условные операторы is_page_template либо has_post_format.
Итого. Повторюсь, если требуется создать разные шаблоны страницам и постам в Вордпресс, но при этом сами page.php и single.php отличаются, то вы для каждого из них делаете свою «копию». Когда же их структура одинакова, новые возможности системы позволяют сделать всего один макет, где в описании Template Post Type просто указываете типы объектов, с которыми он будет работать.
Если есть вопросы по основной части заметки, и по доп.нюансам, пишите ниже, — постараюсь ответить.