Портирование HTML шаблона в Wordpress. Часть первая

wordpress cms Портирование HTML шаблона

Автор: Владимир Подводный

Под темой в WordPress подразумевают набор css, js, php файлов, совместно с которыми ядро WordPress и плагины выводят информацию для представления пользователям из базы данных в красивом и удобном виде. Таким образом, если вы измените тему, то сайт меняет не только свой внешний вид, но и свой функционал.

Для WordPress существуют множество бесплатных тем но несмотря на это многие предпочитают создавать свои темы, прежде всего потому, что они удивительно все похожи одна на другую. Мы будем создавать тему с нуля, а не создавать дочерние темы для того, чтобы лучше понять сам процесс.

Необходимые для темы файлы Для того, чтобы опубликовать (активировать) тему необходимы всего лишь два файла:

  1. index.php — основной файл для темы, который ответственен за вывод содержания.
  2. style.css — основной файл стилей, отвечает за оформление.

Но ни одна тема естественно не может состоять всего из двух файлов. Тему начинают с двух файлов, а затем, чтобы было удобнее, её расширяют, добавляя такие файлы как: functions.php - файл в котором хранятся различные php функции:

  • screenshot.png – картинка представляющая тему в разделе Темы админки
  • header.php — отвечает за вывод верхнего колонтитула
  • footer.php — отвечает за вывод нижнего колонтитула
  • sidebar.php — отвечает за вывод боковой панели (сайдбар)
  • page.php — отвечает за вывод полной страницы записи и т.д.

Структура папок в Вордпресс и примеры других файлов приведены в предыдущей статье, все они лежат в каталоге /wp-content/themes/.

Вёрстка шаблона

В качестве вёрстки в нашем примере мы будем использовать один из базовых шаблонов Bootsrap 3 Carousel Template для Bootstrap: http://bootstrap-3.ru/examples/carousel/

Портирование HTML шаблона в Woedpress

Создадим папку myfirst, по названию темы в каталоге /wp-content/themes/myfirst/ и поместим в неё файлы: index.php, style.css, а также functions.php. В файл index.php поместим содержимое нашего HTML шаблона Carousel Template для Bootstrap.

Упрощённый вариант файла index.php в Wordpress выглядид следующим образом:

-------
           <?php get_header(); ?>
           <div class="wrap">
        <header class="page-header">
        <h1 class="page-title"><?php single_post_title(); ?></h1>
        </header>
    <div class="middle">
    <?php
        content     
            ?>
    </div>
          <?php get_sidebar(); ?>
    <footer class="footer">
        © 2015 - <?php echo date('Y') ?> Gravity Studio
    </footer>
    <?php get_footer(); 
    ?>
</body>
</html>

Как видно, он представляет собой HTML код, в котором статические элементы заменены динамическими, при помощи PHP функций темы в Wordpress. Так, например, функция bloginfo() выводит на экран различную информацию о блоге, в частности может указываться в настройках сайта. Эту функцию относят к тегам шаблона и она может быть использована в любом месте шаблона.

Необходимыми элементами являются функции: <?php get_header(); ?>, которая подключает файл шаблона header.php (шапку), и если этот файл не будет найден в шаблоне темы, то будет взять файл wp-includes/theme-compat/header.php по умолчанию, функция <?php get_sidebar(); ?>, которая подключает файл шаблона sidebar.php (сайдбар) и если передан параметр $name, то будет подключен файл sidebar-{name}.php. И, наконец, <?php get_footer(), подключает зарезервированный шаблон footer.php.

В файл style.css поместим пока только комментарий:

/*
Theme Name: Myfirst
Theme URI: https://cmsgrav.ru/themes/myfirst/
Author: Vladimir Podwodny
Author URI: https://cmsgrav.ru/
Description: это простая, но гибкая тема WordPress для блогов с использованием адаптивного дизайна, поэтому она хорошо смотрится даже на планшетах и смартфонах. В тему включены 4 виджета и 3 меню. Поскольку Customizer также позволяет настраивать заголовки и фон, вы можете настроить свой блог так, как вы этого хотите.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myfirst
Tags: one-column, two-columns, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
*/

Таблица контента

/* TABLE OF CONTENTS
------------------------------------------------------------
* Global
* Repeatable Patterns
* Layout
* Header
* Menu
* Content
* Navigations
* Comments
* Widgets
* Footer
* Plugins
* Print
------------------------------------------------------------ */

