Как перенести 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-файл некоторые элементы на сайте могут съехать или отображаться некорректно. Это тоже придется исправить после создания темы, правда, процесс исправления не должен занять много времени.
How to Upload HTML Files and Pages to WordPress
Why upload HTML files to WordPress? If you’re building or growing a WordPress website, importing HTML files and pages can save you significant time when setting up your website or when adding new, customized content. Sometimes you might want to build a custom HTML page or use pages from an older website and then add them to WordPress.
In this post, we’ll show you how to add your HTML files and pages to your WordPress site.
Импорт » Преобразование 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.
Если у вас возникнут затруднения, посетите наш сайт по поддержке, чтобы получить необходимые инструкции, и не бойтесь попросить помощи у нас!
How to Upload an HTML File to WordPress
Sajal Soni Last updated Dec 24, 2020
In this article, we’ll discuss a couple of different ways that you can upload an HTML file to your WordPress website.
Why Do You Need to Upload an HTML File to WordPress?
When you’re working with a WordPress website, you can use anything from static posts and pages to fancy dynamic features like image galleries, magazines, and eCommerce. You can implement many of these advanced features by just installing and configuring free plugins from the WordPress marketplace.
On the other hand, when it comes to the layout and theming of your website, WordPress allows you to choose from thousands of ready-made professional themes available in the market. When you combine these themes with page builder plugins, you can completely customize your front-end the way you want to. And if that’s not sufficient, you can customize a theme or build your own theme to give a completely different look to your website.
Having said that, sometimes you might want to upload a specific HTML file which you’ve got from your old site, and you just don’t want to touch the rest of your WordPress installation. Specifically, you might have an HTML file which displays a completely different layout than your existing website, and you want to display it for specific campaigns. Or you might want to verify your website with Google by uploading an HTML file to the document root of your website.
Whatever the reason, we’ll go through a couple of ways to upload an HTML file to your WordPress website in this post.
How to Upload an HTML File
Let’s quickly summarize the different methods you could use to upload an HTML file:
- use the FTP client software
- use cPanel
- use the back-end editor
FTP Client Software
This is one of the easiest ways to upload files from your computer to the WordPress website. If you’ve got FTP access to your website, you could use the FTP client software to connect to your website and upload the necessary files. Keep your FTP credentials handy if you want to use this option. You’ll need to have a host, username, password, and port.
There are different FTP clients available, and you need to choose one for your OS version. If you’re using *nix-based systems—Linux and Unix— you could use popular options like LFTP, gFTP, or FileZilla. On the other hand, WinSCP is one of the most popular options for Windows users.
Once you’ve installed your favorite FTP client, go ahead and open it. Enter the necessary information, as shown in the following screenshot, and connect. I’ve used the gFTP client.
Once you connect to the server, you should be able to see the list of files available in your WordPress installation. On the left-hand side, gFTP lists files on your local computer, and it displays remote site files on the right-hand side.
Now, it’s time to upload the desired file from your local computer to WordPress. On the left-hand side, navigate to the directory where the HTML file resides, select the file, and finally drag and drop it on the right-hand side. Alternatively, you could also double-click that file to upload it.
Once you’ve uploaded the file, make sure that the file is uploaded properly by visiting the https://your-wordpress-website/myhtmlfile.html URL in your browser.
So that’s how you can upload files from your computer to WordPress by using the FTP client software. In the next section, we’ll discuss how you can use cPanel to achieve the same thing.
CPanel
In this section, we’ll see how you could upload an HTML file to your WordPress with the help of cPanel. Of course, you need to have cPanel access on your host to use this option! You can learn more about free WordPress hosting options here at Envato Tuts+.
Using cPanel is pretty similar to using FTP. You need to navigate to the WordPress installation directory and upload any desired files.
Go ahead and log in to your cPanel. On your dashboard, you should be able to see the following different options.
Next, click on the File Manager link on your dashboard, and that should take you to the screen which lists different files on your server. Navigate to the desired WordPress installation directory where you want to upload the HTML file. It should display files as shown in the following screenshot.
On the top of the screen, it displays different buttons that allow you to perform different file operations. Among them, the Upload button allows you to upload files from your computer, and that’s what we’re going to use in our case.
Go ahead and click on the Upload button, and it will display a popup screen as shown in the following screenshot.
Basically, it’s asking you to choose the file you want to upload. Click on the Select File button and choose the desired file from your computer. And then cPanel should upload the selected file to the desired directory. Once the file is uploaded successfully, you should be able to see the uploaded file in the list of files under your WordPress installation directory.
If there’s any error uploading your file, it will display a helpful message which allows you to take the necessary actions to fix the cause of the error. Mostly, errors are related to the directory permissions or the size of your file exceeding the upload limit.
In this way, cPanel allows you to upload files from your computer to your WordPress website. In the next and last section, we’ll see how you can upload a file from the WordPress dashboard.
WordPress Dashboard
In this section, we’ll discuss how you can upload HTML files with the help of the built-in media manager available on your WordPress dashboard.
Before you go ahead and exercise this option, however, you’ll need to make changes in your WordPress configuration file. By default, WordPress allows you to upload files with specific extensions for security purposes. Mostly, you could upload files that belong to valid media files like .jpg, .gif, .png, .pdf, etc. On the other hand, you can’t upload files that have extensions like .html, .js, .php, and so on.
So if you want to upload a file which is not a valid media file and doesn’t belong to one of the valid media extensions in WordPress, you need to make a special change in your WordPress configuration file. Note that it must be a temporary change, and you must undo it once you finish uploading files. I would recommend you to use this option only if you know what you’re doing.
Go ahead and open the wp-config.php file with your favorite text editor. The wp-config.php file resides in the root of your WordPress installation. Add the following snippet at the end of your file.
Once you’ve done it, upload the updated wp-config.php file to your WordPress site. With these changes in place, you’ll be able to upload .html files from your computer.
Next, head over to your WordPress dashboard and navigate to Media > Add New. It will display the following screen.
Click on the Select Files button, which allows you to choose files from your computer that you want to upload. Select the desired files, and they’ll be uploaded right away, as shown in the following screenshot.
Now, navigate to the Media > Library section, and it should display the list of files. Click on the file which you’ve just uploaded to see the file details. You’ll see the File URL field, which contains the link of this file, as shown in the following screenshot.
You could copy it and paste it in your browser to see if it works. This is the link which you would need to access this file in your front-end.
So that’s how you can upload files with the help of the media manager from your WordPress dashboard. Don’t forget to undo your changes in the wp-config.php file, as it would be a dangerous security problem to keep it open.
Conclusion
Today, we discussed different options that you could use to upload an HTML file to your WordPress website. Feel free to post if you have any queries or doubts using the feed below.
Install a Premium WordPress Widget or Plugin Now!
There are thousands of high-quality WordPress plugins on CodeCanyon that can help enhance your business’s website. Have a look through this large collection of plugins, and you’ll find helpful plugins in all different types of categories, from marketing to eCommerce to social media.
Find the perfect WordPress plugin to help your business succeed and motivate your customers. You can find even more plugin ideas and inspiration in our free course on finding the best WordPress plugins for your site.