Главная > Блог > Web-разработка > CMS WoprdPress >

WordPress. Настройка темы. Часть 2

01.04.2019

Теги: CMS • Web-разработка • WordPress • Настройка • Функция

Итак, мы добавили для пользователя возможность изменять фон на сайте и загружать логотип. Но это еще не все, что умеет Theme Customizer. Следующее, что мы сделаем — предоставим пользователю возможность загружать свое изображение для шапки сайта и изменять цвет текста.

Замена фона шапки

Чтобы включить возможность изменять изображение в шапке, добавляем в файл functions.php вызов функции:

/*
 * Добавляем возможность установки background шапки через Customizer
 */
add_theme_support(
    'custom-header',
    [
        'default-image' => get_template_directory_uri() . '/assets/img/bg-header.jpg',
        'width' => 3000,
        'height' => 200,
        'default-text-color' => 'FFFFFF'
    ]
);

Теперь в шаблоне темы header.php можно вывести загруженное пользователем изображение. Если изображение не загружено — картинки в шапке не будет.

<header>
    <?php
    /*
     * Фоновое изображение шапки сайта. Если пользователь не загрузил изображение,
     * то оно не будет показано. В этом случае нет смысла задавать default-image.
     */
    $style = '';
    if (has_custom_header()) {
        $style = ' style="background-image: url('.get_header_image().')"';
    }
    ?>
    <div<?= $style; ?>>
        <div class="container">
            <span><?php bloginfo('name'); ?></span>
            <span><?php bloginfo('description'); ?></span>
        </div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <!-- ..... -->
    </nav>
</header>

Для выравнивания фонового изображения добавим стили:

header > div {
    height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Узнать, загрузил ли пользователь свое изображение, можно с помощью функции has_custom_header(). Получить URL загруженного изображения можно с помощью функции get_header_image(), а вывести — с помощью header_image().

Чтобы получить полную информацию об изображении, можно воспользоваться функцией:

$custom_header = get_custom_header();
print_r($custom_header);

stdClass Object
(
    [url] => http://www.server.com/wp-content/themes/test_theme/assets/img/bg-header.jpg
    [thumbnail_url] => http://www.server.com/wp-content/themes/test_theme/assets/img/bg-header.jpg
    [width] => 3000
    [height] => 100
    [video] => 
)

Функция get_header_image() возвращает URL изображения только в том случае, если пользователь загрузил свое изображение. Если изображение не загружено, функция возвращает пустую строку, даже если было задано изображение по-умолчанию.

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

Пример использования функции get_custom_header():

<header>
    <?php
    /*
     * Фоновое изображение шапки сайта; если не установлено,
     * будет показано фоновое изображение по-умолчанию.
     */
    $custom_header = get_custom_header();
    $bg_header = $custom_header->url;
    ?>
    <div style="background-image: url(<?= $bg_header; ?>)">
        <div class="container">
            <span><?php bloginfo('name'); ?></span>
            <span><?php bloginfo('description'); ?></span>
        </div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <!-- ..... -->
    </nav>
</header>

Изменять можно не только изображение, но и цвет заголовка. Получить цвет можно с помощью функции get_header_textcolor(), а вывести — с помощью header_textcolor().

<header>
    <?php
    /*
     * Фоновое изображение шапки сайта
     */
    $style = '';
    if (has_custom_header()) {
        $style = ' style="background-image: url('.get_header_image().')"';
    }
    ?>
    <div<?= $style; ?>>
        <div class="container">
            <span style="color: #<?php header_textcolor(); ?>">
                <?php bloginfo('name'); ?>
            </span>
            <span style="color: #<?php header_textcolor(); ?>">
                <?php bloginfo('description'); ?>
            </span>
        </div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <!-- ..... -->
    </nav>
</header>

Дополнительные стили

Функция wp_custom_css_cb() выводит элемент <style> с CSS стилями из настройки «Дополнительные стили» в кастоймезере. Перед выводом на экран, код стилей очищается функцией strip_tags(). Эта функция используется автоматически, для вывода CSS стилей в HEAD части темы. Чтобы просто получить код css, а не выводить его на экран, предназначена функция wp_get_custom_css().

Следующий код используется в WordPress по умолчанию, чтобы вывести стили в HEAD части документа:

add_action('wp_head', 'wp_custom_css_cb', 101);

Исходный код функции wp_custom_css_cb():

function wp_custom_css_cb() {
    $styles = wp_get_custom_css();
    if ($styles || is_customize_preview()) {
        echo '<style type="text/css" id="wp-custom-css">';
        echo strip_tags($styles);
        echo '</style>';
    }
}

Поиск: CMS • Web-разработка • WordPress • Функция • Настройка • Customizer • has_custom_header • get_header_image • header_image • get_custom_header • get_header_textcolor • header_textcolor