Настройка WordPress: Полное руководство. Как установить тему wordpress Как настроить тему вордпресс

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

WordPress темы, что это от куда их брать

Шаблон для вашего сайта на WordPress можно получить несколькими способами:

  • выбрать из общедоступных тем в каталоге wordpress.org;
  • купить премиум тему у разработчиков и распространителей;
  • заказать собственную тему у программистов;
  • создать шаблон самостоятельно.

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

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

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

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

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

Как выбрать и как установить тему WordPress

К статье прилагается видео урок по установке и настройке темы WordPress.

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

Откроются доступные вам темы которые уже установлены. Что бы выбрать, а затем скачать и установить свеженький дизайнерский шаблон нужно перейти по ссылке сверху «Добавить новую».

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

Вам предлагают выбрать нужную вам тему по внешнему виду или подобрать параметры поиска самостоятельно, что вы и можете сделать перейдя во вкладку «Фильтр характеристик».

По предложенным характеристикам темы WordPress можно сортировать по цветам, разметке страниц и функциям предоставленных в темах.

Темы можно просматривать онлайн и установить к себе в «движок». После установки опять переходим во вкладку «Темы» и найдя скачанную ранее нажимаем активировать.

После выполнения этого действия выбранная вами тема будет внедрена в ваш сайт и будет отображаться на всех страницах.

Настройка темы WordPress

Перейдя во вкладку меню «Внешний вид»/ «Настроить» нам откроется наш сайт и с левой стороны от него настройки темы, которые зависят от самой темы и ее функционал может отличаться. Здесь можно по предложенным параметрам, которые зависят от самого шаблона, настроить некоторое отображение в «реальном времени»:

  • описание;
  • настроить название сайта;
  • шрифты;
  • ширину экрана;
  • корректировать разметку страниц, её цвет;
  • навигацию и т.д.

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

Однако такой подход имеет существенный недостаток. При следующем обновлении темы все настройки часто просто «слетают», так как обновление темы перезаписывает файлы таблицы стилей по новому.

В WordPress существует относительно простой механизм, позволяющий избежать этого недостатка — дочерные темы (Child Theme)

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

Почему надо использовать дочерную тему?

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

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

Как создать дочерную тему Вордпресс

Способ 1. С подключением стилей через правило @import

Для создания дочерной темы достаточно создать файл стилей style.css и подключить к нему стили родительской темы с помощью правила @import.
В качестве примера, я создам дочерную тему для темы Twenty Twelve, входящей в «базовый комплект поставки» WordPress. Перво-наперво, у себя на компьютере я создаю новую папку для дочерной темы. Назову ее: / twentytwelve-child/.
В этой папке я создаю файл с именем style.css и заполняю файл информацией, как показано ниже:

/* * Theme Name: Twenty Twelve Child * Template: twentytwelve Description: Моя дочерная тема для Twentytwelve Author: Александр Коваль Author URI: https://сайт */ @import url("../twentytwelve/style.css"); /* ниже устанавливайте свои настройки элементов темы*/

Строки Theme Name (Имя темы) и Template (шаблон родительской темы) — обязательные, строки Description (Описание), Author (Автор), Author URI (сайт автора) необязательные, и по усмотрению создателя быть им в теме или нет.
Важной частью этого файла являются строка: @import url("../twentytwelve/style.css"); Эта строка идентифицирует родительскую тему и импортирует CSS из нее. Когда ты будешь создавать «дочку» — то должен убедиться, что путь к файлу CSS твоей родительской темы является правильным, и что параметр «Template:» правильно определяет имя твоей родительской темы. Если ты используешь другую тему - настрой соответствующие названия для другой темы.

Обрати внимание — все названия должны быть чувствительны к регистру: название с большой буквы и название с маленькой - это разные названия!

Так как папка моей материнской темы называется «twentytwelve», и она с маленькой буквы, следовательно @import URL учитывает этот фактор.

Способ 2. С подключением стилей кодом в function.php

