Как перенести сайт на WordPress с HTML
Таким заядлым пользователям WordPress, как я, трудно поверить, что в 2019 году. кто-то еще работает со статичным HTML-сайтом. Но факт остаётся фактом: до сих пор существует значительное количество действующих сайтов, созданных только на HTML и CSS.
На мой взгляд, главной причиной этого является то, что владельцы ресурсов просто не знают, как перенести сайт на WordPress с HTML. К счастью, WordPress предоставляет сразу несколько способов решить эту проблему.
Обновлено: 2023-06-18 20:45:10 Сергей Бензенко автор материала
Варианты преобразования HTML-сайта в WordPress
Есть три способа перенести HTML-сайт на WordPress:
- Самостоятельно создать WordPress- тему на основе действующего HTML-сайта.
Этот подход требует знания веб-программирования. Для его реализации нужно зайти в папку HTML-сайта с помощью FTP и использовать существующий код как отправную точку. После этого создайте все файлы темы оформления WordPress. Это достаточно просто, если у вас есть опыт работы с HTML, CSS и PHP.
- Установите одну из существующих тем оформления и перенесите контент.
Это наиболее оптимальный вариант. Подразумевается, что у вас уже есть действующий сайт. Но в этом случае придется потратиться на разработку уникальной WordPress-темы. Плагин, который можно использовать для импорта контента, доступен в официальном репозитории WordPress совершенно бесплатно.
- Заказать веб-программисту перенос HTML-сайта на WordPress.
Я не буду рассматривать этот вариант подробно. Если вы хотите использовать именно его, достаточно просто найти толкового разработчика.
Скачать сайт онлайн можно с помощью специальных инструментов и сервисов.
Подготовка к переносу HTML-сайта на WordPress
Сначала выберите подходящий хостинг и тарифный план. После этого установите WordPress и войдите в панель администрирования.
Перенос HTML-сайта вручную
Если нужно не только перенести контент на WordPress, но и воссоздать текущий дизайн, то придется создавать собственную WordPress-тему. Для этого понадобится редактор кода (например, Sublime или Notepad++), а также доступ к файлам HTML-сайта и WordPress.
Шаг 1: Создание папки с новой темой и необходимых файлов
Создайте новую папку на рабочем столе, чтобы хранить в ней файлы темы. После этого с помощью редактора кода создайте следующие файлы и поместите их в только что созданную директорию:
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Шаг 2: Скопируйте существующий CSS- код в новый файл стилей
Первый файл, который вам нужно будет отредактировать – это файл Style.css. Добавьте приведенный ниже код в начало файла стилей.
/* Theme Name: Замените этот текст именем вашей темы. Theme URI: Адрес вашей темы Description: Краткое описание. Version: 1.0 Author: Ваше имя Author URI: Адрес вашего сайта. */
После этого блока вставьте CSS-код, скопированный из style.css старого (статического) сайта. Сохраните и закройте файл.
Шаг 3: Выделите ваш текущий HTML-код
Перед тем, как перейти к третьему шагу, я коротко поясню, как работает WordPress. Движок использует PHP, чтобы записывать и получать данные из базы данных. Каждый файл, который мы создали, сообщает WordPress, где какая часть контента должна быть отображена на сайте. Получается, что мы будем вырезать и вставлять части HTML-сайта в созданные файлы.
Откройте файл index.html статического ресурса. Выделите всё с начала файла до открывающегося тега контента (например, div >. Скопируйте выделенный код и вставьте его в header.php .
Вернитесь в index.html . Выделите код разметки боковой панели (например, aside >. Скопируйте и вставьте его в файл sidebar.php .
Затем в index.html выделите всё, что идёт после кода боковой панели. Скопируйте и вставьте данный код в файл footer.php .
Выделите в index.html выделите всё, что осталось (это должно быть содержимым блока основного контента) и вставьте скопированный код в файл index.php . Сохраните его, но пока не закрывайте.
Шаг 4: Завершите создание файла Index.php
Завершим создание файла index.php новой темы WordPress. Для этого убедимся, что главная веб-страница может вызывать остальные блоки, которые хранятся в других файлах.
В самом начале index.php вставьте приведенную ниже строку:
Затем в самом конце index.php вставьте следующий код:
Теперь нужно добавить то, что называется циклом . Это основной блок кода, который WordPress использует, чтобы отображать контент сайта. В раздел контента файла index. php добавьте этот код:
>
» rel=»bookmark» title=»Permanent Link to «>
Сохраните и закройте файл index.php . Тема готова! Осталось только загрузить её на сайт WordPress.
Шаг 5: Загрузка вашей темы
Откройте корневой каталог WordPress. Скопируйте папку новой темы в /wp-content/themes/ . Затем в панели администрирования перейдите в раздел Внешний вид > Темы и активируйте созданную тему.
Всё, что осталось сделать – это заполнить новый WordPress- сайт контентом, взятым из вашего старого ресурса. Этот процесс будет описан в следующем разделе статьи.
Использование темы WordPress и импорт контента
Вместо преобразования существующего дизайна в новую тему WordPress можно использовать уже готовый экземпляр.
Вы выберите понравившуюся тему оформления и скачаете архив с ней. Затем в панели администрирования перейдите в раздел Внешний вид> Темы > Добавить новую , установите и активируйте новую тему.
После этого нужно импортировать контент с вашего старого сайта. Для этого панели администрирования перейдите в меню Плагины > Добавить новый . Найдите плагин HTML Import 2 от Stephanie Leary, установите и активируйте его. После чего используйте данный плагин для импорта контента из старого (статического) сайта.
Заключение
Если вы использовали эту статью как инструкцию для переноса вашего HTML-сайта на WordPress, то вы только что присоединились к самому большому сообществу в мире.
И не забывайте, что на официальном сайте WordPress.org доступно множество тем, плагинов и других инструментов. Если хотите и дальше совершенствовать созданную тему оформления, загляните в Кодекс. Здесь можно найти большое количество советов, приёмов и вариантов использования WordPress.
Сергей Бензенко автор-переводчик статьи « Converting HTML Sites to WordPress Sites »
Как загрузить html файл на сайт wordpress
В этой статье мы обсудим несколько различных способов загрузки HTML-файла на свой веб-сайт WordPress.
Зачем вам нужно загружать файл HTML в WordPress?
При работе с веб-сайтом WordPress вы можете использовать что угодно: от статических записей и страниц до причудливых динамических функций, таких как галереи изображений, журналы и электронная коммерция. Вы можете реализовать многие из этих расширенных функций, просто установив и настроив бесплатные плагины из магазина WordPress.
С другой стороны, когда дело доходит до макета и тематики вашего веб-сайта, WordPress позволяет вам выбирать из тысяч готовых профессиональных тем, доступных на рынке. Когда вы комбинируете эти темы с плагинами для конструктора страниц, вы можете полностью настроить свой внешний интерфейс так, как хотите. А если этого недостаточно, вы можете настроить тему или создать собственную тему, чтобы придать веб-сайту совершенно другой вид.
Сказав это, иногда вам может понадобиться загрузить определенный файл HTML, который вы получили со своего старого сайта, и вы просто не хотите трогать остальную часть своей установки WordPress. В частности, у вас может быть HTML-файл, который отображает совершенно другой макет, чем ваш существующий веб-сайт, и вы хотите отображать его для определенных кампаний. Или вы можете подтвердить свой веб-сайт с помощью Google, загрузив файл HTML в корневой каталог документов вашего веб-сайта.
Какой бы ни была причина, в этой статье мы рассмотрим несколько способов загрузки HTML-файла на ваш веб-сайт WordPress.
Как загрузить HTML-файл
Давайте кратко суммируем различные методы, которые вы можете использовать для загрузки HTML-файла:
- использовать программное обеспечение FTP-клиента
- использовать cPanel
- использовать внутренний редактор
Программное обеспечение FTP-клиента
Это один из самых простых способов загрузки файлов с компьютера на веб-сайт WordPress. Если у вас есть FTP-доступ к вашему веб-сайту, вы можете использовать программное обеспечение FTP-клиента для подключения к вашему веб-сайту и загрузки необходимых файлов. Держите под рукой свои учетные данные FTP, если вы хотите использовать эту опцию. Вам потребуется хост, имя пользователя, пароль и порт.
Существуют различные FTP-клиенты, и вам нужно выбрать один из них для вашей версии ОС. Если вы используете системы на основе *nix — Linux и Unix — вы можете использовать популярные варианты, такие как LFTP, gFTP или FileZilla. С другой стороны, WinSCP — один из самых популярных вариантов для пользователей Windows.
Установив свой любимый FTP-клиент, откройте его. Введите необходимую информацию, как показано на следующем снимке экрана, и подключитесь. Я использовал клиент gFTP.
После того как вы подключитесь к серверу, вы сможете увидеть список файлов, доступных в вашей установке WordPress. В левой части gFTP перечисляет файлы на вашем локальном компьютере, а файлы удаленного сайта отображаются в правой части.
Теперь пришло время загрузить нужный файл с локального компьютера в WordPress. С левой стороны перейдите в каталог, в котором находится HTML-файл, выберите файл и, наконец, перетащите его с правой стороны. Кроме того, вы также можете дважды щелкнуть этот файл, чтобы загрузить его.
Вот как вы можете загружать файлы со своего компьютера в WordPress с помощью программного обеспечения FTP-клиента. В следующем разделе мы обсудим, как вы можете использовать cPanel для достижения той же цели.
C-панель
В этом разделе мы увидим, как вы можете загрузить файл HTML в свой WordPress с помощью cPanel. Конечно, вам нужно иметь доступ к cPanel на вашем хосте, чтобы использовать эту опцию! Вы можете узнать больше о бесплатных вариантах хостинга WordPress здесь, на Envato Tuts+.
Использование cPanel очень похоже на использование FTP. Вам нужно перейти в каталог установки WordPress и загрузить все нужные файлы.
Войдите в свою cPanel. На панели инструментов вы должны увидеть следующие различные параметры.
Далее нажмите ссылку «Диспетчер файлов» на панели инструментов, и вы попадете на экран со списком различных файлов на вашем сервере. Перейдите в нужный каталог установки WordPress, куда вы хотите загрузить HTML-файл. Он должен отображать файлы, как показано на следующем снимке экрана.
В верхней части экрана отображаются различные кнопки, позволяющие выполнять различные операции с файлами. Среди них кнопка «Загрузить», позволяющая загружать файлы с вашего компьютера, и именно ее мы собираемся использовать в нашем случае.
Продолжайте и нажмите кнопку «Загрузить». Отобразится всплывающее окно, как показано на следующем снимке экрана.
По сути, вас просят выбрать файл, который вы хотите загрузить. Нажмите на кнопку «Выбрать файл» и выберите нужный файл на своем компьютере. А затем cPanel должен загрузить выбранный файл в нужную директорию. После успешной загрузки файла вы сможете увидеть загруженный файл в списке файлов в каталоге установки WordPress.
Если при загрузке файла возникла ошибка, появится полезное сообщение, позволяющее предпринять необходимые действия для устранения причины ошибки. В основном ошибки связаны с разрешениями каталога или размером вашего файла, превышающим ограничение на загрузку.
Таким образом, cPanel позволяет загружать файлы с вашего компьютера на ваш веб-сайт WordPress. В следующем и последнем разделе мы увидим, как вы можете загрузить файл с панели управления WordPress.
Панель инструментов WordPress
В этом разделе мы обсудим, как вы можете загружать HTML-файлы с помощью встроенного медиа-менеджера, доступного на панели управления WordPress.
Однако, прежде чем использовать этот параметр, вам необходимо внести изменения в файл конфигурации WordPress. По умолчанию WordPress позволяет загружать файлы с определенными расширениями в целях безопасности. В основном вы можете загружать файлы, которые относятся к действительным медиафайлам, таким как .jpg, .jpg, .jpg, .pdf и т. д. С другой стороны, вы не можете загружать файлы с такими расширениями, как .html, .js, .php. и т. д.
Поэтому, если вы хотите загрузить файл, который не является допустимым медиа-файлом и не принадлежит ни к одному из допустимых медиа-расширений в WordPress, вам необходимо внести специальное изменение в файл конфигурации WordPress. Обратите внимание, что это должно быть временное изменение, и вы должны отменить его после завершения загрузки файлов. Я бы рекомендовал вам использовать эту опцию, только если вы знаете, что делаете.
Откройте файл wp-config.php в своем любимом текстовом редакторе. Файл wp-config.php находится в корневом каталоге вашей установки WordPress. Добавьте следующий фрагмент в конец файла.
После этого загрузите обновленный файл wp-config.php на свой сайт WordPress. После внесения этих изменений вы сможете загружать файлы .html со своего компьютера.
Затем перейдите на панель инструментов WordPress и выберите «Медиа» > «Добавить новый». Отобразится следующий экран.
Нажмите кнопку «Выбрать файлы», которая позволит вам выбрать файлы с вашего компьютера, которые вы хотите загрузить. Выберите нужные файлы, и они сразу же будут загружены, как показано на следующем снимке экрана.
Теперь перейдите в раздел «Мультимедиа» > «Библиотека», и он должен отобразить список файлов. Нажмите на файл, который вы только что загрузили, чтобы просмотреть сведения о файле. Вы увидите поле URL-адрес файла, содержащее ссылку на этот файл, как показано на следующем снимке экрана.
Вы можете скопировать его и вставить в свой браузер, чтобы проверить, работает ли он. Это ссылка, которая вам понадобится для доступа к этому файлу в вашем внешнем интерфейсе.
Вот как вы можете загружать файлы с помощью медиа-менеджера с панели управления WordPress. Не забудьте отменить изменения в файле wp-config.php, так как оставлять его открытым опасно для безопасности.
Заключение
Сегодня мы обсудили различные варианты, которые вы можете использовать для загрузки HTML-файла на свой веб-сайт WordPress. Не стесняйтесь оставлять сообщения, если у вас есть какие-либо вопросы или сомнения, используя ленту ниже.
Установите премиальный виджет или плагин WordPress прямо сейчас!
На CodeCanyon есть тысячи высококачественных плагинов WordPress, которые помогут улучшить веб-сайт вашей компании. Просмотрите эту большую коллекцию плагинов, и вы найдете полезные плагины во всех категориях, от маркетинга до электронной коммерции и социальных сетей.
Создание веб-сайта может быть утомительным, особенно при добавлении нескольких страниц и редактировании контента для каждой новой страницы. Вы можете избежать этой проблемы, добавив страницы со старого веб-сайта или загрузив HTML-файл.
Загружать HTML-файлы в WordPress очень просто, и это можно сделать тремя способами. Во-первых, вы можете загрузить HTML-файл на панель инструментов WordPress. Второй метод заключается в использовании FTP-клиента для передачи больших файлов. Третий способ — добавить HTML-страницы через cPanel.
В этой статье, созданной нашей командой в wpDataTables, описываются три метода загрузки HTML-файла в WordPress.
Зачем загружать файлы HTML в WordPress?
WordPress поставляется со встроенными типами контента и предустановленными темами, каждая из которых имеет шаблоны страниц. Он также предлагает плагины для целевых страниц. Это позволяет пользователям создавать шаблоны страниц с помощью конструктора страниц с помощью перетаскивания.При наличии этих инструментов настройки зачем загружать HTML-файлы в WordPress?
Веб-дизайнеры загружают HTML-файлы в WordPress для хранения пользовательских файлов на панели инструментов, таких как определенный макет страницы или шаблон страницы. Использование этих файлов экономит время дизайнера и избавляет от необходимости вручную вводить код.
Загрузка HTML-файла в WordPress через панель управления WordPress
Это самый простой способ добавления файлов HTML в WordPress. Вы можете сделать это через сообщение в блоге, страницу или через Медиатеку.
Для начала перейдите в раздел «Сообщения» на левой боковой панели панели инструментов WordPress. Выберите любой опубликованный пост или создайте новый пост. Визуальный редактор WordPress откроется по умолчанию. Нажмите «Добавить медиа», и появится всплывающее окно. Чтобы загрузить файлы с жесткого диска, облачного диска или внешнего накопителя, выберите вкладку «Загрузить файлы». Чтобы добавить существующие файлы из вашей медиатеки, нажмите на вкладку «Медиатека».
На вкладке «Загрузить файлы» нажмите «Выбрать файлы» и выберите HTML-файл, который хотите загрузить. Вы также можете перетащить выбранный HTML-файл из локальной папки во всплывающее окно «Добавить медиафайл».
Если вы используете плагин Gutenberg Editor, вы можете вставить блок «Файл», а затем нажать кнопку «Загрузить». Выберите нужный файл HTML, затем нажмите кнопку «Вставить в сообщение», чтобы вставить ссылку на файл HTML в сообщение. Ссылка автоматически сохраняется в Медиатеке.
Также можно загрузить файл непосредственно в Медиатеку. Для этого перейдите в Медиатеку в панели администратора. Нажмите кнопку «Добавить новый» и выберите HTML-файл на своем компьютере, чтобы загрузить его.
Загрузка HTML-файла в WordPress с помощью FTP-клиента
Ошибки прав доступа к файлам и папкам могут возникать при добавлении нескольких HTML-файлов или плагинов в WordPress. Проверенный способ избежать этого — передавать файлы через клиент протокола передачи файлов.
FTP позволяет пользователям передавать файлы со своего локального компьютера на учетную запись хоста веб-сайта.
Клиент FTP — это программное обеспечение, использующее протокол FTP для передачи файлов вручную. Существует множество бесплатных FTP-клиентов. Например, FileZilla, WinSCP и Cyberduck совместимы с Windows, Mac и Linux.
Перед началом загрузки важно убедиться, что вы создали резервную копию своего веб-сайта. Это позволит избежать потери данных в случае сбоя системы.
После загрузки откройте FTP-клиент и подключите свою учетную запись веб-хостинга к WordPress. Для этого введите свои учетные данные для входа по FTP в диспетчер сайтов.
Учетные данные для входа по FTP предоставляются после регистрации учетной записи хостинга WordPress. Обычно они отправляются по электронной почте, но также находятся на панели инструментов cPanel веб-хоста. Если у вас возникли трудности с поиском учетных данных, обратитесь к хостинг-провайдеру.
Далее введите информацию о своем веб-сайте и выберите «SFTP». После ввода информации об учетной записи FTP нажмите кнопку «Быстрое подключение». Это соединит вас с вашим веб-сайтом WordPress, и теперь вы можете загрузить HTML-файл.
Начните с просмотра файлов на вашем компьютере в папке «Локальный сайт». Щелкните правой кнопкой мыши нужный HTML-файл и выберите опцию «Загрузить». FTP-клиент передаст файл на ваш веб-сайт WordPress, указав, что загрузка прошла успешно.
Загрузка файла HTML в WordPress через cPanel
cPanel – это панель управления, которая отображает базу данных вашего веб-сайта. Для этого последнего метода вы будете использовать cPanel и файловый менеджер.
Сожмите HTML-страницу, CSS и все необходимые файлы и папки в один заархивированный архив. Пользователи Windows могут сделать это, щелкнув правой кнопкой мыши папку HTML и выбрав параметр «Сжать».Для пользователей Mac: щелкните правой кнопкой мыши родительскую папку и выберите параметр «Сжать папку».
После входа в cPanel перейдите в раздел «Файлы» и откройте приложение «Диспетчер файлов». В «Диспетчере файлов» перейдите в корневую папку веб-сайта. Обычно по умолчанию он называется public_html.
Создайте новую папку, нажав кнопку «Новая папка» в верхней левой части экрана. Это создаст всплывающее окно. Введите имя новой папки. Имя папки станет частью URL-адреса вашей HTML-страницы, так что примите это во внимание. Нажмите кнопку «Создать новую папку».
Откройте новую папку и нажмите кнопку «Загрузить» в верхнем меню. Нажмите кнопку «Выбрать файл» и выберите заархивированный HTML-файл, который вы хотите загрузить. Извлеките сжатые файлы, нажав кнопку «Извлечь» в верхней правой части экрана, затем выберите кнопку «Извлечь файлы». По завершении нажмите кнопку «Закрыть».
Нажмите кнопку «Обновить», чтобы отобразить все извлеченные HTML-файлы. Заархивированный файл HTML теперь можно удалить. Это не приведет к каким-либо изменениям HTML-страницы.
Ошибка 404 может возникнуть, если ваш сервер не поддерживает перенаправление или если файл ‘index.php’ не перенаправляется при загрузке URL-адреса в браузере.
Чтобы исправить это в приложении «Диспетчер файлов», отредактируйте файл «.htaccess», дважды щелкнув его. Его можно найти в корневой папке вашего веб-сайта «public_html». Добавьте следующий код и сохраните все изменения:
Этот код перенаправит и загрузит ваш файл ‘index.php’ в браузере. Он также будет перенаправлять файлы или папки с именами, чувствительными к регистру, для просмотра содержимого.
Заканчиваем размышления о том, как загрузить файл HTML в WordPress
WordPress позволяет пользователям проявлять творческий подход при создании и настройке своих веб-сайтов. В тех случаях, когда этого недостаточно, знание того, как загрузить HTML-файл в WordPress, может оказаться очень полезным.
Если вам понравилась эта статья о том, как загрузить HTML-файл в WordPress, прочтите и эти:
По умолчанию вы можете создавать страницы и контент в WordPress без загрузки каких-либо пользовательских файлов HTML. Это потому, что ядро WordPress поставляется со встроенными типами контента. Кроме того, тема WordPress, которую вы используете, скорее всего, будет иметь собственный набор готовых шаблонов страниц, которые вы сможете использовать для создания уникального веб-сайта, отвечающего вашим потребностям.
Кроме того, существует множество подключаемых модулей целевых страниц WordPress, которые можно использовать для создания настраиваемых шаблонов страниц, чтобы посетители сайта могли переходить из результатов поиска, рассылок по электронной почте и даже из социальных сетей.
На самом деле нет необходимости загружать HTML-файлы в WordPress, потому что обычно все, что вам нужно для форматирования вашего веб-сайта, уже есть. Тем не менее, есть несколько причин, по которым вам может понадобиться узнать, как загрузить HTML-файл в WordPress, некоторые из которых выходят за рамки загрузки шаблона в целях дизайна.
Поэтому в этом посте я покажу вам, как загружать HTML-файлы в WordPress. Я также подробно расскажу, почему вам понадобится этот навык, чтобы вы были готовы к чему бы то ни было.
Что такое файл HTML?
HTML – это язык гипертекстовой разметки. Впервые он был разработан Тимом Бернерсом-Ли в 1990 году. Короче говоря, HTML – это код, используемый для создания электронных документов в Интернете, более известных как веб-страницы. На самом деле каждая веб-страница, которую вы видите в Интернете, была написана с использованием кода HTML.
Код HTML на веб-страницах вашего сайта отвечает за правильное форматирование текста и изображений вашего контента.
Без HTML веб-браузеры не поняли бы, как визуально отображать структуру вашего веб-сайта для пользователей. Однако с правильным кодом HTML, создающим основу для ваших веб-страниц, и небольшим кодом CSS для добавления некоторых элементов дизайна ваш веб-сайт будет выглядеть идеально для посетителей.
Что такое шаблон HTML?
Итак, вы знаете, что HTML — это код, отвечающий за создание структуры отдельных веб-страниц в Интернете.
Но что такое HTML-шаблон?
Шаблон HTML — это предварительно разработанный набор файлов HTML, в который входят такие элементы, как текст, изображения и вспомогательные файлы для стилей шрифтов и Javascript. Другими словами, HTML-шаблон представляет собой готовый пакет HTML-кода, который можно легко загрузить на свой веб-сайт и использовать.
Когда вы используете HTML-шаблон на своем веб-сайте WordPress, вы загружаете файл и вставляете текст и изображения, которые вы хотите, чтобы шаблон отображал в интерфейсе вашего сайта.
Важно помнить, что шаблоны HTML отличаются от тем WordPress:
- Темы WordPress: даже если вы вставляете текст и изображения в темы WordPress, они отвечают за внешний вид всего вашего веб-сайта. Многие изменения элементов в теме вашего сайта являются глобальными, то есть они применяются ко всему сайту.
- Шаблоны HTML: это отдельные zip-файлы, которые вы загружаете на свой веб-сайт по отдельности. Они влияют только на внешний вид отдельной веб-страницы на вашем веб-сайте. Другими словами, изменения, которые вы вносите в один загруженный HTML-шаблон, повлияют только на эту веб-страницу.
К сожалению, многие люди не понимают различий между темами и HTML-шаблонами и используют термины «тема» и «шаблон» как синонимы.
Зачем вам нужно загружать HTML-файл в WordPress
Есть несколько конкретных причин, по которым вы можете захотеть загрузить HTML-файл в WordPress:
-
- У вас есть свои избранные: если вы использовали отличный шаблон HTML на старом веб-сайте и хотели использовать его на своем новом сайте, вы можете загрузить шаблон на новый сайт, а не делать все заново. Это сэкономит ваше время и обеспечит точно такой же внешний вид.
- Вы хотите собственный макет страницы: если ваша текущая тема WordPress не поддерживает определенный макет страницы, вы можете загрузить HTML-файл с нужным дизайном и настроить его по мере необходимости.
Наконец, вам может потребоваться подтвердить свой веб-сайт WordPress с помощью Google Search Console и использовать для этого рекомендуемый метод загрузки проверочного HTML-файла Google.
То, как ваш веб-сайт отображается в поисковых системах, особенно таких крупных, как Google, играет роль в вашем успехе как владельца веб-сайта.
Вот почему существуют такие инструменты, как Google Search Console. С Google Search Console вы гарантируете, что Google проиндексирует и ранжирует ваш сайт в релевантных результатах поиска, и все это в надежде попасть на первую страницу.
Google Search Console также предоставляет вам информацию о ваших текущих результатах поиска (страницы результатов поисковой системы), чтобы вы могли улучшить свои усилия по поисковой оптимизации и увеличить число переходов на свой сайт.
Дело в том, что для использования Google Search Console вам необходимо подтвердить свой веб-сайт WordPress. И так уж получилось, что один из лучших способов сделать это — загрузить проверочный HTML-файл Google.
Теперь давайте рассмотрим различные способы загрузки HTML-файла в WordPress.
1. Метод: как загрузить HTML-файл в WordPress через панель управления WordPress
Первый способ загрузки HTML-файла в WordPress, который мы рассмотрим, связан с панелью управления WordPress.
Для завершения этого процесса вам понадобится только серверная часть вашего веб-сайта и HTML-шаблон, поскольку вы будете загружать HTML-файл непосредственно через публикацию, страницу или медиатеку.
Чтобы загрузить HTML-файл через публикацию или страницу, вставьте блок «Файл» в редакторе Gutenberg. Затем нажмите Загрузить, чтобы загрузить HTML-файл.
Загрузить HTML-файл в Гутенберге
Вот как это выглядит, если вы отключили Гутенберг и используете классический редактор. Просто нажмите «Добавить медиа», а затем «Загрузить», чтобы загрузить HTML-файл.
Выберите HTML-файл, который хотите загрузить, и нажмите «Вставить в сообщение». При этом ссылка на файл вставляется в сообщение или на страницу и автоматически сохраняется в вашей медиатеке.
Загрузить файл HTML в классическом редакторе
Вы можете пропустить загрузку HTML-файла в публикацию или страницу в WordPress и загрузить его непосредственно в свою медиатеку. Нажмите «Медиатека» на панели инструментов WordPress, затем «Добавить новый» и выберите HTML-файл из того места, где он был сохранен (например, на вашем компьютере, жестком диске или внешнем хранилище).
Имейте в виду, что вы можете столкнуться с ошибкой при загрузке HTML-файла при использовании Gutenberg. Вот как это будет выглядеть:
Недопустимый тип файла
2. Метод: как загрузить файл HTML в WordPress с помощью FTP-клиента
Загрузка HTML-файлов через панель управления WordPress — самый простой способ. Однако для больших шаблонов, состоящих из нескольких файлов, лучше всего использовать FTP-клиент, например FileZilla.
Использование FTP-клиента также полезно в тех случаях, когда вы хотите поработать локально на тестовом сайте, прежде чем отправлять какие-либо изменения, которые вы вносите на действующий сайт. Это предотвратит ненужные простои, если что-то пойдет не так.
Для начала всегда сначала создавайте резервную копию своего веб-сайта, потому что вы никогда не знаете, что может сделать файл HTML, когда вы загрузите его на свой сайт.
Затем откройте FTP-клиент.
Kinsta обеспечивает автоматическое ежедневное и системное резервное копирование для всех планов. Также доступно дополнительное почасовое резервное копирование.
Теперь вам нужно подключиться к учетной записи веб-хостинга, введя свои учетные данные FTP. Эта информация обычно находится в вашей учетной записи веб-хостинга. Если у вас возникли проблемы с его поиском, обратитесь к своему хосту и попросите его помочь вам.
Подпишитесь на рассылку новостей
Хотите узнать, как мы увеличили трафик более чем на 1000 %?
Присоединяйтесь к более чем 20 000 человек, которые получают нашу еженедельную рассылку с полезными советами по WordPress!
Если вы используете хостинг Kinsta, сначала войдите в свою учетную запись MyKinsta и нажмите «Сайты» на панели инструментов, а затем «Информация», чтобы получить необходимые учетные данные.
Получите данные SFPT в MYKinsta
Когда вы это сделаете, вы должны увидеть свои учетные данные в разделе SFTP/SSH. Вам потребуется ваше имя пользователя, пароль и порт.
Вот информация, которую вам нужно ввести в FileZilla:
Вот как это будет выглядеть в верхней части экрана FileZilla:
Вход в FileZilla
После того, как вы ввели свои учетные данные, нажмите Quickconnect.
Теперь пришло время загрузить файл HTML с вашего компьютера в WordPress. Начните с перехода в корневую папку вашего веб-сайта (которая содержит папку wp-content, файл wp-config.php и т. д.) справа.
Затем перейдите на левую сторону и найдите сохраненный HTML-файл. Когда вы найдете его, щелкните его правой кнопкой мыши и выберите «Загрузить», чтобы добавить его на свой веб-сайт. Чтобы просмотреть все скрытые файлы в Filezilla, следуйте этому краткому руководству.
Когда вы это сделаете, вы будете перенаправлены на новую веб-страницу, которую вы создали с помощью HTML-файла.
3. Метод: как загрузить файл HTML в WordPress с помощью cPanel
Последний метод, которым мы собираемся поделиться с вами, включает использование cPanel и файлового менеджера для загрузки HTML-файла в WordPress.
Устали от проблем с WordPress и медленного хоста? Мы обеспечиваем поддержку мирового класса от экспертов WordPress, доступных 24/7 и невероятно быстрых серверов. Ознакомьтесь с нашими планами
Начните с входа в cPanel вашей учетной записи хостинга и доступа к файловому менеджеру.
Файловый менеджер в cPanel
Когда вы находитесь в файловом менеджере, у вас есть два варианта:
-
- Создать новую папку: создайте новую папку в корневой папке вашего сайта, чтобы загрузить в нее HTML-файл.
- Прямая загрузка в корневую папку: вместо создания новой папки загрузите HTML-код непосредственно в WordPress. Если вы хотите сделать это именно так, разархивируйте HTML-файл в том месте, где он был сохранен, измените папку index.html на что-то новое, а затем повторно заархивируйте файл, чтобы продолжить загрузку в WordPress. Если вы этого не сделаете, шаблон HTML переопределит главную страницу вашего сайта.
Для этого примера мы создадим новую папку, так как при этом есть несколько дополнительных шагов.
Kinsta не использует cPanel. Вместо этого у Kinsta есть собственная настраиваемая панель управления хостингом MyKinsta.
Создайте новую папку и загрузите HTML-файл в WordPress
Сначала перейдите в корневую папку вашего веб-сайта (которая содержит папку wp-content, файл wp-config.php и т. д.). Затем нажмите «Новая папка».
Назовите новую папку и нажмите «Создать новую папку».
Создание новой папки в cPanel
Дважды щелкните папку, которую вы только что создали, затем нажмите Загрузить, чтобы выбрать HTML-файл.
После этого вы увидите сжатый HTML-файл в папке.
Теперь вам нужно разархивировать файл HTML, щелкнув правой кнопкой мыши и выбрав Извлечь.
Извлечь файл HTML
Когда появится модальное окно, нажмите «Извлечь файлы», чтобы завершить процесс распаковки. Когда файл HTML будет разархивирован, вы увидите все различные файлы, включенные в шаблон. Помните, что это означает, что вы увидите такие вещи, как CSS, файлы стилей шрифтов, изображения и JavaScript.
Извлеченные файлы HTML
Теперь все, что вам нужно сделать, чтобы убедиться, что HTML-шаблон и файлы были загружены, — это ввести URL вашего сайта в браузере и добавить в конец имя новой папки.
Если вы столкнулись с ошибкой 404, не волнуйтесь. Это распространенная ошибка WordPress, и ее легко устранить.
Если ваш сервер не поддерживает перенаправление и файл index.php не перенаправляется при загрузке URL-адреса в браузере, вы увидите ошибку 404 после загрузки файлов HTML.
Чтобы это исправить, оставайтесь в диспетчере файлов и откройте файл .htaccess, дважды щелкнув его. Затем добавьте следующий код и сохраните изменения:
Этот код перенаправит ваш файл index.php и загрузит его в браузере.
Обзор
WordPress — наиболее часто используемая система управления контентом, поскольку она дает владельцам веб-сайтов гибкость, необходимую для создания уникальных веб-сайтов, выделяющихся на фоне конкурентов. Возможность загрузить файл HTML в WordPress с помощью любого из вышеупомянутых методов — это еще один пример того, как WordPress удовлетворяет потребности владельцев сайтов и дает им свободу настраивать свои сайты по мере необходимости.
Кроме того, знание того, как загрузить HTML-файл в WordPress, является хорошим навыком на случай необходимости. В конце концов, вы никогда не знаете, когда вам может понадобиться HTML-шаблон, который вам нравится, или вам нужен определенный тип макета страницы, который не поддерживается вашей темой.
Экономьте время, деньги и повышайте эффективность сайта с помощью:
- Мгновенная помощь от экспертов по хостингу WordPress, круглосуточно и без выходных.
- Интеграция с Cloudflare Enterprise.
- Глобальный охват аудитории благодаря 29 центрам обработки данных по всему миру.
- Оптимизация с помощью нашего встроенного мониторинга производительности приложений.
Все это и многое другое в одном плане без долгосрочных контрактов, помощи при миграции и 30-дневной гарантии возврата денег. Ознакомьтесь с нашими планами или поговорите с отделом продаж, чтобы найти план, который подходит именно вам.
Отобранные статьи по теме
Как отложить синтаксический анализ JavaScript в WordPress (4 метода)
Узнайте, как отложить синтаксический анализ кода JavaScript в WordPress с помощью 4 простых способов, а также о том, что на самом деле означает это предупреждение для вашего сайта WordPress.
Как создать QR-код (бесплатный и платный варианты)
QR-коды еще живы! Узнайте, как создать QR-код, а также как использовать его для продвижения своего бизнеса или следующей маркетинговой кампании.
Подпишитесь на нашу рассылку
Получите премиум-контент на отмеченной наградами платформе хостинга WordPress
Подпишитесь на рассылку новостей
Войдите на MyKinsta или ознакомьтесь с демо-аккаунтом
© Kinsta Inc., 2022. Все права защищены. Kinsta® и WordPress® являются зарегистрированными товарными знаками. Юридическая информация.
У вас есть HTML-файл, который вы хотите добавить на свой сайт WordPress?
WordPress имеет множество встроенных функций, которые помогают создавать страницы и содержимое без использования HTML.
Тем не менее, мы понимаем, что в некоторых случаях вам может понадобиться загрузить статическую HTML-страницу на свой сайт. Но, к сожалению, когда вы загружаете эти файлы, вы, скорее всего, столкнетесь с ошибкой «извините, этот тип файла не разрешен» или с ошибкой 404.
В этом руководстве мы покажем вам, как безопасно загружать HTML-файл в WordPress без каких-либо ошибок.
Когда загружать файлы 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-файла что-то пойдет не так, вы можете легко восстановить резервную копию, нажав кнопку «Восстановить».
2. Создайте тестовую среду
Промежуточный сайт – это копия вашего работающего веб-сайта, на которой вы можете проводить тесты и эксперименты.
Любые изменения, которые вы вносите на тестовом сайте, не повлияют на ваш работающий сайт WordPress. Вы можете загрузить свой HTML-файл на этот сайт, чтобы проверить, работает ли он должным образом. Если он выдает ошибки или ломает ваш сайт, вам не о чем беспокоиться, потому что ваш действующий сайт остается неповрежденным.
Настоятельно не рекомендуется пытаться загрузить HTML-файл непосредственно на работающий сайт.
Вы можете бесплатно создать тестовый сайт с помощью BlogVault.
Как мы упоминали в предыдущем разделе, после регистрации в BlogVault для вас будет автоматически создано резервное копирование. Затем вы можете перейти к разделу «Промежуточный» на панели инструментов BlogVault и выбрать «Добавить промежуточный сайт».
BlogVault создаст промежуточный сайт, защищенный паролем. Это гарантирует, что сайт будет скрыт от поисковых систем и любых посетителей.
После того как тестовый сайт будет готов, отобразятся имя пользователя и пароль. Посетите пробный сайт, введите учетные данные для входа, которые вы записали, чтобы получить доступ к пробному сайту.
Чтобы войти в систему с помощью wp-admin тестового сайта, добавьте ‘/wp-admin’ к URL-адресу тестового сайта, например:
Учетные данные для входа совпадают с учетными данными вашего рабочего сайта wp-admin. После входа в систему вы можете загрузить свой HTML-файл, выполнив следующие действия.
После того, как вы увидите, что HTML-файл работает нормально, и исправите все возникающие ошибки, вы можете отправить изменения из промежуточной версии на ваш работающий сайт. Это сэкономит ваше время и силы при повторной загрузке файла на ваш действующий сайт.
Ваш файл HTML также появится на вашем действующем сайте без простоев и перерывов в работе сайта. Готовы загрузить свой HTML-файл? Начнем.
Как загрузить файл HTML на сайт WordPress
Есть три способа загрузить файл HTML в WordPress:
Проще всего использовать панель инструментов WordPress, но этот метод не всегда работает. Итак, мы также подробно описали два ручных метода — через FTP и cPanel.
1. Загрузите HTML-файл через панель управления WordPress
Шаг 1. Войдите в свою панель управления WordPress и выберите «Мультимедиа» > «Добавить новый».
Шаг 2. Выберите HTML-файл на своем компьютере и загрузите его, как любое изображение или видео.
При этом вы, скорее всего, столкнетесь с такой ошибкой:
Если вам не удается загрузить файл через медиатеку, попробуйте следующее:
А. Загрузка файла HTML с помощью Гутенберга
Шаг 1. Войдите в панель управления WordPress.
Шаг 2. Создайте новую страницу или запись.
Шаг 3. Создайте новый блок, нажав значок + на странице.
Шаг 4. Найдите файл. Этот параметр позволяет загрузить HTML-файл:
Кроме того, вы можете скопировать и вставить HTML-код в запись или на страницу. В правом углу нажмите на три точки, чтобы получить дополнительные инструменты и параметры. Выберите Редактор кода.
Это преобразует всю страницу в HTML. Вы можете скопировать HTML-код из своего HTML-файла и вставить его сюда.
Б. Загрузка файла HTML с помощью классического редактора
Шаг 1. Войдите в панель управления WordPress.
Шаг 2. Создайте новую страницу или запись.
Шаг 3. Выберите «Добавить медиаданные» и загрузите сюда свой HTML-файл.
Кроме того, вы можете переключаться между визуальным и текстовым редакторами с правой стороны. Текстовый редактор (редактор 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-файлы на свой веб-сайт.
Как устранить ошибки при загрузке HTML-файлов
Чаще всего загрузка HTML-файлов вызывает ошибки. Вот как вы можете решить их:
1. Если вы видите «Извините, этот тип файла не разрешен по соображениям безопасности», это означает, что WordPress не может принять формат HTML или размер файла. Вы можете следовать нашему руководству о том, как исправить «Извините, этот тип файла не разрешен по соображениям безопасности».
2. Если вы видите ошибку 404, это означает, что ваш сервер не поддерживает перенаправление. Вам нужно исправить это внутри вашего файла .htaccess. Вы можете получить доступ к файлу, используя cPanel > Диспетчер файлов или FTP. Отредактируйте этот файл и добавьте следующую строку кода:
Правило перезаписи ^(.*)index\.(php|html?)$ /$1 [R=301,NC,L]
Это перенаправит ваш файл index.php, и загрузится ваша HTML-страница.
3. Если вы не можете понять это, вы можете найти помощь на форумах поддержки WordPress или связаться с нами! У нас есть команда экспертов WordPress в нашей команде разработчиков. Просто отправьте нам короткий твит.
На этом мы подошли к концу нашего руководства по загрузке HTML-файлов.
Что дальше?
Если вам интересно узнать больше о добавлении пользовательского HTML в WordPress, ознакомьтесь с этими плагинами, которые помогут вам сделать это без технических сложностей:
Помните, всякий раз, когда вы вносите большие изменения, например загружаете HTML-файл, всегда делайте резервную копию своего веб-сайта, чтобы у вас была копия вашего сайта, которую вы могли бы восстановить. Затем создайте промежуточный сайт с помощью промежуточного плагина и загрузите его туда, чтобы проверить, работает ли он. Этот метод гарантирует, что ваш сайт никогда не столкнется с простоями!
WordPress — это полноценная система управления контентом, включающая все необходимое для создания веб-сайта. Сюда входят записи, страницы, мультимедийные материалы и любой тип контента, который вам когда-либо понадобится опубликовать.
Несмотря на мощь WordPress, иногда может потребоваться загрузка HTML-файла. Например, чтобы показать страницу, созданную автором или специальным гостем, или опубликовать определенную целевую страницу, полностью созданную в HTML.
Во всех этих случаях вам необходимо загрузить HTML-файл в WordPress. Это не то, что вам нужно делать очень часто, но бывают случаи, когда вам может понадобиться это сделать.
Эта статья покажет вам три простых способа загрузки HTML-файла в WordPress.Мы также покажем вам, как проверить правильность загрузки HTML-файла.
Как WordPress создает страницы
WordPress – это CMS, управляемая базой данных, система управления контентом. Он использует PHP и SQL для создания вашего веб-сайта, хранения данных и создания динамических веб-страниц. Эти веб-страницы созданы в формате HTML, но способ их компоновки отличается от стандартного статического файла HTML.
Сначала рассмотрим два ключевых термина, которые вам необходимо знать. Динамические и статические страницы.
Динамические страницы — страницы, созданные с использованием данных из базы данных, которые могут изменяться в зависимости от различных критериев. Эти страницы создаются по запросу и создаются каждый раз, когда пользователь переходит на страницу. WordPress использует динамические страницы.
Примерами динамических страниц являются новостные веб-сайты, игровые веб-сайты и сайты, содержание которых может меняться в зависимости от того, что происходит.
Статические страницы. Именно статические страницы и являются статическими. Страница не меняется, а содержимое записывается на страницу вручную. Дизайн также прописывается на каждой отдельной странице с помощью CSS, так что он тоже не меняется. Файлы HTML, о которых мы здесь говорим, представляют собой отдельные статические страницы.
Примерами статических страниц являются целевые страницы, страницы компаний и многие бизнес-веб-страницы, содержание которых не меняется.
WordPress и динамические страницы
WordPress создает HTML-страницы, используя PHP для компоновки страницы, используя вашу тему WordPress в качестве шаблона.
Когда браузер посетителя запрашивает страницу, PHP запрашивает SQL, чтобы получить содержимое страницы, чтобы он мог отобразить страницу. Этот контент может включать текст, изображение, видео, аудио, рекламу и все, что вы видите на странице.
Если вы не используете кэширование или генератор статических страниц, этот процесс происходит каждый раз, когда кто-то переходит на страницу WordPress.
PHP создает страницу, собирает элементы страницы, копию и дизайн и создает HTML-страницу для просмотра. Это занимает всего секунду, но на это уходит много времени!
Здравствуйте! Меня зовут Суджей, я генеральный директор Astra.
Мы стремимся помочь малым предприятиям расти в Интернете с помощью доступных программных продуктов и обучения, необходимого для достижения успеха.
Оставьте комментарий ниже, если хотите присоединиться к беседе, или нажмите здесь, если хотите получить личную помощь или пообщаться с нашей командой в частном порядке.
Статические HTML-страницы
Статические HTML-страницы — это то, как раньше создавался Интернет. Каждая страница была создана как отдельная страница и связана с помощью навигации и внутренних ссылок. Содержимое страницы никогда не менялось, а копия страницы отправлялась каждому браузеру, который ее запрашивал.
Страницы HTML включают CSS для оформления каждой страницы, каждого изображения или графика, шрифты и всю информацию, необходимую браузеру для правильного отображения страницы.
Почему WordPress не использует только HTML?
Если WordPress отображает HTML в браузере, почему бы ему просто не построить их с помощью HTML, а не с помощью PHP и SQL?
Ответ кроется в статической природе страниц. Сила WordPress в том, что он может создавать динамические страницы с постоянно меняющимся содержимым. Это также упрощает создание этих страниц, особенно если вы используете компоновщик страниц.
Создание отдельных HTML-страниц в основном выполняется вручную. Вам придется вручную обновлять HTML-код каждый раз, когда вы хотите внести изменения, и это не сработает для быстро меняющихся веб-сайтов.
Есть компромисс. PHP и SQL требуют больше времени для создания страницы, чем HTML, но могут сделать с этими страницами гораздо больше. Вот почему WordPress создает страницы так, как он это делает.
Зачем использовать статические HTML-страницы в WordPress?
Мы рассмотрели несколько примеров использования загрузки статических HTML-страниц в WordPress.
Добавление старых HTML-страниц на ваш веб-сайт WordPress. Например, чтобы продемонстрировать, как раньше создавались веб-сайты, включить самый первый созданный вами веб-сайт, создать простые статические целевые страницы или что-то еще.
HTML-контент от авторов. Хотя это случается редко, для показа пользовательского контента может потребоваться загрузка HTML-файла.
Повторное использование HTML-страниц с высокой конверсией. Если вы запускаете несколько веб-сайтов и у вас особенно успешная целевая страница, вы можете просто использовать существующую страницу, а не переделывать ее.
Возможно, вы изучаете HTML — язык HTML по-прежнему невероятно популярен и полезен для изучения.Если вы только начинаете, почему бы вам не увидеть свои страницы в Интернете?
Подтверждение вашего веб-сайта с помощью Google Search Console. Одним из способов подтверждения права собственности на веб-сайт для Google Search Console является загрузка HTML-файла. Поскольку каждый веб-сайт должен использовать Google Search Console для оптимизации поисковой оптимизации, это еще одна причина, по которой вы можете захотеть загрузить файл.
Как загрузить HTML в WordPress
Мы рассмотрели, что и зачем загружать HTML в WordPress, теперь давайте перейдем к тому, как это сделать.
1. Используйте редактор Гутенберга
Чтобы использовать стандартный редактор Gutenberg для загрузки файлов HTML, вам необходимо внести небольшое изменение в файл wp-config.php. Это необходимо для того, чтобы медиатека WordPress могла принимать HTML-файлы.
По умолчанию WordPress не разрешает загрузку файлов HTML или загрузку файлов .php или .js. Однако есть обходной путь.
Вам нужно добавить «define(‘ALLOW_UNFILTERED_UPLOADS’, true);’ в файл wp-config.php.
Вы найдете файл wp-config.php в корневом каталоге вашего веб-хостинга.
-
или FTP, чтобы подключиться к каталогу public_html на вашем веб-узле, найдите файл wp-config.php, щелкните правой кнопкой мыши и выберите «Изменить».
- Вставить
в конце файла и выберите Сохранить.
Теперь WordPress должен позволить вам успешно загрузить HTML-файл без отображения ошибки.
Теперь, когда вы внесли изменения, мы можем использовать стандартный процесс загрузки файлов WordPress, чтобы все заработало.
- Войдите в WordPress
- Выберите «Мультимедиа» и «Добавить новый» в меню слева.
- Перетащите HTML-файл туда, где написано «Перетащите файлы для загрузки», и разрешите загрузку файла.
- Выберите «Мультимедиа и библиотека» в меню слева.
- Выберите HTML-файл в библиотеке, чтобы он был выделен
- Скопируйте URL-адрес в поле URL-адрес файла в правом нижнем углу панели.
- Вставьте URL-адрес в браузер, чтобы проверить, можете ли вы просмотреть HTML-файл.
Если вы видите файл, загрузка файла HTML выполнена успешно. Если вы не видите файл, убедитесь, что файл заполнен и указан URL-адрес точно такой, как показано в поле URL-адрес файла.
2. Загрузите HTML-файл в WordPress вручную с помощью FTP
Если вы предпочитаете загружать HTML-файл в WordPress вручную, это можно сделать двумя способами: через FTP или с помощью cPanel. Мы покажем вам, как сделать и то, и другое, начиная с FTP.
Для этого вам потребуются данные для входа на FTP для вашего веб-хостинга, но в остальном это очень просто.
- Используйте или загрузите клиентскую программу FTP, например FileZilla, и установите ее.
- Введите данные веб-сервера, где вы видите хост, имя пользователя и пароль в FileZilla.
- Найдите файл HTML на своем компьютере в левой панели, где вы видите Локальный сайт.
- Перейдите в каталог, в который вы хотите загрузить HTML-файл, на правой панели, где вы видите Удаленный сайт.
- Перетащите HTML-файл с одной панели на другую, чтобы загрузить его.
Не забудьте указать все подкаталоги в URL-адресе, если вы разместили файл в одном из них.
3. Используйте cPanel вашего веб-хостинга
Вы также можете использовать cPanel вашего веб-хостинга для загрузки HTML-файла в WordPress. Если ваш веб-хост использует другой тип панели управления, у большинства из них будет какой-то файловый менеджер. Принцип должен быть точно таким же.
- Войдите в свой тарифный план веб-хостинга
- Выберите cPanel и загрузите диспетчер файлов.
- Перейдите в каталог, в который вы хотите загрузить HTML-файл.
- Выберите «Загрузить» на верхней панели инструментов.
- Выберите файл на своем компьютере во всплывающем окне и дождитесь завершения процесса.
- Проверьте наличие файла в диспетчере файлов.
Это все, что нужно для загрузки файла HTML с помощью cPanel!
Проверка ваших HTML-страниц, чтобы убедиться, что они работают
Мы коснулись тестирования файла в каждом разделе, но для полноты изложим его здесь еще раз.
Вы можете проверить загруженный файл HTML несколькими способами.
Если вы использовали редактор Gutenberg и медиатеку, откройте файл в медиатеке, скопируйте URL-адрес файла и вставьте его в браузер. Файл должен загрузиться.
Если вы использовали FTP или cPanel:
Вручную введите URL-адрес в адресную строку браузера, обязательно указав все подкаталоги, в которые вы загрузили файл.
Как бы вы ни тестировали HTML-файл, ваш браузер должен отображать все, что в нем содержится.
Часто задаваемые вопросы о загрузке файлов HTML в WordPress
Как получить доступ к файлам HTML в WordPress?
Вы можете получить доступ к файлам HTML в WordPress с помощью FTP или файлового менеджера вашего веб-хостинга. Перейдите в каталог, в который был загружен файл HTML, и вы сможете получить к нему доступ оттуда. Если вы следовали этому руководству и изменили файл wp-config.php, вы также сможете использовать медиатеку WordPress.
Как загрузить HTML-шаблон в WordPress?
Вы можете загрузить HTML-шаблон в WordPress с помощью редактора Gutenberg, FTP или файлового менеджера вашего веб-хостинга. Чтобы использовать редактор WordPress, вам нужно добавить строку кода в ваш файл wp-config.php. В этом руководстве показано, как это сделать.
В других методах используется перетаскивание для загрузки HTML-файла в нужный каталог.
Как загрузить HTML-файл Google в WordPress?
Чтобы загрузить HTML-файл Google в WordPress, сначала необходимо получить файл в Google и загрузить его на свой компьютер. Мы рекомендуем загружать этот файл с помощью FTP или cPanel, используя методы, описанные в этом посте. Затем проверьте и подтвердите с помощью Google Search Console доступность файла.
Использует ли WordPress HTML?
WordPress использует HTML, но происходит гораздо больше. Как мы объясняем в этой статье, существует разница между тем, как WordPress использует HTML, и тем, как работает статическая HTML-страница.
WordPress использует PHP для создания страниц. Он извлекает данные из базы данных SQL, компилирует страницу и создает HTML-файл для отправки в браузер посетителя. Это сложный, но непрерывный процесс, незаметный для пользователя.
Загрузить файлы HTML в WordPress
Большинству пользователей не нужно очень часто загружать HTML-файлы в WordPress, но иногда это необходимо.
Как и во многих областях WordPress, есть несколько способов получить то, что вы хотите, и в этой статье описаны все из них. То, что вы используете, зависит от того, какие инструменты вам удобнее использовать. Все они в конце концов оказываются в одном месте!
Используете ли вы HTML-страницы на своем веб-сайте WordPress? Можете ли вы придумать какие-либо другие причины, по которым вы можете захотеть загрузить файл HTML в WordPress? Поделитесь своими мыслями ниже!
Читайте также:
- I5 4690k какой сокет
- Как убрать нижнюю панель в google chrome android
- Кто сильнее в шахматах компьютер или человек
- Какой язык программирования использовался в миссии «Аполлон» для бортового управляющего компьютера
- Создание картографических координат в 3ds max, что это такое
Преобразование HTML-сайта в WordPress
На многих различных хостах есть свои пользовательские инструменты для создания веб-сайтов С их помощью пользователи без опыта кодирования вебсайтов с нуля могут создать собственный сайт.
Тем не менее пользователи отмечают, что эти конструкторы веб-сайтов с поддержкой перетаскивания имеют некоторые недостатки. Поскольку это универсальные предложения, им не хватает функциональных возможностей и персонализированности многих современных сайтов. Кроме того, из-за отсутствия чётких и точных линий, которые иногда создаются при перетаскивании, страница может выглядеть менее профессиональной, а такие сайты не всегда правильно переносятся на мобильные устройства, например телефоны или планшеты.
Переход на WordPress.com может решить эти проблемы, а также повысить уровень профессионализма вашего сайта.
Поскольку многие из конструкторов сайтов с поддержкой перетаскивания и опции только для HTML не предлагают опцию экспорта, вы можете вручную скопировать и вставить содержимое своего сайта, чтобы выполнить перемещение из конструктора на WordPress.com. Это требует времени и усилий, но результат стоит того.
В этом руководстве
- Сохранение содержимого
- Сохранение изображений
Сохранение содержимого
Самым быстрым способом сохранения содержимого в конструкторе сайтов с поддержкой HTML или перетаскивания является сохранение каждой отдельной страницы на своём компьютере.
Для каждой страницы, которую нужно реплицировать, перейдите в раздел Файл > Сохранить страницу как > Веб-страница, завершить
Копии все ваших фотографий и записей будут сохранены на дубликате страницы на вашем компьютере. Кроме того, будут созданы несколько подпапок, где будут находиться ваши файлы:
Сохранение изображений
Если вы используете описанный выше метод для сохранения страниц, изображения будут сохранены, но иногда они будут обрезаны или их размер будет изменён до того, в котором они отображены на веб-сайте. Самым лучшим способом добавить полноразмерные изображения на ваш новый веб-сайт WordPress.com является загрузка оригинальных файлов изображений непосредственно с компьютера.
Создание нового сайта
Если вы ещё не создали свой сайт на WordPress.com, вы можете сделать это, перейдя по ссылке.
Здесь вы получите инструкции по запуску своего сайта. Вы выберете стиль, тему, бесплатный домен и тарифный план. Вы можете изменить свою тему и тарифный план в любое время, поэтому не переживайте о том, что выбрать!
Создание страниц и добавление содержимого
Начните с добавления изображений сайта в Библиотеку файлов. Для этого откройте на своём компьютере папку, где сохранена информация об этой странице и загрузите для неё изображения в формате JPG, GIF или PNG. В этой папке вы найдёте много других файлов, но вам нужно найти и загрузить только изображения. Другие файлы не будут перенесены на WordPress.com.
- Откройте в браузере (например, в Chrome или Firefox) копию скачанного сайта или действующую версию старого веб-сайта и загрузите страницу, которую хотите воссоздать на сайте WordPress.com.
- Создайте страницу на своём сайте WordPress.com. Чтобы создать первую страницу, на консоли перейдите в раздел Страницы → Добавить.
- Скопируйте основной текст старой страницы и вставьте его на свою новую страницу WordPress.com.
Не нужно копировать и вставлять меню навигации своего сайта. Создание меню сайта WordPress.com и управление им осуществляются в другом расположении. Чтобы узнать больше, см. Меню.
Вот пример того, что вам нужно скопировать на своём старом веб-сайте.
Выше представлен пример страницы, созданной в конструкторе страниц вне WordPress.com. Если вы попытаетесь скопировать страницу полностью, она может создать очень занимательный HTML, вид которого может вам не понравиться. Поэтому лучше скопируйте только основной текст отдельной страницы (помните, что вы можете отредактировать общий вид и оформление веб-сайта позже), а затем вставьте изображения для этой страницы и выровняйте их в соответствии с текстом.
Вот пример экрана редактора WordPress.com, демонстрирующий, что нужно скопировать со страницы выше и куда это следует вставить:
Сосредоточьтесь только на добавлении текста и изображений. Если вы обладаете некоторыми навыками кодирования HTML, скопируйте и вставьте немного кодов HTML, но только не все коды, поддерживаемые на сайтах WordPress.com. Щёлкните здесь, чтобы ознакомиться со списком поддерживаемых кодов HTML.
Обратите внимание, что стилизация кода CSS доступна только в плане Premium и выше и находится в отдельном разделе.
Повторите этапы 1, 2 и 3 для всех страниц. Поскольку предварительная настройка может избавить вас от лишних хлопот во время выбора дизайна общего внешнего вида и оформления вашего сайта, мы рекомендуем сначала создать все страницы.
После того как вы создадите все страницы, переместите все тексты и изображения, можете переходить к этапу 4!
Создание меню навигации
Следующим шагом будет создание меню для вашего сайта! Так пользователи смогут находить большинство страниц на вашем сайте.
Одним из преимуществ перемещения WordPress.com является возможность быстро настраивать общий вид и делать оформление всего сайта, а не отдельных страниц (как в некоторых конструкторах). Меню можно редактировать в разделе Внешний вид → Меню или Внешний вид → Редактор, в зависимости от выбранной темы.
После создания страница не обязательно должна появиться в главном меню вашего сайта. Вы сами можете выбрать, какие страницы будут отображаться, и создать безупречный внешний вид своего сайта.
Настройка темы
Пришло время установки темы! Тема фактически является общим дизайном и оформлением вашего сайта. У нас есть сотни бесплатных и премиум-тем. Какие-то из них могут напоминать ваш сайт, а некоторые могут выглядеть совершенно по-новому. Независимо от того, хотите вы реплицировать общий вид и оформление своего прошлого сайта или имеете желание попробовать что-то новое, можете быть уверены, что ваш сайт будет иметь безупречный и профессиональный вид.
Если вам нравится текущая тема, перейдите в раздел Внешний вид → Настроить, чтобы изменить её по своему вкусу. Если вы хотите выбрать новую тему или попробовать другие, перейдите по этой ссылке, чтобы ознакомиться со всеми вариантами тем WordPress.com. Все темы отличаются друг от друга и имеют разные возможности. Не существует правильного или неправильного выбора — просто ищите то, что вам нравится!
Последние шаги
На WordPress.com есть множество дополнительных функций, которые вы можете добавить на свой сайт: от подключения к социальным сетям до видео и монетизации сайта, а также многого другого!
Вы купили домен у своего поставщика услуг хостинга с поддержкой перетаскивания или HTML, который хотите использовать с новым веб-сайтом? Ознакомьтесь с руководством по использованию домена для сайта WordPress.com.
Если у вас возникнут затруднения, посетите наш сайт по поддержке, чтобы получить необходимые инструкции, и не бойтесь попросить помощи у нас!
Как загрузить html файл на сайт wordpress
Таким заядлым пользователям WordPress, как я, трудно поверить, что в 2019 году. кто-то еще работает со статичным HTML-сайтом. Но факт остаётся фактом: до сих пор существует значительное количество действующих сайтов, созданных только на HTML и CSS.
На мой взгляд, главной причиной этого является то, что владельцы ресурсов просто не знают, как перенести сайт на WordPress с HTML. К счастью, WordPress предоставляет сразу несколько способов решить эту проблему.
Варианты преобразования HTML-сайта в WordPress
Есть три способа перенести HTML-сайт на WordPress:
- Самостоятельно создать WordPress- тему на основе действующего HTML-сайта.
Этот подход требует знания веб-программирования. Для его реализации нужно зайти в папку HTML-сайта с помощью FTP и использовать существующий код как отправную точку. После этого создайте все файлы темы оформления WordPress. Это достаточно просто, если у вас есть опыт работы с HTML, CSS и PHP.
- Установите одну из существующих тем оформления и перенесите контент.
Это наиболее оптимальный вариант. Подразумевается, что у вас уже есть действующий сайт. Но в этом случае придется потратиться на разработку уникальной WordPress-темы. Плагин, который можно использовать для импорта контента, доступен в официальном репозитории WordPress совершенно бесплатно.
- Заказать веб-программисту перенос HTML-сайта на WordPress.
Я не буду рассматривать этот вариант подробно. Если вы хотите использовать именно его, достаточно просто найти толкового разработчика.
Подготовка к переносу HTML-сайта на WordPress
Сначала выберите подходящий хостинг и тарифный план. После этого установите WordPress и войдите в панель администрирования.
Перенос HTML-сайта вручную
Если нужно не только перенести контент на WordPress, но и воссоздать текущий дизайн, то придется создавать собственную WordPress-тему. Для этого понадобится редактор кода (например, Sublime или Notepad++), а также доступ к файлам HTML-сайта и WordPress.
Шаг 1: Создание папки с новой темой и необходимых файлов
Создайте новую папку на рабочем столе, чтобы хранить в ней файлы темы. После этого с помощью редактора кода создайте следующие файлы и поместите их в только что созданную директорию:
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Шаг 2: Скопируйте существующий CSS- код в новый файл стилей
Первый файл, который вам нужно будет отредактировать – это файл Style.css. Добавьте приведенный ниже код в начало файла стилей.
/* Theme Name: Замените этот текст именем вашей темы. Theme URI: Адрес вашей темы Description: Краткое описание. Version: 1.0 Author: Ваше имя Author URI: Адрес вашего сайта. */
После этого блока вставьте CSS-код, скопированный из style.css старого (статического) сайта. Сохраните и закройте файл.
Шаг 3: Выделите ваш текущий HTML-код
Перед тем, как перейти к третьему шагу, я коротко поясню, как работает WordPress. Движок использует PHP, чтобы записывать и получать данные из базы данных. Каждый файл, который мы создали, сообщает WordPress, где какая часть контента должна быть отображена на сайте. Получается, что мы будем вырезать и вставлять части HTML-сайта в созданные файлы.
Откройте файл index.html статического ресурса. Выделите всё с начала файла до открывающегося тега контента (например, div >. Скопируйте выделенный код и вставьте его в header.php .
Вернитесь в index.html . Выделите код разметки боковой панели (например, aside >. Скопируйте и вставьте его в файл sidebar.php .
Затем в index.html выделите всё, что идёт после кода боковой панели. Скопируйте и вставьте данный код в файл footer.php .
Выделите в index.html выделите всё, что осталось (это должно быть содержимым блока основного контента) и вставьте скопированный код в файл index.php . Сохраните его, но пока не закрывайте.
Шаг 4: Завершите создание файла Index.php
Завершим создание файла index.php новой темы WordPress. Для этого убедимся, что главная веб-страница может вызывать остальные блоки, которые хранятся в других файлах.
В самом начале index.php вставьте приведенную ниже строку:
Затем в самом конце index.php вставьте следующий код:
Теперь нужно добавить то, что называется циклом . Это основной блок кода, который WordPress использует, чтобы отображать контент сайта. В раздел контента файла index. php добавьте этот код:
» rel=»bookmark» title=»Permanent Link to «>
Сохраните и закройте файл index.php . Тема готова! Осталось только загрузить её на сайт WordPress.
Шаг 5: Загрузка вашей темы
Откройте корневой каталог WordPress. Скопируйте папку новой темы в /wp-content/themes/ . Затем в панели администрирования перейдите в раздел Внешний вид > Темы и активируйте созданную тему.
Всё, что осталось сделать – это заполнить новый WordPress- сайт контентом, взятым из вашего старого ресурса. Этот процесс будет описан в следующем разделе статьи.
Использование темы WordPress и импорт контента
Вместо преобразования существующего дизайна в новую тему WordPress можно использовать уже готовый экземпляр.
Вы выберите понравившуюся тему оформления и скачаете архив с ней. Затем в панели администрирования перейдите в раздел Внешний вид> Темы > Добавить новую , установите и активируйте новую тему.
После этого нужно импортировать контент с вашего старого сайта. Для этого панели администрирования перейдите в меню Плагины > Добавить новый . Найдите плагин HTML Import 2 от Stephanie Leary, установите и активируйте его. После чего используйте данный плагин для импорта контента из старого (статического) сайта.
Заключение
Если вы использовали эту статью как инструкцию для переноса вашего HTML-сайта на WordPress, то вы только что присоединились к самому большому сообществу в мире.
И не забывайте, что на официальном сайте WordPress.org доступно множество тем, плагинов и других инструментов. Если хотите и дальше совершенствовать созданную тему оформления, загляните в Кодекс. Здесь можно найти большое количество советов, приёмов и вариантов использования WordPress.
Сергей Бензенко автор-переводчик статьи « Converting HTML Sites to WordPress Sites »
Как перенести HTML сайт на WordPress
Изначально Интернет состоял сплошь из текста и статического HTML. Но время шло, технологии развивались. И сейчас очень редко можно встретить чистый статический HTML сайт. На смену статическим сайтам пришли сайты с более сложной организацией, которые обеспечивают более приятный опыт как для посетителей, так и для создателей веб-сайтов. Все это стало возможным благодаря таким проектам, как WordPress. Теперь любой, кто устанавливает WordPress, может быстро создать захватывающий веб-сайт с функциональностью, о которой не могли мечтать на заре эры Интернета.
Что же можно сделать, если у вас возникло желание перенести свой статический HTML сайт на WordPress? К счастью, есть несколько вариантов для решения этой проблемы.
Три способа перенести HTML-сайт на WordPress
1. Создание вручную сайта на WordPress на основе статического HTML сайта
В зависимости от вашего уровня знаний в области кодирования, это может быть простой или сложной задачей. Идея состоит в том, чтобы взять код, который у вас уже есть, и использовать его в качестве основы при создании файлов темы WordPress. Вам понадобится немного опыта в области PHP, CSS и HTML. Но, в конце концов, вы будете много копировать и вставлять.Плюс этого подхода заключается в том, что у вас будет тема WordPress, похожая на ваш оригинальный сайт. Минусом является то, что у вас не будет гибкости WordPress, которая позволяет использовать виджеты и редактировать свой сайт из админ панели WordPress.
2. Взять готовую тему WordPress, а затем перенесите в нее свой контент
WordPress имеет так много готовых тем, что вы, скорее всего, найдете ту, которая будет похожа на ваш сайт. Вы можете просто настроить ее так, чтобы дизайн и внешний вид напоминали ваш старый сайт. Если вы сделаете это, у вас будет полный доступ ко всем функциям WordPress. В будущем вы сможете расширить существующую тему, используя лучшее из того, что может предложить WordPress.3. Нанять специалиста, чтобы он сделать все для вас
Преимущество этого варианта в том, что он самый простой в нашем списке. В зависимости от вашего бюджета, вы можете найти кого-то, кто имеет опыт миграции сайтов с HTML на WordPress, чтобы он все сделал за вас. Недостатком этого способа является то, что вы упускаете возможность почувствовать, как работает WordPress. Как только вы поймете, как работает WordPress, вы сможете самостоятельно вносить любые коррективы.Как вручную создать сайт на WordPress на основе статического HTML
Начните с создания папки темы с основными файлами. Это очень похоже на создание каталога на вашем компьютере, поэтому вы можете выбрать любое имя, какое захотите. Затем используйте редактор кода для создания текстовых файлов. Они должны иметь следующие имена:
- style.css
- index.php
- header.php
- sidebar.php
- footer.php
К ним мы вернемся через несколько минут.
Затем скопируйте ваш существующий CSS в таблицу стилей WordPress.
Это файл style.css, который вы создали ранее. Здесь вам сначала нужно будет записать следующую информацию:
- Author — Ваше имя
- Theme Name — Название вашей темы
- Description — Краткое описание вашей темы
- Author URI — Ссылка на вашу домашнюю страницу
После этого служебного заголовка вставьте стили CSS из вашего исходного статического HTML сайта. Сохраните изменения.
Прежде чем приступить к следующему шагу, будет полезно немного разобраться, как работает WordPress. WordPress использует PHP, когда вызывает и извлекает данные из базы данных. Файлы, которые вы создаете, указывают WordPress, где будет отображаться каждый фрагмент контента. На этом этапе вы в основном будете копировать созданный вами HTML код и вставлять его в разные файлы, чтобы WordPress знал, куда их выводить.
Начнем с файла index.html. Ваша задача — скопировать части вашего index.html и вставить их в соответствующий файл темы. Когда копирование будет закончено, сохраните все.
- От начала файла до тега div в файл header.php
- Все внутри тега aside , включая сам тег, в файл sidebar.php
- Все после боковой панели в файл footer.php
- Вся остальная информация, оставшаяся в файле index.html, копируется в файл index.php
Закройте файл index.html.
Теперь, финальная доработка файла index.php.
В самом начале файла добавьте строку . Затем, внизу файла поместите код .
И последнее, что нужно сделать, это организовать цикл. Это то, что WordPress будет использовать для отображения контента для посетителей вашего сайта. Добавьте следующий код:
Сохраните файл index.php и закройте его.
Наконец пришло время загрузить вашу новую тему. Это означает, что вы должны взять все файлы темы, которые вы сохранили в папке вашей темы, и подключить ее к WordPress. Сделать это можно, скопировав папку папку темы в директорию /wp-content/themes/. Затем нужно перейти в раздел Внешний вид > Темы и активировать вашу новую тему. Теперь вам осталось только добавить контент старого сайта.
Что-то все это для меня слишком сложно!
Если вам все вышесказанное кажется слишком сложным, то мы рекомендуем использовать два других способа перевода HTML сайта на WordPress, о которых мы говорили в начале статьи. А именно найти уже готовую тему WordPress наиболее подходящую для вашего сайта и использовать ее, либо же обратиться к специалисту, который все сделает за вас.
Очень скоро вы вольетесь в ряды миллионов пользователей, которые попробовав один раз WordPress уже никогда не захотят вернуться к старым способам создания сайтов. У WordPress множество разнообразных тем, плагинов и ресурсов. А многочисленное и дружелюбное сообщество охотно поделится с вами секретами и приемами, и поможет решить любую проблему.
Как перенести HTML-код на WordPress: пошаговая инструкция с советами
Готовый HTML, CSS и JS код требуется перенести на какую-нибудь админку, чтобы для добавления нового контента и расширения функционала не приходилось лезть в директории проекта, создавать там новые файлы, копаться в коде. Это наилучшее решение не только для обычных пользователей, но и разработчика, так как сильно экономит время при расширении готового сайта. Самой популярной админкой является WordPress. Весь готовый код проекта можно перенести на нее и использовать в качестве собственной темы.
Варианты переноса HTML-сайта на WordPress
Перенос HTML-сайта с готовой структурой на WordPress не такая сложная процедура, как может показаться. Есть три варианта действий:
- Переносить вручную. На это придется потратить много времени, плюс, для этого требуются определенные навыки веб-разработки и программирования. Однако так можно лучше разобраться в работе как своего сайта, так и CMS. Доступ к корневой папки с HTML, CSS, JS файлами придется получить через FTP-клиент. В его структуру потребуется добавить несколько PHP-файлов для инициализации темы в WordPress.
- Приобрести готовую тему. Данный вариант можно рассматривать в том случае, если у вас нет разработанной темы. На WordPress можно найти много уже готовых бесплатных тем, а установить их не составит труда даже для пользователя, слабо знакомого с веб-разработкой. Есть также платные темы с премиальным функционалом.
- Заказать перенос. Суть заключается в том, что вы ищите разработчика, который перенесет готовый сайт на WordPress и адаптирует его в качестве темы. Иногда подобные услуги предлагает сам хостинг, на котором размещается сайт.
Пример редактора тем в WordPress
Подробно будет рассмотрен только первый вариант.
Установка WordPress
Вне зависимости от выбранного варианта вам придется изначально выполнить установку WordPress. Если он уже установлен, то пропускайте этот этап. Рассмотрим процесс установки вкратце:
- Скачайте архив с дистрибутивом WordPress с официального сайта.
- Распакуйте архив. Пока файлы из него можно вынести куда-нибудь на компьютер.
- Создайте базу данных MySQL на вашем сервере или запросите к ней доступ, если используете сторонний хостинг. Обратите внимание, что у некоторых тарифов хостинга может не быть поддержки MySQL и PHP. Выбирайте тариф только с их поддержкой.
- Откройте перечень файлов, которые ранее разархивировали. Переименуйте файл wp-config-sample.php в wp-config.php.
- Переместите папку с файлами WordPress к себе на сервер в корневую папку сайта.
- Перейдите в любом браузере по ссылке 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-файл некоторые элементы на сайте могут съехать или отображаться некорректно. Это тоже придется исправить после создания темы, правда, процесс исправления не должен занять много времени.
WordPress – Как вставить содержимое .html файла в страницу или запись
Плагин Include Me поможет Вам подключить в записи или страницы сайта отдельные файлы, обычно разделяемые между разными страницами или записями, и содержащие PHP, HTML или иной код, который может быть испорчен визуальным редактором WordPress.
Загрузить плагин можно здесь:
Правильное написание шорт кода плагина
На практике, и я в свое время отказался от использования данного плагина в связи с тем что при подключении отдельного файла WP издавал множество ошибок, а (найденные на просторах инета) решения (которые обязывали переписывать часть кода плагина) не совсем являлись адекватными. Ведь после очередного обновления все примененные настройки тупо слетят. Как оказалось все намного проще, в шорт коде плагина необходимо указывать путь к встраиваемому (отдельному) файлу без слеша в начале строки, то есть как указано ниже:
Пример вставки пути в шорт код плагина include-me :
[includeme file="wp-content/themes/Cool/_Apartment_Interactiv/ApartmentImageA.html"]Именно без слеша в начале ссылки
Документация плагина:
Include Me – мощный плагин, который позволяет включать в контент сайта внешний HTML или PHP-файл или содержимое другой публикации / страницы. Когда вы включаете файлы PHP, они будут исполняться и подключаться в основной вывод, поэтому вы можете создавать независимые скрипты, которые могут быть доступны практически из любой части сайта.
Официальная страница документации плагина:
Пример №1
Вы хотите опубликовать отчет, сгенерированный некоторыми запросами в базе данных. Просто создайте такой скрипт и создайте для его вывода файл.html. Затем подключите данный файл на странице используя шорткод Include Me.
Пример №2
Вам нужна специальная страница с вашим виджетами Facebook Fan Page (которая состоит из Javascript). Просто создайте *.js файл с кодом виджета Facebook и подключите его в любом удобном для Вас месте при помощи Include Me шорт кода.
Включение может быть сделано и в IFRAME если потребуется создать элемент показывающий внешнюю веб страницу.
Основные методы применения плагина
В любом сообщении или странице вы можете использовать Include Me с коротким кодом:
[includeseme file="filename"]где атрибут «file» содержит имя файла, которое должно быть включено. Любой текстовый файл может быть включен, и, если он является файлом PHP (с расширением «.php»), он будет выполнен и включен его вывод.
Имя файла может быть относительным (не начинаться с «/»), поэтому его будут искать, начиная с корневой папки блога (для техников ABSPATH будет добавлен в начале). Если имя файла является абсолютным (начиная с «/»), оно будет использоваться как есть (поэтому вы можете включать файлы, даже внешние из корневой папки сайта).
Подключение других записей или страниц
Это довольно частный случай, когда но вам может потребоваться подключить контент отдельной страницы в ряд других сообщений или страниц, чтобы иметь только страницу для изменения. В этом случае синтаксис шорт кода будет таким:
[includeseme post_id = "post id"]«post_id» – это числовой идентификатор записи или страницы (наведите на кнопку редактирования для нужного контента в админ панели, параметр ID можно увидеть и таким образом).
Подключение iframe
Второй синтаксис доступен и вместо этого генерирует iframe для включения файла. Синтаксис iframe:
[includeseme src = "url"]«url» — это сторонний веб-адрес. Любой другой атрибут, добавленный в короткий тег, будет использоваться как атрибут iframe. Например, если вы пишете:
iframe data-iframely-url = "http://www.example.com" frameborder = "0" width = "500" height = "400"> iframe>Передача переменных
Если вы подключите скрипт PHP, он может получить доступ к атрибутам короткого кода, используя синтаксис $attrs[‘attribute name’]. Например, вызов:
[includeseme file = "out.php" value = "Меня зовут Stefano"]При содержимом файла out.php
Вывод будет, конечно:
«Меня зовут Стефано».Таким образом, вы можете создать общий скрипт и сделать его доступным другим скриптам, используя атрибуты shortcode.
Я широко использовал этот плагин как в своих блогах, так и в сторонних проектах.