Html в wordpress: Преобразование HTML-сайтов в WordPress | CMS и движки для сайтов – Как натянуть HTML шаблон на WordPress ▶ за 10 минут

Содержание

Как загрузить HTML-страницы в WordPress без ошибки 404

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

WordPress поставляется со встроенным типом контента для добавления страниц на ваш сайт. Часто темы WordPress добавляют предварительно разработанные шаблоны страниц для отображения ваших страниц.

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

Это означает, что в большинстве случаев вам не нужно загружать HTML-страницу на сайт WordPress.

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

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

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

Загрузка HTML-страницы на сайт WordPress

Прежде чем загружать HTML-страницу на сайт WordPress, вам нужно убедиться, что файл index.html переименован в «index.php».

Как загрузить HTML-страницы в WordPress без ошибки 404Как загрузить HTML-страницы в WordPress без ошибки 404

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

Пользователи Windows могут щелкнуть правой кнопкой мыши и выбрать «

Отправить» в «Сжатая ZIP-папка», чтобы создать zip-файл. Затем просто перетащите все файлы и папки для своей HTML-страницы в zip-файл.

Как загрузить HTML-страницы в WordPress без ошибки 404Как загрузить HTML-страницы в WordPress без ошибки 404

Пользователи Mac могут выбрать родительскую папку, содержащую все файлы и папки, а затем щелкнуть правой кнопкой мыши, чтобы выбрать опцию «Сжать папку».

Как загрузить HTML-страницы в WordPress без ошибки 404Как загрузить HTML-страницы в WordPress без ошибки 404

Затем вам нужно перейти в cPanel вашей учетной записи хостинга WordPress. В cPanel вам нужно прокрутить вниз до раздела «Файлы», а затем щелкнуть мышью на приложении «Диспетчер файлов».

Как загрузить HTML-страницы в WordPress без ошибки 404Как загрузить HTML-страницы в WordPress без ошибки 404

После того, как вы находитесь в Диспетчере файлов, вам необходимо перейти к корневой папке веб-сайта, которая обычно называется public_html, и содержит все папки файлов WordPress. Оттуда вам нужно щелкнуть ссылку «

Папка» в верхнем меню, чтобы создать новую пустую папку.

Как загрузить HTML-страницы в WordPress без ошибки 404Как загрузить HTML-страницы в WordPress без ошибки 404

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

Как загрузить HTML-страницы в WordPress без ошибки 404
Как загрузить HTML-страницы в WordPress без ошибки 404

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

Как загрузить HTML-страницы в WordPress без ошибки 404Как загрузить HTML-страницы в WordPress без ошибки 404

После загрузки вам нужно выбрать zip-файл, а затем нажать кнопку «

Извлечь» в верхнем меню.

Как загрузить HTML-страницы в WordPress без ошибки 404Как загрузить HTML-страницы в WordPress без ошибки 404

Вам будет предложено извлечь файлы. Просто выберите одну и ту же новую папку, которую вы создали, и нажмите кнопку «Извлечь файл».

Как загрузить HTML-страницы в WordPress без ошибки 404Как загрузить HTML-страницы в WordPress без ошибки 404

File Manager теперь извлечет zip-файл, и вы сможете видеть файлы в своей папке.

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

Как загрузить HTML-страницы в WordPress без ошибки 404Как загрузить HTML-страницы в WordPress без ошибки 404

Теперь вы можете посетить эту страницу в браузере, используя имя папки (например, yourwebsite.com/example). Если ваш сервер не поддерживает перенаправление, вы можете увидеть ошибку 404. Это происходит потому, что ваш файл index.php не перенаправляется при загрузке URL-адреса в браузере.

Это одна из распространенных ошибок WordPress и может быть легко исправлена.

Используя приложение File Manager , вам необходимо отредактировать файл .htaccess в корневой папке вашего сайта и добавить следующий код:

RewriteRule ^(.*)index\.(php|html?)$ /$1 [R=301,NC,L]

 

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

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

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

конвертируем статичный HTML в WordPress-тему – Блог про WordPress

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

Достаточно предоставить сервису URL-адрес своего сайта и определить разные части сайта, после чего сервис создаст тему с соответствующим макетом практически мгновенно. Это прекрасно звучит в теории, но как это выглядит на практике? Давайте посмотрим на данный сервис в нашем обзоре Theme Matcher.

Простые шаги, выполняемые Theme MatcherПростые шаги, выполняемые Theme Matcher

Пользовательский интерфейс

Начало работы с сервисомНачало работы с сервисом – задаем URL

Чтобы начать пользоваться сервисом Theme Matcher, вам достаточно ввести URL-адрес вашего сайта, который вы хотите конвертировать, после чего выбрать области сайта, которые будут соответствовать базовым компонентам WordPress-темы. Необходимо будет выбрать области контента источника, которые будут использоваться для отображения записей и страниц в теме.

Определяем область контента для новой WordPress темыОпределяем область контента для новой WordPress темы

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

Определяем область сайдбараОпределяем область сайдбара

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

Превью готовой темыПревью готовой темы

Если вы испытываете сложности с использованием онлайн-инструментов, вы можете заказать создание темы у команды Theme Matcher. Используйте помощь, через которую вы можете послать разработчикам адрес сайта, после чего получить уже готовый результат. Проще быть не может.

На странице превью вы можете при необходимости запустить процесс заново, либо скачать тему. На данном этапе вам нужно выбрать вариант цены или указать код, который позволит вам скачивать тему снова, если вы будете использовать ревизии.

Теперь тему можно скачать: за отдельную плату...Теперь тему можно скачать: за отдельную плату…

Страница загрузки включает в себя инструкции, раскрывающие основные моменты – как загрузить тему, как установите WP. Установка темы производится обычным способом, загружая zip-файл через панель администратора или закачивая тему с помощью FTP.

Как выглядит тема в админкеКак выглядит тема в админке

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

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

Почему стоит обращаться к Theme Matcher

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

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

Другой случай, когда данный сервис может оказаться полезным – при использовании компаниями, которым требуется добавить блог к своему сайту с дизайном на базе принадлежащего им обычного сайта (не WP). С помощью данного инструмента компания сможет легко воссоздать блог, который будет в полной мере соответствовать существующему сайту.

Дизайнеры извлекут из данного инструмента определенную пользу, поскольку они смогут быстро разработать прототип темы на базе макета HTML, и затем использовать Theme Matcher для генерации WordPress темы. Это поможет заметно снизить время разработки, поскольку для создания макета достаточно обращаться лишь к HTML и CSS. Макет HTML можно легко и быстро преобразовать в тему.

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

Цена

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

Цены на конвертацию темЦены на конвертацию тем

Доступны три ценовых схемы:

  • 47$ за одну тему с двумя ревизиями и стандартной поддержкой
  • $67 за одну тему с пятью ревизиями и премиум-поддержкой, а также бесплатной CSS-настройкой от разработчиков
  • $297 за 10 тем, что рассчитано на реселлеров, дизайнеров или фрилансеров.

Все ценовые варианты включают в себя получение SEO-оптимизированной темы, построенной на базе HTML5 CSS3. Никаких логотипов или ссылок на Theme Matcher нет. Также дается 60-дневный манибэк, если вы не удовлетворены результатами.

В то время как вы могли бы приобрести себе премиум-тему за $47, с помощью данного сервиса вы получаете произвольную тему, основанную на вашем собственном макете или на существующем сайте, позволяя вам перенести ваш фирменный стиль на платформу WP; вам не придется нанимать разработчиков.

Заключение

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

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

Вы всегда можете посмотреть превью перед покупкой темы, потому нет никаких причин отказываться от применения данного сервиса.

Источник: wplift.com

Как html перевести в WordPress 🚩 Компьютеры и ПО 🚩 Другое

Обязательное требование перед началом работы — это создание резервной копии. Это обязательное действие позволит сохранить рабочую версию в случае ошибок и сравнить версии для корректировки.

Также в рамках предварительных работ следует сделать следующее:

  1. Провести изучение элементов, имеющихся на сайте.
  2. Оценить навигацию сайта.
  3. Проверить контент и отсечь материалы плохого качества.
  4. Выявить недочеты, тормозящие работу сайта.
  5. Ознакомиться с WordPress, если опыта работы с этой системой нет.

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

Первое, что нужно сделать при переносе — установить и настроить несколько плагинов, облегчающих перенос данных. Вот основные плагины, которые должны быть:

  1. Contact Form 7/Gravity Forms для создания форм.
  2. Yoast SEO/All in One SEO Pack для работы с SEO-данными их переносом.
  3. WPML – плагин для тех, кто переносит многоязычный сайт.
  4. WP Total Cache/Image Optimizer – плагины кеширования, позволяющие сайту быстрее загружаться.

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

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

