Как html сайт натянуть на wordpress: Верстка шаблона для сайта на движке WordPress | Создание динамической структуры

Как натянуть html шаблон на WordPress на примере — WordPress

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

Алгоритм установки любого html шаблона на WordPress

1. Устанавливаем CMS WordPress на локальный хостинг.
2. Скачиваем пустую тему
3. Скачиваем html-шаблон
4. Устанавливаем пустую тему
5. Переносим содержимое html-шаблона: стили, скрипты, картинки в папку с пустой темой
6. Создаем каркасы страниц
7. Задаем пути для стилей, картинок, скриптов
8. Настраиваем файлы темы WordPress
9. Заменяем статический контент на динамический

Вот 9 шагов, следую которым можно установить любой html-шаблон

Установка CMS WordPress на локальный хостинг

Рекомендую в качестве локального хостинга использовать Open server. Преимущество локального хостинга в скорости и удобстве работы над сайтом. Скачать последнюю версию можно с официального сайта. На момент написания этой статьи доступна версия 5.3.7, которая весит 835 Мб. Итак, скачиваем файл установки, распаковываем и устанавливаем.

Производим установку WordPress на OpenServer:

1. В папке на компьютере \OpenServer\domains\ создаем папку с доменом (в моем случае папка будет называться setup).
2. Распаковываем содержимое CMS WordPress в только что созданную папку \OpenServer\domains\setup
3. Создаем домен для нашего проекта, для этого в программе Openserver переходим Меню -> Настройки -> Домены. Далее выбираете из выпадающего списка УПРАВЛЕНИЕ ДОМЕНАМИ пункт РУЧНОЕ УПРАВЛЕНИЕ. Вводите имя домена (в моем случае setup) и указываете папку setup и нажимаете кнопку ДОБАВИТЬ и затем кнопку СОХРАНИТЬ
4. Создаем базу данных, для этого открываем Дополнительно -> PhpMyAdmin. Далее в открывшемся окне вводим имя пользователя root и пароль root и создаем базу данных.
5. Вводим в браузере адрес http://setup и производим установку CMS WordPress

Эта была приведена краткая инструкция по установке wordpress на openserver. Подробную инструкцию читайте здесь.

Скачиваем пустую тему для WordPress

Для создания пустых тем я использую сервис Underscores (Андерскорс), который позволяет создавать стартовую тему. Сама тема не имеет никакого дизайна, но обладает рядом преимуществ:

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

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

Скачиваем html-шаблон

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

Установка пустой (стартовой) темы на WordPress

После того как мы установили WordPress на хостинг, переходим к установке стартовой темы на сайт. Для этого заходим в админку сайта, выбираем вкладку ВНЕШНИЙ ВИД -> ТЕМЫ и нажимаем кнопку ДОБАВИТЬ. Затем в открывшемся окне нажимаем кнопку ЗАГРУЗИТЬ ТЕМУ, выбираем файл и жмем кнопку УСТАНОВИТЬ. Через некоторое время тема будет установлена. После установки вышеуказанной темы нажимаем кнопку АКТИВИРОВАТЬ. После активации темы переходим на наш сайт и смотрим. Вот что получилось.

Копирование html шаблона в папку с темой WordPress

1. Теперь открываем наш html шаблон и копируем файлы в папку с темой wordpress.
2. Производим настройку WordPress. Для этого открываем в админке НАСТРОЙКИ ->ЧТЕНИЕ и выбираем НА ГЛАВНОЙ СТРАНИЦЕ ОТОБРАЖАТЬ СТАТИЧЕСКУЮ СТРАНИЦУ И выбираем ПРИМЕР СТРАНИЦЫ.
3. Открываем в редакторе Sublime файл index.html нашего шаблона. Выделяем весь код и копируем его в файл page.php нашей темы и сохраняем. Переносим папку с нашей темой на wordpress в редактор Sublime. Переходим на свой сайт и смотрим что получилось.

 

На сегодня все. В следующих статьях мы дальше пойдем по алгоритму и продолжим интеграцию html шаблона на WordPress.