Файл functions.php пока можно оставить пустым и пометим картинку screenshot.png нашей будущей темы в корне темы. Создадим в корне темы также папку assets и разместим в assets/images все нужные картинки, а в папках assets/css и assets/js, соответствующие файлы нашей темы. Затем мы активируем нашу новую тему и проверим, что будет видно в браузере, если набрать адрес http://wordpress.loc/:

Портирование HTML шаблона в Woedpress

всё нормально, мы видим свой сайт со статическим контентом на главной странице, слайдер также работает.

Разделение файлов и подключение ресурсов

Теперь нам нужно понять как разделить HTML-файлы на части. На скриншоте ниже показана схема возможного деления главной страницы на блоки:

Портирование HTML шаблона в Woedpress

В этой схеме секция feature выводит динамический контент, скажем из блога. Секции header, top и footer меняются редко и настраиваются администратором. Однако такой подход не очень удачный. Лучше разделять шаблоны по секциям исходя из семантической логики. В данном примере это будут следующие секции: head, navigation, carousel, content-top, features, footer.

Теперь мы можем переносить выделенные фрагменты в соответствующие файлы, которые необходимо предварительно создать.

Секция Head:

<!DOCTYPE html>
<html class="front-page" lang="en">
 <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <meta name="description" content="">
       <meta name="author" content="">
       <link rel="shortcut icon" href="http://bootstrap-3.ru/assets/ico/favicon.ico">

    <title>Carousel Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->

    <link href="http://wordpress.loc/wp-content/themes/myfirst/assets/css/bootstrap.css" rel="stylesheet">
     <link href="http://wordpress.loc/wp-content/themes/myfirst/assets/css/carousel.css" rel="stylesheet">
    <link href="http://wordpress.loc/wp-content/themes/myfirst/assets/css/style.css" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Custom styles for this template -->
    <link href="http://wordpress.loc/wp-content/themes/first/assets/css/carousel.css" rel="stylesheet">
  <style id="holderjs-style" type="text/css"></style>
<meta charset="utf-8" />
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" />
  <?php wp_head() ?>
</head>

Секция Navigation:

<body>
    <div class="navbar-wrapper">
      <div class="container">

        <div class="navbar navbar-inverse navbar-static-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>
    </div>

Секция Carusel:

 <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://wordpress.loc/assets/images/unsplash-1.jpg" alt="First slide" src="">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p>Note: If you're viewing this page via a <code>file://</code>
 URL, the "next" and "previous" Glyphicon buttons on the left and right 
might not load/display properly due to web browser security rules.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="http://wordpress.loc/assets/images/unsplash-2.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget 
quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor 
id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="http://wordpress.loc/assets/images/unsplash-3.jpg" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget 
quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor 
id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>

Секция Top:

   <div class="container marketing">
      <!-- Three columns of text below the carousel -->
      <div class="row">
        <div class="col-lg-4">
          <img class="img-circle" src="http://wordpress.loc/assets/images/01.jpg" alt="140x140" style="width: 140px; height: 140px;">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis 
euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi 
leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo
 cursus magna.</p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="http://wordpress.loc/assets/images/02.jpg" alt="140x140" style="width: 140px; height: 140px;">
          <h2>Heading</h2>
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor 
ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus 
sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor 
mauris condimentum nibh.</p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="img-circle" src="http://wordpress.loc/assets/images/unsplash-04.jpg" alt="140x140" style="width: 140px; height: 140px;">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis 
in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. 
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
 ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div><!-- /.col-lg-4 -->
      </div>

Секция Features:

 <?php get_template_part( 'head' ); ?>
  <?php get_template_part( 'navigation' ); ?>
  <?php get_template_part( 'carusel' ); ?>
  <?php get_template_part( 'top' ); ?>
  <!--Features----->  
     <hr class="featurette-divider">
      <div class="row featurette">
        <div class="col-md-7">
          <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
          <p class="lead">Donec ullamcorper nulla non metus auctor 
fringilla. Vestibulum id ligula porta felis euismod semper. Praesent 
commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, 
tellus ac cursus commodo.</p>
        </div>
        <div class="col-md-5">
          <img class="featurette-image img-responsive" src="http://wordpress.loc/assets/images/unsplash-04.jpg" alt="500x500" >
        </div>
      </div>
      <hr class="featurette-divider">
      <div class="row featurette">
        <div class="col-md-5">
          <img class="featurette-image img-responsive" src="http://wordpress.loc/assets/images/unsplash-05.jpg" alt="500x500">
        </div>
        <div class="col-md-7">
          <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
          <p class="lead">Donec ullamcorper nulla non metus auctor 
