Редактирование шаблона WordPress для чайников. Основы правильного редактирования шаблонов Wordpress


Каждая тема оформления имеет ряд настроек, изменить которые можно из панели управления 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 заменить на

Внимание! Использование визуального редактора для редактирования шаблона сайта недоступно в версиях с 14.0. В более ранних версиях необходимо быть очень внимательным: возможны непредвиденные искажения кода. Рекомендуется редактировать шаблон в режиме HTML-кода.


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

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

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

Примечание: Чтобы использовать визуальный редактор при редактировании шаблона в версиях до 14.0 отметьте опцию Использовать визуальный редактор для редактирования шаблонов сайта в настройках Главного модуля (Настройки > Настройки продукта > Настройки модулей > Главный модуль ):

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

Для редактирования шаблона сайта выполните следующие действия:


В обоих случаях откроется форма редактирования выбранного шаблона:


Теперь можно переходить непосредственно к редактированию шаблона сайта.

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

Редактирование служебных областей шаблона

На панели редактирования шаблона располагается кнопка Редактировать служебные области шаблона () , при нажатии на которую открывается форма редактирования:

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

Добавление рабочей области Work Area

Для добавления рабочей области Work Area в шаблон сайта служит кнопка - Разделитель шаблона #WORK_AREA# . При нажатии на нее в рабочую область редактора, в которой отображается внешний вид шаблона, будет добавлен ярлык . Размещение этого ярлыка и определяет расположение рабочей области страниц сайта.

Примечание : Без Work Area шаблон сохранить невозможно.

Предпросмотр шаблона

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

Работа с кодом

Отметим некоторые особенности использования php-кода в коде шаблона. Есть некоторые тонкости при прерывании html-кода php-скриптом. Например, можно писать так:

" title="Посетите сайт">OurSite

Аналогично, и с рисунками (тег img).

Перечислим атрибуты, которые обрабатываются для ссылок и рисунков:
для тега атрибуты: href, title, class, style
для тега атрибуты: src, alt, class, style
Т.е. вместо этих атрибутов можно вставлять

Код таблицы тоже можно прерывать php-скриптом:










Если в коде шаблона используются рисунки, расположенные в директории шаблона и глубже, то путь до папки шаблона будет заменен на константу SITE_TEMPLATE_PATH:

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

Для редактирования шаблона я уже подвел основу, теперь я должен взять первый файл в разработку. Я открою файл index.php, так как он работает как скилет в устанавливаемом шаблоне для wordpress: указывает всем другим файлом на порядок и время загрузки в браузер пользователя. Открыв этот файл программой Notepad++ я обращаю внимание на первую строку.
Вижу следующий код

1

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

В самом начале работы смотрю на количество строк в файлах: в файле index.php 49 строк, но 17 пустых, а в файле header.php – 58 строк, из которых 31 – пустая. Когда я буду завершать работу редактирования шаблона, я удалю все пустые строки, браузер при загрузке страницы будет экономить время при чтении кодов – эта такая минимальная работа по адаптации шаблона для блога.

Перед редактированием файлов index.php и header.php меняю кодировку документов на UTF-8, я рассказывал об этом в предыдущей статье «Редактирование шаблона WordPress»

1 строка – очень важна для верификации документа, она подтверждает, что страница написана на верном языке, руководствуясь принятыми стандартами. Я за эту строку не переживаю – есть и пусть будет. Иду дальше.

Я обращая внимание на строку 2 – браузером

Ниже этого кода идет большой контейнер, в котором размещены 8 строк, с которыми я тоже должен разобраться.

Обращаю внимания на 4 строку,

1 ; charset= " />

которую я заменю на строку

1 < meta http- equiv= "Content-Type" content= "content=" text/ html; charset= UTF- 8 " />

Она говорит браузерам и поисковым системам, что страницы данного блога написаны с использованием кодировки UTF-8, только опять же зачем мне лишняя нагрузка.

Продолжаем дальше оптимизировать шаблон – строка 5 или title страницы. Она очень важна для поисковой оптимизации блога. Поэтому я обязан его использовать, но и здесь его заполнение реализовано с помощью PHP – кода. А так этот код работает

А теперь маленькое отступление. Дело в том, что я для поисковой оптимизации блога использую плагин All in One SEO Plugin . С его помощью я прописываю все заглавные title, Description, Keywords для самого блога, и для каждой отдельной страницы. Вот такой код

Первая часть кода

вытягивает из базы данных блога название поста, вторая часть кода

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