Как перенести HTML-код на WordPress

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

Варианты переноса HTML-сайта на WordPress

Перенос HTML-сайта с готовой структурой на WordPress не такая сложная процедура, как может показаться. Есть три варианта действий:

1. Переносить вручную. На это придется потратить много времени, плюс, для этого требуются определенные навыки веб-разработки и программирования. Однако так можно лучше разобраться в работе как своего сайта, так и CMS. Доступ к корневой папки с HTML, CSS, JS файлами придется получить через FTP-клиент. В его структуру потребуется добавить несколько PHP-файлов для инициализации темы в WordPress.
2. Приобрести готовую тему. Данный вариант можно рассматривать в том случае, если у вас нет разработанной темы. На WordPress можно найти много уже готовых бесплатных тем, а установить их не составит труда даже для пользователя, слабо знакомого с веб-разработкой. Есть также платные темы с премиальным функционалом.
3. Заказать перенос. Суть заключается в том, что вы ищите разработчика, который перенесет готовый сайт на WordPress и адаптирует его в качестве темы. Иногда подобные услуги предлагает сам хостинг, на котором размещается сайт.

Пример редактора тем в WordPress

Подробно будет рассмотрен только первый вариант.

Установка WordPress

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

Рассмотрим процесс установки вкратце:

1. Скачайте архив с дистрибутивом WordPress с официального сайта.
2. Распакуйте архив. Пока файлы из него можно вынести куда-нибудь на компьютер.
3. Создайте базу данных MySQL на вашем сервере или запросите к ней доступ, если используете сторонний хостинг. Обратите внимание, что у некоторых тарифов хостинга может не быть поддержки MySQL и PHP. Выбирайте тариф только с их поддержкой.
4. Откройте перечень файлов, которые ранее разархивировали. Переименуйте файл wp-config-sample.php в wp-config.php.
5. Переместите папку с файлами WordPress к себе на сервер в корневую папку сайта.
6. Перейдите в любом браузере по ссылке wp-admin/install.php для доступа к админки вашего сайта. Там вам придется указать имя пользователя и пароль.

Добавление информации для доступа к админ-панели

Перенос готового HTML-шаблона на WordPress

Если вам нужно перенести не только контент сайта, но и его дизайн, то придется создавать тему. Для этого потребуется не только доступ ко всем файлам сайта, но и удобный редактор кода, например VisualStudio Code или другой похожий. Далее разделим для удобства весь процесс на несколько этапов.

Этап 1: Создание файлов темы

Создайте на компьютере отдельную папку, где будет хранится информация о вашей теме. Эту папку нужно открыть в выбранном для работы редакторе кода. Создавать в ней новые файлы рекомендуется как раз через редактор кода. В Visual Studio Code это можно сделать.

Создайте файлы со следующими наименованиями:

• style.css;
• index.php;
• header.php;
• sidebar.php;
• footer.php.

Базовая файловая структура для темы

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

Этап 2: Прописывание стилей

Для начала вам придется отредактировать файл style.css. В него, в самом начале пропишите этот код:

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

Этап 3: Перенос HTML-кода

На этом этапе нужно перенести данные из файла index.html в index.php. Ничего страшного, что верстка будет в PHP-файле. Он умеет корректно обрабатывать HTML. Это необходимо из-за особенностей WordPress, так как HTML-файлы он воспринимает не очень хорошо, поэтому все ключевые элементы сайта желательно прописывать в PHP-файлах, пускай PHP-кода там почти и нет.

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

Все, что осталось в index.html копируйте в index.php. Не нужно копировать данные о шапке, боковых меню и футере, так как они уже добавлены в отдельный файл.

Этап 4: Инициализация index.php

В качестве завершающего этапа настройки темы нужно провести инициализацию файла index.php. Перед началом основного HTML-кода вставьте строку:

Она необходима для подключения файла header.php. В скобках пропишите путь до объекта. По аналогии пропишите в самом конце HTML-разметки строки для вызова бокового меню и подвала:

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

