Добавление html в wordpress

Руководство для начинающих о том, как это работает

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

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

В этом руководстве для начинающих мы объясним, что такое html и как он работает. Затем мы покажем вам несколько примеров того, что может сделать добавление html в WordPress, и укажем на некоторые места, где вы можете узнать больше. Давай приступим к работе!

Какой html (и почему это имеет значение)

Даже если вы не веб-разработчик, скорее всего, вы хотя бы слышали о HTML — это синоним создания веб-сайтов. Однако html не является языком программирования, как JavaScript или Python. Эти инструменты кодирования используются для создания программ с нуля и являются более сложными. Вместо этого html — это так называемый «язык разметки».

Короче говоря, он предназначен для воздействия на контент, такой как текст и изображения. Он используется для аннотирования (или разметки) контента путем добавления инструкций о том, как он должен отображаться. По этой причине html проще и понятнее.

Если вы хотите увидеть, как это выглядит, все, что вам нужно сделать, это открыть сообщение или страницу WordPress. Затем перейдите на вкладку «Текст» редактора:

Добавление html в wordpress

Сначала это может выглядеть как тарабарщина. Однако, внимательно посмотрите, и вы увидите, что все ваше содержание все еще там. Текст выписывается как есть, но все остальное — это html, который контролирует форматирование, внешний вид, макет и многое другое.

Как работает html в Вордпресс (несколько базовых примеров)

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

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

Как вы знаете, вы можете сделать это, выбрав один из параметров в раскрывающемся меню рубрики:

Добавление html в wordpress

Однако вы также можете сделать это с помощью html. На вкладке «Текст» найдите текст, который хотите превратить в заголовок. Затем просто добавьте теги заголовков в начало и конец, например:

Добавление html в wordpress

Эти теги <h1> сообщают WordPress об обращении текста, который они заключают в заголовок уровня 1. Слэш во втором теге указывает, где заголовок должен заканчиваться. Вы также можете заменить 1 другим номером, чтобы настроить, какой уровень заголовка используется.

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

Существуют одинаковые базовые теги для всех распространенных (и многих необычных) типов форматирования, которые вы можете применить к вашему тексту. Например, предположим, что вы хотели нанести курсивом слово «лучший» в следующем предложении:

На мой взгляд, борзые — лучшая собака.

Для этого вам нужно использовать теги с акцентом (<em>):

На мой взгляд, борзые-это <em>лучшая</em> собака. Если вы хотите вместо этого сделать слово полужирным, используйте теги <strong>:

На мой взгляд, борзые-это <strong>лучшая</strong> собака

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

На мой взгляд, борзые-это <strong><em>лучшая</em> </strong> собака.

Стоит отметить, что порядок здесь не имеет значения — теги <em> могут быть снаружи вместо этого, и вы получите тот же эффект:

Добавление html в wordpress

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

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

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

Конечно, вы можете выполнять все те же задачи в визуальной вкладке редактора WordPress. Однако добавление html позволяет включать форматирование, которое не так просто добавить по умолчанию, например, выделение текста с помощью тегов <mark> или создания таблиц. Также вы можете включить определенное форматирование в виджеты, подвал и другие области вашего сайта.

Другие области, где добавление html полезно

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

Вместо этого вам нужно вручную добавить rel=»nofollow»тег к своей ссылке с помощью html. 

Например:

<a href="http://example.com/post">Текст</a>

становится:

<a href="http://example.com/post" rel="nofollow">Текст</a>

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

Как узнать больше о html

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

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

Вот несколько мест, чтобы начать изучать больше:

  • W3Schools:Если вы используете практический тип, этот учебник по HTML5 может быть именно тем, что вам нужно. Он предоставит вам все, что вам нужно знать о последней версии HTML, позволяя вам практиковать использование тегов самостоятельно.
  • Codecademy:Если вам нужен более тщательный, ориентированный курс к изучению HTML, Codecademy предлагает очень сложную программу. Вы даже завершите два структурированных проекта, чтобы получить практическое представление о языке.
  • Udemy:Этот сайт предлагает множество курсов по HTML, поэтому вы можете выбрать наиболее подходящий для ваших потребностей и уровня мастерства.

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

Вывод

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

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

Есть ли у вас какие-либо вопросы о том, как использовать HTML в своем содержании? Дайте нам знать в комментариях ниже!

 

0

Оставить комментарий