Почему вы должны конвертировать свой HTML-сайт в тему WordPress

Опубликовано: 2021-08-24

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

Введение

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

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

причины для конвертации html-сайтов в wordpress

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

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

  1. WordPress — это фантастический инструмент для создания и управления уникальными пользовательскими интерфейсами, которые нелегко реализовать со статическими HTML-шаблонами для дизайна веб-сайтов.
  2. WordPress имеет сильное сообщество разработчиков, которые могут помочь вам с вашим сайтом и решить прошлые проблемы новичков.
  3. Если вы хотите быстро настроить макет, этого нельзя добиться с помощью простого HTML-макета. Возможности конструктора страниц WordPress позволяют пользователю на ходу настраивать макет и внешний вид веб-сайта.
  4. Если вы не хотите использовать существующие HTML-файлы, вы можете выбрать одну из тысяч доступных тем. Есть очень большие шансы, что вы найдете тему, которая очень похожа на внешний вид вашего HTML. Таким образом, вы экономите средства и усилия, чтобы преобразовать существующий HTML-макет в WordPress и использовать готовые шаблоны.
  5. WordPress развивался с течением времени, и в ходе эволюции сообщество WordPress позаботилось о том, чтобы он был оптимизирован для SEO. У него есть несколько замечательных плагинов для повышения SEO, одним из таких плагинов является YOAST SEO, золотой стандарт управления SEO в WordPress. Это помогает достичь более высокого рейтинга в поисковых системах, что является конечной целью создания бизнес-сайтов.
способы конвертации html-сайтов в wordpress

Различные способы преобразования HTML-сайтов в WordPress

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

Доступны три варианта

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

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

шаги по конвертации html-сайтов в wordpress с использованием ручного метода

Ручное преобразование HTML-сайта в WordPress

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

Вот как конвертировать HTML в WordPress вручную:

Шаг 1: Создайте новую папку темы

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

  1. Стиль.css
  2. Индекс.php
  3. Заголовок.php
  4. Боковая панель.php

Шаг 2. Скопируйте код CSS в новую таблицу стилей.

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

 /* Theme Name: Replace with your Theme's name Theme URI: Your Theme's URI Description: A brief description Version : 1.0 Author: You Author URI: Your website address */

Шаг 3. Отделите текущий HTML-код

Для начала откройте файл index.html.

Скопируйте код из созданных файлов WordPress и вставьте его в следующие области:

  1. Header.php — этот файл содержит все, от введения вашего HTML-кода до основной области содержимого. Вам нужно будет скопировать и вставить <?php wp_head();?> непосредственно перед разделом </head>.
  2. Sidebar.php — сюда вы вставите весь код из раздела <aside>.
  3. Footer.php — эта часть идет от нижней части боковой панели до верхней части файла. Добавьте вызов <?php wp_footer();?> перед завершением скобки </body>.

Шаг 4: Измените Header.php и Index.php для WordPress

Затем вы измените header.php и index.php, чтобы они соответствовали формату WordPress.

 <?php if (have_posts()) : ?> <?php while have_posts()) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"X?php the_time( 'My'); ?X/div> <h2><a href="<?php the permalink(); ?>" rel="bookmark" title="Permanent link to <?php the_title_attribute(); ?>"X?php the_title(); ?X/ax/h2> <div class="author"X?php the_author(); ?></div> </divx!--end post header--> <div class="entry clear"> <?php if ( Eunction_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?X/div> <!--end entry--> <div class="post-Footer"> <div class="comments"X?php comments_popup_link( 'Leave a Comment', '1 Comment', '? Comments! ); ?X/div> </divX!--end post footer--> </div><!--end post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ? > <div class="navigation index"> <div class="alignleft"><?php next_post_link( 'Older Entries'); ? X/div> <div class="alignright"X?php previous_posts_link( 'Newer Entries' ); ?></div> </divx<!--end navigation--> <?php else : ?> <?php endif; ?>

Для этого найдите ссылку, которая выглядит так в разделе <head>:

 <link rel=”stylesheet” href=”style.css”>.

