Подключения к WordPress Bootstrap

Опубликовано | Автор: Губарь Маргарита Александровна

Статья последний раз была обновлена 04.03.2023

Подключения к WordPress Bootstrap

Подключения к WordPress Bootstrap, jQuery и рабочие скрипты, стили сайта.

Начал интегрировать сверстанный шаблон в CMS WordPress. Решил сделать как правильно по рекомендациям самого WordPress. Итого что получилось:

Нашел мануал по создание шаблона, в нем создаем файлы:

  • index.php — обязательный файл, основной файл темы
  • style.css — обязательный файл, содержит стили темы
  • screenshot.png — обязательный файл, скриншет внедряемой верстки, разрешение: 880x660px
  • header.php — рекомендуемый файл, содержит шапку темы, разделение чисто логическое зависит от вашей темы
  • footer.php — рекомендуемый файл, содержит футер темы, разделение также чисто логическое
  • functions.php — файл с необходимыми функциями, на первом шаге там содержаться функции подключения css и js файлов

Рассмотрим каждый файл:

index.php

1
2
<?php get_header(); ?>
<?php get_footer(); ?>

на данном этапе внедрения, содержит всего две функции, get_header — подключает файл header.php, get_footer() — так-же подключает файл footer.php

style.css

Самое интересное что описание темы содержится в данном файле! в начале файла есть комментарий в котором указываются: Название темы, Автор темы, Описание, Ключи и т.д. Конечно очень не удобно, так как LESS вырезает комментарии, в результате оставил этот файл только как описание темы, а все стили оставил как и было в images/styles.css

ЧИТАЙТЕ ТАКЖЕ:  14 бесплатных CDN-решений для пользователей WordPress | WPcafe.org WPcafe.org

header.php

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=«<?php bloginfo( ‘charset’ ); ?>«>
<meta http—equiv=«X-UA-Compatible» content=«IE=edge»>
<meta name=«viewport» content=«width=device-width, initial-scale=1»>
<title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
<link rel=«pingback» href=«<?php bloginfo(‘pingback_url’); ?>« />
 
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

Тут оставил только самое необходимое, функции подключения css, js решил выполнить по идеологии WordPress в файле functions.php

footer.php

1
2
3
<?php wp_footer(); ?>
</body>
</html>

На данном этапе пока только системный вывод футера и закрытие тегов.

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
/**
* Подключение стилей и JavaScript
*
* Date: 15.08.2015
* Time: 7:08
*/
function enqueue_styles() {
  wp_register_style( ‘bootstrap-css’, get_template_directory_uri() . ‘/bootstrap/css/bootstrap.min.css’ );
  wp_enqueue_style( ‘bootstrap-css’ );
  wp_enqueue_style( ‘site-style’, get_template_directory_uri().‘/images/styles.css’,array(),‘1’);
}
 
add_action(‘wp_enqueue_scripts’, ‘enqueue_styles’);
 
function enqueue_scripts () {
  global $wp_scripts;
  wp_register_script(‘html5-shim’, ‘http:html5shim.googlecode.com/svn/trunk/html5.js’);
  wp_register_script(‘html5-respond’, ‘https://oss.maxcdn.com/respond/1.4.2/respond.min.js’);
  wp_enqueue_script(‘html5-shim’);
  wp_enqueue_script(‘html5-respond’);
  $wp_scripts->add_data( ‘html5-shim’, ‘conditional’, ‘lt IE 9’ );
  $wp_scripts->add_data( ‘html5-respond’, ‘conditional’, ‘lt IE 9’ );
  wp_enqueue_script(‘jquery’);
  wp_enqueue_script(‘jquery-plugins’, get_template_directory_uri().‘/js/jquery.plugins.min.js’);
  wp_enqueue_script(‘bootstrap’, get_template_directory_uri().‘/bootstrap/js/bootstrap.min.js’,array(‘jquery’),‘3.3.4’,true);
  wp_enqueue_script(‘site-script’, get_template_directory_uri().‘/images/site.js’,array(),‘1’,true);
}
add_action(‘wp_enqueue_scripts’, ‘enqueue_scripts’);

Тут мы создаем две функции enqueue_styles и enqueue_scripts, в который и происходит регистрация скриптов и подключение стилей.Тут есть несколько моментов:

  1. jquery — уже входит в ядро WordPress и подключается простым вызовом wp_enqueue_script(‘jquery’);
  2. Условные коментарии IE, например html5-shim,html5-respond у нас подключаются только при IE <9, это достигается с помощью функции add_data, системного обьекта wp_scripts
  3. Указал версию для сайтовых скриптов и стилей, это необходимо для реализации «Cache breaker» — сброса кеша при изменение файлов уже на продакшн сервере, увеличи версию мы заставим браузеры перечитать файлы.
  4. Скрипты Bootstrap и site.js — подключил после всего основного контента, как это рекомендовано Bootstrap. Делается это с использованием параметров в функции wp_enqueue_script, пятый параметр как раз и отвечает за место подключение скриптов (стилей).
ЧИТАЙТЕ ТАКЖЕ:  Руководство по оптимизации базы данных WordPress | WPcafe.org

Итого у нас получилась голая болванка (макет) темы с Bootstrap3 и подготовленными для работы файлами. Скачать макет можно по данной ссылки.

Запись опубликована 17.08.2015 в рубрике Жизнь идет.

http://life-is-going.ru/%d0%bf%d0%be%d0%b4%d0%ba%d0%bb%d1%8e%d1%87%d0%b5%d0%bd%d0%b8%d1%8f-%d0%ba-wordpress-bootstrap/

Губарь Маргарита Александровна
Губарь Маргарита Александровна недавно публиковал (посмотреть все)
Рубрика: Веб-разработка | Метка: ,