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

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

31.03.2019

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

Впервые кастомайзер был анонсирован в WordPress 3.4, он позволил пользователю в режиме реального времени наблюдать за изменениями, которые он делает, без фактического изменения сайта. И только после того, как пользователя устроит внешний вид сайта, он может применить настройки, нажав кнопку «Сохранить».

Для регистрации новых возможностей темы предназначена функция add_theme_support(). Если функция вызывается из темы, то она должна находится в файле functions.php. Но её можно вызывать и из плагина, подключив к событию (хуку) after_setup_theme.

Замена логотипа

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

/*
 * Добавляем возможность загрузки логотипа сайта через Customizer
 */
add_theme_support(
    'custom-logo',
    ['width' => 150, 'height' => 40]
);

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

<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div  class="container">
            <a class="navbar-brand" href="<?= home_url(); ?>">
                <?php if (has_custom_logo()): ?>
                    <?php the_custom_logo(); ?>
                <?php else: ?>
                    <?php bloginfo('name'); ?>
                <?php endif; ?>
            </a>
            <!-- ..... -->
        </div>
    </nav>
</header>

Чтобы получить все данные о логотипе:

$custom_logo = wp_get_attachment_image_src(get_theme_mod('custom_logo'), 'full'); 
print_r($custom_logo);

Array
(
    [0] => http://www.server.com/wp-content/uploads/2019/03/cropped-flowers.jpg
    [1] => 150
    [2] => 40
    [3] => 
)

Замена фона

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

/*
 * Добавляем возможность установки цвета и изображения для background
 */
add_theme_support(
    'custom-background',
    [
        'default-color' => 'FFFFFF',
        'default-image' => get_template_directory_uri() . '/assets/img/background.jpg'
    ]
);

После этого, WordPress добавит элемент <style> внутрь элемента <head>

<style type="text/css" id="custom-background-css">
body.custom-background {
    background-color: #b2b2b2;
    background-image: url("http://www.server.com/wp-content/themes/test_theme/assets/img/background.jpg");
    background-position: left top;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: scroll;
}
</style>

Но этот стиль не будет использоваться, пока мы не добавим CSS-класс custom-background для тега <body>:

<body <?php body_class(); ?>>

Функция body_class() дописывает к тегу body различные классы, в зависимости от того на какой странице находится посетитель, залогинен он или нет и т.д. А функция get_body_class() позволяет получить список этих css классов в виде массива.

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

Разные опции темы, связанные с фоновым изображением:

$position_x = get_theme_mod('background_position_x', get_theme_support('custom-background', 'default-position-x'));
$position_y = get_theme_mod('background_position_y', get_theme_support('custom-background', 'default-position-y'));
$size       = get_theme_mod('background_size',       get_theme_support('custom-background', 'default-size'));
$repeat     = get_theme_mod('background_repeat',     get_theme_support('custom-background', 'default-repeat'));
$attachment = get_theme_mod('background_attachment', get_theme_support('custom-background', 'default-attachment'));

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

Поиск: CMS • Web-разработка • WordPress • Функция • add_theme_support • the_custom_logo • has_custom_logo • Логотип • body_class • background_image • background_color • Background • Настройка