Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Анатомия WordPress. Кастомизация темы в консоли и по ФТП

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

Анатомия WordPress. Кастомизация темы в консоли и по ФТП
Содержание статьи

Первые шаги в настройке WordPress

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

Большинство хостинг-провайдеров оказывают помощь по установке WordPress по упрощенной схеме. Обычно для этого требуется нажать на 2-3 кнопки и блог готов.

Установка плагинов

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

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

Выбор темы

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

В базовую версию WordPress входят несколько тем, разработанных одноименной командой:

  • Twenty Thirteen (2013)
  • Twenty Fourteen (2014)
  • Twenty Fifteen (2015)

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

Чтобы выделиться из толпы, нужно выбрать и установить нестандартную тему. Это можно сделать прямо из админки, зайдя в раздел «Темы» и кликнув по ссылке «Добавить новую». После этого вы увидите перечень доступных тем, отсортированных по популярности. Лучше изменить стандартную сортировку и посмотреть темы не на первых страницах, а покопаться поглубже, чтобы минимизировать вероятность того, что ваш сайт будет выглядеть так же, как 10 других.

Когда тема выбрана, полдела сделано. Теперь осталось кастомизировать ее под себя. Во-первых, обязательно изучите все встроенные опции, идущие в комплекте с темой. Для этого нужно перейти в раздел «Внешний вид», «Theme Options». Здесь вы увидите массу возможностей и настроек. Нужно не пожалеть полчаса и хорошенько разобраться с каждой настройкой, обязательно все попробовав. В вашей памяти должны отложиться все доступные настройки, тогда вы будете понимать, каким потенциалом на самом деле обладает ваш сайт.

Нужно разобраться так хорошо, чтобы в момент, когда вам понадобится вставить блок контекстной рекламы в сайдбар, между облаком тегов и формой поиска, вы сделали это в 2-3 клика, не прибегая к помощи ФТП и вообще не открывая файлы шаблона. Можно ведь добавить текстовый виджет, перетащив его в необходимую область и вставить в него код контекстного блока. Текстовый виджет поддерживает HTML и JS, так что все будет прекрасно работать и вы сможете легко управлять этим блоком в режиме драг энд дроп.

Кастомизация темы WordPress

Сколько бы настроек внешнего вида не было вынесено в административную панель, для более детальной кастомизации, вам обязательно придется залезать в файлы шаблона по ФТП. А сейчас мы с вами рассмотрим основные файлы темы, которые довольно часто приходится редактировать вручную для более детальной и глубокой кастомизации.

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

Иногда бывает удобно взять за основу какую-то тему и дорабатывать ее самостоятельно, а иногда проще взять пустую (бланковую тему) и постепенно наращивать ее функционал до необходимого уровня. Такой вариант довольно сложен, но скорость работы сайта в таком случае будет максимальной, потому что его движок будет состоять только из необходимых модулей. Да, в интернете существуют так называемые пустые темы для WordPress, в которых вообще ничего нет — ни стилей, ни графических элементов, а разметка базовых страниц содержит минимальное необходимое количество элементов.

Файлы темы WordPress, которые часто приходится менять

Итак, представим, что вы сделали копию темы, взятой за основу, активировали ее и удалили все лишние из директории /wp-content/themes/. Теперь давайте рассмотрим файлы, которые приходится менять довольно часто – содержимое директории /wp-content/themes/название-вашей-темы/.

Но прежде всего отключим обновление темы, добавив этот код в файл functions.php вашей активной темы.

remove_action('load-update-core.php','wp_update_themes');
add_filter('pre_site_transient_update_themes',create_function('$a', "return null;"));
wp_clear_scheduled_hook('wp_update_themes');

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

Теперь идем по порядку по файлам сверху вниз:

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

Директория docs — документация.

Директория functions – необходимые общие функции.

Директория images – изображения, которые используются для оформления темы (не путайте с теми, которые вы загружаете к статьям, они находятся в /wp-content/uploads/).

Директория js содержит все необходимые скрипты.

Директория languages нужна для локализации и трогать там тоже ничего не нужно, настройки языка вы можете изменить в системе администрирования в разделе «Настройки», «Общие». Другое дело, когда установленная тема или плагин имеет корявый перевод, тогда придется работать с файлами локализации. Для этого используются специальные приложения.

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

Важной деталью является написание комментария в начале файла с произвольным именем, который должен располагаться в директории page-templates и иметь расширение PHP.

/*
Template Name: Текстовая страница
*/

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

Файл 404.php – шаблон 404 ошибки.

Файл archive.php – шаблон вывода списка записей (заголовки и анонсы).

Файл comments.php – шаблон комментариев. Кстати, можно полностью его очистить и вставить код виджета комментариев стороннего разработчика – Вконтакте или Disqus, на ваше усмотрение.

Файл footer.php – подвал сайта.

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

Файл header.php — шапка сайта.

Файл index.php – главная страница вашего сайта.

Файл page.php – шаблон текстовых страниц (не путать с записями).

Файл screenshot.png – скриншот вашей темы, размером 880 х 660 пикселей. Этот скриншот будет отображаться в интерфейсе выбора темы в разделе «Внешний вид», «Темы».

Файл search.php – шаблон результатов поиска (список записей).

Файл searchform.php – форма поиска.

Файл sidebar.php – обычно левая колонка шаблона.

Файл single.php – шаблон одиночной записи (не путать с текстовыми страницами).

Файл style.css – стили вашего шаблона. Стоит добавить, что в самом начале этого файла можно указывать комментарии, которые будут интерпретированы системой и выведены в интерфейсе.

/*
Theme Name: Makeasite
Author: Alex Boyko
Author URI: http://www.alexboyko.ru/
Description: Custom theme for Makeasite's blog
Version: 1.0.0
Text Domain: makeasite
*/

Далее идут файлы стандартных шаблонов template-full-width.php, template-landing-page.php и т. д. Здесь все зависит от вашей темы и названия могут отличаться.

Почти каждый файл шаблона той или иной служебной страницы имеет схожую структуру — в самом начале файла подключается header.php при помощи функции get_header(), затем следуют элементы разметки текущей страницы, а завершается дело вызовом сайдбара и подвала при помощи get_sidebar() и get_footer() соответственно.

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





Предыдущая статья:
Google определение — возможность попасть в ТОП-1

Читайте также:
Как заработать в интернете. Основные виды заработка

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»