Поиск

Что означает код для вставки. Куда вставлять этот код в WordPress? Общая структура файлов темы

Здравствуйте, уважаемые читатели!

Поговорим о программном коде на сайте. Нередко у вебмастера возникает необходимость на одну или несколько страниц сайта вставить код. WordPress позволяет использовать php, java, html, css и т.п. код двумя способами: в качестве исполняемых команд, интерпретируемых движком сайта, и в виде доступного для чтения и копирования текста. В этой статье рассмотрим примеры того, как вставить код в страницу WordPress, чтобы он отображался корректно и красиво для посетителей.

Код в виде текста: зачем это нужно

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

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

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

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

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

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

Чтобы показать CMS, что определенный фрагмент кода должен выводиться на странице «как есть», его в текстовом редакторе WordPress необходимо выделить и «обернуть» тегом с помощью кнопки на панели инструментов:

Выглядеть на странице это будет примерно так:










Наименование 1 Наименование 2
Значение 1 Значение 2

Чтобы вставить код в страницу WordPress с заданными отступами, при переходе из визуального редактора контента в текстовый можно использовать тег html

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

Пример того, как в WordPress вставить html-код на страницу без плагинов с помощью тега

Наименование 1 Наименование 2
Значение 1 Значение 2

К тегу

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

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

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

Плагины вставки кода для WordPress

Предлагаем на выбор несколько плагинов из официального репозитория WordPress, позволяющих выводить любой код (php, java, html, css) красиво: построчно и с соответствующей подсветкой элементов.

SyntaxHighlighter Evolved

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

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

Или использовать соответствующие шорткоды:

Пример пример пример пример

WP-Syntax

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

WP-Syntax не имеет собственной страницы настроек. Этот плагин WordPress для редактирования кода, точнее, для его вставки и изменения вида подсветки синтаксиса использует тег

С атрибутом выбора языка:

пример
пример
пример

Список поддерживаемых языков приводится на странице плагина.

Атрибут line в теге служит для отображения нумерации строк, его значение соответствует номеру строки, с которого начинается отсчет. Если код содержит html-объекты, рекомендуется использовать атрибут escaped со значением true в качестве опции:

пример

Пример вывода и подсветки CSS-кода с помощью плагина:

1 2 3 4 5 6 7 8 .block { border : 2px #8E0505 ; color : #2D0000 ; /*цвет текста*/ padding : 2px ; /*внутренние отступы*/ text-align : left ; /*выравнивание текста*/ font-family : arial; font-size : 14px ; }

Block { border: 2px #8E0505; color: #2D0000; /*цвет текста*/ padding: 2px; /*внутренние отступы*/ text-align: left; /*выравнивание текста*/ font-family: arial; font-size: 14px; }

При переключении из html-редактора в визуальный режим тег WordPress интерпретирует тег

И код не отображается правильно. Поэтому при редактировании статей со вставками блоков кода необходимо использовать редактор контента в режиме html.

Code Prettify

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

И  на странице. Простое решение на основе модуля Google Code Prettify library
 для тех, кто не желает вникать в особенности форматирования синтаксиса выводимых на сайте блоков с программным кодом.

Заключение

Рассмотренные в статье решения на основе плагинов — лишь малая часть того, что предлагает хранилище плагинов WordPress. Перейдя по ссылкам меню консоли «Плагины — Добавить новый» на страницу поиска, по ключевым словам Highlight и Syntax можно обнаружить еще несколько десятков аналогичных плагинов, позволяющих красиво оформить программный код. Важно понимать, насколько уместным и необходимым будет подобный плагин на сайте. Возможно, именно в вашем случае вставить код в страницу WordPress будет проще вручную в текстовом редакторе, воспользовавшись тегами

И .

Хотите узнать, как вставить код на сайт WordPress проще всего, чтобы его можно было скопировать прямо из статьи?

Мне захотелось с этим разобраться.

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

Отставать нельзя!

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

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

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

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

До сих пор я применяла для этого только один способ: вставляла – фотографию экрана своего компьютера.

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

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

Многие ссылаются на плагины:
WP Syntax в связке с WP Syntax Button ;
SyntaxHighlighter Evolved ;
Auto SyntaxHighlighter .

Нашла описание, как вставить код и без плагина. Для этого раньше использовали тег xmp (открывающий и закрывающий). Но сейчас он устарел, и вместо него в HTML рекомендуют применять тег pre (открывающий и закрывающий).

Но вставить программный код в статью только с помощью специальных тегов pre или xmp у меня не получилось. Пробовала и в контейнер div их помещать. И копировала полную фразу с сайтов, которые это рекомендовали.

Эксперимент не удался. Код при редактировании в режиме HTML не сохранялся. При переключении вкладок (Визуально/Текст) он просто исчезал из текста статьи. Почему-то это не срабатывает. Кто знает, напишите.

Попалась на глаза информация, что это можно сделать только после установки плагина WP Syntax . Т.е. все равно без плагина не обойтись. Версия WordPress у меня была установлена самая новая (на тот момент — 4.3.1).

Но можно поступить и так. Увидели вставленный код на каком-то сайте, клацнули на нем правой кнопкой мыши, чтобы выбрать из контекстного меню «просмотр кода элемента» и просмотрели код. Так можно узнать, как он вставлен.

Таким образом, я определила, что на одном из знакомых мне сайтов, код вставлен с помощь плагина Crayon Syntax Highlighter .

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

Пользоваться им оказалось очень просто. Никакие настройки я не меняла, хотя там их довольно много. Все оставила по умолчанию (так, как настроил сам автор).

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

Появляется окно для вставки кода.

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

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

Все оказалось настолько просто, что лучшего я решила и не искать.

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

Например, этот.

Код функции, чтобы скрыть логин администратора сайта WordPress в комментариях

add_filter("comment_class", "udalit_class_avtora_kommentariya"); function udalit_class_avtora_kommentariya($klassi){ foreach($klassi as $kluch=>$klass) : if (strstr($klass, "comment-author-")) : unset($klassi[$kluch]); endif; endforeach; return $klassi; }

add_filter ("comment_class" , "udalit_class_avtora_kommentariya" ) ;

function udalit_class_avtora_kommentariya ($ klassi ) {

foreach ($ klassi as $ kluch = > $ klass ) :

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

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

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

Попробуем решить две проблемы сразу, рассказав о наиболее распространенных способах вставки кода / сниппетов (фрагментов) JavaScript для сайтов:

  • На WordPress.
  • Самописных админках (с помощью олдскульного FTP).
  • На Squarespace.
  • На Shopify.

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

Где взять код для установки

Посмотрим, где искать код для инсталляции на примере сервиса Crazy Egg.

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

Как вставить код на сайт WordPress

Можно воспользоваться специальным плагином – Tracking Code Manager.

Чтобы вставить Tracking Code Manager, входим в админку сайта и в панели управления ищем раздел плагины.

Выбираем функцию «Add New» (добавить новый).

Справа появится строка поиска. Вводим «Tracking Code Manager», потом жмем «Install Now».

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

Жмем «Add new Tracking Code».

Можно обойтись и без плагина Tracking Code Manager. В таком случае наш вариант – вставить код в файл header.php темы WordPress (об этом дальше).

Как установить код на сайт WordPress.com

Сайт на базе WordPress и сайт WordPress.com – две разные вещи.

Сайт на базе WordPress – это сайт, который управляется с помощью CMS, установленной на собственном сервере. Это значит, что вы заплатили за доменное имя (myname.com) и за хостинг.

Сайт WordPress.com бесплатный. Вы можете зарегистрировать на нем сайт без оплаты хостинга. При этом URL сайта будет: myname.wordpress.com. Чтобы изменить доменное имя, придется выполнить несколько дополнительных шагов.

Управляя сайтом на WordPress.com, вы ограничены в выборе кодов и фрагментов JavaScript, которые можете установить. Причина в протоколе безопасности – разработчики не позволяют пользователям вставлять коды на платформу. К примеру, разработчики MySpace позволяли. Очевидно поэтому сайт за шесть лет опустился с 5 места в мире на 1967.

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

Как установить коды и сниппеты JavaScript на самописную админку

С помощью FTP. Придется вернуться к основам основ.

Сейчас многие сайты самописные. Самописный сайт создан с нуля, для управления контентом не использует CMS.

Представим, что у нас именно такой сайт. Поставить на него код будет чуть сложнее, чем на WordPress, потому что придется вспомнить про FTP.

FTP-менеджеры вроде FileZilla позволяют перетаскивать файлы и изображения с сайта на сервер. С помощью программы вы можете добавлять файлы на сервер или скачивать их, заменять старые файлы на новые, удалять ненужные данные, менять названия доков.

В протоколе передачи данных нет ничего сложного: уже через 20 минут можно почувствовать себя профи. Для большинства людей самая сложная часть – просто связаться с сервером.

Если у вас возникли любые проблемы с сервером, свяжитесь с хостингом. Это может занять час, зато по истечении 60 минут вы будете знать всё, что нужно. Я обычно рекомендую записывать такие разговоры через ScreenRecorder. Или по меньшей мере делать пометки вручную.

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

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

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

Предупреждение

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

Как вставить код с помощью header.php

Допустим, у нас есть сайт, для управления которым мы используем WordPress. Чтобы вставить код, нам нужно найти файл header.php или другой файл с названием header или head .
Header нужен для активации кода или фрагмента JavaScript на всех страницах сайта. Чтобы открыть файл, можно использовать бесплатную программу вроде Sublime Text. С ее помощью нужно открыть файл, который хранится на компьютере, а не похожий файл на сервере.

Открыв файл в Sublime Text, мы увидим радугу из цветного кода. Не бойтесь, там все просто.

Все страницы делятся на две секции – The head (заголовки) и the body (тело). Заголовки обозначаются кодом HTML и . Тело – и .

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

После того, как вы вставили код или сниппет, сохраните файл и загрузите его на сервер. Готово.

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

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

Как вставить код на сайт Squarespace

Squarespace упростил задачу своим пользователям. Чтобы вставить код или сниппет JavaScript, можно использовать «code injection». В меню переходим по вкладкам Settings > Advanced > Code Injection. Можно добавить код в или футер сайта.

Находим настройки.

Листаем ниже и кликаем по «Advanced».

Выбираем «Code Injection».

Вставляем код и сохраняем изменения.

Как вставить код на Shopify

В панели управления найдите раздел с интернет-магазинами Online Store и выберите темы Themes.

Чтобы получить доступ к нужной вкладке, кликните по «Actions» и выберите «Edit HTML/CSS».

Нам нужны фрагменты.

Клик по опции откроет диалоговое окно с возможностью добавить новый фрагмент.

Дайте название сниппету и нажмите на кнопку Create snippet.

Введите код для сниппета в зону для «tracking snippet.liquid». Нажмите «сохранить».

Как вставить код, если сайт на Wix

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

Но Wix предлагает решение в виде Wix App Market . Там можно найти разнообразные виджеты для маркетинга, социальных медиа и аналитики. Кстати, там же можно проголосовать за наиболее необходимый виджет.

" я рассказывал как зарегистрироваться на сайте liveinternet и получить html код счётчика.

Для того чтобы вставить код, будим использовать замечательный плагин Sourcerer. Этот плагин предназначен для сайтов сделанных на платформе joomla, и служит для вставки любых кодов, таких как (PHP, HTML, CSS, JavaScript).

Сразу хочется отметить, что бесплатная версия этого плагина, немного урезана по функционалу. Но это ни как не сказывается на основных функциях. Скачать плагин Sourcerer для joomla 3 можно

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

Как вставить код на сайт с помощью модуля

Первым делом нужно зайти в админку joomla 3. Далее: Расширения > Менеджер модулей .

После нажмите кнопку " Создать ". Тем самым мы создадим новый модуль.

В пункте "Выбор типа модуля", кликнуть по ссылке "HTML-код".

В созданном модуле, необходимо заполнить поле "Заголовок".

Теперь скопируйте необходимый код, и вставьте его между этими тегами.

Остаётся заполнить стандартные поля модуля. Где вы укажите: показывать заголовок или нет, выберите позицию модуля и в строке состояние, поставите "Опубликовано".

В завершении, нажмите на кнопку "Сохранить".

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

Как вставить код в статью

После того как установили плагин Sourcerer, в редакторе материала, пропишите теги {source} {/source} и между ними вставьте необходимый код. Как видите, всё тоже самое, как и вмодуле.

На этом всё, если у кого то возникнут вопросы, задавайте их в комментариях. Повторюсь, аналогично вы можете вставлять на сайт joomla 3 (PHP, CSS, JavaScript) коды.

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

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

Итак, поехали!

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

Не буду особо распинаться. Скажу коротко, у вас 2 варианта :

1. Встроенный редактор WordPress

Находится в Консоли в меню Внешний вид → Редактор .

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

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

Для Windows я пользуюсь Notepad++ и Adobe Dreamweaver . Для MacOS могу посоветовать Coda , а для Linux ничего советовать не буду, эти ребята и так отлично знают, чем лучше править код. :-)

  • Плюсы : очевидны, удобная разметка и подсветка синтаксиса. Например в Notepad++ , нажимая на любой тег, подсвечивается и его закрывающийся тег-собрат. Это очень удобно.
  • Минусы : это все же отдельные программы, с которыми вам придется самому разобраться. Некоторые программы бесплатные, а некоторые платные.

Обобщенная структура WordPress темы

Файлы темы оформления

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

В случае с WordPress этот набор файлов будет отличаться в каждой теме по-своему. Но есть одна общая черта : этот набор состоит из файлов с расширением .php , .css и .js (сам WordPress целиком написан на языке PHP , так что .php файлы - основная часть любой темы оформления).

В каждой теме оформления должен присутствовать минимальный набор файлов для корректной работы в среде движка WordPress. Вы можете открыть папку со своей активной темой (корень_сайтаwp-contentthemesваша_тема ) и, скорее всего, вы найдете там все эти файлы:

Внешний вид сайта

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

Давайте для примера возьмем наш блог . Вот как выглядит его главная страница:

Я специально скомпоновал изображение так, чтобы было видно все основные области.

Как видите, главная страница нашего блога состоит из 4-х частей: шапки , подвала , основной части и боковой панели . Справедливо отметить, что такая структура является наиболее распространенной в большинстве тем оформления WordPress.

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

Подробнее о файлах и коде

На изображении выше вы видите, что за каждую область сайта отвечает определенный файл в папке темы оформления. Вы видите 4 области , которым соответствуют 4 файла , но на самом деле файлов больше. Я опишу только самые важные файлы темы.

header.php - Шапка

Шапка - это верхняя область сайта, в которой содержится логотип , название сайта , верхнее навигационное меню , дополнительно могут вставляться рекламные баннеры , закрепленные страницы . Это верхняя (первая) область, соответственно и обрабатываться этот файл будет в первую очередь. Это означает, что в файл header.php также прописываются все подключаемые JavaScript файлы, CSS файлы и так далее.

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

footer.php - Подвал

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

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

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

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

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

sidebar.php - Боковая панель

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

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

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

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

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

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

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

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

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

(это картинка, а не фрагмент кода)

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

Это основное и единственное правило - не нарушить целостность и структуру уже существующего кода.

Если код, который вы вставляете, начинается открытием php тега , то соответственно и вставлять его нужно после закрытия предыдущего . Ничего сложного.

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

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

Все оформление , фон , шрифты , цвета , интервалы отступа , заливка , тени , градиенты - за все это отвечает единый файл style.css , поэтому его важность сложно переоценить.

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

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

Какие еще файлы мы забыли?

Я просто коротко перечислю с описанием:

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