Как изменить код шаблона wordpress

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

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

Содержание

Шаблоны

Иерархия шаблонов

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

• Если на главной странице сайта отображаются последние записи, для создания стиля этой страницы применяется шаблон Home или Index.
• Если на главной странице сайта отображена обычная страница, для создания стиля домашней страницы применяется шаблон Front page или Page.
• Во многих темах на основе блоков есть встроенные шаблоны, например Single Post для настройки внешнего вида отдельных записей или 404 для страниц ошибки 404.
• Шаблон Archive используется для рубрик или архивов, но не применяется для страниц записей.

Если вам интересны технические аспекты настройки таких шаблонов, см. справочник по темам на WordPress.org.

Редактирование шаблонов

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

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

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

Доступ к редактору шаблонов через редактор страниц или записей

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

После выбора шаблона для редактирования откроется Редактор шаблонов. Чтобы определить, что вы редактируете шаблон, а не страницу или запись, убедитесь, что (1) вокруг области редактирования содержимого есть чёрная рамка; (2) в верхней части отображается название шаблона; (3) на боковой панели настроек отображается слово «шаблон»:

Доступ к редактору шаблонов через редактор сайта

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

Выбор шаблона для редактирования

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

Просмотр структуры шаблона

Чтобы просмотреть все блоки в шаблоне, щёлкните Список в верхней части экрана (значок в виде трёх горизонтальных линий).

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

Редактирование блоков шаблона

В редакторе шаблонов щёлкните любой блок, чтобы изменить содержимое или настройки блока. Возможны следующие действия:

• Редактирование элементов заголовка с помощью блока «Название сайта», блока «Ключевая фраза сайта» и блока «Логотип сайта». Перейдите на страницу Настройка заголовка, чтобы узнать больше.
• Добавление меню с помощью блока «Навигация».
• Добавление боковой панели с помощью столбцов.
• Управление внешним видом записей.
• Скрытие названий страниц или записей.
• Редактирование внешнего вида подвала.

Возможности безграничны!

Сохранение изменений

Сброс шаблона

Примеры использования редактора шаблонов

Существует много способов использования редактора шаблона для создания красивых пользовательских разметок. Здесь представлено несколько примеров.

Добавление пользовательского меню

Если вы хотите представить пользовательское меню только на конкретных страницах, с помощью Редактора шаблонов добавьте Блок «Навигация», как показано на видео ниже:

Добавление пользовательского подвала

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

Создание нового шаблона

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

1. Чтобы создать новый шаблон, нажмите Новый на правой боковой панели в разделе «Шаблон» настроек страницы.
2. Назовите шаблон и нажмите Создать.
3. В Редакторе шаблона можно отредактировать структуру отображения страницы.
4. После этого щёлкните Обновить в правом верхнем углу, чтобы сохранить шаблон.
5. Щёлкните Назад, чтобы вернуться в редактор страницы или записи. Новый шаблон появится в списке доступных шаблонов.

Применение шаблона

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

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

• Зачем редактировать шаблон вордпресс
• Структура шаблона WordPress
• Как редактировать файлы шаблона WordPress
• Настройка темы WordPress в админке

Я вижу две основные причины, зачем нам это нужно:

• Большинство настроек блога связано с редактированием кода – html или css. Во многих своих статьях я пишу о том, что нужно отредактировать определенный файл темы. Если вы не знаете, как искать эти файлы и какими средствами удобнее их править, эта статья для вас.
• При создании блога вы установили на него тему (шаблон) из интернета и хотите что-то в ней изменить, добавить элементы дизайна или функциональные блоки. Но для этого обязательно обладать хотя бы минимальными знаниями HTML и CSS. Независимо, новичок вы или имеете опыт в создании сайтов, для редактирования шаблона WordPress вы должны понимать из чего он состоит и для чего нужна каждая его часть. Поэтому для начала рассмотрим структуру шаблона WordPress.

Структура шаблона WordPress

HTML-код шаблона WordPress разбит на несколько php-файлов. Сделано это для удобства: повторяющиеся на разных страницах куски кода вынесены в отдельные файлы и подключаются к каждой странице с помощью функции include. Шапка, футер и сайдбар находятся в отдельных файлах, а файл каждого типа страниц содержит только центральную область: Наиболее часто редактируемые файлы шаблона WordPress:

• index.php – Шаблон начинается с файла index.php, который выводит главную страницу сайта.
• header.php —  Шапка сайта. В этот файл вынесена повторяющаяся на каждой странице сайта верхняя часть. Он начинается с тега <html>, содержит полностью <head></head>, в который вставляется большинство скриптов при настройке блога. В нем открывается тег <body> и выводится логотип, слоган, верхнее меню и прочие элементы шапки.
• style.css – основной стилевой файл шаблона, в котором задается внешний вид элементов сайта. Чтобы редактировать шаблон WordPress, чаще всего приходится работать именно с этим файлом.

Остальные файлы:

• single.php – отвечает за отображение каждой отдельной записи. Т.е. внешний вид страницы, на которой вы сейчас читаете мою статью, настраивается именно в этом файле.
• page.php – вывод статической страницы блога. Новые страницы создаются в разделе «страницы» в левом меню, а их вид настраивается в этом файле.
• sidebar.php – отвечает за вывод сайдбара (боковой колонки блога), где находятся виджеты. Эта часть шаблона тоже повторяется на каждой странице WordPress сайта, поэтому вынесена в отдельный файл. Обычно не приходится редактировать этот файл, потому что все изменения производятся над виджетами. Однако никто не запрещает вписать какой-то код напрямую в файл sidebar.php.
• functions.php – файл с php-функциями темы. Все они влияют на внешний вид и работу сайта, определяют события при определенных действиях пользователей.
• footer.php – футер (подвал) сайта, его нижняя часть. Это тоже повторяющийся на всех страницах  элемент. В него обычно вставляют счетчики посещаемости, копирайт и контактные данные.
• category.php – за вывод страницы с перечнем всех записей определенной категории отвечает данный файл.
• tag.php – вывод архива записей по соответствующему тегу прописан в этом файле.
• archive.php – архив всех записей за определенный месяц (год) настраивается здесь.
• search.php – выводит результаты поиска по блогу.
• comments.php – отображение комментариев к записям и страницам.
• 404.php – шаблон ошибки 404 – страница не найдена.

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

Как редактировать файлы шаблона WordPress

Сразу хочу предупредить, что не стоит лезть в код и пытаться самостоятельно его переделать, если вы ничего не понимаете в CSS и HTML. Другое дело, когда в каком-то уроке говорится вставить определенный код в определенное место файла. Обязательно сделайте бэкап файлов и базы данных, прежде чем вносить какие-то изменения! Для редактирования файлов темы WordPress сайта я предлагаю три варианта:

1. Редактирование шаблона через админку WordPress
   В админке зайдите в раздел «Внешний вид» — «Редактор» и справа в колонке вы увидите все файлы темы, доступные для редактирования. Выберите нужный файл, отредактируйте и не забудьте кликнуть по кнопке «Обновить».Данный способ очень удобен, когда нужно внести незначительные изменения: редактирование через админку делается быстро, просто, не нужно запускать дополнительные программы и вводить пароли. Из минусов – стандартный редактор не имеет функции подсветки кода и нумерации строк, поэтому вносить серьезные многочисленные изменения таким образом не удобно.
2. Правка файлов через файловый менеджер хостинга
   Как вы уже знаете, я пользуюсь одним из лучших хостингов — beget, у которого отличный файловый менеджер с дружелюбным интерфейсом. Мне нравится редактировать шаблоны WordPress этим способом, потому что опять же не нужно запускать никаких программ, настраивать подключений, копировать файлы на компьютер и код подсвечивается. Файлы шаблона WordPress, который вам нужно отредактировать, находятся в папке: /wp-content/themes/название_вашей_темы/ Зайдите в нее и откройте нужный файл для редактирования. Если ваш хостинг не обладает таким удобным файловым менеджером, советую выбрать другой хостинг:)
3. Редактирование шаблона по ftp
   Этот способ удобен, если предстоит серьезная работа с файлами, особенно если нужно редактировать сразу несколько файлов в разных папках.
   • Запустите ваш ftp-клиент. Для подключения по ftp я использую программу FileZilla или Total Commander — по ссылке подробная инструкция настройки соединения. Настройте соединение с сайтом и зайдите в папку вашей вордпресс темы: /wp-content/themes/название_вашей_темы/
   • Скопируйте файл, который нужно редактировать к себе на локальный диск.
   • Откройте файл в программе для редактирования кода и внесите необходимые изменения. Я советую программы Notepad++ или Dreamweaver, в них подсвечивается код, пронумерованы строки и конечно есть множество других функций и преимуществ.

Настройка темы WordPress в админке

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

Зайдите в раздел «Внешний вид» — «Настроить», откроется окно с основными настройками темы. Здесь можно ввести название и описание сайта, которые отобразятся в шапке сайта после сохранения. Так же вы можете изменить цвет фона или фоновое изображение и другие настройки — разобраться не сложно.   Большую часть настроек темы WordPress можно выполнить в разделе «Внешний вид» -> «Имя вашей темы». Здесь можно загрузить логотип, фавикон и т.д. Настроек очень много, но честно сказать, я ими никогда не пользуюсь, так как мне проще работать с кодом, чтобы редактировать тему WordPress.

Вот и все! Выбирайте удобный для себя способ для редактирования шаблона WordPress в зависимости от ситуации и никогда не забывайте делать бэкапы. Подписывайтесь на RSS, чтобы не пропустить новые полезные статьи.

P.S. Хочу напомнить вам, дорогие читатели, что если вы замечаете в моих статьях ошибки, не поленитесь нажать «Ctrl + Enter», чтобы с помощью системы Orhpus я их исправила.

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

Самое важное – не бойтесь. Редактировать что-либо обычно всегда проще, чем создавать с нуля. Это справедливо и для wordpress шаблонов. Чтобы разобраться, как его изменять, необходимо для начала определить его структуру. Итак, шаблон или тема состоит, по сути, из двух вещей:

PHP-файлы и их редактирование

Чтобы полноценно редактировать php-файлы в wordpress-темах, вы должны владеть хотя бы основами этого языка. То есть хотя бы понимать базовый синтаксис языка, самые простые понятия. Ну или как минимум вы должны уметь пользоваться справочником. Например, по функциям wordpress есть хороший справочник – wp-kama.ru.

Собственно, давайте начнем с более простого – самой структуры шаблона. Его формируют разные php-файлы. Вообще сядьте сейчас и подумайте, что есть на любом сайте (ну или почти на любом)? Во-первых, это шапка. То есть верхняя часть, где обычно располагается логотип, заголовок, описание проекта и прочая информация. Во-вторых, это основная часть для вывода контента. В-третьих – боковая колонка. Или даже несколько колонок. В-четвертых, подвал сайта.

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

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

Ну еще можно сказать о таком необязательном шаблоне, как category.php. Он, как можно догадаться, отвечает за вывод постов в рубриках. Но обычно его не создают, так как с этой задачей справляется и archive.php. Вот скриншот php-файлов в простом шаблоне:

Тут можно выделить еще 2 файла:

Важное дополнение

Все, что мы рассмотрели, это лишь основные php-файлы, которые создаются при разработке любого wordpress-шаблона. Но никто не мешает разработчику добавить свои шаблоны, и вот они уже могут называться как угодно. Хотя обычно толковый разработчик называет эти файлы так, что по названию примерно понятна задача файла. Например, content-meta.php. По названию можно догадаться, что в файле содержиться мета-информация о контенте. То есть это может быть имя автора, время публикации, кол-во просмотров и комментариев и т.д.

Что-то стало вам понятней? Ну хотя бы то, что если вам нужно изменить что-то в шапке, то лезть нужно в header.php, а если добавить какую-нибудь форму подписки после каждой статьи, то в single.php. Ну и конечно, любые изменения внешнего вида уже существующих и новых элементов производятся через таблицу стилей – style.css. Но для этого нужно хотя бы немного разбираться в css.

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

Изменение внешнего вида уже имеющихся элементов

Например, в шапке у вас заголовок, и вы хотите сделать его синим, а не зеленым, допустим. Что делать? Открываете сайт в браузере Yandex Browser или Google Chrome, далее жмете F12. Перед вами появится отладчик. Раскрываете там структуру сайта. Отладчик подсвечивает вам блок на сайте, к которому относится тот или иной тег.

Приведу пример с главной страницей нашего сайта. Допустим, захочется нам изменить 4-й блок навигации – наши курсы. Как это сделать?

Заходим на главную, жмем F12, появляется отладчик. Начинаем раскрывать нужный тег. Для этого нажимайте на треугольник. Базовые знания html тут вам, конечно, тоже пригодятся. Например, вы должны понимать, что все содержимое сайта лежит в теге body. Короче, вы должны найти искомый элемент.

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

Все, когда эта информация найдена, вам остается открыть style.css, нажать Ctrl + F для поиска и ввести там название класса. В нашем случае nav4. Конечно, с webformyself это сделать не получится, потому что у вас просто нет доступа к сайту, но вот со своим шаблоном без проблем.

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

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

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

Редактирование php-файлов, добавление или удаление элементов

В принципе, что-то удалить обычно проще, чем что-то добавить. До удаления можно додуматься чисто интуитивно. Например, выводиться у вас перед статьей дата публикации, а вы хотите ее перенести под статью. Вы даже чисто интуитивно можете открыть single.php и найти там блок, в котором будут слова вроде date, time и т.д. Выделить его, вырезать и вставить после вывода статьи.

А вот чтобы что-то добавить, вам нужно чуть-чуть лучше знать html и php. Или хотя бы уметь пользоваться справочником по wordpress-функциям и общим справочником по html-тегам.

Например, вам нужно вывести имя автора в каждой статье. Как вы понимаете, для этого нужно редактировать файл single.php. В нем нужно где-то перед статьей или в ее конце вывести примерно такой код:

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

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

Ниже я на примере шаблона Xmarkup из бесплатного курса «Как сделать блог за час» приведу способы, как можно подправить оформление блога самостоятельно. Я не буду описывать более сложные элементы CSS и кода jQuery – уроки по ним можно найти самостоятельно в интернете – расскажу только базовые понятия, освоить которые под силу каждому.

Главное – не бойтесь экспериментировать!

Содержание:

1. Структура шаблона WordPress.

2. Описание некоторых файлов темы и возможностей их редактирования:

   1. header.php;

   2. footer.php;

   3. index.php;

   4. sidebar.php

   5. single.php;

   6. 404.php.

3. Файл style.css и изменение внешнего вида шаблона.

   1. Структура файла;

   2. Дочерние темы;

   3. Полезные элементы;

   4. Основные селекторы CSS.

4. Добавление новых элементов в шаблон блога.

   1. Изображения в шапке;

   2. Баннера в single.php;

   3. Замена исходных изображений.

1. Структура шаблона WordPress.

По запросу «темы вордпресс скачать» Гугл выдает нам тысячи вариантов сайтов. От обилия выбора разбегаются глаза – бесплатные и платные, адаптированные и нет, белые, серые, коричневые, стилизованные и современные темы. Одни нравятся, другие очень нравятся. У одних в коде заложены лишние ссылки, другие написаны на английском языке… Как уж тут выбрать =)

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

Из всех этих файлов можно выделить основные элементы:

Папка Images – изображения, используемые в шаблоне.

Js – папка со скриптами.

Style.css – файл, который описывает внешний вид блога.

Screenshot – скриншот темы. Отображается в разделе «Внешний вид/Темы».

name.php – шаблоны различных элементов темы. Количество их в зависимости от фантазии создателя в разных темах может быть различным. Вот основные:

index.php	Главная страница
single.php	Страница одной записи блога
archive.php	Страница архива записей блога
searchform.php	Форма поиска
search.php	Результаты поиска
404.php	«Страница не найдена» — страница ошибки 404
comments.php	Комментарии
footer.php	Подвал сайта
header.php	Шапка сайта
sidebar.php	Сайдбар
page.php	Страница сайта

Наглядное изображение страницы блога и шаблонов, ее составляющих. Похоже на пазл, не правда ли?

Редактировать шаблон темы можно двумя способами:

— через админку: «Внешний вид/Редактор/…»;

 — скопировав на компьютер и открыв блокнотом Notepad++ (рекомендуется).

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

1. Описание некоторых файлов темы и возможностей их редактирования

HEADER.PHP

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

Если рассмотреть код, ясно видно, что типовый хэдер состоит из нескольких разделов:

1. Код DOCTYPE – указывает на тип документа, необходимо для корректного отображения страницы браузерами:

<!DOCTYPE HTML>

1. Информация об языке:

<html lang=»en»>

1. Тег <head>…</head> содержит техническую информацию, помогающую браузеру и поисковикам:

   1. Мета-теги кодировки, отображения на мобильных устройствах и т.д;

   2. Мета-тег title – текст, который отображается в заголовке браузера – название блога и постов:

1. 1. Мета-тег, указывающий ключевые слова и описание страницы. Часто его заменяют плагином All in one SEO pack;

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

<link rel=»как относится документ к текущему» href=»путь к файлу» />

1. 1. Теги, подключающие внешние скрипты и их библиотеки — <script> …</script>;

   2. Код, обеспечивающий работу плагинов:

<?php wp_head (); ?>

1. Тег <body> — все, что выводится на экран компьютера:

<body <?php body_class (); ?>>

1. 1. Шапка блога – вывод изображения или текста

Тег, выводящий название блога:

1. 1. Главное меню блога:

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

— установить фон;

— настроить отображение и стиль текста или картинки в заголовке;

— изменить основное меню блога и его расположение относительно шапки блога;

— по желанию добавить картинку-кнопку или рекламный баннер.

Большая часть этих действий не требует прямого вмешательства в код шаблона – достаточно вносить изменения в админке: «Внешний вид/Настроить».

FOOTER.PHP

В файле шаблона WordPress footer.php задается отображение нижней части блога – так называемого «подвала».

Составные части:

1. Код, обеспечивающий работу плагинов. Аналогичный находится и в header.php. Если какой-либо плагин не действует, первым делом стоит проверить наличие этих двух кодов.

<?php wp_footer ( ); ?>

1. Кнопка «Вверх!»

2. Копирайты – указание авторства, год создания блога – со ссылкой на главную страницу

Год также можно добавлять с помощью php-кода (<?php the_time (‘Y’); ?>). Но лучше вводить временные рамки самостоятельно, иначе блог будет «вечно молодой». Хотя это уж кому как нравится =)

1. Дубль главного меню:

<nav id=”footer_menu”>

<?php wp_nav_menu ( array ( ‘theme_location’ => ‘header-menu-top’,’container’ => ‘’ ) ); ?>

