Если вы хотите, чтобы ваш блог воспринимался всерьез, вам необходимо освоить формат вашего блога.
Это также означает изучение некоторых основных трюков HTML, которые помогут сделать ваши статьи интересными и согласованными по стилю.
Теперь не волнуйся Я не говорю, что вам нужно стать программистом или кем-то еще Создание привлекательных и неинформированных постов в блоге, но изучение некоторых необходимых навыков будет иметь большое значение.
WordPress – это CMS (система управления контентом), поэтому вам не нужно все кодировать самостоятельно.
Для этого есть инструменты.
Большая часть кода скрыта, чтобы что-то не сломалось, и имеет редактор WYSIWYG («Что видишь, то и получаешь») для написания и форматирования сообщений и страниц блога.
Если вы уже давно пользуетесь WordPress, вы знаете, что в правом верхнем углу редактора контента есть вкладка «Визуальные и текстовые», которая позволяет переключаться со стильной версии вашего поста на необработанный HTML.
Для новичка.
визуальный = Визуальный редактор WordPress
текст = Редактор WordPress HTML / Простой текст
Большинство начинающих чувствуют себя потрясенными и испуганными, когда впервые видят необработанный HTML-код на вкладке текста и быстро возвращаются.
Но это не обязательно так, и вы станете гораздо лучшим блоггером, если вы уделите время работе и комфортному редактированию в этом режиме.
Немного потренировавшись, вы можете легко освоить некоторые основы, синтаксис довольно логичен.
Синтаксис (определение компьютера): Структура высказываний на компьютерном языке.
Так что же такое HTML?
HTML обозначает язык разметки гипертекста и является языком программирования, используемым для создания веб-страниц и приложений.
HTML позволяет создавать базовые функциональные возможности, которые затем можно создавать с помощью CSS (каскадные таблицы стилей).
Он был создан в 1990 году Тимом Бернерсом-Ли, моим личным героем, которому также приписывают изобретать интернет, но я не собираюсь рассказывать вам все о HTML и истории, но если вам интересно, вы можете продолжить чтение в Википедии.
Мы здесь только для того, чтобы увидеть, как HTML относится к написанию и редактированию постов и страниц WordPress.
Когда вы видите неизвестный код на вкладке «Текст» редактора WordPress, вы видите HTML, а в некоторых случаях вы можете включить некоторые встроенные стили CSS.
Пример HTML
Это название
Части, выделенные красным цветом, представляют собой HTML, и в этом примере вы увидите открывающий тег заголовка h2 в начале и закрывающий тег заголовка h2 в конце.
Обратите внимание, что единственное отличие состоит в том, что закрывающий тег имеет обратную косую черту перед именем тега. Вот как вы можете быстро увидеть, когда ваш HTML был открыт и закрыт.
Это отличный совет для выявления ошибок или неработающего HTML.
Пример HTML со встроенным CSS
Это название
В приведенном выше примере мы использовали тот же h2, однако на этот раз мы использовали HTML для вызова части CSS, чтобы изменить цвет на красный. Обратите внимание, что единственная часть, которая на самом деле CSS, выделена красным.
В идеале вы не увидите много CSS в Интернете, потому что лучший способ – это создать элементы HTML с помощью внешних файлов CSS. Это типичный способ, которым темы WordPress автоматически применяют стили к вашей странице блога.
Лично я не рекомендую разрабатывать ваш HTML онлайн в редакторе WordPress, но важно помнить об этом на случай, если вам нужно отредактировать или очистить код, который был введен из других источников, таких как плагин или копирование и вставка из другого источника.
Неизбежно, вы получите выгоду от возможности убирать вещи, когда гремлины (не технический термин) найдут свой путь в вашем контенте.
Итак, давайте посмотрим, как добавить HTML к постам, постам и страницам WordPress и что вам нужно знать.
WordPress Basic HTML Essentials
При добавлении HTML для оформления вашего контента, вы должны помнить, чтобы обернуть его соответствующими открывающими и закрывающими тегами.
пример:
Абзацы должны быть обернуты тегами p
Существуют примеры полезных элементов HTML, для которых не требуется закрывающий тег, поскольку они закрываются автоматически.
Примером является разрыв строки.
Он будет работать без закрывающего тега, потому что разрывы строк не могут содержать контент и не могут его содержать.
Теги заголовка и субтитров
В сообщении WordPress есть несколько типов заголовков, во-первых, это заголовок заголовка сообщения, это
Они варьируются от h1 (заголовок 1) до h6 (заголовок 6), и ваша тема, как правило, будет иметь правильный размер.
Поскольку заголовок вашей страницы или сообщения автоматически обозначается как h1, вы должны избегать его использования в своем контенте, поскольку любой другой экземпляр будет конкурировать с основным заголовком, который является названием вашего сообщения.
Вместо этого следуйте семантически правильному процессу заказа, и при первом использовании заголовка раздела перейдите к заголовку заголовка h2.
Хотя вы можете легко настроить их, используя раскрывающееся меню в левом верхнем углу редактора сообщений WYSIWYG, полезно знать, как они работают в формате HTML, чтобы вы могли исправить любые ошибки.
Вот несколько примеров
Это заголовок 2, я очень полезен, вы можете использовать меня, чтобы организовать ваши статьи в разделы.
Это 3 заголовка, используйте его, только если у вас уже есть заголовки разделов h2 и вам нужно разделить эти разделы на подразделы.
Это заголовок 4, я похож на предыдущий, используйте меня, только если вы уже использовали h3
Надеюсь, вы начинаете видеть здесь образец с синтаксисом HTML.
Все элементы HTML начинаются с открытия <
Они также закрываются с защелкой>
Открывающиеся элементы могут просто содержать имя элемента.
Закрывающие теги содержат косую черту после открытия <и перед именем HTML-элемента, который они закрывают.
Просто немного ознакомившись с вышеизложенным, вы будете стремительно выходить за рамки большинства блоггеров, использующих WordPress.
Жирный или курсив
Когда вы хотите подчеркнуть точку зрения и привлечь внимание к определенным словам, которые вы хотите использовать жирный шрифт или чтобы они выделялись.
Я определенно предпочитаю этот подход ВСЕМ КАПИТАЛА, который мне кажется кричащим.
HTML-код для жирного и курсивом это
Весело сделал: «Сильный» легко запомнить, если он что-то выделил жирным шрифтом, но почему элемент использует их? Эм это аббревиатура для акцента. Это может помочь вам остаться.
Этот текст выделен жирным шрифтом, я за сильный акцент
Кроме того, вы можете использовать WordPress WYSIWYG, конечно же, или сочетание клавиш CTRL + B для полужирного и CTRL + I для курсива после выделения текста, который вы хотите изменить.
Чтобы просмотреть полный список сочетаний клавиш WordPress и других форматов, нажмите здесь.
Существуют некоторые правила о том, как вы должны и не должны их использовать, например, сохранять их взаимоисключающими, резервировать их для коротких предложений и использовать их экономно.
Практический шрифт имеет отличную статью, которая объясняет важность этих правил.
Если вы пишете копию, чтобы действительно привлечь людей, например, коммерческую копию, эти правила могут быть согнуты, но их нельзя нарушать.
акцент
помните, если все подчеркнуто, то ничто не подчеркнуто!
Списки: упорядоченные и неупорядоченные
Существует два типа списков, которые вы можете добавить с помощью HTML, которые также совместимы с WordPress WYSIWYG.
Это:
Упорядоченные списки
- Объект 1
- Статья 2
- Статья 3
- Объект 1
- Статья 2
- Статья 3
Упорядоченные списки отображаются в виде последовательности пронумерованных элементов. Это полезно при написании списка, в котором важен порядок.
Код выше становится:
Грязные списки
- Объект 1
- Статья 2
- Статья 3
- и они полностью обернуты одним
- или
- обертка.
Важно помнить об этом, потому что если обернуть
- или
- отсутствующие элементы из списка, которые не будут отображаться.
- таблицы
- галереи
- Ценовые пакеты
- Видео
- Ведущие магниты / формы подписки по электронной почте
- Эпизоды подкастов
-
Не добавляйте ненужные разрывы строк. Это значит стараться не использовать
HTML-тег и не нажимайте ввод дважды между абзацами и разделами, если в этом нет крайней необходимости. Это делает ваши статьи грязными, и вы неизбежно создаете несоответствия. - Не добавляйте семейства шрифтов, размеров и цветов для конкретной страницы – Опять же, это заставляет ваши посты выглядеть ужасно и выглядеть так, как будто они были созданы в 1995 году. Вы можете подумать, что зеленый заголовок нестандартного размера с уникальным шрифтом поразителен, когда он действительно выделяется как непоследовательный и непрофессиональный. Ваша тема должна диктовать эти стили.
- Никогда не добавляйте HTML или встроенный код на вкладку Visual – Это может привести к неожиданным результатам, много чистить или полностью сломать вашу страницу.
- Никогда не загружайте видео в WordPress – Ваш хостинг не предназначен для доставки видео контента. К счастью, YouTube и Vimeo обеспечивают супер быстрый и 100% бесплатный хостинг видео в любом случае. Вот почему лучше вставлять видео с YouTube, даже если они ваши.
образность
Другим важным аспектом форматирования поста в блоге или любой страницы с помощью WordPress является использование изображений, и у вас не должно возникнуть проблем с поиском интересных фотографий, которые можно получить из изображений с Yahoo и других сайтов, не защищенных авторским правом. Некоторые из этих опций являются платными, но многие из них бесплатны, если вы предоставляете кредит с упоминанием и ссылкой.
Небольшая цена за профессиональное изображение на вашем сайте или в блоге.
Изображение стоит тысячи словКак они говорят, они также предоставляют своим читателям визуальные стимулы и паузы, чтобы помочь разбить их содержимое на удобочитаемые фрагменты.
Это помогает заинтересовать ваших читателей, и, хотя вам не нужно самостоятельно кодировать изображения, понимание синтаксиса полезно.
Вот пример кода изображения и как он будет выглядеть, когда вы увидите вкладку Текст вашего редактора.
Изображение не требует закрывающего тега, поскольку вся необходимая ему информация содержится в открывающих и закрывающих скобках элемента HTML. Src просто вызывает местоположение URL.
WordPress позволяет перемещать изображения влево, вправо или центрировать их. Если вы сделаете это и проверите код на вкладке «Текст», вы увидите, что были добавлены классы, которые используются для соответствующего оформления изображений.
Это пример использования внешнего CSS для применения разных стилей к разным изображениям. Полезно знать!
Важно: перед добавлением изображений в ваши посты и страницы убедитесь, что они оптимизированы для скорости и поисковых систем.
встроенный
Неизбежно, вы захотите использовать встроенные коды с внешних сайтов.
Например, когда вы хотите добавить видео с YouTube или Vimeo, вы собираетесь поделиться им, и он дает вам длинный код, который вы можете скопировать.
Главное, что нужно помнить, это то, что вы не можете вставить HTML или любой другой код в визуальную вкладку редактора контента. Это закодирует код и сделает его бесполезным, когда вы нажмете «Сохранить».
Убедитесь, что вы идете на вкладку текста, а затем вставьте его туда, где вы хотите, чтобы он появился.
Ниже приведен пример кода для вставки YouTube.
(вставлять) https://www.youtube.com/watch?v=ssxCQuv3KzE (/ вставлять)
Хотя WordPress позволяет просто вставить URL-адрес YouTube в ваше сообщение, чтобы отобразить его как видео, это может не дать вам полный контроль над размерами видео и другими настройками вставки.
По этой причине и поскольку я из старой школы, я все еще использую код для вставки из iframe.
Большинство веб-сайтов, которые предлагают встроенные коды, изначально не совместимы с WordPress, поэтому вам все равно нужно знать коды для вставки, фреймы и как они работают, чтобы добавлять мультимедиа в ваши сообщения.
шорткоды
Шорткоды не являются HTML. На самом деле, они даже не являются языком программирования, они являются встроенной функцией WordPress, которая позволяет разработчикам плагинов и тем создавать простые способы для вас и меня добавлять элементы на наши веб-страницы и сообщения.
Простейшим примером, представленным почти в каждом блоге, является шорткод контактной формы, но существуют сотни, если не тысячи, потенциальных применений шорткодов, которые включают возможность добавления:
Вот короткий код для контактной формы, созданной плагином Contact Form 7, одним из наших рекомендуемых плагинов, который мы устанавливаем на 90% наших сайтов и блогов.
Примечание: Мне пришлось добавить пробелы после открытия и перед закрытием скобок, чтобы на самом деле не отображалась форма контакта, поэтому представьте это без пробелов.
(contact-form-7 id = "28" title = "Контактная форма 1")
Обратите внимание, что синтаксис шорткода отличается. Они начинаются с открывающей скобки (и заканчиваются закрывающей) вместо.
Затем они форматируются разработчиком шорткода, чтобы вам было легко настраивать и изменять основные параметры.
Когда веб-страница загружается, эта контактная форма загружает около 20 строк беспорядочного HTML, что значительно упрощает доступ к короткому коду.
Единственное предостережение в том, что вы не хотите злоупотреблять шорткодами, поскольку они замедляют работу ваших веб-страниц.
Они полезны для изучения и могут значительно облегчить процесс редактирования вашей публикации, когда вам не нужно использовать большие объемы HTML, которые вы не понимаете, и вам нужно работать с осторожностью.
Различные советы по форматированию
Есть несколько других советов, которые я советую новым учащимся WordPress иметь в виду, которые я кратко расскажу.
К ним относятся:
Ничего сложного, но я часто вижу, как люди делают эти ошибки и делают жизнь более трудной для них.
Но скоро все может быть по-другому, на самом деле совсем по-другому!
Гутенберг, будущее блоггинга?
Gutenberg – это новый редактор контента, созданный с нуля WordPress, который скоро будет установлен рядом с вами.
Это будущее блоггинга? Кто знает? Но это определенно будущее WordPress, так что пришло время сделать это.
Гутенберг другой зверь.
Если вы когда-либо использовали Medium.com для ведения блогов, то, впервые попробовав Гутенберга, вы будете чувствовать себя очень похожим.
На мой взгляд, это хорошая вещь, бесплатный редактор контента Medium очень прост в использовании, и наблюдение за WP обращает на это внимание всех, кто работает с блогами и сайтами, работающими на WP. ,
Редактор Гутенберга также является модульным и позволяет перетаскивать блоки на контент, каждый из которых имеет свою цель.
Это похоже на то, как плагины компоновщика страниц и некоторые темы в настоящее время предоставляют такое решение для перетаскивания, но теперь эти функции доступны в WordPress по умолчанию.
Если есть один аспект WordPress, который не развивался много лет, это редактор TinyMCE, поэтому я ценю это новшество с распростертыми объятиями.
Если у вас возникли проблемы с форматированием сообщений в блоге в текущем редакторе, вы можете попробовать Gutenberg прямо сейчас, загрузив и установив его, перейдя к плагинам на панели инструментов и выполнив поиск «Gutenberg».
Формат блога и финальное HTML Заключительное слово
Потратив немного времени на практику вышеизложенного, вы получите гораздо больший контроль над своим контентом и тем, как он представлен.
Надеюсь, теперь вы чувствуете себя немного комфортнее с форматированием постов в блоге и базовым использованием HTML.
Эти навыки могут сэкономить вам много времени, денег и почесать голову, если форматирование вашего контента не удается или обрабатывается неправильно.
В то время как вышеупомянутых основ достаточно для большинства блоггеров WordPress и владельцев веб-сайтов, если вам интересно узнать больше, есть несколько отличных бесплатных веб-сайтов, где вы можете изучать HTML, включая CodeAcademy и w3Schools.
А теперь иди и сделай свой контент красивым! 🙂
Если эта статья кажется вам полезной, рассмотрите другие наши полезные руководства для блогов, такие как наш Контрольный список публикаций в блоге: Основное руководство или Как повторно использовать контент, и если вы являетесь поклонником таких руководств, подпишитесь на мою рассылку. и я поделюсь с вами своим лучшим контентом и открытиями по электронной почте.
Неупорядоченные списки по сути являются маркированными списками.
И это становится следующим списком.
Мы все знаем, насколько полезны списки, и они также помогают разделить ваш контент и сделать его более интересным.
Ключевое отличие, которое вы заметите, заключается в том, что существуют отдельные элементы списка.