Теперь осталось только доделать мелкие детали, например, переподключить сторонние файлы, что-то подправить, если верстка в итоге съехала и можно сохранять файл. На этом создание темы для WordPress завершено.

Этап 5: Добавление темы в WordPress

Созданную тему осталось только загрузить в админку сайта и применить. Папку с новой темой нужно переместить по пути: /wp-content/themes/. Начальная часть адреса может отличаться в зависимости от хостинга, сервера и самой структуры сайта. Теперь останется только выбрать загруженную тему в панели управления:

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

2. Переключитесь во вкладку “Внешний вид” в левом меню.

3. В новом окне воспользуйтесь кнопкой “Добавить новую” и выберите свою тему среди доступных. Если вы ее загрузили на хостинг, то она должна там быть.

Переход к разделу с темами

4. Или загрузите тему, воспользовавшись кнопкой “Загрузить тему”.

Загрузка готовой темы через WordPress

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

Заключение

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

Как загрузить файл HTML в WordPress

У вас есть файл HTML, который вы хотите добавить на свой сайт WordPress?

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

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

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

1 Когда загружать файлы HTML в WordPress

2 Меры предосторожности перед загрузкой HTML-страницы

2.1 1. Сделайте резервную копию вашего сайта

2.2 2. Создайте промежуточную среду

3 Как загрузить файл HTML на сайт WordPress

3.1 1. Загрузите HTML-файл через панель инструментов WordPress.

3.1.1 А. Загрузка HTML-файла с помощью Гутенберга

3.1.2 B. Загрузка HTML-файла с помощью классического редактора

3. 2 2. Загрузите файл HTML с помощью cPanel

3.3 3. Загрузите файл HTML с помощью FTP

4 Как устранить ошибки при загрузке файлов HTML

5 Что дальше?

Когда загружать HTML-файлы в WordPress 

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

Есть несколько причин, по которым вы можете захотеть использовать файл HTML на своем сайте:

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

2. У вас есть существующий HTML-файл — Возможно, вы создали веб-сайт с использованием HTML в прошлом и хотите перевести его на WordPress. Таким образом, загрузка HTML-файлов может быть проще, чем воссоздание контента. Это сэкономит вам много времени.

3. Вам необходимо подтвердить Google Search Console — Существуют различные способы подтвердить право собственности на домен при регистрации в Google Search Console или Analytics. Рекомендуемый метод — загрузить файл подтверждения Google HTML.

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

Хотите создать персонализированную страницу своего сайта? Есть ли плагины, которые могут позаботиться об этом за вас?

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

Если вы уверены, что загрузите свой HTML-файл в WordPress, вы можете перейти к следующим шагам.

Меры предосторожности, которые необходимо предпринять перед загрузкой HTML-страницы

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

1. Примите резервная копия вашего сайта 

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

Установите Blogvault на панель управления wp-admin и зарегистрируйтесь:

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

Если вам не подходит Blogvault, ознакомьтесь с лучшими плагинами для резервного копирования WordPress и нашим руководством по резервному копированию вашего сайта WordPress вручную.

2. Создание тестовой среды 

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

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

Мы настоятельно не рекомендуем пытаться загрузить HTML-файл непосредственно на ваш работающий сайт.

Вы можете бесплатно создать тестовый сайт с помощью BlogVault.

Как мы упоминали в предыдущем разделе, после регистрации в BlogVault для вас будет автоматически создано резервное копирование. Далее вы можете перейти к Раздел Staging на панели инструментов BlogVault и выберите Add a Staging Site.

BlogVault создаст промежуточный сайт, защищенный паролем. Это гарантирует, что сайт скрыт от поисковых систем и любых посетителей.

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

Чтобы войти в систему с помощью wp-admin промежуточного сайта, добавьте «/wp-admin» к URL-адресу промежуточного сайта, например:

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

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

Ваш HTML-файл также появится на вашем работающем сайте без простоев и перерывов в работе сайта. Готовы загрузить свой HTML-файл? Давай начнем.

