В WordPress есть очень полезный интерфейс, с помощью которого можно создавать настройки темы и в режиме реального времени их менять. Называется этот интерфейс Theme Customization API или кастомайзер (Customizer).
В SP Framework для работы с кастомайзером существует класс SP_Framework_Customizer
Давайте еще раз посмотрим на учебную верстку. А конкретнее на подвал сайта. Там можно увидеть контактную информацию. Такого рода дынные удобно хранить в базе данных используя кастомайзер.
Теперь обратим внимание на шапку сайта. У нас там есть логотип. Картинку логотипа будет удобнее менять через кастомайзер.
Давайте создать настройки кастомайзера.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
$spCC = new SP_Framework_Customizer(); $args = array( 'name' => 'sp_framework', 'priority' => 99, 'title' => 'SP Framework', 'description' => 'SP Framework', 'section' => array( 'logo' => array( 'name' => 'logo', 'title' => 'Логотип', 'fields' => array( 'sp_logo_1' => array( 'name' => 'sp_logo_1', 'type' => 'image', 'label' => 'Логотип 1', ), 'sp_logo_2' => array( 'name' => 'sp_logo_2', 'type' => 'image', 'label' => 'Логотип 2', ), ), ), 'contacts' => array( 'name' => 'contacts', 'title' => 'Контакты', 'fields' => array( 'sp_contact_phone' => array( 'name' => 'sp_contact_phone', 'type' => 'input', 'label' => 'Телефон', ), 'sp_contact_email' => array( 'name' => 'sp_contact_email', 'type' => 'input', 'label' => 'E-mail', ), 'sp_contact_facebook' => array( 'name' => 'sp_contact_facebook', 'type' => 'input', 'label' => 'Facebook', ), 'sp_contact_twitter' => array( 'name' => 'sp_contact_twitter', 'type' => 'input', 'label' => 'Twitter', ), 'sp_contact_gplus' => array( 'name' => 'sp_contact_gplus', 'type' => 'input', 'label' => 'Google plus', ), ), ), ), ); $spCC->create($args); |
данный код нужно добавить в файл sp-framework/core/customizer.php
Теперь нужно настроить вывод. Для этого создадим две функции и добавим их в файл sp-framework/core/functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
function sp_get_header_logo(){ $siteUrl = get_home_url(); $logo1 = get_theme_mod('sp_logo_1'); $logo2 = get_theme_mod('sp_logo_2'); if(!empty($logo1) && !empty($logo2)){ echo '<a href="'.$siteUrl.'" class="standard-logo" data-dark-logo="'.$logo1.'"><img src="'.$logo1.'" alt="Logo"></a>'; } } function sp_get_footer_contacts($result=null){ $phone = get_theme_mod('sp_contact_phone'); $email = get_theme_mod('sp_contact_email'); $facebook = get_theme_mod('sp_contact_facebook'); $twitter = get_theme_mod('sp_contact_twitter'); $gplus = get_theme_mod('sp_contact_gplus'); $result .= '<div class="fright clearfix">'; if($facebook){ $result .= '<a href="'.$facebook.'" class="social-icon si-small si-borderless si-facebook">'; $result .= '<i class="icon-facebook"></i>'; $result .= '<i class="icon-facebook"></i>'; $result .= '</a>'; } if($twitter){ $result .= '<a href="'.$twitter.'" class="social-icon si-small si-borderless si-twitter">'; $result .= '<i class="icon-twitter"></i>'; $result .= '<i class="icon-twitter"></i>'; $result .= '</a>'; } if($gplus){ $result .= '<a href="'.$gplus.'" class="social-icon si-small si-borderless si-gplus">'; $result .= '<i class="icon-gplus"></i>'; $result .= '<i class="icon-gplus"></i>'; $result .= '</a>'; } $result .= '</div>'; $result .= '<div class="clear"></div>'; if($email){ $result .= '<i class="icon-envelope2"></i> '.$email; } $result .= '<span class="middot">·</span>'; if($phone){ $result .= '<i class="icon-headphones"></i> '.$phone; } return $result; } |
Воспользуемся ими в шапке и подвале сайта.
header.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<header id="header" class="transparent-header full-header" data-sticky-class="not-dark"> <div id="header-wrap"> <div class="container clearfix"> <div id="primary-menu-trigger"><i class="icon-reorder"></i></div> <!-- Logo ============================================= --> <div id="logo"> <?php echo sp_get_header_logo();?> </div><!-- #logo end --> |
footer.php
|
1 2 3 4 5 6 7 8 9 |
<div class="col_half col_last tright"> <?php echo sp_get_footer_contacts();?> </div> </div> </div><!-- #copyrights end --> </footer><!-- #footer end --> |