Разработка собственной домашней страницы для вашего сайта WordPress

Создание панели

Давайте сначала создадим панель. Мы назовем это Подробности продукта .

 // Adding the Product Details panel Kirki::add_panel( 'product_details', array( 'priority' => 10, 'title' => __( 'Product Details', 'magnificient' ), 'description' => __( 'Panels to show details of the products', 'magnificient' ), ) ); 

Создание раздела

Мы сделаем раздел для полей, используя код ниже:

 // Adding the Product Details for Homepage section Kirki::add_section( 'product_details_for_homepage', array( 'title' => __( 'Product Details for Homepage', 'magnificient' ), 'description' => __( 'This will show the details on the front page of your website', 'magnificient' ), 'panel' => 'product_details', // Not typically needed. 'priority' => 160, 'capability' => 'edit_theme_options', 'theme_supports' => '', // Rarely needed. ) ); 

Создание полей

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

 // Adding the Product Details image 1 field Kirki::add_field( 'mc', array( 'type' => 'image', 'settings' => 'product_details_image_1', 'label' => __( 'Product Details image 1', 'magnificient' ), 'description' => __( 'This image will be the first image for the Product Details.', 'magnificient' ), 'section' => 'product_details_for_homepage', 'default' => '', 'priority' => 10, ) ); // Adding the Product Details image 2 field Kirki::add_field( 'mc', array( 'type' => 'image', 'settings' => 'product_details_image_2', 'label' => __( 'Product Details image 2', 'magnificient' ), 'description' => __( 'This image will be the second image for the Product Details.', 'magnificient' ), 'section' => 'product_details_for_homepage', 'default' => '', 'priority' => 10, ) ); // Adding the Product Details textarea 1 field Kirki::add_field( 'mc', array( 'type' => 'textarea', 'settings' => 'product_details_textarea_1', 'label' => __( 'Product Details textarea 1', 'magnificient' ), 'description' => __( 'This description will be the details for the first product.', 'magnificient' ), 'section' => 'product_details_for_homepage', 'default' => __( 'This is some default text', 'magnificient' ), 'priority' => 10, ) ); // Adding the Product Details textarea 2 field Kirki::add_field( 'mc', array( 'type' => 'textarea', 'settings' => 'product_details_textarea_2', 'label' => __( 'Product Details textarea 2', 'magnificient' ), 'description' => __( 'This description will be the details for the second product.', 'magnificient' ), 'section' => 'product_details_for_homepage', 'default' => __( 'This is some default text', 'magnificient' ), 'priority' => 10, ) ); 

Отображение вывода

Нам нужно показать вывод на шаблоне пользовательской домашней страницы . Откройте файл homepage.php и добавьте следующий код:

 <?php $product_details_image_1 = Kirki::get_option( mc, product_details_image_1 ); $product_details_textarea_1 = Kirki::get_option( mc, product_details_textarea_1 ); if ( $product_details_image_1 || $product_details_textarea_1 ) { ?> <div class="row" data-equalizer id="product-details-one"> <div class="large-6 columns panel" data-equalizer-watch id="product-image"> <?php if ( $product_details_image_1 ) { echo '<img src="'. $product_details_image_1 .'" />'; } ?> </div> <div class="large-6 columns panel" data-equalizer-watch id="product-description"> <?php if ( $product_details_textarea_1 ) { echo '<h6>'. $product_details_textarea_1 .'</h6>'; } ?> </div> </div> <?php } ?> 

Просто сделайте то же самое для другого ряда. Затем перейдите к настройщику и обновите его.

Витрина команды

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

Как правило, этот раздел может состоять из множества членов команды. В этом примере мы будем предоставлять опции только для трех участников, но вы можете расширять их по мере необходимости.

Создание панели

Мы создадим новую панель и назовем ее Team Showcase .

 // Adding the Team Showcase panel Kirki::add_panel( 'team_showcase', array( 'priority' => 10, 'title' => __( 'Team Showcase', 'magnificient' ), 'description' => __( 'A section to show your team', 'magnificient' ), ) ); 

Создание раздела

Далее мы создадим раздел, в котором есть опции для демонстрации команды.

 // Adding the Team Showcase for Homepage section Kirki::add_section( 'team_showcase_for_homepage', array( 'title' => __( 'Team Showcase for Homepage', 'magnificient' ), 'description' => __( 'This will show the team members on the front page of your website', 'magnificient' ), 'panel' => 'team_showcase', // Not typically needed. 'priority' => 160, 'capability' => 'edit_theme_options', 'theme_supports' => '', // Rarely needed. ) ); 