Во избежания лишних обращений к базе данных, что приводит к увеличение времени отображения страниц, Codex WordPress не рекомндует использовать правило @import для подключения стилей родительской темы

В этом способе для дочерной темы создаеться два файла: в дополнение к style.css в папке дочерной темы нужно создать файл function.php и вставить туда следующий код:

В этом способе запись @import url(‘../twentytwelve/style.css’); в файле style.css дочерной темы совершенно не нужна и файл style.css будет иметь следующий вид:

/* * Theme Name: Twenty Twelve Child * Template: twentytwelve Description: Моя дочерная тема для Twentytwelve Author: Александр Коваль Author URI: https://сайт*/ /* ниже устанавливайте свои настройки элементов темы*/

Как активировать дочерную тему

После того, как я создал папку дочерной темы и файл style.css в ней, я могу загрузить на сервер и активировать в WordPress вновь созданную дочерную тему. Загрузка и активация дочерней темы ничем не отличается от загрузки и активация обычный темы. Загрузить ее можно через страницу «Внешний Вид» -> «Темы» –> «Добавивть тему» в админпанели WordPress.

Обрати внимание, что перед тем, как загрузить дочерную тему, необходимо сначала создать ZIP-архив ее папки. Это можно сделать с помощью практически любого архиватора.

Да и еще, при активации дочерной темы также убедись, что у тебя в папке тем WordPress загружена родительская тема (в моем примере это тема «Twenty Twelve»).

Модифицикация CSS темы

Теперь я создал дочерную тему для Twenty Twelve и загрузил ее в WordPress. Так как в дочерной теме я импортирую CSS родительской, то при активации дочерная тема будет выглядеть так же, как и родительская. Для настройки своей темы я могу добавить любые изменения в файл CSS дочерной темы ниже строки @import... В этом случае вся новая информация CSS из дочерной темы добавляется после загрузки CSS родительской темы, и потому «дочерная» CSS в выдаче находится ниже CSS из родительской темы, а это значит, что все новые стили CSS будет перезаписывать исходные.
Например, предположим, что в моем примере я хочу изменить заголовок сайта. Сейчас шрифт «жирный» и серый, а я хочу сделать его тоньше и красным. Я могу добавить соответствующую CSS к дочерной теме в файле style.css следующим образом:

/*
* Theme Name: Twenty Twelve Child * Template: twentytwelve Description: Моя дочерная тема для Twentytwelve Author: Александр Коваль Author URI: https://сайт */ @import url("../twentytwelve/style.css");

/* ниже устанавливайте свои настройки элементов темы*/

