PostHeaderIcon WordPress:

Есть под wordpress замечательный плагин для создания галерей — NextGen Gallery. Всем хорош, кроме одного крайне важного момента — нет возможности оставлять комментарии к фоткам. Как выяснилось, чтобы создать фотогалерею на основе вордпресса, плагины совсем не нужны. Вордпресс имеет на борту весь необходимый функционал для решения этой задачи.
С точки зрения вордпресса, галерея — это всего лишь набор прикрепленных к записи изображений, которые выводятся посредством шорткода gallery. При загрузке изображения стандартными средствами, вордпресс создает отдельную запись для изображения, post_type которой равен attachment и она является дочерним элементом записи, к которой прикреплена сама галерея.
Так же полезно будет узнать, как работает иерархия шаблонов в вордпрессе. Табличка с офф.сайта наглядно иллюстрирует этот момент

Видно, что для прикреплений вордпресс ищет файл шаблона с названием, соответствующим mime-типу прикрепления. Т.е. в нашем случае для прикрепленных файлов формата JPG mime-тип будет image/jpeg. Вордпресс попытается найти файлы image.php, jpeg.php, image_jpeg.php, и, наконец, будет использовать attachment.php как универсальную основу.

Создание шаблона для отдельного изображения
Для этих целей мы скопируем single.php (в крайнем случае — index.php), переименуем его в image.php и немного доработаем его функционал.
Сделаем ссылку для возврата к странице галереи. Как уже говорилось, изображение — это дочерний элемент записи с галереей, и таким образом нам всего лишь нужно сослаться на родительскую запись с помощью $post->post_parent. Следующим кодом мы получаем ссылку:

1
<a href="<?php echo get_permalink($post->post_parent);?>"><< Вернуться к галерее</a>

Для навигации по изображениям есть у вордпресса две функции — previous_image_link и next_image_link. Каждая из них может принимать два параметра. Первый — это размер предыдущего и следующего изображения, которое нужно вывести на экран (можно использовать false если изображения вообще выводить не нужно). Второй — текст, который будет использован в качестве ссылки.

1
2
<?php next_image_link(false,'Следующее фото >>') ?>
    <?php previous_image_link(false,'<< Предыдущее фото') ?>

Если хотим вместо текста выводить миниатюры изображений, то вместо false пишем ‘thumbnail’ или ‘medium’ и убираем параметр, задающий текст ссылки.
Для вывода изображения есть функция

1
wp_get_attachment_image( $post->ID, 'medium' );

второй параметр которой определяет размер выводимого изображения. Помимо ‘medium’, он может принимать значения ‘large’, ‘full’, ‘thumbnail’ или любой другой заданный размер, например

1
wp_get_attachment_image( $post->ID, array(20,20));

Либо (что правильнее) воспользоваться возможностью регистрации других размеров изображений. Делается это добавлением функций в файл functions.php. Общий принцип такой:

1
add_image_size( $name, $width, $height, $crop );

$name — название размера изображения;
$width,$height — ширина и высота (в пикселях);
$crop — кадрировать (true) или уменьшать (false) картинку.
Регистрировать новый размер изображения необходимо до загрузки самих изображений.
Чтобы изображение по клику открывалось в полный размер в fancybox’е, делаем следующее:
1. Качаем с сайта fancybox необходимые скрипты, распаковываем и кладем в подпапку js(если не существует — создаем) в папке с шаблоном.
2. Прописываем загрузку скриптов в коде шаблона до тега

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/fancybox.js"></script>
 <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.4.3.min.js"></script>
  <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
 <script type="text/javascript">
$(document).ready(function() {
$(".various1").fancybox({
'titlePosition'         : 'inside',
'transitionIn'          : 'none',
'transitionOut'         : 'none'
});
</script>

3. Выводим изображение

1
2
<a class="various1" href="<?php $thumbnail = wp_get_attachment_image_src($id, 'large');
    echo $thumbnail[0]; ?>" ><?php echo wp_get_attachment_image($attachment_id, 'medium'); ?></a>

При необходимости можно вывести информацию из полей, которые заполнялись при загрузке изображения. Заголовок (title) хранится в обычном поле Post Title, его можно вызвать с помощью the_title(). Описание (description) находится в поле Content и для его вызова служит the_content(). Подпись (caption) хранится в поле Excerpt и выводится с помощью the_excerpt().
Вывод галереи в потоке блога
Сделаем так, чтобы наши галереи красиво смотрелись среди обычных записей в блоге. Для этого будем использовать такую функцию темы, как форматы записей.
Функция форматов появилась в WP начиная с версии 3.1 и представляют собой некие метаданные, которые можно использовать в темах для настройки отображения записи. Всего лишь необходимо указать какой именно формат мы хотим использовать. В случае отсутствия поддержки в теме форматов записей можно просто добавить в файл functions.php код, обеспечивающий поддержку необходимого формата. В нашем случае это формат галереи и код будет таким:

1
add_theme_support( 'post-formats', array( 'gallery') );

Для вывода галереи в поток блога нужно сначала создать новую запись вот такого вида

1
2
3
Небольшой текст, который будет описанием к галерее
< !--more-- >
[ gallery ]

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

1
2
3
4
5
<?php if ( has_post_thumbnail() ) {
// используем миниатюру
$thumb_id = get_post_thumbnail_id();
the_post_thumbnail( $size ); // устанавливаем нужный размер миниатюры
} ?>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php else {
$attachments = get_children( array(
'post_parent' => get_the_ID(),
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order ID',
'numberposts' => 1)
);
foreach ( $attachments as $thumb_id => $attachment )
echo wp_get_attachment_image($thumb_id, $size); // устанавливаем нужный размер миниатюры
}
} ?>

4.Создание шаблона для страницы галереи
На странице будет отображаться крупная копия картинки, используемой в качестве превью. Рядом будет расположено описание галереи и указание количества содержащихся фотографий.
Для начала скопируем файл page.php, назовём его page-gallery.php и добавим в начале файла следующую строчку:

1
<?php /* Template Name: Gallery */ ?>

Ниже, после строчки добавим код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php $more =''; //обнуляем значение переменной $more во избежание вывода полной галереи.
$args = wp_parse_args($query_string);
        query_posts(array(
                 'tax_query' => array(
                        'relation' => 'OR',
                        array(
                                'taxonomy' => 'post_format',
                                'terms' => array('post-format-gallery'),
                                'field' => 'slug',
                        ),
                        array(
                                'taxonomy' => 'category',
                                'terms' => array('gallery'),
                                'field' => 'slug',
                        ),
                ),
                'paged' => $args['paged'],
        ) ); ?>

Это запрос таксономии, получающий все записи в формате gallery или все записи в рубрике gallery(необходимо для обратной совместимости).
Теперь полученные записи необходимо вывести на экран. Для этого можно использовать тот же код, что и для вывода превью, только с указанием бОльшего размера изображения. Вставить его необходимо перед
С выводом в описании количества изображений в галерее нам поможет такой вот SQL-запрос:

1
<?php echo $wpdb->get_var( "SELECT COUNT(*) FROM $wpdb->posts WHERE post_parent = '$post->ID' AND post_type = 'attachment'" ) .' фото в галерее ';?>

И на этом, собственно, всё. Далее — толЬко ваши личные эксперименты с оформлением галереи под ваш шаблон сайта :)

Оставить комментарий

PR-CY.ru