Если материала очень много, можно использовать плагин под названием HTML Import 2/Import HTML Pages. Плагины позволяют без ошибок переносить как обычный контент, так и форматированный. Правда, адаптация будет самой низкой, а все правки придется вносить самостоятельно. Пускай автоматический перенос не является совершенным, он все равно позволяет сократить ручную рутинную работу.

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

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

Другой способ, более сложный, заключается в создании темы на основе исходного кода. Сложность в том, что человеку придется в прямом смысле «перелопатить» старый сайт и его код, а для этого нужны специализированные знания.

На этом все основные действия закончены. Осталось лишь перенести саму среду WP на хостинг (многие хостинги или содержат ее, или имеют подробную инструкцию по переносу) и проверить новый рабочий сайт.

Как вставить код в страницу WordPress: простые способы

Как вставить код в страницу WordPressЗдравствуйте, уважаемые читатели!

Поговорим о программном коде на сайте. Нередко у вебмастера возникает необходимость на одну или несколько страниц сайта вставить код. WordPress позволяет использовать php, java, html, css и т.п. код двумя способами: в качестве исполняемых команд, интерпретируемых движком сайта, и в виде доступного для чтения и копирования текста. В этой статье рассмотрим примеры того, как вставить код в страницу WordPress, чтобы он отображался корректно и красиво для посетителей.

Содержание:

  1. Кому и зачем нужен код на страницах сайта
  2. Использование тегов и возможностей WordPress
  3. Плагины для вставки и подсветки кода

Код в виде текста: зачем это нужно

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

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

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

Как добавить код в статью без плагина

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

Добавляемый в визуальном редакторе контента блок, состоящий из одной и нескольких строк кода, WordPress при переходе в текстовый режим заменяет в тегах все символы < и > символами &lt; и &gt;

Чтобы показать CMS, что определенный фрагмент кода должен выводиться на странице «как есть», его в текстовом редакторе WordPress необходимо выделить и «обернуть» тегом <code> с помощью кнопки на панели инструментов:

Как вставить код в страницу WordPress

Выглядеть на странице это будет примерно так:

<table border="1">
<tr>
<th>Наименование 1</th>
<th>Наименование 2</th>
</tr>
<tr>
<td>Значение 1</td>
<td>Значение 2</td>
</tr>
</table>

Чтобы вставить код в страницу WordPress с заданными отступами, при переходе из визуального редактора контента в текстовый можно использовать тег html <pre>, сохраняющий все дополнительные пробелы, служащие для формирования отступов. Содержимое элементов <pre> и <code> по умолчанию отображается браузерами моноширинным шрифтом.

Пример того, как в WordPress вставить html-код на страницу без плагинов с помощью тега <pre>:

<table border="1">
     <tr>
          <th>Наименование 1</th>
          <th>Наименование 2</th>
     </tr>
     <tr>
          <td>Значение 1</td>
          <td>Значение 2</td>
     </tr>
</table>

К тегу <pre> применимы универсальные атрибуты, в частности, атрибут style, используемый для определения элемента с помощью CSS. В приведенном ниже примере показано, как значениями атрибута style задаются цвет выводимого текста, цвет фона блока, толщина, цвет и радиус закругления границы блока:

<pre>

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

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

Плагины вставки кода для WordPress

Предлагаем на выбор несколько плагинов из официального репозитория WordPress, позволяющих выводить любой код (php, java, html, css) красиво: построчно и с соответствующей подсветкой элементов.

SyntaxHighlighter Evolved

Вставить код WordPress: плагин SyntaxHighlighter Evolved

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

В плагине SyntaxHighlighter Evolved предусмотрено все, что может когда-либо понадобиться. Вставить код в статью WordPress с его помощью очень просто, для этого необходимо в настройках разрешить плагину обрабатывать тег <pre> или использовать соответствующие шорткоды:

[php]пример[/php]
[html]пример[/html]
[css]пример[/css]
[codelang="js"]пример[/code]

WP-Syntax

Вставить код WordPress: плагин WP-Syntax

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

WP-Syntax не имеет собственной страницы настроек. Этот плагин WordPress для редактирования кода, точнее, для его вставки и изменения вида подсветки синтаксиса использует тег <pre> с атрибутом выбора языка:

<pre lang="php">пример</pre>
<pre lang="java">пример</pre>
<pre lang="css">пример</pre>

Список поддерживаемых языков приводится на странице плагина.

Атрибут line в теге служит для отображения нумерации строк, его значение соответствует номеру строки, с которого начинается отсчет. Если код содержит html-объекты, рекомендуется использовать атрибут escaped со значением true в качестве опции:

<pre lang="xml" line="1" escaped="true">пример</pre>