Site-header h1 a {color: #FF0000; font-weight: 300;}

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

Заходим в административную панель сайта. Переходим в раздел меню “Внешний вид/Темы”. Жмём на кнопку добавить новую.

В поиске набираем название искомой темы, в нашем случае это «Aldehyde». Кликаем на кнопку “установить”, а затем “активировать”. После этого новая тема заработает. Теперь нам нужно настроить её под себя.

Настройка темы на примере шаблона «Aldehyde».

Для того чтобы приступить к настройке темы или шаблона необходимо перейти в меню к пункту “Внешний вид” и кликнуть по кнопке «Настроить».

В разделе Header settings (Настройки шапки):

  • в подпункте “title, tagline & logo”необходимо добавить название, логотип и иконку сайта.
  • в подпункте “social icons” устанавливаем социальные иконки. Здесь необходимо указать информацию в виде ссылок на соц. сети владельца сайта.
  • далее идёт подпункт “изображение заголовка”. Здесь меняется изображение фона шапки.

Во втором разделе Design and layout (Дизайн и оформление) можно выполнить настройку дизайна и макета сайта. В этом разделе можно установить желаемое отображение контента в блоге (одна или несколько колонок). Помимо отображения контента раздел позволяет активировать или отключить на некоторых страницах или даже на всем сайте отображение боковых колонок. Еще в этом разделе можно применять различные таблицы стилей и устанавливать информацию в подвале сайта.

Раздел Design and layout содержит следующие подпункты:

  • Blog layout – оформление ленты блога
  • Sidebar layout – включение и выключение сайдбара (боковой колонки)
  • Custom CSS – правка CSS стилей шаблона для продвинутых пользователей.
  • Custom Footer Text – Добавление текста в подвал сайта.
  • Theme Skins – выбор цветовой схемы шаблона.
  • Цвета. Раздел позволяет выбрать цвет и фон имени и описания ресурса.
  • Веб-шрифты Google. Раздел поможет выбрать различные шрифты от компании Google.
  • Фоновое изображение. Тут можно закачать необходимое фото или картинку для фона.

В следующем разделе именуемым Main Slider (Основной слайдер) можно выбрать подходящие для него настройки. Но в первоначальной стадии он не является нужным, поэтому не рекомендуется пока обращать на него особое внимание. К недостаткам основного слайдера можно отнести высокую загруженность ресурса. Более того этот компонент можно по праву называть противником мобильных версий сайтов.

Затем идёт раздел Custom showcase (Пользовательская витрина). Здесь вы можете красиво оформить 4 блока с ссылками на важные страницы вашего сайта.

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

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

Настройка отображения и вида меню.

Для того чтобы практично настроить отображение меню ресурса, которое можно найти в категории «Внешний Вид» следует прибегнуть к следующей инструкции.

  1. Необходимо дать меню имя и кликнуть по кнопке «Создать».
  2. Добавить туда самые необходимые страницы верхней степени.
  3. В настройках такой страницы использовать текст ссылки для последующего его отображения.
  4. Необходимо поставить или убрать галочку в пункте автоматического добавления страниц верхней степени.
  5. Выбрать место для отображения меню на сайте. Данная тема поддерживает два меню в шапке.

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

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

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

Чтобы попасть в админку блога, нужно зайти по адресу site.ru/wp-admin/. Вместо site.ru подставьте название своего домена.

1 Главная

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

2. Обновления

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

Не забывайте обновляться, если Вас просят об этом. Это защитит Вас от попыток взлома злоумышленниками.

3. Записи. Все записи

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

Наведите курсор мышки на статью и появится подменю с помощью которого можно редактировать, перейти или удалить статью.

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

3.1. Добавить новую

Прежде чем начать публиковать статьи в блог, нужно сделать несколько очень важных настроек. Сделайте их в пункте 8.1 и 11.3. После того, как Вы настроите постоянные ссылки или как их еще называют (ЧПУ), можете приступать к публикации статей.

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

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

Если Вы впервые сталкиваетесь с таким редактором, то посмотрите видео-уроки на YouTube о том, как добавить статью на блог WordPress. После того, как статья добавлена и отформатирована, выберите или создайте для нее рубрику. Одна статья в одну рубрику, запомните это!

Загрузите миниатюру, это небольшая картинка к Вашей статье. Такие картинки поддерживают большинство тем. После того, как все готово нажмите на “Опубликовать”. Теперь перейдите на главную страницу своего блога и посмотрите, как выглядит Ваша запись.

Работа с картинками

При добавлении фотографий старайтесь всегда прописывать атрибут “Alt”. Если Вы используете свои фотографии, то это позволит Вам из раздела “картинки”.

Достаточно 2-3 слов о том, что изображено на самой картинке. Если не знаете что писать, лучше ничего не пишите.

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

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

Следите за тем, чтобы все Ваши фотографии перед загрузкой на блог имели название латинскими буквами например, moy-dom.jpg.

3.2. Рубрики

Это меню предназначено для создания рубрик. Например, у Вас блог по кулинарным рецептам. Рубрики могут быть такие:

  • Салаты
  • Закуски
  • Напитки

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

У рубрик могут быть подрубрики. Например в “Салаты” могут входить такие подрубрики: “Салаты с курицей”, “Простые салаты”, “Рецепты салатов на зиму” итд. Подрубрики можно создать в меню “Родительская”.

Напишите 2-3 предложения описывающую вашу рубрику. Изложите самую суть. Обязательно сделайте его уникальным. Это значит, что Вы должны сами придумать это описание, а не скопировать его. Как только все поля будут заполнены, можно нажать на кнопку “Добавить новую рубрику”.

3.3. Метки

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

4. Медиафайлы

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

5. Страницы

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

Сейчас у Вас есть тестовая страница. Посмотрите ее, попробуйте отредактировать и затем удалите.

В этом разделе Вы увидите все созданные страницы. Если нужно создать новую, то просто перейдите в меню “Добавить новую” и воспользуйтесь редактором, как в меню 3.1.

6. Комментарии

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

7. Внешний вид. Темы

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

Я же рекомендую ставить темы из официального магазина WordPress. Во-первых, они бесплатные, а во-вторых на них нет вредоносного кода или вируса. Чтобы установить новый шаблон, достаточно нажать на “Добавить новую тему”.

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

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

У бесплатных шаблонов есть и минусы. Они плохо оптимизированы под поисковые системы.

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

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

Также в этом разделе Вы всегда можете сменить пароль и email.

10. Инструменты

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

11. Настройки. Общие

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

Напишите название своего сайта. Описание должно быть короткое и понятное. Оно должно содержать всю суть Вашей ниши. Краткое описание можно пропустить. Если есть что написать, то заполните. Можно написать какой-нибудь слоган.

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

Если Вы регистрировали домен и хостинг по моему , то у Вас должен быть сертификат защищенного протокола https. Значит — настройки ставьте, как на картинке. Выберите формат даты и времени тот, который Вам нужен. Меню “написание” пропускаем.

11.1. Чтение

11.2. Обсуждение

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

Например, если добавить слова: www, http://, скачать, бесплатно, то такие комментарии не пройдут автоматическую модерацию. Настройки медиафайлов можно смело пропустить.

11.3. Постоянные ссылки

Одна из самых важных настроек WordPress находится именно здесь. Это настройка постоянных ссылок. Поставьте галочку на “Произвольно” и вставьте туда вот такой шаблон:

/%category%/%postname%.html

Яндекс метрика

Чтобы узнать сколько человек посещают блог, на него нужно установить специальный счетчик. Этот счетчик будет показывать подробную информацию о пользователе. Рекомендую установить Яндекс Метрику .

Если у Вас еще нет почты от Яндекса, то зарегистрируйте ее прямо сейчас, это займет несколько минут.

После того как Вы попали внутрь, нажмите на “Добавить счетчик”.

Далее заполните: имя счетчика и адрес сайта, поставьте галочку “я принимаю условие”, создать счетчик. Поставьте галочку на вебвизор и нажмите сохранить. Ниже Вы увидите код счетчика, который нужно установить.

Скопируйте его и перейдите в админку своего блога, как показано на картинке ниже.

Найдите в правой колонке и нажмите на “Заголовок (header.php)”. Вставьте скопированный код в свободное место. Лучше это сделать, где заканчивается .

Нажмите обновить файл. Вернитесь в список счетчиков, нажав на “Счетчики”.

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

Если Вы хотите разобраться со всеми возможностями этого инструмента, то обратитесь к руководству .

robots.txt

Если Вы не знаете, что такое robots.txt и для чего он нужен, то можете почитать в справке Яндекса. Чтобы не мучиться и не составлять его самостоятельно, Вы можете просто его скачать .

Не забудьте исправить в файле свой сайт заменив site.ru и site.ru/sitemap.xml на свой. Также пропишите http или https. Теперь его нужно закачать к себе на сервер в корневую папку, где установлен Ваш блог.

Если вы пользуетесь хостингом «Бегет» , который я рекомендую, то загрузить этот файл вы можете следующим образом. Зайдите в хостинг и нажмите «Файловый менеджер».

Найдите папку с вашим сайтом и зайдите в нее нажав 2 раза. Вы должны увидеть вот это:

Зайдите в эту папку нажав 2 раза. Теперь вы попали в корневую папку своего сайта. Теперь нажмите «Загрузить файлы» и «Browse…»

Теперь можете проверить. Введите в поисковой строке такой запрос: https://site.ru/robots.txt в место site.ru подставьте свой сайт. Также учтите значение https или http.

Регистрируем Домен. Настраиваем Хостинг. Устанавливаем Блог!

Заключение

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

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

С уважением, Сергей Смирнов.

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

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

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

В файлах темы находится код HTML, PHP и CSS. По HTML/CSS на сайте есть отдельный справочник, а знаний PHP для формирования дизайна в принципе не требуется.

Итак, в любом шаблоне WordPress есть следующие файлы.

1. index.php . Файл формирует главную страницу сайта и вызывает другие файлы темы оформления.

2. header.php . Создаёт верх, «шапку» сайта - обычно она содержит логотип, название, описание веб-ресурса, а также горизонтальное меню. HTML-контейнер тоже находится в этом файле.

3. footer.php . Содержит код нижней части сайта, его «подвал».

4. style.css . Файл каскадных таблиц стилей. Так как обычно он бывает достаточно большим, style.css хорошо прокомментирован. К сожалению, чаще всего на английском, но базовых знаний будет достаточно, чтобы понять, какая часть кода за оформление каких элементов отвечает. Подробнее о CSS читайте здесь.

Это обязательная основа шаблона WordPress, но обычно файлов темы гораздо больше, и вот встречающиеся чаще всего.

1. single.php - отдельный пост.

2. page.php - страница.

3. sidebar.php - боковая панель/панели.

4. archive.php - архивы статей.

5. search.php - страница поисковой выдачи.

6. comments.php - вывод комментариев.

7. 404.php - страница ошибки с кодом 404 (Файл не найден).

8. function.php - файл, содержащий функции темы оформления. В него вы можете добавить и свои собственные PHP-скрипты.

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

Редактировать шаблоны часто требуется, чтобы исправить или добавить какую-нибудь мелочь. Ниже приведено несколько распространённых ситуаций.

Добавить меню

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

Чтобы вставить меню в любое место, добавьте строку:

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

"Меню_1")); ?>

