Как использовать Bootstrap с WordPress для создания своей темы?

И WordPress, и Bootstrap созданы для того, чтобы охватить обширную и длинную внутреннюю техническую часть под простым и легким в использовании интерфейсом или фреймворком, поэтому они выглядят как естественная пара. Они созданы для интеграции, но Bootstrap не так прост, как установка WordPress, тем и плагинов.

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

Прежде всего, вам понадобится учетная запись хостинга WordPress, чтобы использовать Bootstrap (фреймворк для дизайна) и WordPress (популярная CMS) для создания темы WordPress.

Как включить Bootstrap?

Начнем с основных шагов по включению Bootstrap несколькими способами. Вы можете либо загрузить исходный файл, либо включить в свой проект CDN (сеть доставки контента). Если вы хотите использовать опцию CND, вам необходимо включить следующую ссылку в заголовок своей страницы (страниц):

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8>

Этот вариант более подходит, потому что вам не нужно хранить файлы начальной загрузки вместе с вашим проектом. В конце концов, CDN – это сервер, на котором хранятся все файлы, и вам нужно правильно ссылаться на них. Это также сэкономит ваше драгоценное время, потому что вам не нужно скачивать и выгружать файлы начальной загрузки, поэтому использование этой опции является значительным преимуществом.

Как создать свою собственную тему WordPress?

Создание более функциональной темы WordPress может быть сложным проектом, поэтому я объясню, как сделать простую тему WordPress. Однако вы можете добавить к нему больше функций, но эти шаги стандартные.

Вы можете рассматривать тему как наложение, потому что базовая структура или операции остаются неизменными независимо от используемой темы. И проясните одно: тема – это просто стиль и внешний вид ядра WordPress, которые делают его стильным, неповторимым и уникальным.

Как создать тему WordPress с нуля?

1. Создайте папку темы

Прежде всего, перейдите в папку wp-content/themes, создайте новую папку с именем MyTheme и укажите имя каталога в нижнем регистре mytheme. Либо вы можете использовать cPanel, либо установить программу FTP FileZilla для выполнения этого действия.

2. Полные строительные блоки темы WordPress

Теперь создайте следующие файлы, чтобы упростить процесс; вы можете скопировать файлы из темы WordPress по умолчанию:

• footer.php
• functions.php
• header.php
• index.php
• style.css

3. Загрузите Bootstrap.

Загрузите последнюю версию Bootstrap с их официального сайта и извлеките ее в папку темы (mytheme). Вы увидите папку с именем «bootstrap» и две подпапки с именами CSS и js. Если вы извлекаете его наружу, скопируйте основную папку с именем Bootstrap и вставьте ее в папку темы.

4. Отредактируйте Style.css.

Выбор за вами; либо вы можете редактировать эти файлы в автономном режиме в редакторе кода портативного компьютера, либо использовать редактор cPanel по умолчанию и сначала добавить заголовок комментария. Этот комментарий позволяет WordPress идентифицировать тему и отображать ее на панели администрирования темы в разделе «Внешний вид» и содержит информацию, относящуюся к вашей теме, такую ​​как имя темы, URI темы, автор, описание, версия, текстовый домен и т. д.

/*
Theme Name: My Theme
Theme URI: https://www.temok.com/blog/how-to-start-a-blog-free-vs-paid/
Author: David
Author URI: https://www.Temok.com
Description: A basic theme using the Bootstrap framework.
Version: 1.0
Text Domain: mytheme
*/

Позвольте нам объяснить, что вы смотрите в первый раз; URI темы означает URL-адрес общедоступной веб-страницы, на которой мы можем найти дополнительную информацию о теме. URI автора используется для представления автора или организации.

5. Отредактируйте functions.php.

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

• Включите любые файлы CSS, JavaScript и другие скрипты. Рекомендуется включать таблицы стилей в тему вместо того, чтобы добавлять их в тег HTML <head> темы.
• Он используется для включения и объявления поддержки тем для таких функций, как боковые панели, меню навигации, форматы сообщений, миниатюры сообщений, настраиваемые заголовки или фоны и другие.
• Вы можете использовать его для включения тех функций, которые хотите использовать в своей теме.
• В этом файле также можно настроить различные параметры настройки темы, и он доступен в разделе « Внешний вид»> «Настроить».

<?php
function bootstrapstarter_enqueue_styles() {
wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
$dependencies = array('bootstrap');
wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri(), $dependencies ); 
}
function bootstrapstarter_enqueue_scripts() {
$dependencies = array('jquery');
wp_enqueue_script('bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );
}
add_action( 'wp_enqueue_scripts', 'bootstrapstarter_enqueue_styles' );
add_action( 'wp_enqueue_scripts', 'bootstrapstarter_enqueue_scripts' );
?>

Данный блок кода включает файлы Bootstrap CSS и JavaScript, включая styple.css, который является таблицей стилей по умолчанию. Итак, мы можем сделать это с помощью функции с именем «wp_enqueue_scripts», которая будет включать все эти файлы, которые должны появиться на стороне клиента (интерфейс).

Мы создали две функции для включения файлов CSS и JavaScript в следующий блок, но вы также можете включить оба файла в одну функцию. Выбор за вами.

Функция bootstrapstarter_enqueue_styles() используется для регистрации Bootstrap CSS с помощью wp_register_style(), чтобы мы могли использовать его с wp_enqueue_style(). Помните, что не вызывайте Bootstrap CSS напрямую, потому что нам нужно создать зависимость между нашим style.css и bootstrap CSS. Итак, это означает, что начальный CSS будет загружен перед нашей таблицей стилей.

Нам нужно передать массив всех зависимостей, но в нашем случае у нас есть только Bootstrap, поэтому наш массив $dependencies обрабатывает только Bootstrap. (Который мы зарегистрировали ранее)

bootstrapstarter_enqueue_scripts() используется для определения массива, в который будет включен запрос. WordPress поставляется с предустановленными скриптами, включая jquery, но мы объясним это, потому что это зависимость для нашего файла Bootstrap JS.

6. Структура страницы

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

Если вы хотите создать примерную страницу для практической практики, скопируйте исходный код каждого раздела отдельно и сохраните его в соответствующем разделе. Например, скопируйте код нижнего колонтитула и вставьте его в файл footer.php, заголовок, включая заголовок сайта и навигацию, в header.php, тело в index.php, боковую панель в sidebar.php. Вот содержание всех разделов:

Продолжение следует…

(1 оценок, среднее: 5,00 из 5)

Загрузка...