Как загрузить HTML-файл на сайт WordPress

Существует три способа загрузки HTML-файла в WordPress:

1. Загрузите HTML-файл через панель управления WordPress 

2. Загрузите HTML-файл с помощью cPanel 

3. Загрузите HTML-файл с помощью FTP

. Проще всего использовать панель инструментов WordPress, но этот метод не всегда работает. Итак, мы также подробно описали два ручных метода — через FTP и cPanel.

1. Загрузите HTML-файл через панель управления WordPress

Шаг 1: Войдите в свою панель управления WordPress и откройте Media > Add New.

Шаг 2: Выберите файл HTML на своем компьютере и загрузите его, как любое изображение или видео.

При этом вы, скорее всего, столкнетесь с такой ошибкой:

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

A. Загрузка HTML-файла с помощью Gutenberg 

B. Загрузка HTML-файла с помощью Classic Editor

A. Загрузка HTML-файла с помощью Gutenberg

Шаг 1: Войдите в свою панель управления WordPress.

Шаг 2: Создайте новую страницу или запись.

Шаг 3: Создайте новый блок, нажав на знак + на странице.

Шаг 4: Найдите файл . Эта опция позволяет загрузить HTML-файл:

Кроме того, вы можете скопировать и вставить HTML-код в запись или на страницу. В правом углу нажмите на три точки , чтобы получить Дополнительные инструменты и опции. Выберите Редактор кода .

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

B. Загрузка файла HTML с помощью Classic Editor

Шаг 1: Войдите в свою панель управления WordPress.

Шаг 2: Создайте новую страницу или запись.

Шаг 3: Выберите Добавить медиафайл и загрузите сюда свой HTML-файл.

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

2. Загрузите HTML-файл с помощью cPanel 

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

Шаг 1: Войдите в свою учетную запись веб-хостинга и получите доступ к cPanel.

Шаг 2: Выберите Диспетчер файлов , а затем выберите папку с именем public_html. Эта папка должна содержать еще три папки с именами wp-admin, wp-content, wp-includes.

Шаг 3: Создайте здесь папку, щелкнув опцию «+ Папка» в меню верхней панели, и назовите ее по своему выбору.

Шаг 4: Здесь вы можете загрузить ZIP-файл.

СОВЕТ ПРОФЕССИОНАЛА: Перед тем, как заархивировать файл, вам нужно переименовать ваш index.html в index.php (или назвать его как-то иначе). Это потому, что на вашем сайте WordPress также есть файл index.html. Если вы загрузите новый, он перезапишет существующий файл и вызовет проблемы на вашем сайте.

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

Шаг 5: Теперь вы можете щелкнуть правой кнопкой мыши папку и Извлеките его содержимое. Вы можете удалить zip-файл, если хотите.

Вот и все, вы успешно загрузили HTML-файл на свой сайт.

3. Загрузите файл HTML с помощью FTP

FTP стенды или File Transfer Protocol — стороннее программное обеспечение, которое вы можете установить на свой компьютер. Это позволяет вам подключаться к вашему веб-серверу и получать доступ к файлам и папкам вашего сайта.

Шаг 1: Загрузите и установите Filezilla на свой компьютер.

Шаг 2: Откройте FileZilla и введите свои учетные данные FTP, которые включают имя хоста, имя пользователя, пароль и номер порта. Щелкните QuickConnect.

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

Шаг 3: FileZilla установит соединение с вашим сервером. Вы увидите левую панель под названием «Локальный сайт», которая является вашим компьютером, и правую панель под названием «Удаленный сайт», которая является вашим веб-сайтом.

Шаг 4: В правой панели откройте папку с именем public_html. Здесь находятся файлы и папки вашего веб-сайта. Если вы назвали свою папку как-то иначе, выберите эту папку.

Шаг 5: Создайте здесь папку для файлов HTML, щелкнув правой кнопкой мыши и выбрав Создать каталог и войдя в него.

