TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

58

Некоторое время назад мы познакомили вас с концепцией создания темы WordPress из HTML. Мы разделили учебник на две части, и сегодня мы собираемся конкретизировать два руководства, поэтому не стесняйтесь рассматривать этот пост как третий в серии сообщений. Моя цель – разобрать тему WordPress, чтобы дать вам четкое представление о том, как она (тема) работает.

В этом посте предполагается, что у вас есть практические знания HTML и CSS. Я продолжу и заявляю, что владение HTML и CSS является необходимым условием при разработке тем WordPress. Еще одна вещь: в этом посте не будет громких слов и сложных концепций – его будет легко понять, так что будьте готовы веселиться и учиться.

Небольшая подготовка HTML

Каждая веб-страница HTML разделяется на разные части с помощью тега

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

Когда ваша веб-страница разбита на разделы, вы можете упорядочить (или расположить) разделы по своему усмотрению с помощью 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="<?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(); ?>

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

Этот файл шаблона содержит код заголовка, навигацию и код заголовка 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" /> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head> <body> <div class="header"> <p>This is header section. Put your logo and other details here.</p> </div>

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

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.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 и с ними.

Источник записи: https://www.wpexplorer.com

Leave A Reply

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