И так мы добавили 3 меню, 2 нам нужно, 1 добавим для футера (ну вдруг захочется)
Добавили 5 виджетов, Был стандартный (мы потом с ним разберемся) и добавили для слайдера, для приветствия (под слайдером), для валюты и выбора языка, и для произвольного меню.
Подключили стили из темы HTML
Давайте теперь продолжим собирать тему откроем header.php
найдем такие строки
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'clubwp-ru' ); ?></a>
под строкой разместим этот код
<div class="wrapper-box">
<div class="main-wrapper">
<header id="header">
<div class="htop">
<div id="currency"> <?php dynamic_sidebar( 'Currency' ); ?></div>
<div id="language"> <?php dynamic_sidebar( 'Language' ); ?></div>
<div class="links"><?php dynamic_sidebar( 'Произвольное меню' ); ?></div>
</div>
С помощью этой строки мы разместили виджеты валюты, языка и верхнего меню
Продолжим...
Теперь разместим логотип нашей темы...
найдем этот код
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php
endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif; ?>
</div><!-- .site-branding -->
Заменим на этот
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<div class="logo">
<a href="<?php echo home_url();?>"
<?php the_custom_header_markup(); ?>
</a>
</div>
<?php
endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<?php
endif; ?>
</div><!-- .site-branding -->
<header id="header1">
<div class="links1">
<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
</div><!-- #site-navigation -->
В принципе ни чего особенного мы добавили только одну строчку и кое что удалили строка эта
<?php the_custom_header_markup(); ?> нужна для того чтобы включить встроенный механизм брендирования сайта (Вам же захочется менять логотип на свой) удалили (можно не удалять а закомментировать так разумнее) мы только дополнительный вывод названия сайта
Продолжим вставим под
<!-- .site-branding -->
этот код
<header id="header1">
<div class="links1">
<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
</div><!-- #site-navigation -->
Этим кодом мы вставили меню, это не все мы должны еще его оформить в CSS чтоб было как на оригинале и прочее
Добавим еще кое что и можно закрывать хедер
Вставим после
<!-- #masthead -->
этот код
<section class="slider-wrapper">
<div id="slider-wrapper"> <?php dynamic_sidebar( 'Slider' ); ?></div>
</section>
<!-- Welcom Text Start-->
<div class="welcome"></div>
<div> <?php dynamic_sidebar( 'Well' ); ?></div>
<!-- Welcom Text End-->
Мы разместили виджет слайдера и текста велком
Сохраняем и наслаждаемся...
Не очень похоже? работаем дальше...
Открываем stylesheet.css
ищем этот код
[CSS]/********** Top Links **********/
#header .links { position: relative; float:right; line-height:30px; margin-right:-10px;}
#header .links li {display: inline-block; padding:0px 10px; color: #444; text-decoration: none; font-size:12px; position:relative;}
#header .links li + li:before{display:inline-block; content: "|"; clear: both; height: 0; color:#444; font-size:11px; padding-left:12px; position:absolute; left:-15px;}
#header .links li:hover{color:#D45C93;}
#header #welcome {color: #999999; float:left;}[/CSS]
Ниже добавим
[CSS]#header1 {background:#222; margin:15px 0px; height:40px; padding:0px 0px 0px 3px;}
#header1 .links1 li {display: inline-block;}
#header1 li:hover > a {color:#fff; background:#d45c93; }
#header1 .links1 a { font-size:14px; color: #FFF; line-height:40px; text-decoration: none; display: block; padding:0px 10px 0px 10px; z-index: 1009; position: relative; font-weight:bold; text-transform:uppercase;}[/CSS]
Эти три строки делает наше меню над слайдером как на оригинале выводит его в строчку и прочее (единственное чего нет это значка домика... можно добавить но это Ваше домашнее задание)
построчно первая строка делает прямоугольник для размещения меню
вторая распределяет пункты меню в строчку
третья меняет цвет при наведении
Четвертая задает внешний вид строчек меню
вот теперь мы еще ближе к цели...
Сохраняем нашу работу и проверяем ошибки...
Почти все.
Осталось
Установить: ревслайдер, VC и добавить нужное в нужные места.
Разобраться с сайдбаром стандартным и изменить футер как в оригинале. По сути нужно в футере добавить несколько виджетов и меню...
Почему нужен VC? ну причин множество, во первых расширим набор возможностей, но основная причина это куча примочек на главной, если мы будем пилить подобные карусельки ручками то это достаточно сложно будет как конструкция и основной минус придется писать отдельную админку под управление а это долго и нудно. Почему ревслайдер? Тут вариантов больше можно и другой с поддержкой виджетов.
В целом наша задача сделать не просто копию темы а тему которую в последствии можно гибко и быстро использовать и плюс в том виде котором она уже практически получилась... это супер быстрая и легкая тема.
Как вариант можно отказаться от рев слайдера и встроить нивослайдер который будет несколько проще и легче но управление этим слайдером будет сложнее, и будет очень и очень мало эффектов.
Продолжение следует...