где вместо Меню_1 нужно ввести название вашего меню.

Изменить страницу 404

Если ссылка ведёт на несуществующую страницу или файл, WordPress переводит пользователя на страницу ошибки с кодом 404 (Файл не найден). За неё отвечает файл 404.php , хранящийся в папке активной темы. Зачастую на экран выводится английский текст, и желание владельца русскоязычного сайта перевести его на родной язык вполне понятно.

Чтобы изменить содержимое страницы откройте в редакторе файл 404.php , найдите строки с отображающимся в браузере текстом и измените их (выводимый текст чаще всего заключается в кавычки). Например, в одной из стандартных тем (twentyfourteen) вас будет интересовать следующий код:

Замените текст в кавычках (не там, где twentyfourteen, а другой) на свой и получите видоизменённую страницу 404.

Прописать копирайт

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

За «ноги» сайта, как мы знаем, отвечает хранящийся в корне активной темы файл footer.php , и искать отвечающий за копирайт код следует именно в нём.

Например, тема flat-white вспомогательную информацию прячет в следующих строках этого файла:

" title=" "> ">

Русифицировать текст

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

Например, в шаблоне flat-white сразу хочется русифицировать как минимум две надписи: «READ MORE» и «Leave a Comment», так как их видно на главной странице.

За главную страницу отвечает файл index.php , расположенный в корне каталога темы, следовательно, редактировать надо его. Но текста надписей в нём нет, поэтому необходимо разбираться в коде, чтобы узнать, где они хранятся. В нашем случае за информацию под постами на главной странице отвечает файл template-parts/content.php , подключенный строкой

Если перейти в него и в коде

".__("Leave a Comment", "flat-white")."
"; ?>
" class="read_more">

текст Leave a Comment заменить на



Есть вопросы?

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: