Основы создания темы на основе вёрстки в Вордпресс

wordpress cms создание блога на wordpress wordpress темы wordpress cms

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

При загрузке фронтэнда любые запросы отправляются в файл index.php в корневой папке домена. И это значит, что WordPress загружается с темой. Файл index.php в корне темы является самым общим файлом шаблона в теме WordPress и один из двух необходимых файлов для темы вместе соstyle.css. Файл index.php отвечает за вывод содержимого, тогда как файл style.css - отвечает за стили этого вывода.

Особенность файла style.css состоит в том, что именно по нему WordPress идентифицирует тему. Он используется для отображения страницы, когда ничего конкретного не соответствует запросу. Например, он выводит главную страницу, если нет файла home.php.

Когда администратор заходит в раздел Темы в админ-панели, WordPress ищет все файлы style.css в папках тем в каталоге wp-content/themes/ и показывает все темы, которые доступны. Название темы, скриншоты и другие данные берутся из этого файла, в частности из комментариев в начале файла.

Создание своей темы начинается с создания папки, имя которой совпадает с названием новой темы, например myfirst. Внутри темы мы создаём в обязательном порядке файл index.php для того, чтобы Вордпресс увидел нашу тему. Кроме того нам необходимо создать миниатюру screenshot.png и файл стилей style.css, иначе появится сообщение, что тема повреждена и является неполной.

После этого наша тема появится в админ-панели в разделе Внешний вид → Темы и станет возможной её активация, а миниатюра screenshot.png позволяет созерцать красивое оформление нашей темы. Примерная структура папок показана на рисунке.

Откроем файл 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: first
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

Теперь создадим файл index.php и добавим в него код, который даёт некоторое представление об основных его элементах:

<!DOCTYPE html>
<html> 
<head> 
   <meta charset="<?php bloginfo( 'charset' ); ?>"> 
   <title><?php echo wp_get_document_title(); ?> </title> 
   <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"  type="text/css" /> <?php wp_head(); ?> 
</head> 
<body> 
   <header class="header"> 
   <h1><?php bloginfo( 'name' ); ?></h1> 
   <h2><?php bloginfo( 'description' ); ?></h2> </header> 
      <div class="middle"> 
            <?php // циклы вывода записей // если записи найдены if ( have_posts() )
            { while ( have_posts() )
            { the_post(); 
          echo '<h3><a href="'. get_permalink() .'">'. get_the_title() .'</a></h3>'; 
          echo get_the_excerpt(); } } // елси записей не найдено else{ echo ' <p>Записей нет...</p>'; } ?> 
     </div> 
     <footer class="footer"> 
          <?php echo date('Y') ?> © My Company </footer> <?php wp_footer(); ?> 
    </body> 
</html> 

Как видно, он представляет собой обычный HTML код, в котором статические элементы заменены динамическими, при помощи PHP функций темы в Wordpress, так например, wp_get_document_title(); получает заголовок документа, который выводится обёрнутым в html тег <title>.

Функция get_stylesheet_uri(); позволяет получить ссылку на файл style.css текущей темы <link rel="stylesheet" href="http://wordpress.loc/wp-content/themes/first/style.css" type="text/css" />. Функция bloginfo() выводит на экран различную информацию о блоге, в частности может указываться в настройках сайта. Эту функцию относят к тегам шаблона и она может быть использована в любом месте шаблона.

Функция get_the_excerpt() даёт возможность получить аннотацию статьи и применяется внутри цикла. Для того, чтобы вывести на экран аннотацию вне цикла можно использовать функцию the_excerpt(), которая оборачивает её в тэг <p></p>. И наконец <?php wp_footer(), которые является функцией запускающейхукwp_footer - один из основных хуков, без которого не будут работать многие плагины. Вызывается в подвале шаблона, файл: footer.php стандартными функциями вордпресса, которые подключают шапку и подвал данной темы.

Этот тег шаблона должен располагаться прямо перед закрывающим HTML тегом </body>. Обычно он используется в файлах шаблона footer.php, index.php. Аналогичная функцию, которая запускает хук wp_head в шапке сайта: wp_head().

Теперь мы можем активировать свою тему в админ-панели и посмотреть главную страницу. Однако нам нужно портировать свой шаблон в Wordpress, этим мы займемся в следующей статье.

Комментарии

Blog Comments powered by Disqus.

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