tananin
1/5/2019 - 4:56 PM

Интеграция вёрстки на WordPress

install.md
content_copyfile_download
  • Rendered
  • Source

Интеграция вёрстки для WordPress

  1. Устанавливаем WP *. Первоначальные настройки *. Создаём новую тему или скачиваем пустую тему http://underscores.me
    *. Устанавливаем нужные плагины

Включаем вывод ошибок

В файле wp-config.php изменим define('WP_DEBUG', true);

Создание новой темы

Создаём новую директорию с названием темы.

Создаём файлы:

  • index.php
  • header.php
  • footer.php
  • sidebar.php
  • functions.php
  • style.css

Делим шаблон на части

Файл шаблона делется последовательно, без учёта вложеных тэгов.

head.php

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MyTheme - index.php</title>

    <link rel="stylesheet" href="style.css">

    <?php wp_head(); ?>
</head>
<body>
<header>
    <h1>Название сайта</h1>
</header>

page.php

<?php get_header(); ?>
<main>
    <p>Контент </p>
</main>
<?php get_footer(); ?>

footer.php

<footer>
    <h3>Футор</h3>
</footer>

<script src="js/main.js"></script>

<?php wp_footer(); ?>

</body>
</html>

Подключение стилей и скриптов

Скрипты и стили подключаются в файле functions.php

Стили

// Регистрация и подключения стилей через wp_head()
function wp_style_import(){
    wp_enqueue_style('style', get_template_directory_uri() . '/style.css', array(), 1, 'all');
  //  wp_enqueue_style('style');
}
add_action('wp_head', 'wp_style_import');

скрипты

// Регистрация и подключения стилей через wp_head()
function wp_script_import(){
    wp_enqueue_script('main',get_template_directory_uri() . '/js/main.js', array(), "1.0.1", true);
    //  wp_enqueue_style('style');
}
add_action('wp_footer', 'wp_script_import');

Пример из underscores

wp_enqueue_style( 'marat-style', get_stylesheet_uri() );

wp_enqueue_style( 'marat-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic');
wp_enqueue_style( 'marat-font-awesome', get_template_directory_uri() . '/assets/css/font-awesome.css', array(), '4.7.0');
wp_enqueue_style( 'marat-fmagnific-popup', get_template_directory_uri() . '/assets/css/magnific-popup.css');
wp_enqueue_style( 'marat-swiper', get_template_directory_uri() . '/assets/css/swiper.min.css');
wp_enqueue_style( 'marat-main', get_template_directory_uri() . '/assets/css/style.css', array(), '1.0.0');



wp_enqueue_script( 'marat-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
wp_enqueue_script( 'marat-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );


wp_enqueue_script( 'marat-jquery', get_template_directory_uri() . '/assets/js/jquery.min.js', array(), '3.3.1', true );
wp_enqueue_script( 'marat-magnific-popup', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.min.js', array(), '1.1.0', true );
wp_enqueue_script( 'marat-swiper', get_template_directory_uri() . '/assets/js/swiper.min.js', array(), '4.4.2', true );
wp_enqueue_script( 'marat-mask', get_template_directory_uri() . '/assets/js/mask.js', array(), '1.4.1', true );
wp_enqueue_script( 'marat-main', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true );