В статье Разработка сайта ecotoys.by я рассказывал как создать дочернюю тему wordpress. Наконец дошли руки и до родительской темы.
Темы для wordpress размещаются в каталоге [SITE_DIR]/wp-content/themes, для создания темы необходимо создать новую папку [THEME_NAME], т.е.
[SITE_DIR]/wp-content/themes/[THEME_NAME].
Для того, чтобы wordpress увидело нашу тему достататочно создать файл style.css с легендой типа
/* Theme Name: ITPharma Theme URI: https://itpharma.by Author: Name Surname Author URI: https://sergdudko.tk Description: Тема для сайта itpharma.by Version: 1.0 License: MIT Text Domain: itpharma */
Содержимое легенды интуитивно понятно, обязательные поля это:
- Theme Name — наименование темы
- Text Domain — наименование папки с темой [THEME_NAME]
Остальные поля Author (гиперссылка на Author URI), Description, Version видно на рисунке:
далее в style.css сделаю отступ в 10px в контенте сайта:
#bodycontent{
margin: 10px;
}
Чтобы сайт c установленной темой начал что-либо выводить, необходимо создать в папке [THEME_NAME] файл index.php,
<?php
/**
* Основная тема для сайта itpharma.by
*
* @package ITPharma
* @subpackage ITPharma
* @since 1.0
* @version 1.0
* @author Name Surname
*/
?>
<?php get_header(); ?>
<div id="bodycontent">
<?php
echo apply_filters('the_content', get_post()->post_content);
?>
</div>
<?php get_footer(); ?>
,где
- apply_filters(‘the_content’, get_post()->post_content) — выведет html-код записи страницы
- get_header() и get_footer() запросит [THEME_NAME]/header.php и [THEME_NAME]/footer.php. Чтобы страница отображалась нужно создать соответственно header.php и footer.php (пока оставим их пустыми).
Тему буду строить на основе Bootstrap v4. Для его работы создам папки [THEME_NAME]/js и [THEME_NAME]/css. В папку js положу скрипты jquery-3.4.0.min.js и bootstrap.min.js, в css файлы стилей bootstrap.min.css, bootstrap-grid.min.css, bootstrap-reboot.min.css
Подключить их к каждой странице можно двумя способами:
- Вставив html-код в header.php. например, для подключения css:
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.min.css' ?>" />
,где
- get_stylesheet_directory_uri() — директория темы (ссылка)
- Подключив через API wordpress в скрипте functions.php (я буду использовать этот путь), для этого создам скрипт [THEME_NAME]/functions.php и добавлю в него
<?php function itpharma_wptuts_scripts_basic() { wp_register_script( 'jquery', get_stylesheet_directory_uri() . '/js/jquery-3.4.0.min.js', '', '3.4.0' ); wp_enqueue_script( 'jquery' ); wp_register_script( 'bootstrapminjs', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', '', '4.3.1' ); wp_enqueue_script( 'bootstrapminjs' ); wp_register_style( 'bootstrapmincss', get_stylesheet_directory_uri() . '/css/bootstrap.min.css', '', '4.3.1' ); wp_enqueue_style( 'bootstrapmincss' ); wp_register_style( 'bootstrap-gridmincss', get_stylesheet_directory_uri() . '/css/bootstrap-grid.min.css', '', '4.3.1' ); wp_enqueue_style( 'bootstrap-gridmincss' ); wp_register_style( 'bootstrap-rebootmincss', get_stylesheet_directory_uri() . '/css/bootstrap-reboot.min.css', '', '4.3.1' ); wp_enqueue_style( 'bootstrap-rebootmincss' ); } add_action( 'wp_enqueue_scripts', 'itpharma_wptuts_scripts_basic' );Следует обратить внимание, что после <?php не должно быть закрывающего тега ?>.
Функция wp_register_script регистрирует скрипт, wp_enqueue_script подключает его в header (для этого в странице должен быть вызвана функция wp_head()). События должны быть переданы в метод wp_enqueue_scripts.
В этом же скрипте отключу ненужный функционал в wordpress (мусор на странице):
function itpharma_delete_junk_from_header() {
remove_action( 'wp_head', 'feed_links', 2 ); // Удаляет ссылки RSS-лент записи и комментариев
remove_action( 'wp_head', 'feed_links_extra', 3 ); // Удаляет ссылки RSS-лент категорий и архивов
remove_action( 'wp_head', 'rsd_link' ); // Удаляет RSD ссылку для удаленной публикации
remove_action( 'wp_head', 'wlwmanifest_link' ); // Удаляет ссылку Windows для Live Writer
remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0); // Удаляет короткую ссылку
remove_action( 'wp_head', 'wp_generator' ); // Удаляет информацию о версии WordPress
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 ); // Удаляет ссылки на предыдущую и следующую статьи
// отключение WordPress REST API
remove_action( 'wp_head', 'rest_output_link_wp_head' );
remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );
remove_action( 'template_redirect', 'rest_output_link_header', 11, 0 );
}
add_filter( 'after_setup_theme', 'itpharma_delete_junk_from_header' );
Функция remove_action удаляет события, все remove_action должны быть переданы в метод after_setup_theme.
А также добавляю поддержку темой логотипа, фона и меню.
function itpharma_theme_support() {
//добавляю кастомный лого
add_theme_support( 'custom-logo', [
'height' => 30,
'width' => 30,
'flex-width' => false,
'flex-height' => false,
'header-text' => 'ITPharma',
] );
//добавляю кастомный фон
add_theme_support( 'custom-background' );
$defaults = array(
'default-color' => '',
'default-image' => '',
'default-repeat' => 'repeat', // повторять
'default-position-x' => 'left', // выровнять по левому краю
'default-attachment' => 'fixed', // фон прокручивается со страницей
'wp-head-callback' => '_custom_background_cb',
'admin-head-callback' => '',
'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );
//добавляю меню
register_nav_menu( 'primary', 'Основное меню' );
}
add_filter( 'after_setup_theme', 'itpharma_theme_support' );
Функция add_theme_support добавляет поддержку темой функционала, а register_nav_menu регистрирует меню по умолчанию. Функции должны быть переданы в метод after_setup_theme.
Теперь через настройку темы у нас доступны настройка фона из меню Настроить->Цвета->Цвет фона:
Либо как фоновое изображение через Настроить->Фоновое изображение:
А также выбор логотипа через Настроить->Свойства сайта->Логотип
И настройка меню, через Настроить->Меню->Создать меню (установить флаг Основное меню)
В этом же скрипте functions.php добавлю кастомизатор темы:
function itpharma_customize_register($wp_customize) {
//имя секции настроек
$wp_customize->add_section( 'itpharma_customizer' , array(
'title' => __('Настройка темы','mytheme'),
'priority' => 30,
));
//стиль шапки
$wp_customize->add_setting( 'itpharma_header_style' , array(
'default' => 'dark',
));
//контроллер стиля шапки
$wp_customize->add_control( new WP_Customize_Control(
$wp_customize,
'itpharma_header_style_type',
array(
'label' => __( 'Стиль шапки', 'itpharma' ),
'section' => 'itpharma_customizer',
'settings' => 'itpharma_header_style',
'type' => 'radio',
'choices' => array(
'dark' => 'Темный фон',
'light' => 'Светлый фон',
),
)
));
//цвет шапки
$wp_customize->add_setting( 'itpharma_header_background' , array(
'default' => '#007bff',
'sanitize_callback' => 'sanitize_hex_color',
));
//контроллер цвета шапки
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize,
'itpharma_header_background_color',
array(
'label' => __( 'Цвет шапки', 'itpharma' ),
'section' => 'itpharma_customizer',
'settings' => 'itpharma_header_background',
'priority' => 1
)
));
//код в шапке
$wp_customize->add_setting( 'itpharma_header_code' , array(
'default' => '',
));
//контроллер кода в шапке
$wp_customize->add_control( new WP_Customize_Control(
$wp_customize,
'itpharma_header_code_text',
array(
'label' => __( 'HTML-код в шапке', 'itpharma' ),
'section' => 'itpharma_customizer',
'settings' => 'itpharma_header_code',
'type' => 'textarea',
)
));
//код в подвале
$wp_customize->add_setting( 'itpharma_footer_code' , array(
'default' => '',
));
//контроллер кода в подвале
$wp_customize->add_control( new WP_Customize_Control(
$wp_customize,
'itpharma_footer_code_text',
array(
'label' => __( 'HTML-код в подвале (google analitycs, yandex metrics и т.п.)', 'itpharma' ),
'section' => 'itpharma_customizer',
'settings' => 'itpharma_footer_code',
'type' => 'textarea',
)
));
}
add_action( 'customize_register', 'itpharma_customize_register' );
Метод $wp_customize->add_section добавляет секцию в настройки:
Метод $wp_customize->add_setting добавляет пункт настроек. В данном случае я буду использовать bootstrap navigation, для изменения цвета фона меню зарегистрирую соответствующую настройку:
$wp_customize->add_setting( 'itpharma_header_background' , array( 'default' => '#007bff', 'sanitize_callback' => 'sanitize_hex_color', ));
После регистрации настройки со значением по-умолчанию, необходимо добавить контроллер настройки методом $wp_customize->add_control, для случая цвет фона меню это
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'itpharma_header_background_color', array( 'label' => __( 'Цвет шапки', 'itpharma' ), 'section' => 'itpharma_customizer', 'settings' => 'itpharma_header_background', 'priority' => 1 ) ));
Аналогичным принципом зарегистрирую стиль фона меню (светлый текст или темный из стандартных классов bootstrap). А также добавлю два поля для ввода кода в header.php и footer.php. Данные методы должны быть переданы методу customize_register.
Теперь можно заняться скриптами header и footer. В footer.php вставлю:
<?php wp_footer() ?>
<?php
$headercode = get_theme_mod('itpharma_footer_code');
if($headercode)
echo $headercode;
?>
</body>
</html>
,где
- wp_footer() — вызов стандартного footer wordpress.
- get_theme_mod(‘itpharma_footer_code’) — html-код из Настроить->Настройка темы->HTML-код в подвале
В header.php добавлю код:
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" />
<title><?php echo get_bloginfo("description") . ' - ' . get_page_by_path(get_page_uri())->post_title; ?></title>
<?php wp_head() ?>
<style type="text/css">
body{ <?php
$backgroundimg = get_background_image();
$backgroundcolor = get_background_color();
if($backgroundcolor){
echo 'background-color: #'.$backgroundcolor.';';
}
if($backgroundimg){
echo 'background-image:url('.$backgroundimg.')';
}
?> }
</style>
</head>
<body <?php body_class() ?>>
<?php
$headercode = get_theme_mod('itpharma_header_code');
if($headercode)
echo $headercode;
?>
<nav class="navbar navbar-expand-lg <?php
$headerstyle = get_theme_mod('itpharma_header_style');
switch($headerstyle){
case 'dark':
echo 'navbar-dark';
break;
case 'light':
echo 'navbar-light';
break;
default:
echo 'navbar-light';
break;
}
?>" style="z-index: 1000;<?php
$headercolor = get_theme_mod('itpharma_header_background');
if($headercolor){ echo 'background-color: '.$headercolor.';'; }
?>">
<a class="navbar-brand" href="#"><?php
$logotext = get_bloginfo("name");
if(has_custom_logo()){
$imglink = wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' );
echo '<img src="'.$imglink[0].'" width="30" height="30" alt="">';
}
if($logotext){
echo $logotext;
} else {
echo 'Логотип';
}
?></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<?php
$menu = wp_get_nav_menu_items(get_nav_menu_locations()['primary']);
foreach( $menu as $page ){
if(get_permalink() == ($page->url)){
echo '<li class="nav-item active"><a class="nav-link" href="'.$page->url.'">'.esc_html($page->title).'<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item"><a class="nav-link" href="'.$page->url.'">'.esc_html($page->title).'</a></li>';
}
}
?>
</ul>
</div>
</nav>
,где
- get_stylesheet_uri() — ссылка на style.css темы
- get_bloginfo(«description») — краткое описание из Настроить->Свойства сайта->Краткое описание
- get_page_by_path(get_page_uri())->post_title — наименование страницы
- wp_head() — генерирует html-код заголовков wordpress, в том числе подключенный через api bootstrap
- get_background_image() — ссылка на фоновое изображение (если присвоено), из Настроить->Фоновое изображение
- get_background_color() — код цвета фона (если задан)
- get_theme_mod(‘itpharma_header_code’) — html-код из поля Настроить->Настройка темы->HTML-код в шапке
- get_theme_mod(‘itpharma_header_style’) — стиль темы (цвет шрифта) из Настроить->Настройка темы->Стиль шапки
- get_theme_mod(‘itpharma_header_background’) — цвет фона шапки из Настроить->Настройка темы->Цвет шапки
- get_bloginfo(«name») — Наименование сайта из Настроить->Свойства сайта->Название сайта
- wp_get_attachment_image_src( get_theme_mod( ‘custom_logo’ ), ‘full’ ) — ссылка на изображение логотипа из Настроить->Свойства сайта->Логотип
- wp_get_nav_menu_items(get_nav_menu_locations()[‘primary’]) — объект меню (далее [MENU]) из Настроить->Меню->Основное меню
- get_permalink() — ссылка на текущую страницу
- [MENU]->[..PAGE]->url — ссылка на страницу
- [MENU]->[..PAGE]->title — название страницы
В принципе тема уже вполне рабочая. Для красоты отображения в списке тем, необходимо в каталог с темой ( [SITE_DIR]/wp-content/themes/[THEME_NAME]/ ) положить её скриншот: screenshot.png
В качестве последнего штриха создадам страницу ошибки (404), для этого в каталоге с темой создам скрипт 404.php:
<?php get_header(); ?>
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<style type="text/css">
#bodycontent {
width:100%;
height:100%;
overflow:hidden;
margin:0px;
padding:0px;
font-family:'Open Sans',sans-serif;
font-size:16px
}
#imgageline{
width: 100%;
text-align:right;
}
#imgageline img{
max-width: 25%;
}
#error{
padding-top: 50px;
color: #0088e2;
}
</style>
</head>
<div id="bodycontent">
<div id="imgageline">
<img src="<?php echo get_stylesheet_directory_uri().'/img/404.jpg'; ?>" />
</div>
<div id="error">
<center><h3>404 Not Found</h3></center>
</div>
</div>
<?php get_footer(); ?>
Картинку в углу страницы положу в папку [SITE_DIR]/wp-content/themes/[THEME_NAME]/img/ , предварительно создав её.