«Куда правильно вставить код в файл WordPress?» название сегодняшней статьи. В своих статьях блогеры часто приводят примеры, которые улучшают и расширяют встроенные возможности WordPress. Зачастую в статьях описываются коды по замене интересного плагина, настройке виджета или приводятся их фрагменты. В данной статье мы с вами рассмотрим куда правильно вставить код в файл WordPress, чтобы был получен ожидаемый результат.
Куда правильно вставить код в файл WordPress?
Для многих новичков да и не только, кто решил заменить плагин или настроить виджет и впервые столкнулся с вставкой кодов это процедура становиться проблемой. Проблема заключается в том, что когда встречаешь в статьях фразы – Взять и вставить код в файл style.css или в файл footer.php, header.php, а зачастую в functions.php это нам ни о чем не говорит.
В этих файлах куча всего и куда вставлять этот код только самому всевышнему и известно, и если в статье не прописано конкретно место вставки то мы с вами долго будем ломать голову или просто не будем ничего делать дабы не загубить свое детище.
Как редактировать код?
Вариантов у нас с вами немного, а вернее всего два. Это:
1. Редактирование через встроенный редактор WordPress.
Данный редактор находиться в Консоли админки сайта- Внешний вид → Редактор.
Плюс этого редактора: он всегда под рукой, можно оперативно вносить маленькие правки в код если вы знаете точно куда лезть.
Его Минус: для внесения правок вам доступны не все файлы вашей темы, да и синтаксис не подсвечивается. Это делает редактор неудобным для ответственной работы с кодом.
2. Отдельные программы для правки кода.
Для Windows используем Notepad++ .
Плюсы этого варианта: видно сразу, имеется удобная разметка и подсвечивается синтаксис. К примеру в Notepad++, нажав на любой тег, мы видим, что он и его закрывающийся тег-собрат подсвечиваются. Что довольно-таки удобно. При закрытии программы файлы сохраняются в ее окне, даже без сохранения на компьютере.
Минусы этого варианта: эта программа отдельная, и вам с ней придется самим разбираться. Но это я думаю вам не сложно будет сделать.
Обобщающая структура темы активированной на сайте под WordPress
Файлы темы оформления
Любая активированная тема на WordPress сайте является на самом деле набором файлов. Где-
то на стороне вашего хостинга все эти файлы обрабатываются серверами, и на вашем мониторе выдается уже готовый результат, в виде готового сайта. То есть то, что мы с вами видим, когда набираем адрес в строке браузера и заходим по нему.
Этот набор файлов будет всегда отличаться в каждой конкретной теме по-своему. Но у них есть одна общая черта: этот набор обязательно состоит из файлов имеющих расширение «php», «css» и «js». К примеру: comments.php, style.css, html5.js.
Так как WordPress полностью написан на языке PHP, то файлы с расширением «php» это основная часть любой темы оформления.
В каждой имеющейся теме всегда присутствует минимальный набор файлов необходимый для корректной работы с движком WordPress. Возьмите и откройте через панель управления сайтом или через файловый FTP клиент папку с вашей активной темой (путь: \корень_сайта\wp-content\themes\ваша_тема) и вы вероятно найдете там все вышеуказанные файлы:
А далее мы более подробно поговорим об этих файлах.
Структура внешнего вида сайта на WordPress.
Когда вам необходимо выполнить какие-то действия по улучшению сайта и мы читаем об этом в статьях – «Вставить кнопку вверх в подвал темы», «Добавить виджет в сидебар» или «Что сделать, чтобы не было видно версии WordPress», то тот кто еще не совсем в теме, т.е. новичок, попав на сайт видит, только заголовки, панели, какие-то кнопки, ссылки, непонятные ему названия ну и так далее.
Он еще не понимает о чем идет речь и не знает, что у каждой области темы WordPress имеется свое название и их принято называть своими именами. А для человека, который уже давно в теме весь сайт виден структурировано. Для примера рассмотрим мой блог Moiinteresy.ru. Вот так выглядит главная страница блога:
Как видно на рисунке, главная страница моего блога состоит из 4-х частей: шапка, подвал, основная часть и боковая панель. Можно отметить, что такая структура больше всего распространена в темах оформления WordPress. Теперь, когда мы разобрались в структуре сайта и когда нам известны названия частей главной страницы, вы можете сами изъясняться правильно и говорить: «Я хочу добавить баннер в подвал», или «Как мне вставить виджет в сидебар», или «Каким образом я могу поменять шапку» и всем кто в теме будет все понятно.
О файлах и коде
Как видно на картинке выше, за каждую часть сайта отвечает определенный файл темы WordPress. На самом деле файлов в теме больше, мы о них говорили выше. Ниже я опишу только самые на мой взгляд важные файлы темы.
header.php — Шапка сайта
Шапка сайта — это самая верхняя часть сайта, которая содержит логотип, название сайта, навигацию меню, вставку рекламных баннеров и страницы. Верхняя часть сайта является первой и поэтому и обрабатываться она будет первой. Сие означает, что в файл header.php могут прописываться все подключаемые скрипты – файлы JavaScript, CSS и т.д. К примеру кусок файла:
footer.php — Подвал сайта
По аналогии с шапкой сайта, только касается нижней части – подвала сайта. В этой части содержаться копирайт, контактная информация, меню дополнительное, счетчик метрики и т.д.
К примеру часть файла:
Шапка и подвал — это верхняя и нижняя часть сайта, которая всегда будет видна вверху и внизу, куда бы вы не направлялись в рамках сайта.
index.php — Основная часть сайта
Основная часть сайта является контентной там, где выводятся статьи сайта и которая отвечает за их вывод. Этот файл содержит код, который выводит заголовки записей, миниатюр, авторов, дат публикаций, метки, анонсы записей, кнопки нажав на которые можно продолжить чтение записи далее.
Следующий пример кусочка файла:
sidebar.php — Боковая панель сайта
Боковая панель сайта — это блок сопровождения информации выводящий виджеты, форму поиска, социальные кнопки, облако меток, рекламы, баннер и прочую информацию. Боковая панель сайта может располагаться как справа так и слева от основной части. А может у нее быть сразу 2 боковые панели, а может и вообще отсутствовать.
Очередной пример кода файла:
Сайдбар данной темы может полностью настраиваться через Консоль админ панели. И если нам надо, что-то добавить или изменить в боковой панели, необходимо зайти в меню → Внешний вид → Виджеты, и уже там можно перетащить в сайдбар необходимые элементы:
functions.php — Файл конфигурации темы сайта
Данного файла на сайте «не видно», но он играет важнейшую роль в правильной работе темы оформления. Практически, в этом файле содержатся все инструкции по работе административной части темы оформления, здесь аккумулируются все дополнительные функции, которые может задействовать тема, сюда так же включаются для загрузки все другие компоненты и модули темы, которые вынесены разработчиком в рамках отдельных файлов, чтобы потом можно было заменить одну составляющую вместо всего файла functions.php целиком. Если сказать просто, данный файл отвечает за главную функциональную составляющую всех тем оформления. Именно в этот файл блоггеры вставляют большую часть кодов, которыми упрощают или улучшают функциональность своих тем.
А вот часть файла:
Как вставляется код
Копируется код. Затем открывается файл functions.php (аналогично можно сделать с другим файлом) с помощью встроенного редактора или программы Notepad++(о которой говорилось выше),опускаетесь в конец файла и вставляете скопированный код перед закрытием php тега?>
Основное правило которое вам нужно соблюдать – это не нарушать целостность, существующий код и структуру файла в который вставляете скопированный код
Но если код, который вы собираетесь вставлять, начинается открытием php тега <?, то естественно и вставить ваш скопированный код нужно после закрытия предыдущего кода. Это соблюдать необходимо обязательно.
style.css — Таблица стилей оформления темы
Вот еще один из очень важных файлов, без которого ни одна тема WordPress вообще работать не будет. Данный файл лучше всего «виден» на главной странице всех WordPress сайтов. От него зависит юзабилити (внешний вид сайта) всех сайтов сделанных на WordPress. В нем можно задать или изменить оформление, фон, шрифт, цвет, интервалы отступа, заливку, тень, градиенты, поэтому он и очень важен.
А вот очередной фрагмент файла:
Этот файл в отличии от всех остальных, описанных выше, целиком написан с использованием разметки веб-стилей CSS. Все коды, что касаются настройки оформления, добавляются в этот файл. Чтобы вставить в него какой-то код вам необходимо прокрутить в конец файла и добавить свой css код с начала новой строки.
Второстепенные файлы
Имеется еще ряд файлов, которые имеют второстепенное значение. Но они так же необходимы для работы вашей темы.
404.php — это файл, который отвечает за страницу ошибки. Если вы или кто-то перешёл по ссылке, которая ссылается на несуществующий пост или страницу на вашем сайте, то он попадает на страницу 404.php, где будет надпись «Извините, такой страницы нет.», или что-то подобное.
Фрагмент файла:
archive.php — этот файл в ответе за отбор и вывод записей по отобранным критериям: рубрике, автору, дню, месяцу, году или по метке.
Фрагмент файла:
comments.php — здесь все просто, файл в ответе за вывод комментариев ваших страниц и записей. Файл содержит настройки формы комментирования.
Фрагмент файла:
page.php — файл, отвечает за публикации и вывод Страницы. В верху Шапки блога есть меню, которое открывает каждый элемент своей Страницы.
Фрагмент файла:
search.php — данный файл в ответе за поиск на сайте и вывод его результатов.
Фрагмент файла:
single.php — файл отвечает за публикацию и вывод Записей.
Фрагмент файла:
Вот и все! Статья получилась большая, но она наверное того стоит. Надеюсь эта статья разъяснила вам некоторые моменты, и теперь вам будет проще разобраться, куда правильно вставить код в файл WordPress.
Не забывайте делиться статьей в соц. сетях. Вопросы можете оставлять в комментариях. Спасибо всем за внимание и удачного продвижения.
Желаю вам Друзья удачи! Да прибудет с вами сила!
С Уважением Сергей Москвитин
И в завершении несколько слов…
Сергей Москвитин
16 Апр 2017Наталья все скрипты для быстроты загрузки надо из шапки сайта перенести в подвал. Но все эти манипуляции лучше сделать при помощи плагина Autoptimize. Как правильно его настроить посмотрите в поисковике.
Наталья
14 Апр 2017Сергей, спасибо за адекватную статью! Для новичков самое то)
Считается, что JavaScript, CSS нужно вставять в header. Почему все анализаторы пишут примерно это:
Переместите файлы, загрузка которых мешает быстрому отображению страницы как можно ниже. Подгрузка JS или CSS файлов в секции head тормозит загрузку HTML кода страницы. Найдено блокирующих JS файлов: 3, CSS: 5
Или имеется ввиду, что перенести надо в body? А куда, в начало?
Сергей Москвитин
18 Дек 2016Спасибо за вашу оценку моего труда.
Александр
18 Дек 2016Самая лучшая статья в инете по этому вопросу. Мне оч помогла. Автор на высоте.
Сергей Москвитин
17 Сен 2016Рад, что моя статья вам помогла
Адениум.
13 Сен 2016Умная голова сто голов кормит, а худая и себя не прокормит. Спасибо за умные советы и полезную статью.
Сергей Москвитин
12 Апр 2016Добрый День Анна! Не видя сайта и полного кода для вставки я не могу вам подсказать, куда правильно вставить код. Я советую вам в вашем случае, лучше нанять фрилансера и он вам за небольшую плату все сделает.
Анна
11 Апр 2016Добрый день!
Не получается вставить код на страницу сайта, либо не видно вообще поиска туров, либо наполовину. Напишите пошагово, пожалуйста. Мне нужно чтобы после формы онлайн заявки был поиск туров. Как мне правильно прописать в редакторе в header.php?
<div id="main" class="wrapper"><a id="myButton" href="#contact_form_pop" class="fancybox"><img src="http://visa-khv.ru/wp-content/uploads/2015/07/онлайн-заявка3.png" alt="" /></a>
<div stile="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
<?php echo do_shortcode('[contact-form-7 id="1583" title="Форма обратного звонка_copy_copy"]'); ?>
вставляю сюда:
</div><!– head –><link href="//www.onlinetours.ru/assets/showcase.css" rel="stylesheet" type="text/css" />
<!– body –> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script>window.otJq = jQuery.noConflict(true);</script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js"></script><script charset="utf-8" src="//www.onlinetours.ru/assets/showcase.js"></script><script>otJq(function(){OnlineTours.renderShowcase('ot-showcase','770PPg','+7 (4212) 24-92-64','Хабаровск')});</script><div id="ot-showcase"></div><div class="ot-copyright">Идет загрузка туров с сайта <a href="http://www.onlinetours.ru/" target="_blank">http://www.onlinetours.ru/</a>.</div>
</div>
</div>
Julia
21 Фев 2016Если вы следуете правилам, определенным в вашей структуре, вы сможете легко создавать правильно построенный код XML.
Сергей Москвитин
19 Ноя 2015Привет! Чтобы не заморачиваться с кодом в этой теме. Попробуй смени тему. Сейчас этого добра много. А так возьми программку, которая определяет код цвета. Определи код цвета боковой панели. Найди файл, который отвечает за изменения СSS-кода. Включи поиск и вставь код цвета боковой панели. И таким образом можно найти код и попробовать сменить цвет боковой панели. Ну вот где-то так. Попробуй, но перед этим не забывай делать копию оригинального файла с кодом. Дабы если сайт сломается, чтобы можно было его восстановить.
Батир
17 Ноя 2015Привет, Сергей. Нужен ваш совет. Я вношу изменения в CSS-код моего вордпрессшаблона, сохраняю, но эти изменения НЕ ВСЕГДА не отражаются на дизайне сайта, т.е. внешний вид сайта не меняется соответственно. Изменения, направленные на изменения формы и дизайна шапки сайта действуют, а вот на изменения СSS-кода для изменения внешнего вида Боковой панели сайта никак не реагирует. Мой шаблон Twenty Fourteen. В нем баковая панель такая черная, мрачная, я хотел поменять ее цвет, но не получается. А если использовать плагин fourteen-colors.1.2, то придется переделать все остальное, что я уже оформил. Спасибо заранее за ответ.
Сергей Москвитин
25 Дек 2014Доброй ночи! В статье все подробно описано, да и на картинке показано за какую часть сайта отвечает тот или иной файл, в который и нужно вносить код. Ну еще зависит от того какой код вы хотите вставить. Пишите мне через страницу в “контакте” я вам постараюсь подсказать.
Галина
24 Дек 2014Добрый день, мне нужно вставить код в исходный код главной страницы, не могу понять куда мне нужно “влезть”.
Сергей Москвитин
23 Авг 2014Добрый день Юрий! Вообще такого материала в интернете много. Нужно немного поспрашивать поисковики. Например забейте в поисковике “Как сделать выпадающее меню”, ну или что-то подобное.
Юрий
23 Авг 2014Зравствуйте, Сергей. Искал ответ на свой вопрос и попал на ваш блог. В данной статье ответа не нашел, но может вы мне подскажете хотя бы в каком направлении искать дальше. Интересуте вопрос, как внести изменения в главное меню темы? Конкретно – сделать его выпадающим. Сделать корректировку через файл header.php не представляется возможным, т.к. там нет html кода, отвечающего за структуру меню. Прописаны только команды на языке php, которые указывают непонятный путь к меню (надеялся найти в базе данных php MyAdmin, но не нашел) или генерируют. Но ведь где-то же должен быть код с тегами ul и li, отвечающими непосредственно за структуру… Вопрос: где искать?
Сергей
14 Янв 2014Добрый день Дмитрий! По идее если вы переходите по ссылке и она ведет на правильную страницу, а не на 404 то все работает нормально. Но если хотите еще перепроверить, то напишите мне через страницу “котнтакты” и я вам постараюсь ответить на вашу почту, как проверить и если будет необходимо откорректировать файл .htaccess для исправления ошибки с URL.
Сергей
14 Янв 2014На здоровье! А что именно вы искали?
Poluncev
14 Янв 2014Большое спасибо! Отличный список. Нашла то, что искала.о)
Дмитрий
14 Янв 2014Добрый день. Спасибо за внимание и ответ. Вот текст из письма аудитора
“10.На сайте обнаружены ссылки, с которых настроен редирект. Наличие редиректов не ошибка, обнаруженные на сайте редиректы представляют собой некорректные ссылки. Необходимо заменить ссылку в коде на верную, то есть убрать редирект. К примеру, http://opsihologe.ru/otzyvy/otzyvy-o-detskom-phixologe.html редирект на http://opsihologe.ru/otzyvy/otzyvy-o-detskom-psihologe.html”
Я спросил у них, в каком месте надо исправить данный редирект, на что сегодня они ответили мне, что это делается в файле .htaccess.
Меня просто смущает то, что при нажатии неверной ссылки http://opsihologe.ru/otzyvy/otzyvy-o-detskom-phixologe.html, я все равно попадаю на страницу сайта, а не на 404 вот что мне неясно. Если url неверный то по идее я должен попасть на 404,а не на страницу с исправленным url. Или, может быть, я ошибаюсь….
Сергей
14 Янв 2014Добрый день Дмитрий! Я честно говоря с такой ситуацией не сталкивался. Но как думаю, что надо просто исправить url статьи, что вы и сделали. А со временем статья переиндексируется поисковиками и все будет нормально. А еще вы спросите у аудиторов сайта пусть они разъяснят, что они имели ввиду “Надо удалить адрес в коде первого (неверного url)…”
Дмитрий
13 Янв 2014Добрый день. У меня такой вопрос. Когда создавал одну запись, то совсем забыл про транслит и плангин для ЧПУ мне оформил слово “психологе” так phixologe, после это заметил и исправил в url букву psiHologе. Аудиторы моего сайта сказали, что у меня осуществляется редирект со неправильного адреса через “х” на правильный через “h”. Надо удалить в коде адрес первого (неверного url).Вопрос: где найти в ворд пресс этот url чтобы удалить его????
Спасибо за ответ
Сергей
6 Ноя 2013Приветствую тебя Федор на блоге! Спасибо, что зашел в гости. Спасибо за подсказку. Что интересно в поисковике по названию эта статья находится на первой позиции и в яндексе и в гугле. Вот попробовал добавить в название слово “шаблон” – «файлы шаблона WordPress» и количество запросов в гугле выросло на порядок. Хотелось узнать твоего совета, может просто слово добавить и не менять само название. Вроде как статья находится в топе. Если у тебя будут советы в отношении моего блога, всегда рад принять их от профессионала.
Федор
6 Ноя 2013Здравствуйте Сергей я к Вам с ответным визитом.
Посмотрел Ваш блог все приятно и акуратно. Только не подумайте что поучаю. но советую изменить название этого поста.
Само по себе словосочетание “файл WordPress” неправильно, в крайнем случае “файлы темы WordPress”,а лучше “файлы шаблона WordPress” потому что по привычке их называют шаьлонами.
Например “Как редактировать шаблоны WordPress” хороший низкочастотник.
По нему Вы с такой статьей легко выйдете в ТОП и будете получать человек по 20-30 на эту страницу.
Удачи вам в развитии блога!
Сергей
13 Окт 2013Наталья, а в чем вы запутались. Что у вас не получается. Напишите, что вы хотите сделать и я вам попробую помочь.
Наталья
13 Окт 2013Сергей,спасибо! Я так то плохо понимала в кодах,а теперь вообще запуталась,сил нет!!! Прочитала уже 3 раза и все равно не могу ничего понять! Как в этом разобраться?
Сергей Москвитин
27 Июн 2013Привет Жень! Да статья получилась длинная, но я хотел рассказать все по шагам и как можно подробнее. Я люблю копаться в кодах мне это пока нравится. И вот какой-то код понравится сразу хочется его применить, а у автора нет описания подробного куда его вставить, и зачастую теряется пыл, откладываешь на потом. Я вот так сталкивался много раз и не я один. Читаешь на блогах много комментариев “А подскажите куда его конкретно ставить” вот и родилась идея описать все подробно, что-бы новичкам была шпаргалка да и самому не забывать.Так, что пользуйся и заходи в гости.
Евгений Ванин
27 Июн 2013Привет Сергей! Сегодня второй день подряд как познакомился с вашим блогом , спасибо огромное . Статья хоть и длинная но без этого ни как , сейчас постоянно приходиться редактировать свою тему и как раз работать с кодами , до этого пользовался методом тыка и периодически косячил . Спасибо