В 6 строке идет подключение файла

О нем я недавно написал заметку. Я должен прописать путь к этому файлу, начиная с названия домена.

В вашем варианте можно поменять только адрес, если будете редактировать шаблон блога для себя.

8 строка – должен прописать абсолютный путь к файлу xmlrpc.php.

Он короткий, вроде безобидный, но когда будет генерироваться главная страница блога, он загрузит очень много кода: стили плагина постраничной навигации, плагин капчи, All in One SEO Plugin, wp-syntax, Google Analytics, topsy. У Вас могут загружаться свойства, стили других установленных плагинов. Кроме того, выполняется вывод рабочих скриптов с папки CMS WordPress wp-includes.

Вывод один. Я должен оценить необходимость для блога каждого такого плагина, и решить нужен он или пустить под нож. Как пример, я не могу обойтись без плагина All in One SEO Plugin, очень много потратил времени на поиски плагина wp-syntax. Они грузят мой блог, но и отдача от них велика.

А вот без плагинов Вордпресс

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

Как отредактировать

Резервная копия.

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

Резервная копия создает копии всех шаблонов Вашего сайта. Мы уже рассматривали ранее что на сайте Ucoz для определенных страниц сайта — определенный шаблон.
Нажмите «Создать резервную копию » для ее создания. Сразу создаться новая резервная копия, которой будет присвоен свой номер из 10 цифр. Цифры Вы конечно не запомните, но по дате создания резервной копии можно сориентироваться. И все же мой совет — не создавайте слишком много копий, а старые, которые уже точно не пригодятся — удаляйте. Тогда будет легче ориентироваться.

Нажмите «Восстановить «, чтобы Ваш сайт принял прежний вид (вид сохраненных ранее шаблонов).

Строение шаблона сайта uCoz

Шаблон любой страницы сайта uCoz состоит из:

  • HTML разметки — HTML теги , определяющие расположение блоков на странице. Собственно каркас шаблона.
  • Системные коды uCoz, которые заключены в $…$. Список системных кодов (с расшифровкой их обозначения), которые можно использовать в конкретном шаблоне находится ниже поля редактирования шаблона. Пользуйтесь этим списком, как шпаргалкой, так как иногда бывает, что в другом шаблоне Вы НЕ можете использоваться какой-то системный код. Таким образом, список системных кодов подходит ТОЛЬКО тому шаблону, под которым он расположен.

На картинке условна обозначила расположение на странице: зеленым цветом — теги HTML; красным цветом — CSS стили; синим цветом — системные коды uCoz.

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

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

Итак, для редактирования шаблона перейдите: Панель Управления — Дизайн — Управление дизайном (шаблоны). Выберите нужный шаблон и нажмите на него.

Есть несколько способов редактирования шаблонов:
1.Визуальный редактор шаблонов. Этот способ подходит для внесения незначительных изменений в шаблон. Изменить цвет и размер шрифта, изменить расположение элементов, добавить текст.
Нажмите кнопку для перехода в визуальный редактор шаблонов.

Теперь можете внести необходимые изменения. Тут Вам не нужно знать HTML и CSS, но перечень системных кодов и их значение знать необходимо. Само редактирование очень похоже на Word или простой визуальный редактор uCoz.
Обязательно нажмите кнопку сохранить для сохранения внесенных изменений.

2. Изменение HTML кода шаблона. Этот способ подходит для внесения любых изменений в шаблон вплоть до полного изменения шаблона, но необходимо иметь хоть какое-то представление о HTML тегах и CSS стилях.
Изменять код можно прямо на странице кода, но лично я предпочитаю делать это в стороннем HTML редакторе. Я уже неоднократно писала, что я предпочитаю Dreamweaver. Поэтому я буду рассказывать на примере этой программы.

В Dreamveaver просто редактировать шаблон, так как с одной стороны ты видишь весь код шаблона, а справа схематический результат:

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

Если Вы хотите первыми узнавать о новых статьях на сайте!!!

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

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

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

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

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

  • index.php – Шаблон начинается с файла index.php, который выводит главную страницу сайта.
  • header.php - Шапка сайта. В этот файл вынесена повторяющаяся на каждой странице сайта верхняя часть. Он начинается с тега , содержит полностью , в который вставляется большинство скриптов при настройке блога. В нем открывается тег и выводится логотип, слоган, верхнее меню и прочие элементы шапки.
  • 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 сайта я предлагаю три варианта:


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

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

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

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

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







2024 © gtavrl.ru.