fringilla. Vestibulum id ligula porta felis euismod semper. Praesent 
commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, 
tellus ac cursus commodo.</p>
        </div>
      </div>
      <hr class="featurette-divider">
      <div class="row featurette">
        <div class="col-md-7">
          <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
          <p class="lead">Donec ullamcorper nulla non metus auctor 
fringilla. Vestibulum id ligula porta felis euismod semper. Praesent 
commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, 
tellus ac cursus commodo.</p>
        </div>
        <div class="col-md-5">
          <img class="featurette-image img-responsive" src="http://wordpress.loc/assets/images/unsplash-04.jpg" alt="500x500">
        </div>
      </div>
      <hr class="featurette-divider">
      <!-- /END THE FEATURETTES -->
      <?php get_template_part( 'footer' ); ?>

Код секции Features я разместил в файле index.php, функцияget_template_part( ' ' ) находит и затем подключает указанные в качестве параметра файлы темы. Данная функция походит на PHP функциюinclude(), однако при этом нет необходимости указывать путь до темы. Таким образом, мы подключаем файлы, являющиеся частями шаблона в сам шаблон.

Секция Footer:

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.2
 */
?>
        </div><!-- #content -->
        <footer id="colophon" class="site-footer" role="contentinfo">
            <div class="wrap">
                <?php
                get_template_part( 'template-parts/footer/footer', 'widgets' );
                if ( has_nav_menu( 'social' ) ) : ?>
                    <nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
                        <?php
                            wp_nav_menu( array(
                                'theme_location' => 'social',
                                'menu_class'     => 'social-links-menu',
                                'depth'          => 1,
                                'link_before'    => '<span class="screen-reader-text">',
                                'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
                            ) );
                        ?>
                    </nav><!-- .social-navigation -->
                <?php endif;

                get_template_part( 'template-parts/footer/site', 'info' );
                ?>
            </div><!-- .wrap -->
        </footer><!-- #colophon -->
    </div><!-- .site-content-contain -->
</div><!-- #page -->
</body>
</html>

Если мы теперь проверим вывод шаблона в браузере, то увидим, что ничего не изменилось. И казалось бы, что всё прекрасно, но я указал абсолютный путь до файлов стилей и скриптов, что совершенно недопустимо. Поэтому мы используем более корректный метод с использованием файла functions.php и этот файл нам интересен тем, что он подключается в первую очередь при запуске приложения, вперёд даже не только темы, а вордпресса. Поэтому мы используем function.php для подключения стилей и скриптов выбранной темы:

<?php
    add_action('wp_enqueue_scripts', 'myfirst_media');
    add_action( 'after_setup_theme', 'myfirst_after_setup' ); 
       function myfirst_media() { 
         wp_enqueue_style('myfirst-main', get_stylesheet_uri());
         wp_enqueue_style('myfirst-main-carousel', get_template_directory_uri() . '/assets/css/carousel.css');
         wp_enqueue_style('myfirst-main-bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css');
         wp_enqueue_script('myfirst-main-script', get_template_directory_uri() . '/assets/js/bootsrap.js', [], null, true);
         wp_enqueue_script('myfirst-main-script', get_template_directory_uri() . '/assets/js/docs.js', [], null, true);
         wp_enqueue_script('myfirst-main-script', get_template_directory_uri() . '/assets/js/jquery.js', [], null, true); 
    }

Обратите внимание, что скрипты подключаются в подвале темы за счёт параметра $in_footer(логический) = true. Хотя обычно скрипты располагаются в head, однако если этот параметр будет равен true скрипт будет добавлен в конец тэга body, для этого тема должна содержать функцию wp_footer() перед закрывающим тегом </body>.

Использованный подход, а имнно, применить для сборки главной страницы файл index.php, является не самым оптимальным, эту задачу лучше поручить файлу front-page.php, а файл index.php лучше использовать по прямому назначеню, разместив в нём код, например:

 <?php
/*
 * @package components
*/
get_header(); ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
    <?php if ( have_posts() ) : ?>
      <?php /* Start the Loop */ ?>
      <?php while ( have_posts() ) : the_post(); ?>
        <?php
            get_template_part( 'components/content', get_post_format() );
        ?>
      <?php endwhile; ?>
      <?php the_posts_navigation(); ?>
    <?php else : ?>
      <?php get_template_part( 'components/content', 'none' ); ?>
    <?php endif; ?>
    </main><!-- #main -->
  </div><!-- #primary -->
<?php get_footer(); ?>

Комментарии

Blog Comments powered by Disqus.

Предыдущая запись Следующая запись