Как исправить шаблон на сайте

Как известно, не так давно вышла новая версия php 8 — замечательно! Исправлены недочёты предыдущих версий, внесены некоторые корректировки в язык программирования и т.п. словом, по заявлениям разработчиков — php стал много быстрее и безопаснее! Хорошо.

Но мы понимаем, что в php 8 ошибок больше и он медленнее, чем, скажем, грядущий php 9. Но это не суть… а суть в том, что наши сайты бесспорно нуждаются в модернизации! Например, многие, если изменяют на хостинге версию до обновленной, то сайты просто-напросто ложатся: белый экран. И, если у нас шаблон сайта не обновляется (и мы не используем дочернюю тему), то никто за нас исправления в код шаблонов не внесёт. Сайт не будет нормально работать!..

…я за последнее время многим правил шаблоны под новый php. Пришло время написать небольшую статью по теме, как исправить ошибки шаблона сайта для php 8. Сделаю, на основе ваших пожеланий, видеоролик, в котором мы прямо на рабочем сайте от начала (когда сайт «ложится» и до конца (когда вновь заработает») поправим шаблон, так что пишите пожелания о темах, которые нужно включить в ролик (если тема версий php в связке с WordPress будет интересна, буду её расширять, дополнять. Так что жду откликов…).

нужно ли править шаблон под новые версии php?

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

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

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

Если немного смыслите в сайтостроении — это одно дело, а если — нет, это совсем иное…

Думаю, как ни крути, но самое логичное — постепенно — приводить код шаблона в порядок.

В текущем посте дам несколько вариантов исправления ошибок по текущим версиям php. У вас, конечно, могут возникнуть какие-то иные ошибки… Пишите о них, поправим…

к оглавлению

написание кода, комментирование кода php — правила

…предположим, ваши сайты работали на php 7.4.

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

Рекомендую создать копию сайта и выполнять правки на тестовом варианте сайта (как создать тестовый сайт за несколько минут).

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

к оглавлению

подготовка шаблона к включению на сервере версии php 8

О том, что плагины должны быть обновлены, разговор выведем за скобки — это и так ясно!

Первое, с чего начнем концерт, это обратим внимание на написание кода в шаблоне: php 8 строже относится к помаркам в коде. К неряшливому коду…

Проверьте файлы шаблона. Отнеситесь внимательнее к комментариям в коде.

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

то есть должно быть /* коммент */.

Подробнее читать как закомментировать код HTML, CSS, PHP, JS (есть подробное видео).

к оглавлению

установим на сайте плагин Query Monitor

Устанавливаем и активируем плагин…

…и, конечно же, непосредственно перед правкой добавляем в константу  define('WP_DEBUG', true);  параметр true.

это в конфигурации сайта — в файле по пути /домен/public_html/wp-config.php — файл wp-config.php

Этап подготовки сайта для смены версии php считаем законченным.

к оглавлению

переходим к основному решению задач перехода сайта на новую версию php 8

Непременно включаем всё наше внимание!!

…и переходим в соответственный раздел настроек хостинга и переключаем сервер на php 8.

…как правило после смены версии сервера, сайт падает!!

Однако, мы подготовились…

Открываем, например, главную страницу сайта (фронтэнд) — ну или админку.

То, что мы используем в конфигурации сайта дебаггер… и плагин Query Monitor нас здорово выручит! В этом случае перед нашими глазами будет не молчаливый белый экран, но подсказки ошибок!!!

…на белом листе сайта появятся подсказки о возможных ошибках (у кого-то может быть сайт и не совсем сломается… то есть будут частично видны элементы сайта, но в любом случае дебаггеры укажут подсказки о возможных ошибках, с решения которых — методично — и приступаем к исправлению):

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

Скрин выше, как раз указывает на то, как я и говорил выше, что комментарий в финале кода шаблона не закрыт!!! Поправляем, если у вас что-то подобное…

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

к оглавлению

ошибки или несоответствия кода шаблона для версии php 8

примеры ниже — только принципиальные примеры, возможные решения!

по мере испрвления ошибок шаблона — плагин Query Monitor подскажет о том, что в коде шаблона используется устаревшая функция, которая теперь вызывает фатальную ошибку в версии php 8:

Функция create_function() — достаточно частая ошибка в старых шаблонах.

Дело в том, что функция create_function() считается устаревшей и в более новых версиях php будет вызывать ошибки. Так в версии php 8 она вызовет фатальную ошибку.

Исправляем примерно такими вариантами:

Например, есть известный код (фильтр) относительно безопасности сайта — многие его используют:

// уборка ошибки неправильный логин/пароль для ранних версий php 8
add_filter( 'login_errors', create_function( '$a', "return null;" ));

данный фильтр в php 8 теперь вызывает фатальную ошибку!

Исправить create_function можно следующим образом: (заменяем create_function на анонимную функцию — подробности о функциях в этой статье опускаю).

Так:

// первый вариант для версий php 8 = будет пустое поле ошибки:
//add_filter( 'login_errors', fn()=> null );

либо так:

//2 вариант для версий php 8
function no_logs_s() { return 'Вы совершили ошибку при наборе данных'; }
add_filter( 'login_errors', 'no_logs_s' );
/*уборка ошибки неправильный логин/пароль*/

либо ещё один пример:

// неправильно - устаревший пример
if($this->options['general']['clean_exerpts']) {
add_filter('excerpt_more', create_function('', 'return "";') );
}

правильно:

// ИСПРАВЛЕНО:
if($this->options['general']['clean_exerpts']) {
add_filter('excerpt_more', fn()=> null ); }

create_function('', 'return "";') — заменим на: fn()=> null

к оглавлению

для владельцев магазинов на WooCommerce — ошибки сайта-магазина по версии php 8

Если вы работаете с плагином WooCommerce, то вам будет полезно примерно такой вариант решения (много решений — функции Wooc для владельцев магазина):

неправильно:

//число товаров на странице витрины МАГАЗИНА
add_filter('loop_shop_per_page', create_function('$cols', 'return 9;'));

правильно (как вариант):

// исправлено
add_filter('loop_shop_per_page', function( $cols ) { return 9; }, 20);

Этот пример: create_function('$cols', 'return 9;') заменим на: function( $cols ) { return 9;

То есть заместо устаревшей create_function() используем ананимную (альтернативную) функцию function().

И так далее… в подобном духе исправляем и остальные несоответствия в коде шаблона с обновленной версией php 8.

Обращайте внимание на добавленный в functions.php активного шаблона код из уруков на веб сайтах — код может иметь ошибки, которые в ранних версиях php более-менее отрабатывали.

…в кодах могут быть на первый взгляд незначительные ошибки, примеру неустановленные одинарные кавычки — всё это в новой версии php вызовет НЕ ТОЛЬКО неотработку отдельного кода, но и фатальную ошибку!

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

Подробнее об изменениях ЯПа модно почитать в обзоре (на хабре).

Как правильно закомментировать код HTML, CSS или PHP, JS

…вопросы в комментариях — помогу, в чём дюжу…
mihalica.ru !

1 Отступление

Идея написать эту заметку возникла благодаря вопросам читателя Артёма, за что ему спасибо. Больше половины заметок на сайте возникли подобным образом. Меня это радует, потому что не нужно проводить опросы, интересные темы сами приходят на почту. Комментарии всегда открыты, регистрация не требуется.

Предыстория вопроса: на моём сайте используется тема Fluida для WordPress, из которой я выкинул часть функций, чтобы ускорить открытие страниц, и добавил новые. Например, при наведении на изображения насыщенность цветов плавно изменится. Я сделал это через одно место плагин и отдельный селектор CSS, поэтому просто скопировать код на другой сайт не получится. Артём попросил показать, как сделать такой эффект наведения. Ему нужен был способ, работающий с оригинальной темой Fluida. Я переписал код и, как человек ответственный, решил протестировать код. А как это сделать быстро, не ковыряясь в настройках? К счастью, есть способ быстро проверить новые CSS-правила на сайте.

2 Способы отредактировать тему сайта

За внешний вид сделанного на WordPress сайта отвечает выбранный шаблон оформления. Они хранятся в папке wp-contentthemes. Распаковав туда шаблон, вы сможете выбрать его в админке сайта в разделе Внешний вид — Темы. В соседнем разделе Внешний вид — Настроить появятся настройки: шрифты, цвета и прочее.

Широта возможностей по изменению оформления зависит только от создателей шаблона. В универсальных платных темах настроек море, вы сможете сделать как бы «уникальный» дизайн парой кликов мышью. Но чаще встречается обратное: красивые бесплатные шаблоны с изъянами и без настроек. Может быть, шрифт не тот или цвета глаз режут — недостатки бывают разные. Мириться или исправлять? Конечно, исправлять!

Три способа изменить шаблон сайта на WordPress:

1. Отредактировать файлы темы в wp-contentthemesимя_темы. К сожалению, любое обновление темы удалит все изменения, придётся вносить изменения повторно, разбираясь, что добавил автор и как это сочетается с вашими правками.
2. Создать дочернюю тему, «перекрывающую» файлы исходного шаблона. Лучший вариант, потому что когда оригинальный шаблон обновится, изменения останутся. Подробнее о дочерних темах написано в Кодексе Вордпресса.
3. Дописать свои CSS-свойства. Чтобы поправить отступы, цвета или добавить визуальные эффекты при наведении мышью, можно написать свой CSS-код, который будет перекрывать существующий код темы.

Первые два метода подходят для значительных изменений, когда требуется, например, внедрить каталог товаров. Тут нужны знания языка программирования PHP, язык разметки HTML и каскадные таблицы стилей CSS. Хотя WordPress — это легко, программистам по-прежнему есть за что получать деньги.

Третий вариант не требует глубоких знаний и относительно прост. Я вижу четыре полезных применения:

1. Тем, кто только начинает свой путь веб-разработчика и хочет разобраться экспериментальным путём, как работают правила CSS.
2. Когда на программиста денег нет, но требуется быстро поправить пару моментов на сайте, относящихся к дизайну и приходится самому всё изучать.
3. Тем, кто хочет изменить любой сайт под себя. Например, поможет слабовидящим сделать мелкий текст большим без изменения масштаба всех остальных элементов.
4. Когда нужно быстро поправить какой-то косяк на сайте или протестировать изменения, а файлы шаблона можно поправить позже.

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

3 Правим CSS-стили сайта

За оформление сайта обычно отвечает файл /wp-content/theme/имя_темы/styles.css. Внутри содержатся записи, написанные на языке CSS (каскадных таблиц стилей). Шаблон может на лету создавать дополнительные правила CSS на основе настроек, но большинство хранятся в styles.css.

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

Я пользуюсь браузером Google Chrome, поэтому покажу на его примере. В Mozilla Firefox и остальных браузерах инструменты выглядят иначе, но в целом разницы нет никакой.

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

2. Откройте сайт, который нужно поправить. Нажмите правой кнопкой по элементу, который требуется изменить. Для примера я выбрал кнопку «Читать» на своём сайте. Выберите пункт меню «Просмотреть код»:

Откроется панель инструментов веб-разработчика (вызывается и по Ctrl+Shift+I) на первой вкладке, в которой есть все элементы открытой страницы:

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

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

За что отвечает то или иное свойство, смотрите в Справочнике CSS.

На вкладке Styles свойства поделены так, как они показаны в коде страницы, с разделением по исходным файлам. Если какое-то свойство перечёркнуто, значит, в коде есть такое же с другим значением, перекрывающее все предыдущие. Про приоритетность написано в справочнике.

Вкладка Computed содержит получившийся в итоге набор свойств элемента.

3. Жмите кнопку «+», чтобы получить название элемента, затем Ctrl+C, чтобы название попало в буфер обмена. В моём случае это a.continue-reading-link.

Это самый простой способ узнать селектор элемента, но не единственный. Затем открывайте User CSS (его кнопка будет на панели справа вверху вместе с остальными расширениями), справа появится панель. Если вы прочли уроки по CSS, то знаете, что правила пишутся в фигурных скобках. Вставляйте селектор нажатием Ctrl+V и пишите нужный стиль. Для примера я сделал кнопки красными с увеличенными надписями.

Свойства применяются мгновенно. Можно учиться CSS, применяя свои правила и смотря, как меняется страница.

С помощью расширения User CSS можно менять свойства на любом сайте, изменяя внешний вид под себя.

4. После того, как напишете набор правил, нужно донести его до посетителей сайта. Зайдите в панель управления WordPress — Внешний вид — Настроить — Дополнительные стили и вставьте код из User CSS:

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

4 Кое-что ещё

Скажу ещё раз: это не совсем правильный метод. К нему стоит прибегать только для быстрых правок. Чтобы добавить новые функции, удалить ненужные и сделать прочие правки, связанные с поведением сайта, нужно создать дочернюю тему. Правилами CSS меняется только внешний вид сайта, да и то не всегда — JavaScript никто не отменял. К тому же разные браузеры по-разному понимают некоторые правила CSS, нужно тестировать каждое нововведение, а в случае с User CSS изменения видны только в вашем Google Chrome.

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

Если вас что-то интересует или есть что сказать, жду вас в комментариях!

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

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

Как изменить шаблон сайта

Готово, вы изменили шаблон сайта в REG.Site и теперь можете переходить к редактированию сайта.

Скачать инструкцию с примерами HTML страниц и самим шаблоном можно по ссылке внизу страницы.

Этапы создания сайта от А до Я.
Подробное описание с иллюстрациями: Регистрация домена, работа с хостингом, размещение сайта, адаптивность, оптимизация — в одной статье.

Подготовка к редактированию шаблона.

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

— Открываем файл index_red.html в браузере. Здесь видим копию кода главной страницы сайта index.html — для наглядности. Редактировать будем другую страницу.
Обратите внимание только на то, что выделено разными цветами: меню (навигация) сайта, имена картинок (при желании), адреса ссылок на страницы (если переименуете их), основное текстовое содержание сайта (обязательно) и, так называемые, мета теги (обязательно), которые находятся в начале кода, нужны для поисковых систем — посещаемости сайта.
Менять будем только места выделенные цветом.

Переходим к редактированию шаблона.

— Открываем главную страницу index.html (папка «Ваш сайтbegin») с помощью текстового редактора и видим то, что нам предстоит редактировать. Не пугайтесь, это только при первом взгляде страшно, по мере работы присмотритесь и все встанет на свои места.
При редактировании кода используйте поиск: выделите и скопируйте код на странице инструкции и вставьте в окошко поиска редактора на редактируемой странице.

Замене подлежат: Русский текст —  ЦВЕТ , Имя картинки — ЦВЕТ , Ссылки (переходы) — ЦВЕТ

Переходим к замене контента шаблона. Не забывайте периодически сохранять и просматривать результат работы (стр. index.html) в браузере, перезагрузка окна — F5.

Редактируем основные META теги HTML страницы

<title>

Название сайта — Видно в окне браузера

</title>
<meta name=»description» content=»

Описание сайта. Будет видно в анонсе поисковых систем. Не более 200 символов

» />
<meta name=»keywords» content=»

ключевые, слова, через, запятую

» />

Мета-теги в начале страницы: title, description, keywords, являются важным атрибутом любой страницы, размещенной в Интернете.

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

Description — описание сайта при отображении Вашей страницы в результате поиска. Должно быть не более 200 символов. Наличие ключевых слов.

Keywords — ключевые слова, которые чаще встречаются в тексте страницы, несут смысловую нагрузку содержания страницы, пишутся через запятую, не более 7-8 слов. В самом тексте должны встречаться не более 4 раз (каждое слово) на 2000 символов, выделяться жирным, присутствовать в первом предложении и последнем.
Keywords в последнее время потеряли свою значимость для поисковых систем.

Сохраняем!

Редактируем меню сайта и логотип

ЛОГОТИП

<h1 id=»logo»><a href=»index.html»>Ваш логотип<span>Название сайта или код-адрес картинки</span></a></h1> — для начала достаточно текста.

МЕНЮ САЙТА

<li><a class=»active» href=»index.html»>На ГЛАВНУЮ</a></li>
 <li><a href=»page1.html»>О сайте</a></li>
 <li><a href=»page2.html»>Скачать бесплатно</a></li>
 <li><a href=»page3.html»>Анонс</a></li>
 <li><a href=»page4.html»>Фотографии</a></li>
 <li><a href=»video.html»>Видео</a></li>
 <li><a href=»pusto.html»>Пустая страница</a></li>

Ссылки типа page1.html можете оставить без изменений или изменить на свои, но тогда не забудьте внести изменения в другие страницы сайта.
Здесь указана относительная ссылка: page1.html, можно указать абсолютную: http://Ваш сайт/page1.html, что одно и тоже. При первом варианте ссылки, страницы должны находиться в одной и той же папке, в пределах компьютера или хостинга.

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

Пример: если Вы набрали в браузере адрес: http://Вашсайт.ru, то автоматически (по умолчанию) откроется файл первой страницы index.html, если он лежит в папке Вашсайт.ru
Два адреса http://Вашсайт.ru и http://Вашсайт.ru/index.html одинаковы.

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

Сохраняем!

Редактируем ШАПКУ сайта

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

Размер картинки 600х220 px, поменяйте изображение, создайте свое таких же размеров. Сама картинка лежит в папке images, называется logo.png, параметры картинки в файле style.css (папка css). При изменении ширины изображения, поменяйте параметр width:600px; (он такой один) на свой размер.

Отступы от верхнего и правого края меняйте атрибутами, соответственно: padding-top:10px; padding-right:10px; которые ниже параметра width:600px;

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

Сохраняем!

СЛАЙДЕР — картинки в движении

В нашем случае состоит из восьми картинок размером 200х100 px. Размеры не менять. Если измените ширину, то расстояние между картинками увеличиться или уменьшиться. Могут наехать друг на друга. Имена картинок: slider1.gif, slider1.gif, slider1.gif и т.д., лежат в папке images. Замените их на свои, таких же размеров.
Название можете изменить, но тогда поменяйте его и в коде, пример: slider1.gif меняем на mylove1.jpg. Обратите внимание, формат картинки .gif, jpg, png… в коде должен соответствовать формату картинки.

Код:

<li>
  <div class="slider-image">
<a href="http://sitey.ru"><img src="images/slider1.gif" alt="" /></a>
  </div>
</li>
<li>
  <div class="slider-image">
<a href="#"><img src="images/slider2.gif" alt="" /></a>
  </div>
</li>

Ссылку https://sitey.ru замените на свою, куда-нибудь отправьте посетителя при ее нажатии.
Далее меняйте символ #. 
Можно изменить скорость смены картинок в файле jquery-func.js (папка js) , параметр: auto:4, — в секундах. Будьте осторожнее при редактировании этого скрипта.

Сохраняем!

Редактируем ТЕЛО страницы — контент

Содержимое (тело) страницы состоит у нас из трех блоков: левый, средний и правый.

Размеры фиксированные (подогнуты под дизайн), изменить можно лишь высоту одновременно 3х блоков.
Файл style.css параметр height:300px; — замените 300 на большее значение.
Не советую увеличивать содержимое главной страницы на много. Будет дольше открываться для посетителей. Много трафика забирают картинки, особенно не прописанные в файле .css

Заполняйте блоки своим содержимым: текст, картинки в тексте (100×100 px). В имеющийся текст для наглядности уже включены ссылки на другие страницы, удалите их или замените.

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

Сохраняем!

Редактируем ПОДВАЛ низ страницы

Здесь все просто. Замените текст и ссылки. Сюда же можно установить счетчик посещаемости сайта.

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

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

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

Все, что выше слайдера и подвал страницы будут одинаковы на всех страницах сайта.

Обязательно внесите изменения в Мета-Теги страниц и в Заголовок, они должны быть уникальными.

Работа с шаблонами дополнительных страниц.
Выделяем мышкой часть кода готовой страницы index.html, начиная от комментария <!— КОНЕЦ Шапка —> до самого верха, копируем ее и заменяем на всех оставшихся страницах именно эту часть, также выделив ее и удалив.

Подобным образом поступаем с подвалом страницы: выделяем код начиная от комментария <!— Подвал страницы —> до самого низа и заменяем на других страницах. Почему до самого верха или низа? Так проще не промахнуться.

Не забываем СОХРАНЯТЬ страницы!

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

Шаблон достаточно простой, но для совершенствования опыта вполне удобен.

Дорогие читатели, в этой статье мы научимся редактировать шаблон 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 я их исправила.