Отзывчивый веб-дизайн, иногда называемый просто RWD, определенно является одним из наиболее важных аспектов современного веб-дизайна. Согласно недавнему опросу Google, более 82% сайтов в Интернете используют эту удивительно эффективную технику, чтобы предоставить пользователям наилучшие возможности просмотра и взаимодействия на самых разных устройствах, от крошечных мобильных устройств до гигантских компьютерных мониторов. .
Несмотря на то, что WordPress — самая простая в мире CMS для установки, использования и управления, преобразование существующего сайта в адаптивную тему WordPress всегда было большой проблемой для разработчиков тем. Благодаря Bootstrap, который облегчает жизнь разработчикам, позволяя им легко и быстро создавать красивые темы WordPress. Это простое руководство покажет вам, как превратить статический HTML-сайт в полнофункциональную адаптивную тему WordPress с помощью Bootstrap.
Давайте начнем!
Загрузить и разархивировать Bootstrap:
Прежде всего, войдите на https://getbootstrap.com и загрузите оттуда последнюю стабильную версию Bootstrap. После завершения загрузки извлеките файлы из загруженного файла .zip. Внутри извлеченной папки вы найдете три подпапки — css, fonts и js.
Создайте файлы Index.html и Style.css:
Хотя у вас уже есть HTML- и CSS-файлы статического HTML-сайта, я рекомендую вам создать новый файл index.html и файл style.css. Это в значительной степени упростило бы весь процесс кодирования, поскольку создание веб-страницы с нуля дает вам гораздо больше свободы и возможностей настройки, что очень важно в случае разработки тем с интерфейсной средой, такой как Bootstrap. Несмотря на то, что этот маршрут занимает больше времени по сравнению с началом работы с существующим HTML-шаблоном, он повышает вашу креативность до невообразимых высот.
Давайте представим, что ваш только что созданный файл index.html выглядит примерно так:
‹!DOCTYPE html›
‹html язык="ru"›
‹метакодировка="utf-8›
‹meta name=”viewport” content=”width=device-width, initial-scale=1.0›
‹название›Моя тема WordPress‹/название›
‹p›Привет, WordPress!‹/p›
‹/html›
Чтобы Bootstrap работал на вас, вам нужно инициализировать его в разделе ‹head› вашего файла index.html следующим образом:
‹!DOCTYPE html›
‹html язык="ru"›
‹метакодировка="utf-8›
‹meta name=”viewport” content=”width=device-width, initial-scale=1.0›
‹название›Моя тема WordPress‹/название›
‹link href="css/bootstrap.min.css" rel="stylesheet" media="screen"›
‹p›Привет, WordPress!‹/p›
‹/html›
И если вы планируете включить в свою тему какие-либо функции на основе JavaScript, такие как вкладки Bootstrap, оповещения и т. д., то вы также должны включить jQuery и связанный с ним JavaScript (bootstrap.min.js) в ‹body› файла index.html:
‹!DOCTYPE html›
‹html язык="ru"›
‹метакодировка="utf-8›
‹meta name=”viewport” content=”width=device-width, initial-scale=1.0›
‹название›Моя тема WordPress‹/название›
‹ссылка href="css/bootstrap.min.css" rel="таблица стилей" media="экран"›
‹p›Привет, WordPress!‹/p›
‹script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"›‹/script›
‹script src="js/bootstrap.min.js"›‹/script›
‹/html›
Теперь на основе вашего существующего дизайна сайта и использования компонентов Bootstrap вы можете написать свой новый HTML-шаблон Bootstrap. Помните, что никакой пользовательский CSS не будет работать с шаблоном HTML, если вы не сошлетесь на новый файл style.css в разделе ‹head› вашего файла index.html.
‹!DOCTYPE html›
‹html язык="ru"›
‹метакодировка="utf-8›
‹meta name=”viewport” content=”width=device-width, initial-scale=1.0›
‹название›Моя тема WordPress‹/название›
‹link href="css/style.css" rel="stylesheet" media="screen"›
‹ссылка href="css/bootstrap.min.css" rel="таблица стилей" media="экран"›
‹p›Привет, WordPress!‹/p›
‹script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js›‹/script›
‹script src="js/bootstrap.min.js"›‹/script›
‹/html›
Таким образом, вы не только можете стилизовать каждый элемент своей HTML-страницы в соответствии с вашими потребностями, но также можете использовать возможности CSS Media Queries, чтобы сделать ваш шаблон полностью адаптивным для широкого спектра устройств!
Разбить файл Index.html в соответствии со структурой темы WordPress:
Поскольку WordPress написан с использованием PHP, динамического языка сценариев, он не поддерживает статические HTML-страницы. Поэтому вам необходимо преобразовать статический HTML-шаблон в динамическую тему WordPress, которую позже вы сможете загрузить на панель инструментов WordPress. Это статическое преобразование в динамическое можно легко выполнить, разбив файл index.html на несколько файлов PHP в соответствии с с Файловой структурой темы WordPress.
Типичная тема WordPress состоит из различных файлов шаблонов .php, таких как index.php, header.php, footer.php, sidebar.php, archive.php, comments.php и так далее. Из всех этих шаблонов наиболее важным является index.php, который в сочетании с файлом style.css обеспечивает правильную работу темы WordPress. Однако, чтобы упростить кодирование тем и обеспечить лучшее разделение, большинство тем WordPress состоят из многочисленных шаблонов PHP, включая все вышеупомянутые. Таким образом, этот шаг включает в себя разбиение index.html на различные файлы PHP.
Добавьте мультидисциплинарные теги WordPress:
Теперь давайте перейдем к самой интересной части — добавлению пользовательских функций в тему WordPress. На предыдущем шаге мы получили различные файлы PHP, такие как index.php, header.php, footer.php и т. д. Теперь пришло время добавить Теги шаблона WordPress ко всем этим файлам PHP для динамического отображения информации. WordPress предлагает множество встроенных функций, которые вы можете использовать для добавления любых пользовательских функций в тему WordPress без сложных HTML-кодов. Например, вы можете использовать ‹?php bloginfo(‘name’); ?› функциядля отображения заголовка вашего сайта с тегом ‹h1›.
‹h1›‹?php bloginfo(‘имя’); ?›‹/h1›
В другом примере вам нужно будет использовать функцию wp enqueue style () для загрузки таблиц стилей в файл function.php:
// Чтобы загрузить основную таблицу стилей
wp_enqueue_style( ‘’wpbootstrap-style’, get_stylesheet_uri());
// Чтобы загрузить таблицу стилей Bootstrap
wp_enqueue_style( ‘wpbootstrap’, get_template_directory_uri() . ‘/css/ bootstrap.min.css);
Точно так же, используя правильный набор различных функций, предлагаемых WordPress, вы можете добавить любую необходимую функциональность в свою тему WordPress.
После добавления всех основных функций и тегов вам необходимо поместить все файлы шаблонов PHP в одну папку с тем же именем, что и ваша тема WordPress. Как только вы это сделаете, вы получите полнофункциональную адаптивную тему WordPress.
И, чтобы закончить, перейдите в папку —/wp-content/themes/ в вашей установке WordPress, поместите туда папку с темой и активируйте тему через панель управления WordPress. Кроме того, вы можете преобразовать папку темы в zip-файл, а затем загрузить и активировать его непосредственно через Dashboard.
Добавить функции:
Теперь, когда вы активировали новую адаптивную тему, пришло время использовать огромную мощь WordPress. Лучшее в WordPress то, что он предлагает широкий спектр бесплатных и платных плагинов, которые позволяют вам включать любую функциональность на свой веб-сайт без необходимости изменять основной HTML-код. Все, что вам нужно сделать, это установить, активировать и настроить плагин через панель инструментов WordPress, и все готово!
