WordPress. Создание темы. Шапка и подвал
На прошлом уроке мы начали создавать собственную тему для WordPress. Сегодня мы создадим общие части для всех страниц — шапку и подвал.
Шапка и подвал сайта формируются в файлах header.php и footer.php соответственно. Их содержимое подключается в index.php с помощью соответствующих функций — get_header() и get_footer().
В этих файлах содержится обычная html верстка с вызовом некоторых полезных функций. Кратко об использованных в этом уроке функциях:
В этих файлах содержится обычная html верстка с вызовом некоторых полезных функций. Кратко об использованных в этом уроке функциях:
- bloginfo() — показывает информацию о сайте.В параметре можно передать желаемую информацию для показа, например название сайта
- wp_title() — показывает заголовок текущей страницы
- wp_head() — запускает хук ‘wp_head’. Советую почитать о самом хуке ‘wp_head’ по ссылке
- wp_footer() — запускает хук ‘wp_footer’.
В коде урока вы можете заметить, что мы не подключаем css и js в файлах header или footer. Все стили и скрипты рекомендуется подключать динамически через специальный файл functions.php. Этот файл предназначен для расширения настроек текущей темы. Не путайте этот файл с плагинами, которые работают с сайтами, не с темами.
В файле functions.php мы создали функцию, которая подгружает на наш сайт стили и скрипты при наступлении соответствующих хуков. Хуки в терминологии WordPress можно сравнить с событиями в javascript. Например, мы запускаем хук wp_enqueue_scripts и говорим, что при запуске сработает наша кастомная функция loadScripts.
Полезные ссылки:
кодекс (полная документация) к WordPress
начальные рекомендации к разработке темы
Код урока (header.php)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body>
<header>
</header>
<div id="content">
Код урока (footer.php)
</div>
<footer>
</footer>
<?php wp_footer(); ?>
</body>
</html>Код урока (index.php)
<?php get_header(); ?>
<?php get_footer(); ?>Код урока (functions.php)
<?php
function loadScripts() {
wp_enqueue_style( 'bootstrap-styles', get_template_directory_uri(). '/css/bootstrap.min.css' );
wp_enqueue_style( 'main-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'bsscript', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array( 'jquery' ), '20150330', true );
}
add_action( 'wp_enqueue_scripts', 'loadScripts');
0 Комментариев