</nav>

1. Виджеты. Сначала идет проверка, есть ли в наличии виджет. Если есть – выводится. Пример: счетчик посещаемости Liveinternet. Добавляется: «Внешний вид/Виджеты/Код счетчика посещаемости»

<div id=»liveinternet»>

<?php if ( is_active_sidebar ( ‘fa-widget-area’ ) ) : ?>

<?php dynamic_sidebar ( ‘fa-widget-area’ ); ?>

<?php endif; ?>

</div>

1. Ссылка на разработчиков данного шаблона Вордпресс

<figure id=»develop»>

<a href=»https://www.xmarkup.ru»>XMARKUP</a>

</figure>

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

По умолчанию через админку в футер ставится блок с контекстной рекламой: «Внешний вид/Виджеты/Текст/Контекстная реклама»

Что можно сделать для уникализации:

— изменить стиль написания и расположения;

— добавить виджеты.

INDEX.PHP

Универсальный элемент шаблона, выводящий главную страницу блога. Иногда носит название home.php.

При этом его функции разделяют и другие файлы: отдельные записи выводит single.php; статичные страницы — page.php; архивы — archive.php; страницу ошибки — 404.php.

Основной шаблон index.php очень важен, он соединяет в единое целое шапку блога, сайдбар и футер + записи блога.

Из чего состоит основной шаблон:

1. Код подключения хэдера:

get_header ();?>

1. Вывод ленты статей блога:

<?php if (have_posts ( )); ?>

<?php while (have_posts ()):the_post (); ?>

В каждом посте стабильно повторяются:

— описание сообщения: дата и время, автор, рубрика, наличие комментариев. При этом, заголовок является ссылкой на сообщение.

— кнопка-ссылка на комментарии и кнопка «Читать», разворачивающая статью полностью

1. Подключается сайдбар:

<?php get_sidebar (); ?>

1. Подключается футер:

<?php get_footer ();?>

Что можно менять в файле index.php:

— оформление поста;

— формат даты и времени;

— подключать или убирать сайдбары.

! Полезная информация.

Как правильно ввести дату и время:

j – день месяца цифрами – 1, 2, 3…;

S – суффикс английского порядкового числителя (second = 2nd и так далее);

m — обозначение месяца цифрой с нулем впереди (02, 04, 11);

n – обозначение месяца цифрой без нуля (2, 4, 11);

y – последние цифры года (90, 14);

H – время в 24-часовом формате с нулем впереди (01, 02, …, 23, 24);

h – время в 12-часовом формате с нулем впереди (01, 02, …, 11, 12);