Шаг 6: На левой панели выберите файлы HTML, которые вы хотите загрузить, щелкните правой кнопкой мыши и выберите Загрузить.

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

Поздравляем!

Вы успешно загрузили HTML-файлы на свой веб-сайт.

Вы можете проверить, успешно ли загружен ваш файл, используя URL-адрес вашего веб-сайта с именем файла. Например: https://example.com/html-файл. Путь к файлу должен показывать загруженную вами HTML-страницу.

Как устранить ошибки при загрузке HTML-файлов 

Чаще всего загрузка файлов HTML вызывает ошибки. Вот как вы можете решить их:

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

2. Если вы видите ошибку 404, это означает, что ваш сервер не поддерживает перенаправление. Вам нужно исправить это внутри вашего файла .htaccess. Вы можете получить доступ к файлу, используя 9(.*)index\.(php|html?)$ /$1 [R=301,NC,L]

Это перенаправит ваш файл index.php на и загрузится ваша веб-страница HTML.

3. Если вы не можете разобраться, вы можете найти помощь на форумах поддержки WordPress или связаться с нами! У нас есть команда экспертов WordPress в нашей команде разработчиков. Просто отправьте нам быстрый твит.

На этом мы подошли к концу нашего руководства по загрузке HTML-файлов.

Что дальше?  

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

• Raw HTML

• WP Coder – add custom html, css and js code 

• Insert HTML Snippet

• Head, Footer, and Post Injections

• Allow HTML in Category Descriptions

• Videojs HTML5 Player

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

Резервное копирование и размещение вашего веб-сайта С помощью BlogVault!

• Фейсбук
• Твиттер
• LinkedIn
• Более

Размещено в:

Менеджмент

Доля:

Мелинда,

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

Как добавить пользовательскую HTML-страницу в WordPress

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

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

Почему вам следует добавлять пользовательские HTML-страницы на ваш веб-сайт WordPress

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

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

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

Как загрузить HTML-страницу на веб-сайт WordPress

Чтобы следовать следующему разделу, у вас должен быть подготовлен HTML-шаблон, который вы планируете добавить на свой сайт WordPress. Чтобы помочь с загрузкой позже, мы предлагаем вам создайте папку на нашем компьютере, которая будет содержать ваш HTML-шаблон , файл index.html и любые зависимости, которые у вас есть. Для нашей демонстрации мы создали пользовательскую папку на компьютере. В нем мы сохранили файл index.html с нашими пользовательскими элементами HTML и файл style.css , который повлияет на внешний вид этих элементов HTML . Мы сделали это, чтобы папка и файлы были полностью отделены и независимы от темы WordPress, используемой при нашей установке.

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

После входа в свою учетную запись хостинга выберите Файловый менеджер в разделе Файлы .

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

После этого создайте новую папку в корневой папке . Как вы назовете это, зависит только от вас, но ясность всегда хорошая идея, поэтому мы используем custom-html-page для нашего примера. Новые папки создаются нажатием кнопки Папка в верхнем левом углу и присвоением им имени в появившемся всплывающем окне.

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

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

Затем вам будет предложено указать точное место, куда вы хотите извлечь файлы. Мы предлагаем оставить то же место, где вы находитесь: — public_html/your-folder-name .

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

Теперь вы можете проверить свою страницу, открыв ее в веб-браузере. URL-адрес должен содержать имя созданной вами папки , поэтому ссылка на вашу пользовательскую HTML-страницу будет выглядеть примерно так: www.yourwebsite.com/your-folder-name . Поскольку мы назвали нашу папку custom-html-page , ссылка, необходимая для открытия новой пользовательской страницы, будет следующей:

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

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

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

После ввода кода сохраните внесенные изменения в файл .htaccess . Затем попробуйте снова открыть пользовательскую HTML-страницу в браузере. Не забудьте предварительно очистить кеш.

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

Темы Qode WordPress: лучший выбор

Посмотреть коллекцию

Bridge

ТЕРЕВНАЯ Многоцелевая тема WordPress

Стокгольм

Действительно многоконцептивная тема

Startit

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