• ДОБРО ПОЖАЛОВАТЬ В КЛУБ ПО WORDPRESS

    Мы активно растущий клуб по WordPress и нам нужна помощь каждого человека, в том числе и Ваша! Не стесняйтесь и станьте частью большого сообщества.
    Мы делимся новостями, отытом и полезными советами! Пройдите простую регистрацию, чтобы пользоваться всеми возможностями нашего клуба.

    Присоединяйтесь к нам, вам обязательно понравится - Присоединится

Урок "Натягиваем" HTML или создаем шаблон WP из HTML

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Доброго времени суток, Уважаемые форумчане.
Хочу начать серию о создании шаблона WordPress из HTML шаблона.
Это будет первый пост в котором я хочу поделится мыслью и услышать Ваше мнение.
Если данный пост будет востребован и окажется достаточно правильным думаю его можно будет после перенести в Базу решений
И так для начала давайте создадим исходник для работы
Исходный шаблон HTML я размещу из официального источника (он платный но для Вас форумчане доступен бесплатно)
У вас нет прав на просмотр содержимого!

И сгенеренная пустая тема
У вас нет прав на просмотр содержимого!


Сразу оговорюсь, возможно в процессе мы откажемся от автосгенеренной темы и будем создавать из пустых файлов тему (Порой это удобнее и плюс не факт что у меня хватит ума где то)

И так как для начала ознакомьтесь с этой темой Работа с темами в WordPress
Для чего? Чтобы не повторяться наверное. И не писать одно и тоже (я же то же ленивый...)

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

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Начнем потихоньку.
Пока подготовительные этапы.
Надеюсь кто заинтересовался скачали исходники.
Далее нам нужно:
  1. Текстовый редактор, например, Sublime Text 2, Notepad++, AkelPad или любой другой (только не стандартный блокнот windows!)
  2. Браузер (кому какой это не важно)
  3. Сайт для тестирования темы либо локальный либо в интернете.
  4. Понимание базовое HTML, CSS, PHP.
  5. Терпение... Пару вагонов + две тележки.
  6. 1000000 долларов мелкими купюрами! Шутка.
Напомню что шаблон WP состоит из множества файлов
Это основа без нее тема не будет существовать для WP
  • index.php – основной шаблон страницы;
  • style.css – файл стилей.
Ну и много других про часть из них напомню
  • header.php, для вывода шапки всех страниц;
  • sidebar.php, для вывода боковой колонки;
  • footer.php, который выводит подвал сайта;
  • page.php, шаблон для статических страниц
  • single.php, шаблон для страниц записей;
  • archive.php, шаблон архивов и рубрик;
  • comments.php, шаблон комментариев;
  • functions.php, функции темы;
Основа нашей задачи в том чтобы исходник HTML превратить в тему WP
Работает или точнее работать мы будем по такому принципу:
Берем готовую пустую тему WP (у нас же есть исходник) и постепенно переделываем ее совмещая с HTML шаблоном
Замечу что тема HTML это изначально магазин, поэтому мы сразу усложнили себе задачу тк будем делать тему совместимую с WC

Для гурманов и знающих людей, если в процессе я буду ошибаться или что то подобное то я с удовольствием приму поправки на условиях, что они будут с описанием и из расчета уважительного изложения к форумчанам те в виде корректного разъяснения и примера. Прошу учитывать что я не являюсь профи. Данные уроки будут в качестве собственного-личного развития предоставлены для всех.

И так распакуем исходники и откроем папку HTML темы и создадим там файл style.css

В него вставим такой код
Код:
/*
Theme Name: ClubWP-Theme
Theme URI: http://clubwp.ru
Author: ClubWP
Author URI: http://clubwp.ru
Description: Тема создана усилиями форума из шаблона HTML
Version: 1.0
License: CCA 3.0 license
License URI: http://creativecommons.org/licenses/by/3.0/
Tags: white, red, left-sidebar, right-sidebar
*/
Вы можете внести свои данные

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

Далее скопируем в пустую WP тему все файлы HTML темы
В итоге мы получим пустую готовую для работы в WP тему.
Тема абсолютно пустая рабочая и ее даже можно установить на WP, правда проку от нее будет очень мало. )))

Далее мы начнем работу с файлом header.php
перенесем в него данные из index.html относящиеся к header.php будущей темы.
Пока все. Скоро продолжим.
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
И так продолжим.
Давайте рассмотрим исходный HTML шаблон внимательно.
В нем 2 меню 2 виджета слайдер. (это нам нужно для понимания что где вставлять и прочее)
Давайте для начала разместим стили и разместим меню
Открываем functions.php style.css header.php
В предыдущем сообщении мы вставили в пустой style.css код в котором авторизовали себя как автора.

Давайте чтоб не мудрить из пустой темы WP (исходники) style.css скопируем в папку css (исключая шапку дабы было чище)
В нашем файле style.css который лежит в корне темы вставим данный код
[CSS]
@import url("css/style.css");
@import url("css/stylesheet.css");
[/CSS]
Таким образом мы подключили нужные нам стили из папки.

Чуть позже продолжим.
 
Последнее редактирование:

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Продолжим
Теперь откроем functions.php и разберемся с меню
В functions.php есть код
PHP:
    // This theme uses wp_nav_menu() in one location.
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary', 'clubwp-ru' ),
    ) );
Немного его переделаем и добавим еще несколько меню
PHP:
    // This theme uses wp_nav_menu() in one location.
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Главное', 'clubwp-ru' ), 'top_menu' => 'Меню сверху', 'top_menu2' => 'Меню сверху2', 'footer_menu' => 'Меню в подвале',
    ) );
