Вставить код в раздел head на WordPress – темы, плагины и php функции

Нажмите правую кнопку мыши на интересующем элементе страницы.

Если шаблон не обновляется

Самый простой методом – добавить код напрямую в файлы шаблона. Но есть несколько ограничений:

  • Продукт не должен обновляться, например у вас собственная разработка, сделанная на заказ.
  • Возможны споры, отслеживать через дебаг режим будет невозможно.
Если шаблон не обновляется

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

Добавить код вручную.

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

Если шаблон не обновляется

Результат.

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

Инструкция 1: как просмотреть весь HTML код сайта в браузере

Открываем необходимую веб-страницу вашего сайта. Кликаем правой кнопкой мыши по необходимому элементу, появится контекстное выпадающее меню браузера с доступными командами:

Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере

Рисунок 1. Просмотр всего HTML кода веб-страницы в браузере Chrome

Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере

Важно: Команды в выпадающем меню могут отличаться, например, для активных элементов (ссылки, картинки, видео) и неактивных (текст, фон, дивы):

Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере

Рисунок 2. Выпадающее меню браузера Chrome

Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере

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

Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере

Вернемся к рисунку 1, на нем показана необходимая команда для просмотра всего HTML кода исходной веб-страницы, она называется «Просмотр кода страницы «. Кликаем по команде, откроется новая вкладка с полным кодом исходной веб-страницы, большой плюс ко всему — просмотр доступен с подсветкой синтаксиса:

Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере

Рисунок 3. Фрагмент кода данного сайта

Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере

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

Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере

Альтернативные способы просмотра всего HTML кода веб-страницы

Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере

Для более быстрого доступа, можно использовать другие способы вызова данного инструмента

Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Инструкция 1: как просмотреть весь HTML код сайта в браузере

Как создать страничку

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

Как создать страничку

Откройте документ.

Читайте также:  2021 Как сделать бизнес-аккаунт в Инстаграм

Вставьте в него вот этот код.

Как создать страничку

<html> <head> <title>Моя первая страница</title> </head> <body> <center><h1>Создать страницу проще, чем вы думаете</h1></center> Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате. <br/><br/> <center></center> <br/><br/> <font style="color:red">Простой код позволяет сделать текст красным</font> <br/><br/> <b>Написать жирным не намного сложнее</b> <br/><br/> Мы дошли до самого низа <br/><br/> Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. <br/><br/> <hr> К примеру, вот ссылка на мой блог — <a href="">Start-Luck</a> — рассказывает просто о "сложном". <br/><br/> Ну вот и все. Ваша первая страница готова <br/><br/> </body> </html>

<html> <head> <title>Моя первая страница</title> </head> <body> <center><h1>Создать страницу проще, чем вы думаете</h1></center> Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате. <br/><br/> <center></center> <br/><br/> <font style="color:red">Простой код позволяет сделать текст красным</font> <br/><br/> <b>Написать жирным не намного сложнее</b> <br/><br/> Мы дошли до самого низа <br/><br/> Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. <br/><br/> <hr> К примеру, вот ссылка на мой блог — <a href="">Start-Luck</a> — рассказывает просто о "сложном". <br/><br/> Ну вот и все. Ваша первая страница готова <br/><br/> </body> </html>

Теперь нажмите «Сохранить как…». Это очень важный момент.

Как создать страничку

Файл нужно назвать . Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.

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

Как создать страничку

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

Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center» и вставим строчку, в которой содержится слово «Color». Кстати, как менять цвет html я уже писал. Это очень просто, рекомендую к прочтению.

Как создать страничку

Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5

Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: </font>.

Как создать страничку

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

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

Как создать страничку

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

Тег — основа языка HTML

Основной частью языка HTML является — тег. HTML документ (как и весь html-код) и состоит и тегов. Тег содержит в себе имя и угловые скобки, которые расположены по бокам — <имяТега>:

<p> — это один из множества, различных HTML-тегов, означает абзац.

Теги бывают открывающими и закрывающими. У закрывающих тегов перед именем стоит косая черта (слэш) /

<p> — открывающий тег. </p> — закрывающий тег.

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

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

Рассмотрим другие теги используемые в нашем HTML коде.