G – время в 24-часовом формате без нуля впереди (1, 2, … 23, 24 (;

g – время в 12-часовом формате без нуля впереди (1, 2, …, 11, 12);

I – минуты (15, 50).

SIDEBAR.PHP

Сайдбар выводит на одну или несколько (бывает до 4х) боковых колонок элементы навигации по блогу и необходимую информацию. В нем можно размещать различные виджеты.

Пример сборки сайдбара:

1. Строка поиска;

2. Форма подписки на блог;

3. Рубрики;

4. Топ комментаторов;

5. Архивы;

6. Рекламные баннеры.

Виджеты можно редактировать, в админке в разделе: «Внешний вид/Виджеты». Там же их можно выбрать, добавить свои собственные и расставить в необходимом порядке.

Составные части sidebar.php:

1. Подключение к шаблону

<aside id=”side_bar”>

1. Возможность добавления виджетов

При желании виджеты можно прописать в файле sidebar.php вручную.

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

<?php include (TEMPLATEPATH. “/Имя_файла.php”);? >

Как уникализировать сайдбар:

— добавить завлекающую картинку-ссылку на страницу захвата;

— подобрать свой набор виджетов;

— изменить местоположение колонки;

— сделать 2 и более сайдбаров;

— изменить внешний вид.

SINGLE.PHP

Файл single.php отвечает за отображение записей блога.

Он состоит:

1. Традиционное подключение шапки блога:

get_header (); ?>

1. Содержимое поста

Блок записи может включать в себя:

1. 1. Микроразметка schema.org

   2. Указание даты и времени публикации

1. 1. Указание автора публикации

1. 1. Указание рубрики

1. 1. Наличие и количество комментариев

   2. Название записи и ее текст

1. 1. Форма подписки;

   2. Ссылки для социальных сетей

2. Блок комментариев

   1. Наличие комментариев, вывод на экран, если они есть;

   2. Окно для ввода комментария + ввод адреса и имени;

   3. Скрипт для смайликов

Таким образом, редактируя файл single.php, мы можем сделать:

— Добавить картинку перед текстом статьи. Полезно для рекламных баннеров;

— Добавить/Изменить форму подписки;

— Добавить/изменить социальные кнопки;

— Добавить комментарии ВКонтакте;

— Сделать индивидуальное оформление для какой-либо отдельной записи.

404.PHP

В этом файле заложен важный шаблон ошибки 404 «Not found». Она информирует читателя о том, что сервер не может обнаружить требуемую страницу.

Создание привлекательной страницы 404 – важный этап уникализации блога.

! Замечание. В результатах поиска страница ошибки не выдается.

Причины открытия страницы ошибки:

— Удаление записи;

— Сменился заголовок статьи, изменилась ссылка на нее;

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

Вы легко можете на нее выйти, дописав какую-либо аракадабру в конце ссылки на сайт: «http://Ваш_сайт.ru/ппым».

Вот так она выглядит по умолчанию:

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

Поэтому очень и очень желательно сделать сделать «Страница не найдена» более информативной для читателя. Убедите посетителя не покидать блог, а остаться и найти что-то интересное для себя!

Для этого на страницу 404 можно поместить:

— Несколько строчек о том, почему нет страницы;

— Предложение перейти на главную страницу;

— Предложение сообщить в службу поддержки;

— Список рубрик блога;

— Перечень всех статей блога;

— Новые сообщения блога;

— Форму поиска или предложение ей воспользоваться;

— Для пущей привлекательности добавить картинку.

Полезные php-коды:

— Ссылка на картинку:

<img src=»http://Ваш_сайт/images/Названиекартинки«width=»x»height=»y»alt=» «>

<img src=»<?php bloginfo (‘template_directory’); ?>/images/название картинки» width=»x» height=»y» alt=»« />

Либо получаем ссылку через «Записи/Добавить новую/Добавить медиафайлы» или «Медиафайлы/Добавить новый»

— Ссылка:

<ahref=»ссылка»>заголовок ссылки</a>

<?php echo get_settings (‘home’); ?> — ссылканадомашнююстраницу

— Вывод последних 10 записей блога

<?php get_archives (‘postbypost’, 10); ?>

— Страницыблога

<?php wp_list_pages (‘title_li=’); ?>

— Рубрикиблога

<?php wp_list_cats (‘sort_column=name’); ?>

— Форма поиска берется из searchform.php

<form method=»get» class=»searchform» action=»<?php bloginfo (‘url’); ?>/»>

<input type=»text» placeholder=»Поиск» name=»s» class=»s»>

<input type=»submit» value=»«>

</form>

3. Файл style.css и изменение внешнего вида шаблона

 Теперь перейдем к style.css. В нем описаны элементы стиля CSS, применяемые к каждому из объектов шаблона. Редактируя этот файл, мы легко можем изменить внешний вид своего блога.

Подключается файл стиля в хэдере:

<link rel=»stylesheet» href=»<?php bloginfo (‘stylesheet_url’); ?>» type=»text/css» media=»screen» />

Там же мы по необходимости можем подключить дополнительные файлы стиля.

Структура style.css:

1. CSS файл любого шаблона начинается с закомментированного знаками /* текст */ описания темы:

— Название темы;

— Страница темы (если для общественного использования);

— Автор;

— Страница автора;

— Родительская тема (если есть);

— Описание темы;

— Версия;

— Ключевые слова.

1. Затем сбрасываются все стили, присвоенные браузером. Вот начало:

1. И, наконец, идут стили шаблона.

! По-прежнему не забываем про резервные копии!

Как можно изменять CSS стиль шаблона:

1. Редактировать style.css непосредственно в админке: «Внешний вид/Редактор/ style.css»;

2. Скопировать на компьютер с помощью FTP-клиента (FlieZilla) и редактировать в блокноте Notepad++ или Akelpad;

3. Добавлять необходимые изменения в файл стиля дочерней темы.

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

— Можно не бояться наделать глупостей, ведь исходную тему мы не трогаем =)

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

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

Давайте сделаем дочернюю тему для нашей Xmarkup:

1. Создаем папку с названием «Child Xmarkup»;

2. С помощью Notepad++ (или любого другого блокнота) делаем файл style.css нашей темы:

Прописываем названия дочерней и основной тем (закоментировано) и включаем стили из основной темы:

@import url (‘…/xmarkup_res/style.css’);

Все, темка готова, осталось добавить ее на сайт =)

1. С помощью клиента FileZilla импортируем нашу папку в папку с темами: «/httpdocs/wp-content/themes». Не забудьте после копирования обновить FTP-клиент.

Теперь можно активировать ее в админке («Внешний вид/Темы»)

(Чтобы у темы была иконка, я добавила файл screenshot.png в папку «Child Xmarkup») При желании, к дочерней теме можно добавить больше информации – автор, описание и т.д.

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

1. Расширении для Google Chrome и других браузеров на его платформе — CSSViewer

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

1. Run Pixie, благодаря которой можно узнать код любого цвета, стоит лишь навести мышку:

1. Цветовая палитра. Можно воспользоваться фотошопом или просто вбить в поисковике и выбрать понравившийся сайт:

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

1. И, наконец, самая полезная штука (думаю, все итак знают 😉 ) – сам браузер Гугл Хром! Просто щелкаем правой кнопкой мыши на любом элементе и просматриваем его исходный код.

Понравившийся дизайн на сайте конкурента? Тоже не вопрос! При желании можно просто вытащить чужой файл стиля.

Тут же в окошке с CSS стилями можно включать/отключать и править значения элементов оформления и смотреть, как изменится внешний вид. Затем копировать готовый код в дочернюю тему – и вуаля! =) Все просто и быстро – редактировать сплошное удовольствие)

Чтобы редактировать стиль, необходимо хоть немного знать основные элементы языка CSS – каскадных таблиц стилей.

Если мы заглянем в какой-нибудь из .php файлов шаблона темы, например, header.php, то увидим подобное:

<header> — шапка сайта

<div> — контейнер, в который мы заключаем фрагмент блога, будь то ссылка, страница или текстовое окно. Помогает структурировать документ.

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

Id – стилевой идентификатор. Это уникальное имя, одно id используется только 1 раз на странице. Может применяться для якорных ссылок: <a href=»#id»>вот так</a> 

Class – назначает имя класса, одному элементу на странице можно присвоить несколько классов. Также один класс может быть присвоен нескольким элементам.

При этом, большей приоритет у атрибута id. Пример:

<div id=”one” class=”two”>Пример</div>

#one { color: #000; } /* черныйцвет */

.two { color: #fff; } /* белыйцвет */

Текст будет черного цвета, так как идентификатор важнее.

Итак, селектор – часть CSS правила, к которому будет применен стиль. Более подробно вы сможете познакомиться со всеми ними в любом учебнике по CSS или сайте для вебмастеров.

В качестве селектора могут использоваться элементы страницы (body, li, ul и т.д.), так и специально заданные атрибуты стиля (id, class) или атрибуты (ссылки и т.п.).

Рассмотрю примеры некоторых селекторов из нашего файла стиля.

1. Селектор идентификатора (имя + знак решетка #).

В шаблоне задан как <header id=«header»>

1. Селектор класса (точка + имя)

<div class=»wrapper»> — выбираем все элементы внутри контейнера div и присваиваем им этот класс.

1. Универсальный селектор «*» позволяет нам выбрать все элементы на странице (или дочерние элементы). В данном примере мы обнуляем стили браузера, убирая отступы.

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

1. Селектор, состоящий из двух элементов. Также позволяет выделить все элемент нужных типов на странице. В данном случае определяет написание текста в тегах <b>…</b> и <strong>…</strong>

Также можно объединять простые селектор при помощи комбинаторов.

1. Выбор всех дочерних элементов внутри данного элемента. Выбираем все заголовки h1 внутри идентификатора id=”main_content”

1. Мы можем использовать знак ‘>’, чтобы выделить непосредственные дочерние элементы у данного родительского.

1. Существуют также псевдо-классы, действующие в результате взаимодействия с сайтом, перед ними всегда идет двоеточие: «элемент:название_псевдо-класса». К примеру, выделение ссылки при наведении на нее курсора:

!important – позволяет повысить приоритет вводимого стиля. Например, если не хочется искать в файле стиля нужный селектор, можно просто подписать в конце документа новый стиль и добавить в конце «!important».

color: #000 !important

Ознакомиться со всеми CSS селекторами можно в специализированной литературе.

Самые простые и, думаю, всем известные свойства:

1. Изменение цвета

color: #цвет; /* цвет текста */

background:#цвет; /* цвет фона */

Для цвета можно указать прозрачность

background: url(‘адрес изображения’); /* картинка на фоне */

Картинками можно замостить, или поставить одну, указать ее размеры.

1. Изменение размера

width: значение; /* ширина */

height: значение; /* высота */

Могут определяться автоматически или задаваться в единицах измерения или процентах.

1. Шрифт

font-size: значение; /* размер шрифта */

font-style: значение; /* стиль текста – курсив, обычный */

font-weight: значение; /* толщина */

font-family: семейство; /* основной шрифт и альтернативные ему (если идущий первым не установлен) */

text-align: left, right, center; /* выравниваниетекста */

1. Обводка

border: толщина стиль #цвет; /* рамка */

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

1. Внешний отступ

margin: top, right, left, bottom; /* значения отступов, идут по часовой стрелке */

В зависимости от количества указанных значений:

— 4 цифры: значения отступов по часовой стрелке;

— 3 цифры: верхний, левый+правый, нижний;

— 2 цифры: верхний и нижний, левый и правый;

— 1 цифра: все отступ одинаковые.

Можно также задавать один какой-то отступ. Например: ‘margin—top: 10px;’ – 10 пикселей от верхнего края.

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

1. Внутренний отступ

padding: top, right, bottom, left;

Работает аналогично margin. Отрицательных значений нет.

А теперь более «интересные» свойства =)

1. Тень (свечение) текста и объекта

— Для текста:

text—shadow: смещение_по_вертикали смещение_по_горизонтали размытие #цвет;

—webkit—text—shadow: смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

—moz—text—shadow: смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

Примечание: —webkit—text—shadow, —moz—text—shadow используются для совместимости с браузерами.

Можно указывать отрицательные значения.

Примеры:

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

Как видите, можно очень красиво оформить заголовки к постам, к примеру. Да и вообще простор для фантазии)

— Для объекта

box—shadow: смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

— webkit—box—shadow: смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

—moz—box—shadow: смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

Примечание: —webkit—box—shadow, —moz—box—shadow используются для совместимости с браузерами. Не требуются при наличии последних версий с поддержкой CSS3.

Тень для какого-либо объекта получается аналогично тени для текста.

Примеры:

— Двойная тень:

— Если устанавливать значение только для размытия, можно получить эффектное свечение:

1. Скругление углов

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

border—radius: верхний_левый верхний_правый ниний_правый нижний_левый углы;

— webkit—border—radius: верхний_левый верхний_правый нижний_правый нижний_левый углы;

—moz—border—radius: верхний_левый верхний_правый нижний_правый нижний_левый углы;

Примечание: —webkit—border—radius, —moz—border—radius используются для совместимости с браузерами. Не требуются при наличии последних версий с поддержкой CSS3.

Значения присваиваются по часовой стрелки, их может быть от 1 до 4. Изменяя и комбинируя, можно красиво оформить изображения:

— 1 значение: одинаково скругляются все углы

— 2 значения: попарно скругляем [верхний_левый и нижний_правый] и [верхний_правый и нижний_левый]

— 3 значения: [верхний_левый] [верхний_правый и нижний_левый] [нижний_правый]

— 4 значения: задается отдельно для каждого угла

Используя тень, скругляя углы и добавляя рамки, можно оформлять изображения без помощи сторонних редакторов

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

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

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

Что нам потребуется сделать:

1. Изменить фон сайдбара;

2. Добавить тени и скругления;

3. Изменить стандартные кнопки и изображения

Совет: в файле style.css не забывайте комментировать для себя выполняемые действия – будет проще редактировать впоследствии.

Нажимаем ПКМ и выбираем «Просмотр кода элемента»:

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

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

! Учтите, при этом изменения в самом коде не производятся!

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

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

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

Вот такой виджет у меня получился в итоге:

Вот часть правил CSS, которые я добавила в дочернюю тему:

Таким образом изменяем все страницы блога:

Не очень-то и сложно, не правда ли?

1. Добавление новых элементов в шаблон блога

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

1. Поменять местом главное меню и шапку сайта

Можно попробовать поднять главное меню над шапкой сайта. Для этого описание меню блога вырезаем и вставляем после тега <header id=»header»>

Вот, что у нас получится:

1. Добавить изображение в шапку сайта

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

1. Берем любую картинку. Допустим, она называется 12345.png

1. С помощью FeliZilla загружаем изображение в папку Images: «httpdocs/wp— content/themes/xmarkup/images»

Вид ссылок на изображения:

<imgsrc=»http://Ваш_сайт/images/Название картинки»width=»x«height=»y«alt=» «>

<img src=»<?php bloginfo (‘template_directory’); ?>/images/название картинки» width=»x» height=»y» alt=»» />

Либо получаем ссылку через «Записи/Добавить новую/Добавить медиафайлы» или «Медиафайлы/Добавить новый». Там же можно сразу установить ссылку на сайт партнеров.

1. В файле шаблона header.php до или после кода шапки сайта прописываем тег, выводящий изображение:

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

Теперь картинку надо красиво оформить и присвоить ссылку:

Для примера, я ссылаюсь на главную страницу Яндекса.

С помощью тега <div class=”primer”> ссылаемся на стилевой класс в файле style.css. Параметры стиля прописываем вручную:

Либо стиль можно прописать перед ссылкой на изображение, добавив теги <style>…</style>

1. Как добавить картинку перед текстом статьи.

Иногда может потребоваться, чтобы рекламный баннер шел перед заголовками статей. Для этого нам надо добавить код изображения в файл single.php перед кодом заголовка:

При желании, можно скопировать файл single.php в родительскую тему и внести в него изменения уже там.

Вот результат:

1. Изменение иконок социальных сетей и любых других изображений

Чтобы изменить иконки социальных сетей, надо заменить соответствующие файлы в папке Images

На это все. До новых встреч, друзья!

Автор статьи:

Анастасия Калашникова