Замените предыдущий URL на этот:

 <link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />

Сохраните и закройте файл header.php сейчас.

Откройте файл index.php в веб-браузере. Он должен быть вакантным.

Заполните пропуски точно так:

 <?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>

Шаг 5: Загрузите новую тему

Когда папка вашей темы будет готова, загрузите ее на свой веб-сайт и завершите преобразование HTML в WordPress. Для этого перейдите в то место, откуда вы скачали WordPress, и добавьте только что созданную папку в /wp-content/theme.

Проверьте список атрибутов на странице WP-Admin, в теме и темах, чтобы узнать, существует ли имя атрибута. Если это так, вы все сделали правильно и теперь можете его активировать.

шаги по преобразованию html-сайтов в wordpress с использованием метода дочерней темы

Преобразование HTML-сайта через дочернюю тему WordPress

Шаг 1. Выберите тему

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

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

Шаг 2: Создайте новую папку темы

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

Папка должна иметь тот же заголовок, что и родительский стиль, но с добавлением «-child» в конце. Обратите внимание, что в имени не должно быть пробелов.

Шаг 3: Создайте новый стиль листа

Затем в папке создайте файл style.css и добавьте дополнительные строки кода:

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

 Theme Name: Twenty Nineteen Child Theme URI: http://example.com/twenty-nineteen-child/ Description: Twenty Nineteen Child Theme Author: John Doe Author URI: http://example.com Template: twentynineteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gp1-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-nineteen-child */

Шаг 4: Создайте файл Functions.php

Затем для дочерней темы вы напишете файл functions.php и скопируете родительские стили.

Для этого создайте новый файл functions.php. Для начала убедитесь, что файл <?php. ярлык.

Теперь введите в поле следующий код:

 function child_theme_enqueue_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

Этот код говорит WordPress перейти к родительской теме и использовать стили дочерней темы, которые там указаны.

Шаг 5: Активируйте тему ребенка

Наконец, вы должны настроить тему. Перед отправкой папки в WordPress разархивируйте ее, используя меню «Внешний вид», «Темы», а затем «Добавить новую». Оттуда вы можете получить zip-файл. Посмотрите в папке wp-content/theme как еще один вариант.

шаги по преобразованию HTML-сайтов в Wordpress с использованием технологии плагинов

Импортируйте свой контент с веб-сайта HTML в WordPress с помощью плагина

Шаг 1. Создайте новый сайт

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

Шаг 2: Установите плагин

Первый шаг — загрузить и установить плагин HTML Import 2. (Безопасно ли использовать плагины WordPress? Читайте дальше, чтобы узнать больше). Самый простой способ сделать это — перейти в «Плагины» > «Добавить новый» и ввести имя плагина в панели администратора WordPress. Нажмите «Установить сейчас», когда найдете его на экране (он может быть внизу). Когда он будет готов, запустите его.

Шаг 3. Загрузите страницы

Опубликуйте свои страницы на том же сервере, что и ваша установка WordPress, после установки плагина.

Информация, которую вы должны будете заполнить:

  • Каталог для импорта
  • URL-адрес старого сайта
  • Файл по умолчанию
  • Расширения файлов для включения
  • Каталоги для исключения
  • Сохранить имена файлов

После этого перейдите на вкладку «Контент» и настройте элемент HTML, содержащий контент вашего сайта.

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

Сохраните свои параметры, а затем нажмите «Импорт файлов» после просмотра каждой вкладки.

Вывод

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

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

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

Переход со статического HTML-сайта на более эффективную систему управления контентом с установленными возможностями, такую ​​как платформа WordPress, является хорошим вариантом, если она у вас есть, особенно по сравнению с другими подобными платформами, такими как Wix. Преобразование HTML в WordPress упрощает администрирование и управление вашим сайтом благодаря темам WordPress и удобным функциям WordPress. Свяжитесь с нами, чтобы получить индивидуальные решения для WordPress среди множества других услуг, и воплотите свои идеи в реальность с Creole Studios!