Создание полей

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

 // Adding the Team Showcase image 1 field Kirki::add_field( 'mc', array( 'type' => 'image', 'settings' => 'team_showcase_image_1', 'label' => __( 'Team Showcase image 1', 'magnificient' ), 'description' => __( 'This image will be the first image for the Team Showcase.', 'magnificient' ), 'section' => 'team_showcase_for_homepage', 'default' => '', 'priority' => 10, ) ); // Adding the Team Showcase image 2 field Kirki::add_field( 'mc', array( 'type' => 'image', 'settings' => 'team_showcase_image_2', 'label' => __( 'Team Showcase image 2', 'magnificient' ), 'description' => __( 'This image will be the second image for the Team Showcase.', 'magnificient' ), 'section' => 'team_showcase_for_homepage', 'default' => '', 'priority' => 10, ) ); // Adding the Team Showcase image 3 field Kirki::add_field( 'mc', array( 'type' => 'image', 'settings' => 'team_showcase_image_3', 'label' => __( 'Team Showcase image 3', 'magnificient' ), 'description' => __( 'This image will be the third image for the Team Showcase.', 'magnificient' ), 'section' => 'team_showcase_for_homepage', 'default' => '', 'priority' => 10, ) ); // Adding the Team Showcase text 1 field Kirki::add_field( 'mc', array( 'type' => 'text', 'settings' => 'team_showcase_text_1', 'label' => __( 'Team Member 1', 'magnificient' ), 'description' => __( 'Name of the first member.', 'magnificient' ), 'section' => 'team_showcase_for_homepage', 'default' => __( 'John Doe', 'magnificient' ), 'priority' => 10, ) ); // Adding the Team Showcase text 2 field Kirki::add_field( 'mc', array( 'type' => 'text', 'settings' => 'team_showcase_text_2', 'label' => __( 'Team Member 2', 'magnificient' ), 'description' => __( 'Name of the second member.', 'magnificient' ), 'section' => 'team_showcase_for_homepage', 'default' => __( 'John Doe', 'magnificient' ), 'priority' => 10, ) ); // Adding the Team Showcase text 3 field Kirki::add_field( 'mc', array( 'type' => 'text', 'settings' => 'team_showcase_text_3', 'label' => __( 'Team Member 3', 'magnificient' ), 'description' => __( 'Name of the third member.', 'magnificient' ), 'section' => 'team_showcase_for_homepage', 'default' => __( 'John Doe', 'magnificient' ), 'priority' => 10, ) ); 

Отображение вывода

Теперь мы отобразим изображения и имена трех членов команды в нашем шаблоне пользовательской домашней страницы . Откройте homepage.php и вставьте следующее:

 // For team member 1 $team_showcase_image_1 = Kirki::get_option( mc, team_showcase_image_1 ); $team_showcase_text_1 = Kirki::get_option( mc, team_showcase_text_1 ); // For team member 2 $team_showcase_image_2 = Kirki::get_option( mc, team_showcase_image_2 ); $team_showcase_text_2 = Kirki::get_option( mc, team_showcase_text_2 ); // For team member 3 $team_showcase_image_3 = Kirki::get_option( mc, team_showcase_image_3 ); $team_showcase_text_3 = Kirki::get_option( mc, team_showcase_text_3 ); 

 //Team Member 1 if ( $team_showcase_image_1 ) { echo '&lt;img src="'. $team_showcase_image_1 .'" />'; } if ( $team_showcase_text_1 ) { echo '&lt;h6 class="team-showcase-member text-center">'. $team_showcase_text_1 .'</h6>'; } //Team Member 2 if ( $team_showcase_image_1 ) { echo '&lt;img src="'. $team_showcase_image_1 .'" />'; } if ( $team_showcase_text_1 ) { echo '&lt;h6 class="team-showcase-member text-center">'. $team_showcase_text_1 .'</h6>'; } //Team Member 3 if ( $team_showcase_image_1 ) { echo '&lt;img src="'. $team_showcase_image_1 .'" />'; } if ( $team_showcase_text_1 ) { echo '&lt;h6 class="team-showcase-member text-center">'. $team_showcase_text_1 .'</h6>'; } 

 // Adding the Frontpage Separate Page Content panel Kirki::add_panel( 'front_page_separate_page_content', array( 'priority' => 10, 'title' => __( 'Frontpage Separate Page Content', 'magnificient' ), 'description' => __( 'A section to fetch content from another page', 'magnificient' ), ) ); 

 // Adding the Frontpage Separate Page Content for Homepage section Kirki::add_section( 'front_page_separate_page_content_for_homepage', array( 'title' => __( 'Frontpage Separate Page Content for Homepage', 'magnificient' ), 'description' => __( 'This will show the separate page content on the front page of your website', 'magnificient' ), 'panel' => 'front_page_separate_page_content', // Not typically needed. 'priority' => 160, 'capability' => 'edit_theme_options', 'theme_supports' => '', // Rarely needed. ) ); 

 // Adding the Separate Page Content dropdown field Kirki::add_field( 'mc', array( 'type' => 'dropdown-pages', 'settings' => 'front_page_separate_page_content_dropdown', 'label' => __( 'Frontpage Separate Page Content', 'kirki' ), 'description' => __( 'Select the page whose content will be shown on the front page inside the frontpage separate page section', 'kirki' ), 'section' => 'front_page_separate_page_content_for_homepage', 'default' => '', 'priority' => 10, ) ); 

 $front_page_separate_page_content_dropdown = Kirki::get_option( mc, front_page_separate_page_content_dropdown ); if ( $front_page_separate_page_content_dropdown ) { $front_page_separate_page_content_dropdown_content = get_post_field('post_content', $front_page_separate_page_content_dropdown); echo $front_page_separate_page_content_dropdown_content; } 

 // Frontpage Sidebar register_sidebar(array('name'=> 'Frontpage Sidebar', 'id' => 'frontpage-sidebar', 'description' => __( 'This is the sidebar which will be visible only on the frontpage (homepage) of your website.', 'magnificient' ), 'before_widget' => '<article id="%1$s" class="panel widget %2$s">', 'after_widget' => '</article>', 'before_title' => '<h4>', 'after_title' => '</h4>' )); 

 <?php dynamic_sidebar("frontpage-sidebar"); ?>