Пример вывода и подсветки CSS-кода с помощью плагина:

1
2
3
4
5
6
7
8
.block {
 border: 2px #8E0505;
 color: #2D0000; /*цвет текста*/
 padding: 2px; /*внутренние отступы*/
 text-align: left; /*выравнивание текста*/
 font-family: arial;
 font-size: 14px;
}

.block { border: 2px #8E0505; color: #2D0000; /*цвет текста*/ padding: 2px; /*внутренние отступы*/ text-align: left; /*выравнивание текста*/ font-family: arial; font-size: 14px; }

При переключении из html-редактора в визуальный режим тег WordPress интерпретирует тег <pre> и код не отображается правильно. Поэтому при редактировании статей со вставками блоков кода необходимо использовать редактор контента в режиме html.

Code Prettify

Вставить код WordPress: плагин Code Prettify

Легкий плагин без настроек, дающий возможность вставить код на сайте WordPress с использованием автоматической подсветки без необходимости указывать язык. Реализует подсветку для тегов <pre> и <code> на странице. Простое решение на основе модуля Google Code Prettify library для тех, кто не желает вникать в особенности форматирования синтаксиса выводимых на сайте блоков с программным кодом.

Заключение

Рассмотренные в статье решения на основе плагинов — лишь малая часть того, что предлагает хранилище плагинов WordPress. Перейдя по ссылкам меню консоли «Плагины — Добавить новый» на страницу поиска, по ключевым словам Highlight и Syntax можно обнаружить еще несколько десятков аналогичных плагинов, позволяющих красиво оформить программный код. Важно понимать, насколько уместным и необходимым будет подобный плагин на сайте. Возможно, именно в вашем случае вставить код в страницу WordPress будет проще вручную в текстовом редакторе, воспользовавшись тегами <pre> и <code>.

Добавляем приставку .html ко всем страницам на WordPress

Несколько дней назад один из наших посетителей на странице “Стол заказов” попросил помочь ему и найти способ решить две его задачи. На самом деле все очень просто и я прямо сейчас напишу как же вставить в URL адрес страницы приставку .html, а в следующей статье напишу ещё об одном плагине для вывода постов.

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

Приступим к делу!

Как добавить html к окончанию URL в вордпресс?

Нужно понимать, что существую два типа страниц в самой системе wp:

  1. Записи (посты) /wp-admin/post.php
  2. Страницы /wp-admin/post-new.php?post_type=page

Для записей добавить окончание .html можно так:

Настройки -> Постоянные ссылки (/wp-admin/options-permalink.php)

И в поле “Произвольно”, вставляем /%postname%.html

Однако этот способ подходит только для ЗАПИСЕЙ, а что же делать со страницами?

Добавляем к странице html окончание

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

1. Скачиваем плагин по ссылке ниже

2. Разархивируем его в папку на хостинге /wp-content/plugins/

3. Заходим в админ центр сайта, потом в “Плагины” и активируем его:

Вот и все, теперь к каждому url будет автоматически добавляться .html окончание.

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

HTML-редактор WordPressЗдравствуйте, уважаемые читатели!

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

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

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

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

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

Что такое 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. Третий элемент
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-редактора.

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

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

Адаптивная, SEO подготовленная WordPress тема

Расширение .html на конце URL ссылок в WordPress

Вы наверное замечали, что на многих сайтах стоит расширение .html в конце адреса страницы , что то вроде этого:

www.mysait.ru/page.html

В WordPress это реализуется благодаря настройки ЧПУ — структуры постоянных ссылок.

Добавить расширение .html для записей в WordPress

Чтобы добавить расширение .html в конец url адресов ваших записей, в админке WordPress перейдите на вкладку «Настройки — Постоянные ссылки» и поменяйте структуру ЧПУ. Поставьте произвольную структуру и введите в соответствующее поле:

/%postname%.html

или

/%category%/%postname%.html

Таким образом вы добавите расширение HTML на конце URL адресов для записей WordPress.

Добавляем расширение HTML для страниц WordPress

Для добавления расширения HTML к URL адресу страницы потребуется плагин «HTML on Pages«. Установите плагин в админке WordPress на вкладке «Плагины — Добавить плагин». Введите имя плагина в поле поиска, в открывшемся списке выберите нужный плагин, установите его и активируйте.

После установки и активации плагина «HTML on Pages» на конце WordPress страниц также появится расширение .html.

 Зачем нужно расширение html в url страниц и записей WordPress

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

Author: admin

Отправить ответ

avatar
  Подписаться  
Уведомление о