Базовое руководство по HTML для пользователей WordPress

Интернет, ваш веб-сайт, ваши веб-страницы и даже ваш контент — все это создано и работает на языке кода.

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

HTML — это один из языков «кода», который используется для работы в Интернете, веб-сайтов, веб-страниц и даже вашего контента.

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

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

Вам не нужно изучать HTML, чтобы использовать WordPress, но знакомство с HTML очень полезно для пользователя WordPress!

Полезное руководство по HTML для пользователей WordPress — пошаговое руководство

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

Скажем так:

• Вы хотите настроить определенные элементы в существующем контенте , добавить форматированный текст и изображение в область боковой панели или направить посетителей на контактную форму, страницу подписки на информационный бюллетень и т. д. Если вы знаете базовый HTML, вы действительно можете это сделать. легко без необходимости платить кому-то еще, чтобы сделать это для вас.
• Вы передаете создание контента на аутсорсинг писателю-фрилансеру и получаете обратно файлы, содержащие отформатированный контент. Знание основ HTML поможет вам понять работу, прежде чем вы ее примете и оплатите.
• Кто-то другой создает содержимое вашего сайта. Вы замечаете пару простых ошибок форматирования текста, например отрывок, который нужно было выделить жирным шрифтом, или гиперссылку, которая не была добавлена ​​в вашу копию. Базовые знания HTML могут помочь вам исправить простые ошибки в ваших сообщениях без промедления и без необходимости идти и просить (или платить) веб-мастеру, веб-дизайнеру или кому-то еще, чтобы он сделал это за вас.
• Вы хотите обсудить изменения на своем сайте с командой разработчиков сайта. Небольшое знание HTML не только поможет вам более эффективно общаться с веб-разработчиками и веб-дизайнерами, но также поможет вам лучше вести переговоры по проектам с поставщиками технических услуг.

Вам не нужно становиться веб-разработчиком, любящим программировать — просто выучите достаточно HTML, чтобы стать «веб-сообразительным» владельцем бизнеса!

HTML — базовое определение

HTML — это аббревиатура от языка гипертекстовой разметки . Согласно определению HTML в Википедии…

HTML является основным языком разметки для создания веб-страниц и другой информации, которая может отображаться в веб-браузере.

HTML записывается в виде HTML-элементов, состоящих из тегов, заключенных в угловые скобки (например, <table> ), внутри содержимого веб-страницы. Теги HTML чаще всего идут парами, такими как <h1> и </h1> , хотя некоторые теги, известные как пустые элементы, не являются парными, например <img> . Первый тег в паре является начальным тегом, второй тег — конечным тегом (их также называют открывающими тегами и закрывающими тегами). Между этими тегами веб-дизайнеры могут добавлять текст, теги, комментарии и другие типы текстового контента.

Целью веб-браузера является чтение HTML-документов и компоновка их в видимые или слышимые веб-страницы. Браузер не отображает теги HTML, но использует теги для интерпретации содержимого страницы.

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

Источник: Википедия, HTML.

Важно: Как и все в цифровой сфере, HTML также подвержен изменениям и развитию, и некоторые из этих изменений повлияют на WordPress.

В настоящее время последней версией HTML является версия 5 (также называемая HTML5), и это изменение ввело ряд новых «тегов», чтобы оставаться в курсе последних достижений в программном обеспечении и технологии браузера. Поскольку несколько старых тегов постепенно исключаются из HTML5, вы можете ожидать, что WordPress также продолжит обновлять свой код, чтобы обеспечить совместимость с общеотраслевыми стандартами кодирования.

Использование HTML на ваших страницах и в сообщениях WordPress

WordPress дает вам возможность добавлять контент к сообщениям и страницам с помощью стандартного богатого визуального редактора (также называемого WYSIWYG - редактором , что означает «что вы видите , то и получаете») и текстового редактора , который позволяет вам для ввода кода, такого как HTML и другие языки сценариев (например, Javascript), при создании или редактировании вашего контента…

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

Мы обсуждаем WYSIWYG-редактор WordPress и то, как добавлять контент в посты и на страницы, в отдельных статьях «как это сделать».

Какой HTML можно использовать в контенте WordPress?

Система управления контентом WordPress (CMS) позволяет вставлять наиболее распространенные теги форматирования HTML, такие как следующие:

HTML-теги форматирования WordPress

Ниже приведены некоторые практические примеры форматирования контента с использованием HTML-тегов, показанных выше…

Теги HTML, используемые в контенте WordPress

Чтобы узнать больше об использовании HTML, посетите следующий сайт:

HTML — бесплатные уроки

Объяснение меню текстового редактора WordPress

Текстовый редактор WordPress позволяет вам вставлять, редактировать и работать напрямую с кодом, таким как HTML и другие языки сценариев (например, Javascript), при вводе контента на страницы и сообщения.

