Статьи

Введение в анатомию темы WordPress

. Например, вы можете разбить тело () вашего веб-сайта на несколько разделов, таких как навигация, заголовок, основное содержимое, боковая панель и нижний колонтитул среди других.

Когда ваша веб-страница разбита на разделы, вы можете упорядочить (или расположить) разделы по своему усмотрению с помощью CSS. Этот процесс известен как стиль и включает в себя добавление других элементов стиля, таких как цвет, размер, границы, специальные эффекты и т.д. Таковы возможности CSS, который, кстати, является сокращением от Cascading Style Sheets. Когда вы соединяете файлы HTMl и CSS и добавляете пару изображений, вы получаете готовый веб-сайт.

С темами WordPress все не сильно отличается. Как мы видели в части 1 книги «Как создать тему WordPress из HTML», темы WordPress разделены на разные файлы. Если вы не можете обнаружить какое-то сходство на этом этапе, позвольте мне объяснить.

Статические веб-страницы HTML разбиты на части (то, что мы называли разделами ранее) с помощью тегов

(или таблиц, если вы действительно старая школа). С другой стороны, темы WordPress разбиты на разные файлы php, которые затем снова собираются вместе с помощью тегов шаблонов.

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

Итак, заголовок будет находиться в header.php, боковая панель будет находиться в sidebar.php, основное содержимое будет находиться в index.php или single.php (если это сообщение) или page.php (если это страница ). Раздел нижнего колонтитула будет находиться в footer.php и так далее.

Вы следите? Посмотрите на иллюстрацию ниже:

Введение в анатомию темы WordPress

Из нашей иллюстрации выше <?php get_header(); ?>, <?php get_sidebar (); ?> и <?php get_header(); ?> называются шаблонными тегами. Их работа заключается в том, чтобы получить header.php, sidebar.php и footer.php в указанном порядке из каталога вашей темы и отобразить содержимое в вашем index.php, таким образом завершив создание веб-страницы.

Не позволяйте расширению .php пугать вас, содержимое внутри файлов php – это просто HTML-код, с которым вы знакомы. Например, ваш header.php может содержать типичную навигацию по списку HTML. Точно так же вы можете поместить типичный HTML-код в footer.php, sidebar.php и index.php.

Вы также можете разместить функцию loop.php в своем index.php (или в любом другом месте), чтобы отображать сообщения в блоге, но я должен замедлиться и вернуться к анатомии тем WordPress. Я упомянул кое-что о цикле во второй части того, как создать тему WordPress из HTML. и мы поговорим об этом (цикле) и других функциях в будущем.

Двигаемся дальше…

Базовая тема WordPress состоит как минимум из четырех файлов шаблонов, а именно:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

Посмотрим, что находится в каждом из этих волшебных файлов:

Файл шаблона Index.php

Это основной файл, без которого у вас не будет работающей темы WordPress. Это первый (или используемый по умолчанию) файл, который загружается при посещении веб-сайта WordPress. Считайте его эквивалентом index.html.

Типичный index.php в темах WordPress будет выглядеть так:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Вы можете добавить цикл между <? Php get_header (); /> и <? php get_sidebar (); ?> для отображения сообщений блога на домашней странице (index.php), как показано ниже:

<?php get_header(); ?>
<div class="content">
<?php if (have_posts() ): ?>
<?php while (have_posts() ): the_post(); ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
    <div class="date"><?php the_time( 'M j y' ); ?></div>
    <h2><a href="https://techblog.sdstudio.top/vvedenie-v-anatomiju-temy-wordpress/<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
    <?php if (function_exists( 'add_theme_support') ) the_post_thumbnail(); ?>
    <?php the_content(); ?>
    <?php edit_post_link(); ?>
    <?php wp_link_pages(); ?>
    </div><!--end entry-->
    <div class="post-footer">
    <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
    </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    <div class="navigation index">
    <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
    <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else: ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Этот файл шаблона содержит код заголовка, навигацию и код заголовка HTML. По сути, header.php хранит все, что вы хотите показать, вверху вашего сайта. Знаете, такие вещи, как название вашего сайта и тому подобное.

Вы также ссылаетесь на свою таблицу стилей CSS в header.php. Вот базовый пример header.php:

<html>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
    
    <?php wp_head(); ?>
</head>
<body>
<div class="header">
<p>This is header section. Put your logo and other details here.</p>
</div>

Sidebar.php содержит все, что вам нужно, чтобы появиться на боковой панели (ах). Боковая панель содержит дополнительные меню, виджеты, категории, значки социальных сетей, настраиваемый контент, HTML-код, например рекламу и т.д.

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

<div class="sidebar">
Put your custom content or HTML code here.
</div>

Как вы думаете, что входит в footer.php? Вы можете разместить здесь информацию об авторских правах, дополнительные меню, ссылки, значки социальных сетей – все, что захотите! Хотите увидеть, как выглядит базовый footer.php? Вот:

<footer class="footer">
Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be.
</footer>
</body>
</html>

Обратите внимание на закрывающие теги и в footer.php? Вы можете догадаться, почему они должны быть включены в footer.php? Точно так же можете догадаться, почему открывающие теги и включены в header.php? Сообщите нам свои догадки в разделе комментариев в конце этого поста 😉

Четыре файла шаблонов, которые мы только что рассмотрели выше, составляют очень простую тему WordPress. Есть много других файлов шаблонов; есть файл шаблона для каждого элемента, который вы видите в теме WordPress, будь то комментарии, результаты поиска и страницы с ошибками 404, и это лишь некоторые из них.

Чтобы полностью понять анатомию темы WordPress, вам необходимо ознакомиться с различными файлами шаблонов. Вы можете просмотреть все используемые плитки шаблонов на WordPress.

Затем у нас есть теги шаблонов, которые WordPress использует для извлечения файлов шаблонов из каталога темы. Вы можете узнать больше о тегах шаблонов и их роли в WordPress.

Резюме

Тема WordPress состоит из следующих анатомических элементов:

  • Файлы шаблонов, такие как index.php, header.php, search.php, category.php и т.д.
  • Теги шаблонов, такие как <?php get_header(); ?>, <?php get_sidebar(); ?> и т. д.
  • CSS
  • Изображения и другие медиафайлы
  • Файлы JavaScript

А вот иллюстрация, которая обобщает анатомию темы WordPress:

Введение в анатомию темы WordPress

Хотите продолжить обучение? Ознакомьтесь с подробным руководством по анатомии темы в Кодексе WordPress.

Заключение

Каждая тема WordPress, которую вы видите в Интернете, использует одну и ту же анатомическую структуру (даже наша популярная тема Total WordPress ), которую вы можете настроить в соответствии со своими потребностями. После того, как вы познакомитесь с основами разработки тем WordPress, вы сможете без ограничений делать с темами WordPress и с ними.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Кнопка «Наверх»

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: