Как создать тему WordPress с нуля: последние шаги

Тема складывается красиво. Читатели, конечно же, адаптируют стиль по своему вкусу.

API настройщика

Когда мы говорим о стилях, мы упомянем API настройщика и покажем, как его использовать, чтобы обеспечить удобный контроль над фоновыми изображениями для заголовков.

Вот пример того, как мы создаем новую панель , раздел и элемент управления в нашей теме (снова functions.php ):

 function register_customizer_controls( $wp_customize ) { // Create custom panel. $wp_customize->add_panel( 'basic_stylings', array( 'priority' => 70, 'theme_supports' => '', 'title' => __( 'Basic Stylings', 'bsimple' ), 'description' => __( 'Set main website headers.', 'bsimple' ), ) ); // Add section $wp_customize->add_section( 'frontpage_settings' , array( 'title' => __( 'Frontpage Settings','bsimple' ), 'panel' => 'basic_stylings', 'priority' => 20, ) ); // Add setting. $wp_customize->add_setting( 'frontpage_header_bg_img', array( 'default' => get_stylesheet_directory_uri() . '/images/basic_header_bg.jpg', ) ); // Add control. $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'frontpage_background_image', array( 'label' => __( 'Add Home Header Background Image Here, the width should be approx 1900px', 'bsimple' ), 'section' => 'frontpage_settings', 'settings' => 'frontpage_header_bg_img', ) ) ); } add_action( 'customize_register', 'register_customizer_controls' ); 

Главное здесь — это ловушка customize_register и порядок методов $wp_customize ( add_panel , add_section , add_setting , add_control . Порядок имеет значение. Кодекс WordPress содержит подробную ссылку на API-интерфейс Customizer .

Как только мы добавим наши настройки и элементы управления в functions.php , мы добавим следующий код в bsimple_scripts() функции bsimple_scripts() мы создали, чтобы поставить в очередь наши сценарии и стили:

 $css = ''; $home_header_bg_image = get_theme_mod( 'home_header_bg_img' , get_stylesheet_directory_uri() . '/images/basic_header_bg.jpg' ); $frontpage_header_bg_image = get_theme_mod( 'frontpage_header_bg_img' , get_stylesheet_directory_uri() . '/images/basic_header_bg.jpg' ); $global_header_bg_image = get_theme_mod( 'global_header_bg_img' , get_stylesheet_directory_uri() . '/images/basic_header_bg.jpg' ); $css .= ( !empty($home_header_bg_image) ) ? sprintf(' #main_header.phome { background: url(%s) no-repeat center; } ', $home_header_bg_image ) : ''; $css .= ( !empty($frontpage_header_bg_image) ) ? sprintf(' #main_header.pfront { background: url(%s) no-repeat center; } ', $frontpage_header_bg_image ) : ''; $css .= ( !empty($global_header_bg_image) ) ? sprintf(' #main_header.pglobal { background: url(%s) no-repeat center; } ', $global_header_bg_image ) : ''; if ( $css ) { wp_add_inline_style( "bsimple-style" , $css ); } 

Мы добавили phome , pfront и pglobal в наши контейнеры заголовков. Теперь мы используем wp_add_inline_style () и bsimple-style мы использовали в начале нашего базового стиля темы — для вывода настроек настройщика, которые мы только что создали. Мы используем get_theme_mod() чтобы получить каждый зарегистрированный нами параметр.

Таким образом, мы можем установить изображения для заголовков, которые мы разделили в функцию dynamic_header() во второй части руководства:

 if(!function_exists('dynamic_header')){ function dynamic_header(){ global $post; ?> <?php if (is_home()){ ?> <header class="masthead phome" id="main_header"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <div class="site-heading"> <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1> <span class="subheading"><?php bloginfo( 'description', 'raw' );?></span> </div> </div> </div> </div> </header> <!-- etc. --> 

Отдельные страницы и сообщения

Иерархия шаблонов WordPress помогает нам ориентироваться на точный URL-адрес и публикацию, которые загружаются при посещении, так что мы можем атомарно спроектировать вывод HTML для каждого из них. Много раз нам не нужно будет создавать все шаблоны.

Добавление общего фонового изображения для всех постов или страниц не имеет большого смысла. Таким образом, наша стратегия Customizer будет работать для архивов, для списка сообщений в блоге, для главной страницы и даже для терминов, может быть. Но для определенных страниц и постов мы, вероятно, захотим установить изображения индивидуально.

как нам это сделать?

В нашей функции dynamic_header() мы точно определили заголовок для страниц , поэтому теперь мы будем использовать встроенный стиль и get_the_post_thumbnail_url() для установки get_the_post_thumbnail_url() изображения страниц в качестве фона заголовка:

 <?php } else if (is_page()){ ?> <header class="masthead ppage" id="main_header" style="background-image:url(<?php echo get_the_post_thumbnail_url($post, "full" ); ?>)"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <div class="site-heading"> <h1 class="site-title"><?php the_title() ?></h1> <span class="subheading"><?php echo get_post_meta($post->ID, "subtitle_", true);?></span> </div> </div> </div> </div> </header> 

Теперь пользователь может установить изображение заголовка для каждой отдельной страницы. Мы можем сделать то же самое для is_single() , который будет применять одно и то же решение для всех сообщений, включая пользовательские типы сообщений.

Эта строка позволит пользователям добавлять настраиваемое поле для каждой страницы с именем subtitle_ , и оно будет выведено в заголовок страницы:

  <span class="subheading"><?php echo get_post_meta($post->ID, "subtitle_", true);?></span> 

 <?php /** * * @package Botega Simple Theme */ get_header(); ?> <div class="col-lg-10 mx-auto col-md-10 col-md-offset-1 single-container"> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'partials/content', 'single' ); ?> <?php endwhile; // End of the loop. ?> <?php endif; ?> </div> <!-- /.col-lg-8.col-lg-offset-2.col-md-10.col-md-offset-1 --> <?php get_footer(); ?> 

 <?php /** * Template part for displaying single posts. * * @package Botega Simple Theme */ ?> <?php the_content(); wp_link_pages(); ?> 

 <?php /** * Footer template partial * * @package Botega_Scratch_Theme * */ ?> <?php if ( is_active_sidebar( 'b_c_s' ) ) : ?> <div class="row b_c_s"><div class="col-lg-8 mx-auto top-widget col-md-10 "> <?php get_sidebar( 'BottomCenterSidebar' ); ?> </div></div> <?php endif; ?> </div> <!-- /.container --> <!-- Footer --> <footer id="footer"> <div class="container"> <div class="row"> <div class="col-lg-4 col-sm-12" id="f_1"> <?php get_sidebar( 'Footer1' ); ?> </div> <div class="col-lg-4 col-sm-12" id="f_2"> <?php get_sidebar( 'Footer2' ); ?> </div> <div class="col-lg-4 col-sm-12" id="f_3"> <?php get_sidebar( 'Footer3' ); ?> </div> </div><!-- /.row --> </div><!-- /.container --> </footer><!-- /footer --> <?php wp_footer(); ?> </body> </html>