Куда правильно вставить код в файл WordPress?

kupi

kupi

Куда правильно вставить код в файл WordPress?[hana-code-insert name='Vstavka-v-statji-privetstvie' /]

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

Куда правильно вставить код в файл WordPress?


Для многих новичков да и не только, кто решил заменить плагин или настроить виджет и впервые столкнулся с вставкой кодов это процедура становиться проблемой. Проблема заключается в том, что когда встречаешь в статьях фразы – Взять и вставить код в файл style.css или в файл footer.php, header.php, а зачастую в functions.php это нам ни о чем не говорит.

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

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


Вариантов у нас с вами немного, а вернее всего два. Это:

1. Редактирование через встроенный редактор WordPress.

редактор WordPress

Данный редактор находиться в Консоли админки сайта- Внешний вид → Редактор.

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

Его Минус: для внесения правок вам доступны не все файлы вашей темы, да и синтаксис не подсвечивается. Это делает редактор неудобным для ответственной работы с кодом.

2. Отдельные программы для правки кода.

Для Windows используем Notepad++ .

программа 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 могут прописываться все подключаемые скрипты – файлы JavaScriptCSS  и т.д. К примеру кусок файла:

фрагмент шапки сайта-header

footer.php — Подвал сайта

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

К примеру часть файла:

фрагмент файла footer

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

index.php — Основная часть сайта

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

Следующий пример кусочка файла:

фрагмент файла index

sidebar.php — Боковая панель сайта

Боковая панель сайта — это блок сопровождения информации выводящий виджеты, форму поиска, социальные кнопки, облако меток, рекламы, баннер и прочую информацию. Боковая панель сайта может располагаться как справа так и слева от основной части. А может у нее быть сразу 2 боковые панели, а может и вообще отсутствовать.

Очередной пример кода файла: 

фрагмент файла sidebar

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

виджеты

functions.php — Файл конфигурации темы сайта

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

А вот часть файла: 

фрагмент файла functions

Как вставляется код

Копируется код. Затем открывается файл functions.php (аналогично можно сделать с другим файлом) с помощью встроенного редактора или программы Notepad++(о которой говорилось выше),опускаетесь в конец файла и вставляете скопированный код перед закрытием php тега?>

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

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

style.css — Таблица стилей оформления темы

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

А вот очередной фрагмент файла:

фрагмент файла styleЭтот файл в отличии от всех остальных, описанных выше, целиком написан с использованием разметки веб-стилей CSS. Все коды, что касаются настройки оформления, добавляются в этот файл. Чтобы вставить в него какой-то код вам необходимо прокрутить в конец файла и добавить свой css код с начала новой строки.

Второстепенные файлы

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

404.php — это файл, который отвечает за страницу ошибки. Если вы или кто-то перешёл по ссылке, которая ссылается на несуществующий пост или страницу на вашем сайте, то он попадает на страницу 404.php, где будет надпись «Извините, такой страницы нет.», или что-то подобное.

Фрагмент файла:

фрагмент файла 404

archive.php — этот файл в ответе за отбор и вывод записей по отобранным критериям: рубрике, автору, днюмесяцугоду или по метке.

Фрагмент файла:

фрагмент файла archive

comments.php — здесь все просто, файл в ответе за вывод комментариев ваших страниц и записей. Файл содержит настройки формы комментирования.

Фрагмент файла:

фрагмент файла comments

page.php — файл, отвечает за публикации и вывод Страницы. В верху Шапки блога есть меню, которое открывает каждый элемент своей Страницы.

Фрагмент файла:

фрагмент файла page

search.php — данный файл в ответе за поиск на сайте и вывод его результатов.

Фрагмент файла:

фрагмент файла search

single.php — файл отвечает за публикацию и вывод Записей

Фрагмент файла:

фрагмент файла single

Вот и все! Статья получилась большая, но она наверное того стоит. Надеюсь эта статья разъяснила вам некоторые моменты, и теперь вам будет проще разобраться, куда правильно вставить код в файл WordPress.

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

Желаю вам Друзья удачи! Да прибудет с вами сила!

С Уважением Сергей Москвитин


И в завершении несколько слов…

изречение 9

Спасибо Вам за то, что поделились статьей в социальных сетях!

labelcss, javascript, php, код, настройка wordpress, разработка, сниппеты, советы, структура файлов

Об Авторе

Автор и администратор этого сайта. С 1974 года Радиолюбитель, Радионаблюдатель, Радиохулиган, Закончил ТРТИ, Командир группы Комсомольского оперативного отряда, Начальник техбюро по изготовлению Магнитофона Ростов 105 - 113, Служба безопасности, Полковник таможенной службы. С 2012 года - Интернет, ЮТУБ, блоггинг, маркетинг, инфобизнес, безопасность.

27 комментариев

  1. Наталья 14 апреля 2017 Ответ
    • Сергей МосквитинАвтор 16 апреля 2017 Ответ
  2. Александр 18 декабря 2016 Ответ
  3. Адениум. 13 сентября 2016 Ответ
  4. Анна 11 апреля 2016 Ответ
    • Сергей МосквитинАвтор 12 апреля 2016 Ответ
  5. Julia 21 февраля 2016 Ответ
  6. Батир 17 ноября 2015 Ответ
    • Сергей МосквитинАвтор 19 ноября 2015 Ответ
  7. Галина 24 декабря 2014 Ответ
    • Сергей МосквитинАвтор 25 декабря 2014 Ответ
  8. Юрий 23 августа 2014 Ответ
    • Сергей МосквитинАвтор 23 августа 2014 Ответ
  9. Poluncev 14 января 2014 Ответ
    • СергейАвтор 14 января 2014 Ответ
  10. Дмитрий 13 января 2014 Ответ
    • СергейАвтор 14 января 2014 Ответ
      • Дмитрий 14 января 2014 Ответ
        • СергейАвтор 14 января 2014 Ответ
  11. Федор 6 ноября 2013 Ответ
    • СергейАвтор 6 ноября 2013 Ответ
  12. Наталья 13 октября 2013 Ответ
    • СергейАвтор 13 октября 2013 Ответ
    • Сергей Москвитин 27 июня 2013 Ответ

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *