Art, Design, Cosplay, Web
Skip

анатомия вордпресса

Анатомия темы WordPress

Анатомия темы WordPress выполнена в виде картинки в формате JPG. Для сохранения нужно использовать стандартные средства браузера (жмем на картинке правую кнопку и выбираем «Сохранить изображение как…»).



Анатомия темы WordPress

ыыы

Популярность WordPress растет по экспоненте. Одним из факторов такого набора приверженцев является появление произвольных полей. Произвольные поля позволяют добавлять различные данные к записям(постам). Поэтому люди изменяют свое отношение к WordPress. Пару лет назад WordPress был прекрасной платформой для блога, но и только. А теперь он рассматривается как отличная простая система управления контентом. За счет чего произошла такая быстрая трансформация? Произвольные поля — вот в чем основная причина изменений мнения о WordPress.

Синтаксис произвольного поля

Ввод произвольного поля

Для того, чтобы делать действительно интересные вещи, нужно разобраться с синтаксисом. Создать произвольное поле просто: ему требуется имя и значение. Имя является константой, но значение может изменяться с каждой записью.

Пример из реального мира. Допустим, вы работаете над блогом о камерах. Вы установили категории для каждой записи: «Обзор», «Новости» и т.д. А меткой записи является марка производителя. Но хочется выводить еще цену и спецификацию камеры. Задача легко решается с помощью создания произвольного поля с именем Camera_Specs и задания в значении нужной информации. Нажимаем на кнопку «Добавить произвольное поле», и оно добавляется к записи.

Вывод произвольного поля на страницу осуществляется просто. В файл single.php нужно добавить следующий код:

1 <?php echo get_post_meta($post->ID, "Camera_Specs", true); ?>

Вы можете заключить его в параграф, упорядоченный список или что-то еще. Также можно использовать разметку HTML в значении произвольного поля.

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

01 <?php $camera_specs = get_post_meta($post->ID, 'Camera_Specs', true);
02 if ($camera_specs) {
03 ?>
04 <?php echo $camera_specs; ?>
05
06 <?php } else { ?>
07
08 <p>Нет спецификации.</p>
09
10 <?php } ?>

Так что синтаксис подчиняется общим правилам. Использование произвольного поля ограничено только вашим воображением!

Придадим пикантности заголовкам записей

Заголовки записей обычно прелестно скучны. Вы ограничены только текстом. Никаких ссылок, никакого HTML. Но теперь все это в прошлом. Произвольные поля спешат на помощь!

Теперь возможно добавлять любой HTML код к заголовкам записей с помощью произвольных ссылок и условных выражений. (Это не работает с фидами RSS, но отлично действует на любой заголовок в блоге) Например, мы используем поле Post-Title:

Используем HTML в произвольном поле

Вы можете добавить любой код HTML к заголовку записи. А реализация его в блоге очень проста. Нужно использовать конструкцию, подобную ниже приведенному примеру, на всех страницах, где выводится заголовок: на главной, в архиве, в текущей записи и т.д.  Код просматривает произвольную запись и в случае отсутствия в ней информации выводит стандартный the_title:

01 <?php $post_title = get_post_meta($post->ID, 'Post-Title', true);
02 if ($post_title) {
03 ?>
04 <h2><?php echo $post_title; ?></h2>
05
06 <?php } else { ?>
07
08 <h2><?php the_title(); ?></h2>
09
10 <?php } ?>

Простой и эффективный способ улучшить ваш сайт.

Выводим записи только с определенным произвольным полем

WordPress выводит записи с помощью цикла. Существует функция WordPress query_posts, которая дает возможность выбирать опредленные записи для вывода в цикле. Один параметр позволяет выводить только те записи, которые имеют определенное произвольное поле и/или имеют определенное значение данного поля. Если вернуться к нашим примерам, то мы можем выводить только те записи, которые имеют произвольное полеCamera_Specs:

1 query_posts('meta_key=Camera_Specs');

Если нужно выводить только те камеры, которые имеют матрицу 10 мегапикселей (в случае, если все записи имеют произвольное полеCamera_Specs_Pixels, в котором определяется разрешение матрицы в мегапикселях), можно использовать следующий код:

1 query_posts('meta_key=Camera_Specs_Pixels&meta_value=10');

Используем произвольные поля для создания уникального дизайна

 

Вы можете использовать произвольное поле, чтобы задавать определенный класс CSS каждой записи!

Сначала откройте файл functions.php и добавьте следующий код:

1 function shiftnews_post_class($classes) {
2    global $post;
3    $sn_post_class_array = array (
4       get_the_author_meta('display_name'),
5       get_post_meta($post->ID, 'post-class', true)
6    );
7    $classes[] = implode(" ", $sn_post_class_array);
8    return $classes;
9 }

Теперь надо отредактировать файл single.php,  добавив в него <?php post_class(shiftnews_post_class()); ?>  к элементу div, который содержит контент. Теперь в произвольное поле post-class можно писать имя класса CSS (например, flower-bg или blue-content, что соответствует классам.flower-bg или .blue-content), добавляя его таким образом к записи.

Установим различные фоны для разных записей с помощью произвольный полей

Можно даже пойти дальше — позволяя пользователям использовать фоновые изображения с помощью произвольных полей. Конечно, нужно изменить размер до значения 1920×1200, загрузить его и скопировать адрес  URL в произвольное поле background. В заголовок страницы нужно добавить код:

1 <?php if (is_page() || is_single()) {
2
3 <?php $background = get_post_meta($post->ID, 'background', true);
4 if ($background) {
5 ?>
6 <style type="text/css">body{ url(<?php echo $background; ?>) no-repeat fixed; }</style>
7
8 <?php }
9 <code class="php plain">}?></code>

Но придется проделывать нудную работу, каждый раз, когда нужно будет поменять фоновое изображение. Гораздо проще сделать так: загружать изображение, копировать адрес URL в произвольное поле, а затем скрипт изменяет размер изображения и устанавливает фон.

Копируем относительный адрес URL изображения (т.е. /wp-content/… , а не http://yoursite.com/wp-content/) в произвольное поле, называем его background и нажимаем кнопку ‘Добавить произвольное поле’. Нам нужен инструмент для изменения размера изображения. Будем использовать скрипт timthumb. Загружаем его в папку /ваша_тема/timthumb/ и он готов к использованию!

Теперь нужно добавить код в заголовок страницы (ниже определения стилей для страницы):

1 <?php if (is_page() || is_single()) {
2
3 <?php $background = get_post_meta($post->ID, 'background', true);
4 if ($background) {
5 ?>
6 <style type="text/css">background: url(<?php bloginfo('template_url'); ?>/timthumb/timthumb.php?w=1920&zc=1&src=<?php echo $background; ?>) fixed no-repeat;</style>
7
8 <?php }
9 }?>

Адрес изображения из произвольного поля передается скрипту timthumb, который изменяет размер изображения так, чтобы заполнить экран, даже на больших мониторах (изображение кэшируется, так что оно генерируется только один). Измененное изображение выводится в качестве фона для записи.

Используем произвольные поля для SEO

Плагин “All in One SEO Pack” постоянно входит в список самых популярных инструментов для WordPress. Он позволяет задавать собственные теги  title и meta. В его работе используются произвольные поля.

Добавим следующий код в тег title вашей темы:

1 <?php if ( is_single() || is_page() ) { ?><?php $title = get_post_meta($post->ID, 'Title', true);  if ($title) { ?>
2 <?php echo $title; ?> | <?php bloginfo('name'); ?>
3 <?php } else { ?>
4 <?php wp_title(''); ?> | <?php bloginfo('name'); ?>
5 <?php } ?>
6 <?php } ?>

Теперь, когда страница или запись выводится, WordPress просматривает произвольное поле Title. Если оно существует, его содержимое будет показано, если нет — выводится заголовок записи. Чтобы использовать новые возможности, создайте произвольное поле Title и присвойте его значению то, что нужно выводить в теге  title (помните, что будет добавлено  | [Blog name]).

Вы можете использовать данную идею и для других элементов, таких как тег description:

1 <?php if (is_single() || is_page() ) : if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
2 <meta name="description" content="<?php $description = get_post_meta($post->ID, 'Description', true);  if ($description) { ?><?php echo get_post_meta($post->ID, "Description", true); ?>
3 <?php } else { ?><?php the_excerpt_rss(); ?><?php } ?>" />
4 <?php endwhile; endif; elseif(is_home()) : ?>
5 <meta name="description" content="<?php bloginfo('description'); ?>" />
6 <?php endif; ?>

Выше приведенный код заменяет весь тег description и дает возможность использовать произвольное поле Description для задания содержания тега. Если произвольное поле не существует, то используется выдержка из содержания страницы/записи и описание блога (которое устанавливает в процессе инсталляции  WordPress).

Заключение

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

комментарии