код главной страницы вордпресс
Как добавить код в head WordPress
Хотите быстро добавить код в head WordPress? Разберем простые и рабочие способы.
Код в шапку сайта вставляют с разных причин. Это может быть статистика от Google или Яндекс, JavaScript-скрипт какого-либо сервиса (например, реклама), новая функция сайта, CSS-стиль своего блока.
Зачем нужен блок в коде страницы?
Как добавить код в head WordPress?
Для ВордПресс есть несколько методов. Выбирайте тот, который вам удобен.
Через плагин
Этот способ самый простой и рекомендуется новичкам.
Head, Footer and Post Injections
Это бесплатное WP-расширение, которое самостоятельно добавляет код в head.
Для этого, во-первых, установите плагин.
После активации откройте в админке раздел Настройки > Header and Footer и перейдите на вкладку Head and Footer.
Страница выбранной вкладки имеет блок page section injection, который нам нужен.
Тут есть 2 текстовых поля. Первое отвечает за вывод в нем кода на всех страницах сайта. Второе добавляет код только на главной странице ВП-сайта.
Чтобы ваши изменения вступили в силу, не забудьте нажать кнопку Сохранить.
Clearfy Pro
Это премиальное решение для ВП имеет много полезных функций. В основном — это очистка ненужного кода. Одна из опций плагина — вставка кода в head. Для этого:
в Clearfy Pro» width=»1049″ height=»254″ srcset=»https://wpplus.ru/wp-content/uploads/2020/03/dobavlyaem-kod-v-head-5.png 1049w, https://wpplus.ru/wp-content/uploads/2020/03/dobavlyaem-kod-v-head-5-300×73.png 300w, https://wpplus.ru/wp-content/uploads/2020/03/dobavlyaem-kod-v-head-5-768×186.png 768w, https://wpplus.ru/wp-content/uploads/2020/03/dobavlyaem-kod-v-head-5-1024×248.png 1024w» sizes=»(max-width: 1049px) 100vw, 1049px»/>
Через правку шаблона темы
Если вы не хотите устанавливать дополнительные плагины на свой веб-ресурс, то код в head можно добавить вручную в нужном шаблоне вашей WordPress-темы.
Для этого перейдите в каталог wp-content/themes и найдите файл header.php.
В каждой теме содержимое файла header.php может отличаться. Но основные его блоки похожие.
» width=»1009″ height=»451″ srcset=»https://wpplus.ru/wp-content/uploads/2020/03/dobavlyaem-kod-v-head-4.png 1009w, https://wpplus.ru/wp-content/uploads/2020/03/dobavlyaem-kod-v-head-4-300×134.png 300w, https://wpplus.ru/wp-content/uploads/2020/03/dobavlyaem-kod-v-head-4-768×343.png 768w» sizes=»(max-width: 1009px) 100vw, 1009px»/>
Через хук WordPress
ВордПресс имеет специальный хук, который добавит код в head. Чтобы его использовать, откройте файл functions.php. Это основной конфигурационный файл темы, который находится в корне ее папки. Например, для указанной темы он находиться по адресу
Чтобы добавить стиль или скрипт в шапку сайта, в самый конец этого файла вставьте код
Как добавить код на главную страницу блога на вордпресс для проверки собственности
У каждого владельца блога или сайта на WordPress обязательно возникнет трудность по добавлению кода на свой блог.
Это может быть нужно, как для проверки собственности сайта, так и добавления его в каталог сайтов от Google или каталог Яндекса или каталог Bing или другой любой каталог.
Хотя возможна и ситуация когда нужно добавить статистику от Гугла – Google Analytics. И это это можно легко решить если знаешь куда заходить и что пошагово делать.
Многие не знают, как это сделать. Я вот сегодня столкнулся с такой проблемой и мне удалось её решить.
Теперь рассмотрим, что же делать пошагово.
После того как вы получили код на сайте для проверки собственности или добавлении статистики, мы идем на ваш сайт или блог вставляем его.
1) Заходим в админку
2) Видим категорию Внешний вид и далее выпадает меню в котором выбираем Редактор и заходим туда
3) В боковой панели выбираем Заголовок (header.php) и заходим в него.
Перед следующей процедурой я вам настоятельно рекомендую скопировать код ( включая от слов до следующего включительно ), который у вас уже есть в Заголовке (header.php).
Чтобы если у вас не получится с первого раза вставить код вы могли его восстановить и все работало корректно, а ваша главная страница отображалась правильно.
4) Далее копируем код который нужно вставить и вставляем ниже слова
Код для добавления в каталог сайтов Гугла
» gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ alt=»Вставить код ниже слова » width=»604″ height=»366″ data-lazy-src=»http://cs409628.vk.me/v409628119/24ee/3DPZ1Ili4UY.jpg»>
5) Код добавлен и вы можете видеть если это баннер, что он работает на главной странице своего сайта.
Также можно добавить и баннер на главную страницу своего сайта или блога на вордпресс.
Страницы » Настройка главной (начальной) страницы
Главная страница — это входная дверь вашего сайта. Выполнив действия, описанные в этом руководстве, вы можете сделать главной любую созданную вами страницу.
Шаг 1: Создание «главной» страницы
Если у вас уже имеется новая страница, которую предполагается использовать как главную, пропустите этот шаг и переходите к шагу 2.
Шаг 2: Настройка статической главной страницы
Чтобы установить новую страницу в качестве главной страницы сайта, выполните следующие действия.
Чтобы появилась эта опция, у сайта должна быть как минимум одна опубликованная страница.
В окне предварительной настройки новая выбранная страница будет отображаться как начальная страница вашего сайта.
Нажмите кнопку Сохранить изменения, чтобы сохранить настройки главной страницы.
Нужно быстро заменить страницу, которая назначена главной страницей сайта? Другой способ: перейдите в раздел меню Мой сайт → Страницы и нажмите значок с многоточием рядом со страницей. Затем выберите «Установить как главную страницу»
Шаг 3: Создание страницы «Блог» (необязательно)
Если вы планируете вести блог, можно настроить отдельную страницу, на которой будут отображаться все ваши записи в блоге.
Помните: чтобы страница появилась в раскрывающемся меню страницы «Записи», она должна быть опубликована.
Шаг 4. Создание меню
После того как страницы созданы, можно настроить меню навигации сайта. Нажмите эту кнопку, чтобы узнать, как это сделать
Дополнительные возможности настройки
Многие элементы статической страницы можно изменить с помощью пользовательских CSS. Расширенные возможности пользовательской настройки тем, в том числе CSS, доступны в тарифных планах не ниже WordPress.com Premium.
Шаблоны главной страницы и ваша тема
У разных тем могут быть разные макеты главной страницы. В зависимости от инструкций к теме вам может потребоваться изменить шаблон страницы или настроить области избранного содержимого.
Кроме того, в некоторых темах для главной страницы не предусмотрены области отображения виджетов на боковой панели. Вы можете быть уверены, что при переходе на одну из таких тем содержимое, созданное вами на боковой панели не пропадёт, — оно просто не будет отображаться на главной странице.
Лучший способ узнать, как изменить дизайн главной страницы темы — изучить инструкции в разделе «Информация» соответствующей темы в каталоге тем.
Как изменить домашнюю страницу WordPress (3 метода)
Домашняя (главная) страница задает тон всему вашему сайту. Если на ней не отображается нужный контент или она не так как вам хочется, вы можете внести некоторые изменения. Если у вас нет опыта создания веб-сайтов, такая перспектива покажется пугающей. Но есть хорошая новость: WordPress предоставляет множество возможностей для изменения вашей домашней страницы, и это несложная задача. Есть несколько способов сделать так, чтобы ваш дом лучше передавал ваше сообщение.
В этом руководстве мы расскажем, что такое домашняя страница WordPress, почему и как ее можно изменить. Покажем несколько способов редактирования и настройки домашней страницы.
Что такое домашняя страница WordPress
Домашняя страница вашего сайта похожа на приветственный коврик у входной двери. Это первая страница, которую видят посетители, набрав URL-адрес. Поэтому хочется, чтобы она произвела на них сильное первое впечатление.
Домашняя страница должна давать посетителям четкое представление, о чем ваш сайт и что он может им предложить. Например, домашняя страница Slack отлично демонстрирует продукт и привлекает внимание людей:
По умолчанию для многих тем WordPress на домашней странице отображаются последние посты в блоге.
Но если у вас нет блога или он не в центре внимания веб-сайта, то такая подача домашней страницы вам не подойдет.
Возможно, вы захотите периодически изменять домашнюю страницу. Например, провести праздничную распродажу или мероприятие. Другими словами, причин для изменения домашней страницы WordPress достаточно много.
Как установить статическую домашнюю страницу
Если не нужно, чтобы посты блога отображались на главной странице, вы можете вместо этого установить «статическую» домашнюю страницу. Статическая страница показывает контент, который не меняется. Можно иметь статическую домашнюю страницу и блог, просто записи блога не выводить на главную страницу.
Войдите в панель администратора и нажмите Pages> Add New:
Первый шаг – создать новую страницу для вашей домашней страницы и, если хотите, для блога.
Дайте своей домашней странице WordPress имя и нажмите кнопку «Опубликовать». Затем повторите эти шаги еще раз, чтобы создать страницу блога.
Теперь, когда у вас есть готовые страницы, укажите WordPress, для чего их использовать.
Перейдите на страницу «Настройки»> «Чтение» и в разделе «Отображение вашей домашней страницы» выберите Статическая страница. Затем используйте раскрывающиеся меню, чтобы выбрать домашнюю страницу и страницу записей:
Как изменить домашнюю страницу WordPress (3 метода)
Теперь, когда у вас настроена домашняя страница, можно создать ее и добавить контент. Вы можете использовать три различных инструмента.
1. Использование настройщика тем для редактирования домашней страницы
Многие темы WordPress предоставляют базовый дизайн домашней страницы, а также некоторые варианты его редактирования. Доступ к этим параметрам можно получить через настройщик тем.
В админке нажмите «Внешний вид»> «Настроить», чтобы запустить инструмент. Настройщик предоставляет предварительный просмотр в реальном времени. При редактировании домашней страницы вы сможете видеть, как эти настройки влияют на внешний вид вашего сайта.
Эти изменения не вступят в силу, пока вы не нажмете кнопку «Опубликовать», поэтому экспериментируйте.
В зависимости от выбранной темы у вас могут быть разные варианты изменений. Перемещайтесь по вкладкам меню или щелкайте любую область со значком синего карандаша, чтобы отредактировать ее:
Если в тему включены несколько шаблонов страниц, обязательно ознакомьтесь со всеми ними.
Некоторые темы, например, предоставляют выбор, где разместить боковую панель, или позволяют полностью удалить этот элемент для страницы во всю ширину:
Если на домашней странице есть разделы, которые не нужны, можете удалить их через настройщик темы. Перейдите к элементу в меню и щелкнув значок глаза рядом с названием раздела:
Вы всегда сможете вернуть любые области, которые вы удалили, снова щелкнув тот же значок. А если хотите изменить порядок элементов в столбце, перетащить их.
2. Редактирование домашней страницы WordPress с помощью редактора блоков
Даже если вы уже внесли изменения через настройщик темы, можно внести дополнительные изменения с помощью редактора блоков. Он предлагает больше возможностей для настройки дизайна и макета домашней страницы.
Для начала перейдите на свою домашнюю страницу из панели администратора, нажав «Страницы», и выберите страницу, которую установили в качестве домашней. С помощью редактора блоков на домашнюю страницу можно добавлять много разных типов контента.
Возможно, вы захотите начать с небольшого текста-описания сайта и то, чем вы занимаетесь. Щелкните страницу и начните печатать. Соответствующий блок абзаца будет создан автоматически.
Можно самостоятельно выбрать блок, щелкнув значок плюса в верхнем левом углу экрана или когда он появится в окне редактора. Выберите или найдите блок абзаца:
После того, как вы ввели весь текст, используйте меню настроек блока, чтобы сделать текст красивым. В разделе «Параметры текста» можно изменить размер текста, выбрав предустановленный или нестандартный размер, выбрать стиль.
Чтобы добавить немного цвета, изучите настройки цвета. Опять же, можно выбрать из набора предопределенных цветов или использовать собственный фирменный цвет:
Чтобы добавить на домашнюю страницу изображения, нажмите на символ плюса и выберите блок изображений:
Загрузите изображение из своей медиа библиотеки или добавьте его через URL-адрес. А чтобы настроить выравнивание изображения или переместить его вверх и вниз по странице, используйте панель инструментов прямо над блоком. Обратите внимание, что под картинкой есть место для включения подписи.
На этом этапе вы можете добавить столько блоков, сколько контента необходимо расположить на главной странице. Чтобы получить доступ к другим блокам, щелкните значок плюса. В появившемся меню выберите нужный блок. Или нажмите «Просмотреть все», чтобы увидеть все доступные блоки.
Например, если вы планируете включить сочетание мультимедиа и текста, то используйте отдельные блоки абзацев и изображений. Но можно попробовать вместо этого использовать и блок Media & Text:
Этот блок позволяет отображать как мультимедийный, так и письменный контент в одном блоке в различных конфигурациях:
Чтобы удалить блок, просто щелкните три вертикальные точки на панели инструментов над ним и выберите «Удалить блок». С помощью этих инструментов можно создать практически любую домашнюю страницу, которую можете себе представить.
3. Изменение домашней страницы WordPress с помощью классического редактора
Если вы предпочитаете работать с классическим редактором, все равно сможете создать потрясающую домашнюю страницу.
Нажмите «Страницы», а затем выберите страницу, которую вы установили в качестве домашней страницы.
Чтобы добавить текст, просто начните печатать. По умолчанию текст будет абзацем, но можно использовать раскрывающееся меню для создания заголовка:
В этом раскрывающемся меню можно изменить текст абзаца на разные заголовки.
Панель инструментов рядом с этим раскрывающимся списком позволяет вносить дальнейшие изменения в текст: выделить его жирным или курсивным шрифтом, изменить выравнивание и создать маркированные или нумерованные списки. Если нужно добавить цитату на свою страницу, то это можно сделать тоже здесь.
Наконец, есть кнопка, которую вы можете использовать для добавления тега «Читать дальше». Это будет полезно для анонсов статей.
Последняя кнопка в строке открывает группу инструментов для стилизации текста, например добавления цветов или изменения размера:
Вы также можете добавлять изображения и другие материалы на свою страницу с помощью классического редактора. Для этого нажмите кнопку «Добавить медиа», чтобы открыть новое окно. Нажмите кнопку «Выбрать файлы», чтобы добавить новые файлы в медиатеку:
Вы можете загружать файлы со своего устройства, чтобы добавить их в свою медиатеку.
Из этого окна вы также можете получить доступ к ранее загруженным файлам, щелкнув вкладку Медиа библиотека. Выберите файл, который хотите добавить, и нажмите кнопку «Вставить на страницу»:
Изображение появится на вашей странице. Щелкнув по изображению, вы получаете доступ к параметрам изображениям: изменить выравнивание, отредактировать или удалить его:
Нажав кнопку «Предварительный просмотр», посмотрите, как выглядит страница. Если все нравится, нажмите кнопку «Опубликовать», чтобы сохранить изменения и сделать их видимыми на своем веб-сайте.
Как создать меню для вашей домашней страницы
Хотя это меню, вероятно, присутствует на большинстве страниц вашего сайта, оно будет особенно полезно тем, кто впервые попадает на вашу домашнюю страницу.
На панели управления администратора нажмите «Внешний вид»> «Меню».
Если у вас еще нет меню, вам будет предложено создать его, или нажмите кнопку «Создать меню». Назовите новое меню, чтобы отличать его от других меню:
Следующим шагом будет добавление страниц в меню. Вы можете добавить их по отдельности или установить флажок «Автоматическое добавление страниц», тогда будут добавляться все страницы верхнего уровня.
Если предпочитаете выбирать страницы самостоятельно, выберите вкладку «Просмотреть все» в столбце слева. Установите флажки напротив страниц, которые хотите добавить, и нажмите кнопку «Добавить в меню»:
Теперь, когда вы добавили свои страницы в меню, определите порядок, в котором они будут отображаться: просто перетащив элементы меню на нужные места.
Здесь же можно вложить одни элементы в другие для создания выпадающего меню. Это позволит добавлять больше ссылок в навигацию, не делая ее загроможденной.
Все, что вам нужно сделать, это перетащить дочернюю страницу ниже и немного правее родительской страницы:
В зависимости от вашей темы, может быть несколько вариантов того, где на странице будет отображаться меню. Популярные варианты включают нижний колонтитул в верхней части страницы и боковые панели.
Хорошо продуманная домашняя страница может дать посетителям точное представление о вашем сайте. При правильной настройке она может стать мощным инструментом для сайтов электронной коммерции, личных блогов и всего, что между ними.
Однако есть сценарии, когда вам нужно изменить свою домашнюю страницу, чтобы отобразить информацию о вашем бренде, новую услугу или акцию. Благодаря WordPress у вас есть разные способы изменения и редактирования домашней страницы WordPress:
У вас все еще есть вопросы о внесении изменений в вашу домашнюю страницу WordPress? Задайте нам вопрос в разделе комментариев.
Куда вставлять этот код в WordPress? Общая структура файлов темы
В наших уроках мы часто приводим примеры по улучшению и расширению встроенных возможностей WordPress. Часто это просто описание по настройке интересного плагина или виджета, а часто мы приводим в тексте фрагменты кода, который нужно вставить в тот или другой файл темы, чтобы добиться желаемого результата.
Как оказалось, для многих фраза — Вставьте этот код в functions.php — ничего не говорит, поэтому в этом уроке я постараюсь показать максимально упрощенно, что это за код, и как именно его нужно добавлять в файлы вашей темы. Эта заметка скорее для новичков, так что если вы профи в WordPress — ничего нового вы здесь не увидите.
Как редактировать код?
Не буду особо распинаться. Скажу коротко, у вас 2 варианта:
1. Встроенный редактор WordPress
Находится в Консоли в меню Внешний вид → Редактор.
2. Сторонние программы для правки кода
Обобщенная структура WordPress темы
Файлы темы оформления
Любой WordPress сайт (а правильней говорить тема, потому как сайт будет работать при активации одной из установленных тем) на самом деле является набором файлов. Где-то там на стороне вашего хостинг-провайдера эти файлы обрабатываются серверами, и вам на монитор возвращается готовый результат — собственно сайт. То, что вы видите, когда заходите по адресу через веб-браузер.
В случае с WordPress этот набор файлов будет отличаться в каждой теме по-своему. Но есть одна общая черта: этот набор состоит из файлов с расширением .php, .css и .js (сам WordPress целиком написан на языке PHP, так что .php файлы — основная часть любой темы оформления).
В каждой теме оформления должен присутствовать минимальный набор файлов для корректной работы в среде движка WordPress. Вы можете открыть папку со своей активной темой ( корень_сайтаwp-contentthemesваша_тема) и, скорее всего, вы найдете там все эти файлы:
Далее мы поговорим об этих файлах подробнее.
Внешний вид сайта
Теперь поговорим о структуре внешнего облика WordPress сайта. Для того, чтобы не было путаницы типа » Я хочу добавить эту штучку вот сюда» или » Мне нужно вставить эту кнопку туда», определенные области WordPress темы принято называть своими именами. Случайный посетитель, попавший на любой сайт, видит то, что видит: кнопочки, панельки, заголовки, ссылки и так далее. Человек более подкованный в WordPress видит этот сайт более структурно.
Давайте для примера возьмем наш блог Hostenko.com/wpcafe. Вот как выглядит его главная страница:
Я специально скомпоновал изображение так, чтобы было видно все основные области.
Как видите, главная страница нашего блога состоит из 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 код начиная с новой пустой строки.
Какие еще файлы мы забыли?
Я просто коротко перечислю с описанием:
Вот и все! Надеюсь этот урок разъяснил некоторые моменты, и теперь вам будет проще ориентироваться, в какой именно файл нужно вставлять дополнительный код.