Если нужны будут комментарии пишите думаю тут все просто... Мы в функции темы добавили еще 3 меню (на всякий случай) и теперь если зайти в админку и посмотреть области меню то мы увидим 4 меню которые можем использовать для темы
Давайте пока не закрыли файлик функций добавим туда виджетов, нам их нужно минимум 2 (выбор языка, выбор валюты) но если подумать то 3 тк удобнее всего разместит слайдер темы в виджете и легко и непринужденно использовать виджет например от слайдера революция (можно и не использовать тогда слайдер просто не появится)
И так смотрим код
PHP:
/**
* Register widget area.
*
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
*/
function clubwp_ru_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'clubwp-ru' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'clubwp-ru' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'clubwp_ru_widgets_init' );
Это то что уже есть в теме
добавим своих
Код:
/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
function clubwp_ru_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'clubwp-ru' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'clubwp-ru' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
            register_sidebar( array(
        'name'          => esc_html__( 'Slider', 'clubwp-ru' ),
        'id'            => 'Slider',
        'description'   => esc_html__( 'Add widgets here.', 'clubwp-ru' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
                register_sidebar( array(
        'name'          => esc_html__( 'Well', 'clubwp-ru' ),
        'id'            => 'Well',
        'description'   => esc_html__( 'Add widgets here.', 'clubwp-ru' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
        register_sidebar( array(
        'name'          => esc_html__( 'Currency', 'clubwp-ru' ),
        'id'            => 'sidebar-2',
        'description'   => esc_html__( 'Add widgets here.', 'clubwp-ru' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
                register_sidebar( array(
        'name'          => esc_html__( 'Language', 'clubwp-ru' ),
        'id'            => 'sidebar-3',
        'description'   => esc_html__( 'Add widgets here.', 'clubwp-ru' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
                    register_sidebar( array(
        'name'          => esc_html__( 'Произвольное меню', 'clubwp-ru' ),
        'id'            => 'sidebar-4',
        'description'   => esc_html__( 'Add widgets here.', 'clubwp-ru' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'clubwp_ru_widgets_init' );
Вот так. Думаю тут так же пояснений не требуется
 
Последнее редактирование:

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
И так мы добавили 3 меню, 2 нам нужно, 1 добавим для футера (ну вдруг захочется)
Добавили 5 виджетов, Был стандартный (мы потом с ним разберемся) и добавили для слайдера, для приветствия (под слайдером), для валюты и выбора языка, и для произвольного меню.
Подключили стили из темы HTML
Давайте теперь продолжим собирать тему откроем header.php
найдем такие строки
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>
под строкой разместим этот код
PHP:
<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>
С помощью этой строки мы разместили виджеты валюты, языка и верхнего меню
Продолжим...
Теперь разместим логотип нашей темы...
найдем этот код
PHP:
<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 -->
Заменим на этот
PHP:
    <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 -->
этот код
PHP:
           <header id="header1">
        <div class="links1">
        <?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
        </div><!-- #site-navigation -->
Этим кодом мы вставили меню, это не все мы должны еще его оформить в CSS чтоб было как на оригинале и прочее
Добавим еще кое что и можно закрывать хедер
Вставим после <!-- #masthead -->
этот код
PHP:
        <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? ну причин множество, во первых расширим набор возможностей, но основная причина это куча примочек на главной, если мы будем пилить подобные карусельки ручками то это достаточно сложно будет как конструкция и основной минус придется писать отдельную админку под управление а это долго и нудно. Почему ревслайдер? Тут вариантов больше можно и другой с поддержкой виджетов.
В целом наша задача сделать не просто копию темы а тему которую в последствии можно гибко и быстро использовать и плюс в том виде котором она уже практически получилась... это супер быстрая и легкая тема.
Как вариант можно отказаться от рев слайдера и встроить нивослайдер который будет несколько проще и легче но управление этим слайдером будет сложнее, и будет очень и очень мало эффектов.
Продолжение следует...
 
Последнее редактирование:

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Для примера вот что у меня уже получилось
Безымянный222211.jpg
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Продолжим доделывать мелочи.
Добавим поддержку WC в наш шаблон.
Это очень просто.
Делаем копию файла page.php под именем woocommerce.php
Открываем ищем этот код
PHP:
        <?php
            while ( have_posts() ) : the_post();

                get_template_part( 'template-parts/content', 'page' );

                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;

            endwhile; // End of the loop.
            ?>
Удаляем его и вставляем этот
<?php woocommerce_content(); ?>
Сохраняем, закрываем
далее открываем functions.php и в самом конце вставляем это
PHP:
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}
Сохраняем, закрываем радуемся. Теперь тема поддерживает WC
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
И так добавлю.
Как Вы заметили логотип в хедере при добавлении не очень смотрится ))) он во весь размер....
Поправим.
открываем custom-header.php ищем этот код И меняем значения как написано (это размер логотипа исходной темы HTML) Вы можете взять свой логотип и выставить размер по своему вкусу
PHP:
/**
* Set up the WordPress core custom header feature.
*
* @uses clubwp_ru_header_style()
*/
function clubwp_ru_custom_header_setup() {
    add_theme_support( 'custom-header', apply_filters( 'clubwp_ru_custom_header_args', array(
        'default-image'          => '',
        'default-text-color'     => '000000',
        'width'                  => 193,
        'height'                 => 58,
        'flex-height'            => true,
        'wp-head-callback'       => 'clubwp_ru_header_style',
    ) ) );
}
add_action( 'after_setup_theme', 'clubwp_ru_custom_header_setup' );

if ( ! function_exists( 'clubwp_ru_header_style' ) ) :
Делать это не обязательно, это по желанию.
 
Последнее редактирование:

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Печально, что в теме не отметились профи, с комментариями.
 
Сверху