Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

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

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

Зачем нужен HTML-редактор в Wordpress

Опубликовано: 02.09.2018

видео Зачем нужен HTML-редактор в Wordpress

Редактор wordpress

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

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



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

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


Краткий обзор редакторов кода для веб разработки - какой редактор кода выбрать

Чтобы попасть в редактор кода WordPress, и увидеть HTML-код статьи, следует на странице Редактировать запись выбрать вкладку Текст.

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


Как правильно добавлять код в functions.php. WordPress

Что такое HTML?

По определению, HTML (HyperText Markup Language) – язык гипертекстовой разметки. Он сообщает браузеру, как должен выглядеть контент на странице: как текст разделить на абзацы, где вставить картинку и т. д.

Этот язык содержит специальные пометки – тэги, которые вставляются в обычный текстовый документ и указывают браузеру, как представить веб-страницу на экране монитора. В этой статье мы рассмотрим основные тэги, которые можно использовать в HTML-редакторе WordPress.

Блоки

Для выделения текстовых блоков можно использовать тэги p, div, span .

В тэг p (от слова paragraph) заключаются отдельные абзацы. Например,

1 2 <p>Это текст первого абзаца. Он заключен в тэги p.</p> <p>А это второй абзац. Он имеет отступ от первого.</p>

<p>Это текст первого абзаца. Он заключен в тэги p.</p> <p>А это второй абзац. Он имеет отступ от первого.</p>

А так это выглядит в браузере:

Это текст первого абзаца. Он заключен в тэги p.

А это второй абзац. Он имеет отступ от первого.

Тэг div выделяет блоки текста, начинающиеся с новой строки.

1 2 <div>Это пример использования тэга div. Текст, заключенный в этот тэг, начинается с новой строки, но без отступа.</div> <div>Это второй блок текста. Он начинается с новой строки.</div>

<div>Это пример использования тэга div. Текст, заключенный в этот тэг, начинается с новой строки, но без отступа.</div> <div>Это второй блок текста. Он начинается с новой строки.</div>

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

Это второй блок текста. Он начинается с новой строки.

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

1 2 <span>Это предложение состоит из двух частей, </span> <span>выделенных тэгами span, но внешне это не видно.</span>

<span>Это предложение состоит из двух частей, </span> <span>выделенных тэгами span, но внешне это не видно.</span>

Это предложение состоит из двух частей, выделенных тэгами span, но внешне это не видно.

 Перенос строки, разделитель

Тэги br и hr , в отличие от предыдущих, одинарные и оформляются немного иначе.

Тэг  br (Line Break — разрыв) делает перенос строки внутри абзаца, например:

1 <p>Старушка пошла продавать молоко.<br />Деревня от рынка была далеко.<br />Устала старушка и, кончив дела,<br />У самой дороги вздремнуть прилегла.</p>

<p>Старушка пошла продавать молоко.<br />Деревня от рынка была далеко.<br />Устала старушка и, кончив дела,<br />У самой дороги вздремнуть прилегла.</p>

Старушка пошла продавать молоко.

Деревня от рынка была далеко.

Устала старушка и, кончив дела,

У самой дороги вздремнуть прилегла.

Тэг hr (Horizontal Rule— горизонтальная линия) ставит на странице линию-разделитель, которых в данной статье много.

 Вставка изображений

Для вставки изображений используется также одинарный тэг img . Он имеет обязательные и необязательные атрибуты. Обязательный — src (surce — ресурс, источник), его значение — URL картинки. Необязательные — title (заголовок), alt (альтернативный текст), их значения произвольны. Например,

1 <img src="http://kviter.ru/pic.jpg" title="Рисунок" alt="Рисунок" />

<img src="http://kviter.ru/pic.jpg" title="Рисунок" alt="Рисунок" />

Ссылки

Для вставки гиперссылок используется контейнер <a></a> . Он также имеет атрибуты:

hrefhypertext reference (гипертекстовая ссылка), значение URL адрес страницы, на которую переходим по ссылке.

target — указывает, где открывается картинка, значение _blank — открыть в новом окне.

title (заголовок), значение произвольное.

Пример текстовой ссылки:

1 <a href="http://kviter.ru" target="_blank" title="Блог kviter.ru">Открыть мой блог в новом окне</a>

<a href="http://kviter.ru" target="_blank" title="Блог kviter.ru">Открыть мой блог в новом окне</a>

А так это выглядит в браузере:

Открыть мой блог в новом окне

Ссылкой может быть и изображение, например:

1 <a href="http://kviter.ru/"><img src="http://kviter.ru/wp-content/uploads/2015/12/logo.png" alt="На главную страницу" /></a>

<a href="http://kviter.ru/"><img  src="http://kviter.ru/wp-content/uploads/2015/12/logo.png" alt="На главную страницу" /></a>

 Списки

Списки очень часто используются в записях. Они бывают нумерованные и маркированные. Для их создания используются тэги ol (Ordered List — нумерованный список) ul (Unordered List — маркированный список) li (list — элемент списка).

Например

1 2 3 4 5 <ol> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ol>

<ol> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ol>

А в браузере

Первый элемент Второй элемент Третий элемент
1 2 3 4 5 <ul> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ul>

<ul> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ul>

А в браузере

Первый элемент Второй элемент Третий элемент

Тэги ol и ul имеют атрибут type, который задает вид нумерации или маркеров:

ol type — 1, a, A, i, I.

ul type — disc, circle, square.

 Форматирование текста

1 2 3 4 <strong>Текст, написанный жирным шрифтом</strong><br /> <del>зачеркнутый текст</del><em> курсив</em><br /> <ins>Выделенный текст, а ниже цитата:</ins> <blockquote>Если вы сказали, не подумав — значит, вы сказали то, что думаете.</blockquote>

<strong>Текст, написанный жирным шрифтом</strong><br /> <del>зачеркнутый текст</del><em> курсив</em><br /> <ins>Выделенный текст, а ниже цитата:</ins> <blockquote>Если вы сказали, не подумав — значит, вы сказали то, что думаете.</blockquote>

Текст, написанный жирным шрифтом

зачеркнутый текст курсив

Выделенный текст, а ниже цитата:

Если вы сказали, не подумав — значит, вы сказали то, что думаете.

Таблицы

Для создания таблиц используются тэги table — таблица, tr (table row) — строка (ряд) таблицы, td (table data) — данные в таблице (ячейка). Например,

1 2 3 4 5 6 7 8 9 10 11 12 <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>

<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-редактора.

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

До скорой встречи!

rss