Курс HTML5, CSS3, SEO, Wordpress и Photoshop

Структура тем WordPress

Обычные HTML страницы состоят из одного файла, а в таких системах управления сайтами как WordPress, структура файлов несколько иная. В этих системах вывод страниц осуществляется несколькими файлами.

Ничего страшного в этом нет, просто сайт делится на несколько частей (файлов), и каждый файл отвечает за вывод определенной информации, вот и все!

В HTML5 с помощью таких новых тэгов как — header, article, footer делят сайт на части.

Каждая часть имеет свое предназначение. Например footer это подвал, то есть самая нижняя часть сайта. А header наоборот это самая верхняя часть сайта.

Тот же принцип применен и в WordPress, где сайт состоит из нескольких файлов, таких как — header.php, sidebar.php, footer.php:

Структура темы WordPress

Думаю названия файлов, сами говорят об их назначениях (функциях).

Структура тем WordPress на примере темы Almas

Мы сделали простую тему Almas которую вы можете скачать, и активировать себе на локальный сервер, по внешнему виду эта тема похожа на макет сайта из двух колонок.

Скачайте эту тему и посмотрите на файлы содержащиеся в этой теме в любом текстовом редакторе (в блокноте, в Notepad++, …).

Каждый файл содержит помимо HTML тэгов, специальные кусочки кода. Разъясним их содержание.

Файл header.php

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> этот кусок кода выводит стилевой файл style.css который лежит в папке нашей темы.

<?php bloginfo( ‘stylesheet_directory’ ); ?>

Этот кусок кода выводит путь до нашей темы, поэтому если вы хотите вставить изображение picture.jpg лежащий в папке img (в нашей теме) на сайт, то в тэге img пропишите такой адрес:

<?php bloginfo( 'stylesheet_directory' ); ?>/img/picture.jpg.

Следующий код выводит title страницы:
<?php
global $page, $paged;
wp_title( '', true, 'right' );
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " $site_description";
?>

<?php wp_head(); ?>

Это очень важный кусок кода, без нее могут не сработать многие полезные функции и дополнения WordPress. Ее всегда лучше помещать перед закрывающим тэгом </head>

В <div id='mysearch'> есть куски кода отвечающие за вывод поиска по сайту. Они не так важны, поэтому мы не будем подробно на них останавливаться, просто если хотите использовать поиск от WordPress на своем сайте, скопируйте этот код и все!

<?php wp_list_pages(‘title_li=’); ?>

Этот код выводит все страницы сайта, поэтому она очень полезна! Вам больше не нужно в ручную вбивать все ссылки в меню, как это делается в обычных HTML сайтах.

Файл index.php

<?php get_header(); ?>

Для того чтобы получить все содержание файла header.php достаточно прописать такой лаконичный и красивый код.

<?php the_title(); ?>

Выводит заголовок страницы, который сохранен в базе данных. Следует отметить что вы можете использовать этот кусок кода для вывода заголовка не только внутри тэга h1, но и в любом другом месте.

Этот код выводит содержимое страницы, то есть тексты и рисунки внутри страницы:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?><?php endwhile; else: ?>
<p>Ошибка!</p>
<?php endif; ?>

<?php get_sidebar(); ?>

Как вы наверное уже догадались, этот код выводит содержимое сайдбара сайта. Сам сайдбар находится в файле sidebar.php.

<?php get_sidebar(); ?>

А что выводит этот файл? Кто знает?
Ну конечно же футер сайта. Содержимое футера сайта прописывается в файле footer.php
Файл sidebar.php
В этом файле есть такой кусочек кода, который выводит виджеты:
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(' ') ) : ?><?php endif; ?>
Файл footer.php

<?php wp_footer(); ?>

Этот кусок кода также очень важен, без него могут не работать многие функции и плагины. Вставляется он перед закрывающим тэгом </body>.

Заключение

Этим можно закончить наш краткий обзор структуры тем WordPress, отметим хотя и обзор был весьма кратким и сжатым, но тот кто освоит его, уже сможет создавать полноценные сайты на CMS WordPress. Так сказать мы собрали здесь необходимый минимум того что реально нужно на практике!