Как перенести 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-файл некоторые элементы на сайте могут съехать или отображаться некорректно. Это тоже придется исправить после создания темы, правда, процесс исправления не должен занять много времени.
Преобразование 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?
А лучше всего забыть о том, что этот редактор в админке существует. Сайт завалить легко, а исправить без ftp невозможно. Редактировать файлы стоит с помощью ftp или современной IDE.
22 мар 2018 в 19:47
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
В админ панели Внешний вид -> Редактор, выбираете нужный файл css или файлы шаблона с расширением php.
Отслеживать
ответ дан 22 мар 2018 в 21:45
4,936 3 3 золотых знака 18 18 серебряных знаков 38 38 бронзовых знаковВопрос очень расплывчатый. Все зависит от того какая тема на сайте, как создана тема и др. В зависимости от темы, в нем могут быть разные редакторы страниц( VisualComposer, BeaverBuilder, DiviBuilder) с помощью которых вы можете изменить структуру страницы( добавить или удалить текст, картинки и др. ). Или же страница может быть создана с помощью текстового и html редактора WordPress( по умолчанию она есть ).
Конкретно в WordPress нету .html файлов. Она создана с помощью языка программирования .php . Все темы имеют общие для WordPress файлы: templates . Есть template частичные( header.php , footer.php ) и есть целые страницы. Вы можете посмотреть в офф. документации список всех файлов templates , также их архитектуру .
Также в темах есть .css файлы( style.css обьязательный ). Но если хотите добавить css стили без их потери в будущем( обновление темы ), тогда лучше добавить их в дочернюю тему или в настройке WordPress( будет сохранена в базе данных ):
Dashboard -> Appearance -> Customize -> Additional CSSКак редактировать HTML в WordPress: решение без стресса
Есть много причин, по которым WordPress популярен; он прост в использовании и поставляется с широким спектром плагинов, таких как wpDataTables, которые предлагают расширенные функции с очень простой настройкой. Тем не менее, бывают ситуации, когда вам нужно знать, как редактировать HTML в WordPress.
Однако время от времени вам необходимо получить доступ к исходному коду вашего сайта. Например, когда ваш сайт подвергается атаке вредоносного ПО, это может привести к сбою всего вашего сайта, и нет другого способа исправить ситуацию, кроме как немного поиграть с кодом.
С другой стороны, могут быть ситуации, когда вы просто хотите внести некоторые расширенные индивидуальные изменения, и вам нужно знать, как редактировать HTML в WordPress.
Знайте, что вы хотите изменить
Прежде чем приступить к редактированию HTML-кода для веб-сайта, вы должны знать, что именно вы хотите изменить. Решите, какие результаты вы хотите получить, узнайте, как настроить тему WordPress, как загрузить файл HTML в WordPress, как закомментировать CSS и т. д.
Может быть, вы просто хотите поэкспериментировать, чтобы узнать больше, или, может быть, вы просто хотите изменить какой-то текст или отредактировать макет сайта. Однако, какой бы ни была ваша цель, точно узнайте, что вы хотите сделать, прежде чем приступить к редактированию кода.
Кроме того, не забудьте спросить себя, действительно ли это стоит вашего времени. Если вам не хочется тратить много своего драгоценного времени на редактирование HTML, подумайте о том, чтобы нанять профессионала, который сделает всю тяжелую работу за вас.
Соберите свои инструменты
Хорошей новостью является то, что существует не так много инструментов, которые вам нужны для редактирования HTML WordPress. Вы можете найти их все ниже, и, что еще лучше, все они бесплатны.
- FTP – клиент, такой как Filezilla или WinSCP, чтобы получить прямой доступ к вашим файлам на вашем веб-сервере; чтобы скачать и загрузить их легко.
- Редактор длявнесения изменений в загруженный файл, такой как Notepad++, который предоставляется бесплатно и имеет подсветку синтаксиса для наиболее распространенных языков программирования.
Делайте резервные копии
Прежде чем вы начнете вмешиваться в исходный код HTML, убедитесь, что вы знаете, где находятся ваши резервные копии и как их немедленно восстановить, если это необходимо. Вы можете создать файлы резервных копий через cPanel хостинг-провайдера, если вам не нравится создавать собственные резервные копии.
Изменение обычной записи или страницы WordPress
Если вы хотите изменить исходный код HTML на обычной странице WordPress, все, что вам нужно сделать, это использовать HTML-редактор WordPress. Изменить код WordPress таким образом на самом деле довольно просто. Просто отредактируйте страницу, и вы заметите, что при нажатии на вкладку «Текст » вы увидите HTML-код того, что отображается на этой вкладке «Визуальные».
Редактирование HTML в WordPress
Чтобы объяснить, как редактировать HTML в WordPress, нам сначала нужно узнать, как получить к нему доступ.
Вам нужно будет получить доступ к исходному коду веб-сайта, прежде чем перейти к HTML-редактору WordPress.
Но как редактировать HTML-код WordPress на домашней странице?
Если вы не знаете, как редактировать домашнюю страницу WordPress, не волнуйтесь. Обычно вы можете сделать это в разделе «Внешний вид »> «Виджеты» , где вы можете просто настроить содержимое в отдельных областях виджетов.
Однако в некоторых случаях вы заметите, что домашняя страница действует как отдельная страница, и вы не сможете редактировать ее в области виджетов. Если это произойдет, вы можете найти содержимое домашней страницы в разделе «Страницы» или щелкнуть параметр «Редактировать страницу» в верхней панели администратора на главной странице.
Если эти два варианта вам не подходят, возможно, вы используете конструктор страниц или тему со встроенным редактором домашней страницы. Если это так, вы можете редактировать HTML-код определенными способами, описанными в документации, прилагаемой к компоновщику страниц или рассматриваемой теме.
Как редактировать темы WordPress
Теперь мы собираемся объяснить, как настроить тему WP. Просто перейдите в «Внешний вид» → «Редактор» на панели инструментов WordPress и найдите нужную тему.
Не смущайтесь, если вы видите только один или два файла; обычно style.css и functions.php. В этом нет ничего необычного, не волнуйтесь.
К сожалению, изменение файла шаблона невозможно сделать из редактора панели инструментов. Вам нужно будет скопировать файл в вашу дочернюю тему с помощью FTP-приложения.
Например, если вы хотите отредактировать HTML-файл в теме Twenty Eighteen, скажем, нижний колонтитул, вам сначала нужно будет скопировать файл footer.php в нашу дочернюю тему с помощью FTP-приложения.
Просто скопируйте его на свой компьютер, а затем снова скопируйте в папку с темой. Как только это будет сделано, перейдите в «Внешний вид» → «Редактор» на панели управления WordPress, выберите дочернюю тему и имя файла footer.php на правой боковой панели.
Обновите свой код, а затем нажмите большую синюю кнопку «Обновить файл» под редактором.
В некоторых случаях вы не сразу увидите кнопку «Обновить файл». В этом случае вам, вероятно, придется изменить права доступа к файлу с помощью вашего FTP-приложения. Просто щелкните правой кнопкой мыши имя файла в приложении FTP и выберите вариант изменения разрешений.
Тест
Теперь, когда вы знаете, как редактировать WordPress, вы можете протестировать изменения, внесенные в браузере, перезагрузив веб-сайт (нажмите F5 ). Если все работает гладко, вы отлично поработали над редактированием своих HTML-кодов.
Если все не совсем так, как вы ожидали, не волнуйтесь. Вы всегда можете отменить изменения или просто переустановить резервную копию и повторить попытку.
Завершение мыслей о том, как редактировать HTML в WordPress
Научиться кодировать HTML непросто, но научиться редактировать HTML в WordPress не так уж и плохо, не так ли?
В этом уроке мы рассмотрели некоторые из самых основных изменений, которые являются отличным началом, если вы только учитесь использовать HTML. Знание того, как кодировать свой собственный веб-сайт, может быть очень полезным, но вам не нужно быть экспертом по кодированию, чтобы самостоятельно внести несколько простых изменений.
Имейте в виду, что если что-то пойдет не так, как планировалось, вы всегда можете отменить изменения или переустановить резервную копию.
Если вам понравилось читать эту статью о том, как редактировать HTML в WordPress, вы должны прочитать эту о том, как сбросить настройки WordPress.