Из коробки Текстовый редактор отображает стандартный набор функций меню…

Возможности текстового редактора WordPress

Ниже приведено краткое описание функции HTML каждой из кнопок меню текстового редактора с соответствующим тегом HTML (см. снимок экрана выше):

b: <strong></strong> Используйте эту кнопку, чтобы выделить текст жирным шрифтом .

i : <em></em> Используйте этот тег HTML, чтобы выделить текст курсивом .

гиперссылка: <a href="https://example.com"></a> выборе этой кнопки к выделенному тексту добавляется гиперссылка.

b-quote: <blockquote></blockquote> Выберите эту кнопку меню, чтобы процитировать текст.

дель : <del></del> Этот тег HTML используется для обозначения текста, который считается удаленным с текущей страницы. Многие браузеры обычно отображают это как перечеркнутый текст.

ins: <ins></ins> Этот тег HTML используется для обозначения текста, который считается вставленным на страницу или в сообщение. Большинство веб-браузеров обычно отображают это как подчеркнутый текст.

img: src="https://www.yourdomain.com/img/image.jpg" alt="image description" /> Этот тег HTML позволяет вставить изображение в сообщение или на страницу и добавить тег «alt» ( текстовое описание вашего изображения в случае, если изображение не отображается на экране пользователя.Примечание : вы также можете использовать кнопку «Добавить медиафайл» (15), чтобы вставить изображение в свой контент.

ul: <ul></ul> Этот тег HTML используется для вставки ненумерованного списка в ваше сообщение. Неупорядоченные списки обычно отображаются в виде маркированного списка. Примечание. Этот HTML-тег необходимо использовать с <li> (см. ниже), чтобы маркированные списки работали.

ol: <ol></ol> Нажмите эту кнопку меню, чтобы вставить нумерованный список. Элементы в упорядоченном списке обычно нумеруются (точно так же, как список, который вы сейчас читаете!). Примечание. Этот HTML-тег необходимо использовать с <li> (см. ниже), чтобы маркированные списки работали.

li: <li></li> Этот тег HTML используется для вставки или преобразования выбранного текста в элемент списка. (Этот тег следует использовать вместе с тегом ul или ol).

code: <code></code> Используйте этот тег HTML для отображения кода (например, тегов html) в тексте. Если вы не используете эти теги для окружения кода, который хотите отобразить, WordPress применит ваши теги, и вы получите ошибки (например, неработающий текст). Примечание. Любой контент, вставленный в теги <code> , обычно отображается с использованием другого стиля текста, например моноширинного шрифта, такого как Courier. (Дополнительную информацию см. в разделе «Советы» ниже).

больше: <!--more--> Используйте эту кнопку меню, чтобы разбить сообщение в блоге на разделы «тизер» и основной контент. Например, если вы напечатаете несколько абзацев, затем добавите этот тег и добавите остальную часть содержимого вашего сообщения, пользователи увидят только первые абзацы вашего сообщения с гиперссылкой (например, продолжить чтение… ), которая, если щелкнуть по ней, затем отображать остальную часть содержимого поста.

Кнопка «Закрыть теги» — эта функция закрывает все открытые HTML-теги, оставшиеся в вашем контенте. Примечание. Проверьте содержимое после использования этой функции, чтобы убедиться, что все HTML-теги правильно отформатировали текст.

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

Добавить медиа — нажмите эту кнопку, чтобы вставить медиафайлы в ваш контент (например, изображения, видео, аудиофайлы). Эта кнопка появляется независимо от того, выбрали ли вы вкладки «Визуальный» или «Текстовый редактор».

Режим письма без отвлекающих факторов в редакторе контента WordPress [#14]

Несколько полезных советов по использованию HTML в WordPress

Конструкторы HTML-контента

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

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

Kompozer — Бесплатный HTML-редактор

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

Другой вариант, если вы не хотите возиться с каким-либо кодом или использовать внешний инструмент для создания HTML-контента, — это использовать плагин WordPress, который позволяет создавать контент внутри самого WordPress.

Конструктор контента Thrive

Чтобы узнать больше об этом плагине, посетите их сайт Thrive Content Builder.

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

Учебное пособие: как добавить форматированный текст в раздел «О себе» вашего профиля пользователя

В WordPress есть определенные места, такие как «виджеты» на боковой панели и раздел «О себе» на экране вашего профиля пользователя, которые позволяют вставлять теги HTML.

Эти разделы, однако, не поставляются с редактором контента, таким как визуальный / текстовый редактор, который находится на экранах ваших сообщений и страниц…

Визуальный/текстовый редактор WordPress

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

Давайте рассмотрим пример, чтобы вы могли увидеть, насколько это просто.

Как правило, всякий раз, когда сообщение публикуется в WordPress, ссылка на автора отображается где-то в ваших сообщениях (т.е. внизу или вверху сообщения)…

Ссылка на страницу автора в блоге WordPress

Нажав на ссылку автора, посетители переходят в раздел « Архивы авторов », где они могут узнать больше информации о вас (или других зарегистрированных пользователях) и увидеть другие статьи, которые вы (или другие авторы) опубликовали…

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

Профиль автора находится в поле « О себе » > « Биографическая информация » в разделе «Профиль пользователя»…

Хотя текстовая область « Биографическая информация » позволяет добавлять содержимое в формате HTML, в ней нет редактора содержимого, поэтому вам нужно либо знать, как вводить HTML-код непосредственно в текстовое поле, либо создавать его в редакторе HTML, а затем копировать. и вставьте контент с уже встроенным в него HTML…

Давайте «вставим содержимое» в это поле, используя метод, описанный ниже.

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

В данном случае мы хотим создать авторское промо …

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

Продолжайте работать на экране визуального редактора, пока не добавите все форматирование, которое хотите добавить к содержимому профиля автора…

После создания контента переключитесь в текстовый редактор и скопируйте все в буфер обмена…

Перейдите в область своего профиля, выбрав « Пользователи » > « Ваш профиль » в меню навигации…

Прокрутите вниз до раздела « О себе » и вставьте содержимое из буфера обмена в текстовую область « Биографическая информация ».

Нажмите «Обновить профиль» , чтобы сохранить изменения…

Поздравляем... Вы только что создали биографию автора для своих сообщений в блоге и отформатировали ее с помощью базового HTML!

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

Как мы уже упоминали, вам не нужно изучать HTML, чтобы использовать WordPress, но может быть полезно знать основы HTML.

Советы по HTML для пользователей WordPress

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

Например:

HTML-код WordPress

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

Вордпресс HTML. (Источник скриншота: сайт плагина)

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

Расширяемые кнопки редактора HTML

Extensible HTML Editor Buttons — это плагин WordPress, который вы можете добавить на свой сайт, который позволяет вам лучше контролировать настройки HTML-тегов, таких как div и span , а также добавлять пользовательские кнопки и дополнительные функции в текстовый редактор…

Плагин WordPress — расширяемые кнопки HTML-редактора. (Источник скриншота: сайт плагина)

Вот еще один бесплатный плагин WordPress, который вы можете использовать…

Необработанный HTML

Raw HTML позволяет отключить автоматическое форматирование, такое как автоматическое создание абзацев и умные кавычки, а также использовать необработанный код HTML/JS/CSS в ваших сообщениях WordPress.

С помощью этого плагина любая часть вашего поста может быть заключена в теги [raw]…[/raw], не позволяя WordPress преобразовывать новые строки в абзацы HTML, заменяя апострофы типографскими кавычками и так далее. Это очень полезно, если вам нужно добавить к вашему контенту блок JavaScript или CSS.

Raw HTML — плагин для WP . (Источник скриншота: сайт плагина)

Совет № 3. Устранение ошибок тегов HTML. Если форматирование текста отображается неправильно после публикации сообщения или страницы, убедитесь, что вы правильно ввели теги HTML на вкладке «Текст», а не на вкладке «Визуальные элементы».

Например, если вы наберете текст, показанный ниже, в редакторе визуального контента…

Ваш текст будет выглядеть так, когда ваш пост будет опубликован…

Вы можете увидеть, что вызывает проблему, переключившись на вкладку «Текст»…

Как вы можете видеть на снимке экрана выше, WordPress преобразует символы «<» и «>» в ​​их эквиваленты HTML-кода (называемые символами ASCII).

Так:

• « < » (открытая угловая скобка) = « &lt; “
• « > » (закрытая угловая скобка) = « &gt; “

Чтобы сохранить символы «<» и «>» нетронутыми и убедиться, что ваш текст будет правильно отформатирован, вам нужно вставить свой код в текстовый редактор…

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

Совет № 4 (продвинутый пользователь WordPress). По умолчанию WordPress не позволяет использовать ряд тегов HTML (например, такие коды, как iframe , textarea и другие). Это из соображений безопасности.

Если у вас возникают какие-либо проблемы при добавлении часто используемых тегов HTML в ваш контент, которые разрешены для использования в WordPress, попробуйте отключить визуальный редактор в своем профиле пользователя…

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

Если приведенное выше предложение устраняет проблему, вернитесь в профиль пользователя, снова активируйте визуальный редактор и проверьте, нормально ли работает HTML-код с восстановленным визуальным редактором.

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

• Попросите кого-нибудь с опытом устранения ошибок WordPress помочь вам
• Поиск возможных причин и решений на форуме поддержки WordPress или в ресурсах по устранению неполадок WordPress.
• Переустановите ваше приложение WordPress (т.е. выполните чистую установку)
• Обращение к вашему веб-хостингу за помощью

***

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