HTML-редактор WordPress и его возможности
Здравствуйте, уважаемые читатели!
Для создания статей в WordPress обычно используют визуальный редактор, о котором я уже писал, но редактировать их можно и во встроенном HTML-редакторе, который дает возможность корректировать непосредственно код страницы. Конечно, для этого нужно знать основы языков HTML и CSS, но и возможностей для оформления ваших статей гораздо больше.
Также я уже писал, нужно ли знать HTML и CSS владельцам блогов на CMS и считаю, что, несмотря на то, что без этих знаний можно вести блог, но все же основы этих языков лучше знать.
Также как, например, можно не знать устройство автомобиля, но быть водителем, а чтобы быть хорошим водителем, все-таки нужно хотя бы иметь представление о назначении и устройстве его основных узлов, чтобы не было таких историй, как в знаменитом анекдоте про 710 деталь. 
Чтобы попасть в редактор кода WordPress, и увидеть HTML-код статьи, следует на странице Редактировать запись выбрать вкладку Текст. 
Итак, чтобы работать с HTML-редактором, следует освоить основы языков HTML и CSS, поэтому эту и последующую статьи можно считать мини учебником по этим языкам.
Что такое HTML?
По определению, HTML (HyperText Markup Language) – язык гипертекстовой разметки. Он сообщает браузеру, как должен выглядеть контент на странице: как текст разделить на абзацы, где вставить картинку и т. д.
Этот язык содержит специальные пометки – тэги, которые вставляются в обычный текстовый документ и указывают браузеру, как представить веб-страницу на экране монитора. В этой статье мы рассмотрим основные тэги, которые можно использовать в HTML-редакторе WordPress.
Блоки
Для выделения текстовых блоков можно использовать тэги p, div, span.
В тэг p (от слова paragraph) заключаются отдельные абзацы. Например,
<p>Это текст первого абзаца. Он заключен в тэги p.</p> <p>А это второй абзац. Он имеет отступ от первого.</p>
А так это выглядит в браузере:
Это текст первого абзаца. Он заключен в тэги p.
А это второй абзац. Он имеет отступ от первого.
Тэг div выделяет блоки текста, начинающиеся с новой строки.
<div>Это пример использования тэга div. Текст, заключенный в этот тэг, начинается с новой строки, но без отступа.</div> <div>Это второй блок текста. Он начинается с новой строки.</div>
Это второй блок текста. Он начинается с новой строки.
<span>Это предложение состоит из двух частей, </span> <span>выделенных тэгами span, но внешне это не видно.</span>
Это предложение состоит из двух частей, выделенных тэгами span, но внешне это не видно.
Перенос строки, разделитель
Тэги br и hr, в отличие от предыдущих, одинарные и оформляются немного иначе.
Тэг br (Line Break — разрыв) делает перенос строки внутри абзаца, например:
<p>Старушка пошла продавать молоко.<br />Деревня от рынка была далеко.<br />Устала старушка и, кончив дела,<br />У самой дороги вздремнуть прилегла.</p>
Старушка пошла продавать молоко.
Деревня от рынка была далеко.
Устала старушка и, кончив дела,
У самой дороги вздремнуть прилегла.
Тэг hr (Horizontal Rule— горизонтальная линия) ставит на странице линию-разделитель, которых в данной статье много.
Вставка изображений
Для вставки изображений используется также одинарный тэг img. Он имеет обязательные и необязательные атрибуты. Обязательный — src (surce — ресурс, источник), его значение — URL картинки. Необязательные — title (заголовок), alt (альтернативный текст), их значения произвольны. Например,
Ссылки
Для вставки гиперссылок используется контейнер <a></a>. Он также имеет атрибуты:
href — hypertext reference (гипертекстовая ссылка), значение URL адрес страницы, на которую переходим по ссылке.
target — указывает, где открывается картинка, значение _blank — открыть в новом окне.
title (заголовок), значение произвольное.
Пример текстовой ссылки:
<a href="http://kviter.ru" target="_blank" title="Блог kviter.ru">Открыть мой блог в новом окне</a>
Ссылкой может быть и изображение, например:
<a href="https://kviter.ru/"><img src="https://kviter.ru/wp-content/uploads/2015/12/logo.png" alt="На главную страницу" /></a>
Списки
Списки очень часто используются в записях. Они бывают нумерованные и маркированные. Для их создания используются тэги ol (Ordered List — нумерованный список) ul (Unordered List — маркированный список) li (list — элемент списка).
- Первый элемент
- Второй элемент
- Третий элемент
- Первый элемент
- Второй элемент
- Третий элемент
Тэги ol и ul имеют атрибут type, который задает вид нумерации или маркеров:
ul type — disc, circle, square.
Форматирование текста
<strong>Текст, написанный жирным шрифтом</strong><br /> <del>зачеркнутый текст</del><em> курсив</em><br /> <ins>Выделенный текст, а ниже цитата:</ins> <blockquote>Если вы сказали, не подумав — значит, вы сказали то, что думаете.</blockquote>
Текст, написанный жирным шрифтом
зачеркнутый текст курсив
Если вы сказали, не подумав — значит, вы сказали то, что думаете.
Таблицы
Для создания таблиц используются тэги table — таблица, tr (table row) — строка (ряд) таблицы, td (table data) — данные в таблице (ячейка). Например,
<table> <tr> <td>ряд 1, ячейка 1</td> <td>ряд 1, ячейка 2</td> <td>ряд 1, ячейка 3</td> </tr> <tr> <td>ряд 2, ячейка 1</td> <td>ряд 2, ячейка 2</td> <td>ряд 2, ячейка 3</td> </tr> </table>
| ряд 1, ячейка 1 | ряд 1, ячейка 2 | ряд 1, ячейка 3 |
| ряд 2, ячейка 1 | ряд 2, ячейка 2 | ряд 2, ячейка 3 |
Вот некоторые тэги, с которыми можно работать в редакторе WordPress. Какие-то возможности реализованы и в визуальном редакторе, но, например, таблицы его средствами сделать нельзя.
В следующей статье я расскажу о применении стилей CSS в оформлении записей, именно их использование раскрывает все возможности HTML-редактора.
Подписывайтесь на обновления блога, чтобы не пропустить выход новой статьи.
Как редактировать HTML-код в теме WordPress
У меня есть блог wordpress, и я хочу немного его настроить. Я знаю CSS и HTML, но не php. из того, что я понял, php должен вызывать html-код, поэтому, если бы я мог найти html-код, мне будет легко настроить мой блог.
Дело в том, что я не могу найти html-код. Я посмотрел внешний вид → редактор, и это все файлы php и один css.
У кого-то есть идея, как отредактировать html-код/найти его?
4 ответа
Если вы хотите отредактировать тему wordpress html, css и т.д. Пожалуйста, следуйте инструкциям.
Всегда используйте дочернюю тему
Перед тем, как начать редактирование темы WordPress, создайте дочернюю тему. Детские темы важны, поскольку они защищают ваши исходные файлы тем.
Изменить тему WordPress HTML
Откройте " Внешний вид" → "Редактор" на панели управления WordPress и выберите дочернюю тему, которую вы активировали.
Есть index.php, functions.php, header.php, footer.php и т.д.
В своей базовой форме PHP захватывает содержимое с вашего сайта WordPress и выводит его на HTML-страницу. Взгляните на этот раздел кода:
Этот код переводится в этот HTML:
Попробуйте понять, как приведенные выше коды php и html. вы можете легко отредактировать его.
Как мне редактировать код страницы моего сайта на WordPress?
Как устроены страницы WordPress и как их редактировать?
Всем доброго дня! Мне нужно отредактировать некоторые страницы моего сайта на Вордпресс, для этого.
Критика сайта моего нужна мне
<p>В плане SEO</p><p>И вопрос можно ли главную раскрутить по низкочастотным запросам типа шахматы.
Как сделать редирект со страницы моего сайта на другой домен, без изменения url
В общем. хочу чтобы при переходе по адресу site.ru/page1 — человек попадал на domen2.ru, но в.
Как правильно вставить jQuery код в код страницы сайта?
привет всем:) у меня возникла проблема, когда я свой jQuery код вставляю в код html главной.
Похоже код, который мне нужно исправить, создает вот этот проверочный цикл, который дает мне ошибку протокола Schema.org, на который ругается google.
Плагин кидает мне в кусок СЕРВИС, осколок от БИЗНЕС.
Добавлено через 10 минут
Да, я понял о чем вы! Спасибо!
Куму своему скинул этот американский косяк, похоже он сейчас этот плагин мне исправит.
Ужасно конечно. Я думал, что пишу бесконечно длинный текстовый файл с html кодом, а оказалось, что какую-то ерунду, типа таблиц СУБД, которые при каждом клике всегда пересчитывают свои данные.
Думал, что где-то хранятся файлы с html кодом моих страниц сайта, как то так.
Я разочарован.
Добавлено через 47 минут
В итоге через Total Comander прямо в сервере ищу файл с отрывком нужного текста и правлю его, хоть он и не очень похож на тот, что выдает html. Получилось. В итоге получилось, что я плагин под микроразметку Schema.org поправил под себя. Если плагин удалю и поставлю снова — придется опять все исправлять.
Полное воровство инфы с моего сайта (копия моего сайта)
У меня есть, сайт с видеороликами, зашел в гугл вебмастер посмотрел ссылки на свой сайт смотрю.
Код карты сайта WordPress не показывает все посты, как это поправить
Доброго времени суток, уважаемые гуру. Есть такой код карты сайта (привожу его без дизайна): .
Как редактировать шаблон в WordPress ?
Всем привет ! Написал игровой шаблон, дошло дело до знакомства с движками и решил поискать какие же.