Создание фотосайта на Wordpress с помощью плагина Magic Fields

Продолжаю серию уроков по использованию замечательного плагина Magic Fields. Сегодня мы подробно рассмотрим создание полноценной фотогалереи или портфолио художника (что-то похожее в своё время я реализовал на сайте Виктора Лукьянова).

В установке Wordpress нет ничего сложного (тем не менее когда-нибудь чего-нибудь хотелось бы об этом написать, для самых маленьких), о том, как установить и настроить плагин Magic Fields я писал во вступительной статье этой серии.

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

Для начала нам понадобится зайти в панель администратора и создать новую категорию под рабочим названием «Фотографии». Затем, чтобы создать панель записей пройдём в Magic Fields → Write Panels (Панели записей) и там нажмём на Create a Write Panel (Создать панель записей).

Теперь создадим группу дополнительных полей под названием «Фотография». Для этого перейдём на страницу Magic Fields → Write Panels (Панели записей) и там кликнем на Edit Fields/Groups (Изменить поля/группы) напротив только что созданной панели «Фото». Там нажимаем на Create a Group и создаём группу.

Теперь мы вполне можем позволить себе создать дополнительные поля. Добавим поле «Изображение»: для этого сбегаем в Magic Fields → Write Panels (Панели записей), напротив панели «Фото» выберем Edit Fields/Groups (Изменить поля/группы) и далее create field (создать поле) справа от группы «Фотография». В качестве типа поля (Type) выберем Image.

После нажатия на кнопку Continue нам будет предложено настроить максимальные параметры для изображения, поставим Width (Ширину) 400 пикселей и завершим создание дополнительного поля для изображения кнопкой Finish (Закончить).

Добавим поле «Описание», чтоб иметь возможность подписывать наши изображения. Проделаем всё то же, что и с предыдущим полем, но в качестве типа (Type) выберем Multiline Textbox.

Нажав на Continue, настроим предложенные опции следующим образом.

Чтобы иметь возможность сортировать изображения по годам, добавим соответствующее поле, в качестве типа (Type) используем Textbox, а в поле Name укажем «imyear».

Чтобы было чем развлекать себя дальше, добавим пару пробных изображений. Пройдём в панель «Фото» и выберем New (Новая запись).

Теперь у нас есть всё для того, чтобы произвести изменения в шаблоне. Я по-прежнему в качестве примера использую шаблон по умолчанию (Default), если у вас возникнут трудности с интеграцией моего кода в свой шаблон, свяжитесь со мной по почте или через комментарии, постараюсь помочь.

Начнём с одиночной записи. Откроем файл single.php и после:

<?php the_content('
<p class="serif">' . __('Read the rest of this entry »', 'kubrick') . '</p>
<p>'); ?>

добавим изображение:

<?php $image = get('image'); if($image != '') { ?><br />
<? echo get_image('image'); ?><br />
<?php } ?>

и снабдим его описанием:

<?php $description = get('description'); if($description!= '') { ?></p>
<p><?php echo get('description'); ?></p>
<p><?php } ?>

подчеркнём всё это дело годом:

<?php $imyear = get('imyear'); if($imyear!= '') { ?></p>
<p><?php echo get('imyear'); ?> год</p>
<p><?php } ?>

и порадуемся тому, что у нас всё работает и не глючит.

Теперь подправим шаблон категории, чтобы красиво разместить в нём изображения из рубрики «Фотографии». Откроем файл archive.php (и/или index.php) и после:

<?php while (have_posts()) : the_post(); ?>

добавим:

<?php if (is_category(42) || in_category(42) && !is_home() && !is_single()) { ?><br />
ЗДЕСЬ БУДЕТ ИЗОБРАЖЕНИЕ<br />
<?php } else { ?>

42 — это ID категории с фотографиями, можно узнать его, если навести курсор на нужную рубрику в админке и посмотреть на адрес ссылки.

Чтобы закончить код, необходимо перед:

<?php endwhile; ?>

добавить:

<?php }; ?>

Теперь нам необходимо заменить фразу ЗДЕСЬ БУДЕТ ИЗОБРАЖЕНИЕ на маленькое превью. Добавим на место этой фразы код, который позволит пропорционально уменьшать ширину и высоту изображений.

<?php<br />
//Новая ширина = Данная высота * (Изначальная ширина / Изначальная высота)<br />
//Новая высота = Данная ширина * (Изначальная высота / Изначальная ширина)<br />
$img = @getimagesize(''.get('gallery_image').'');<br />
$w = $img[0];<br />
$h = $img[1];<br />
$defaultImageWidth = 150; //замените на желаемую ширину<br />
$defaultImageHeight = 150; //замените на желаемую высоту<br />
$imageWidth = $w; // используйте getimagesize() для получения ширины изображения<br />
$imageHeight = $h; // используйте getimagesize() для получения высоты изображения<br />
if($imageWidth > $imageHeight)<br />
{<br />
// альбомное изображение<br />
$newWidth = $defaultImageWidth;<br />
$newHeight = (int)($defaultImageWidth * $imageHeight / $imageWidth);<br />
if($newHeight > $defaultImageHeight)<br />
{<br />
$newHeight = $defaultImageHeight;<br />
$newWidth = (int)($defaultImageHeight * $imageWidth / $imageHeight);<br />
}<br />
}<br />
elseif ($imageHeight > $imageWidth)<br />
{<br />
// портрет<br />
$newHeight = $defaultImageHeight;<br />
$newWidth = (int)($defaultImageHeight * $imageWidth / $imageHeight);<br />
if($newWidth > $defaultImageWidth)<br />
{<br />
$newWidth = $defaultImageWidth;<br />
$newHeight = (int)($defaultImageWidth * $imageHeight / $imageWidth);<br />
}<br />
}<br />
else<br />
{<br />
// квадратное изображение<br />
$newWidth = $defaultImageWidth;<br />
$newHeight = $defaultImageHeight;<br />
} ?>

Чтобы показать изображение, после этого кода нужно добавить следующий:

<a href="<?php the_permalink() ?>"<br />
class="image_photogallery"><br />
<img src="<?php echo pt(); ?>?src=<? echo get('image'); ?>&w=<?php echo $newWidth ?>&h=<?php echo $newHeight ?>"<br />
alt="<?php the_title(); ?>"<br />
title="<?php the_title(); ?>" /><br />
</a>

Я использовал класс .image_photogallery, стиль которого мы немедленно настроим в файле style.css, в конце которого добавим, например, такой код:

a.image_photogallery {<br />
display:block;<br />
float:left;<br />
width:180px;<br />
height:180px;<br />
text-align:center;<br />
background-color:#CCCCCC;<br />
margin-right:15px;<br />
margin-bottom:15px;<br />
}<br />
a.image_photogallery img {<br />
margin-top:15px;<br />
margin-bottom:15px;<br />
border:1px solid #FFFFFF;<br />
}

И вот какая красотень у нас получилась. Конечно же, можно настроить стили как вам больше нравится, я только показал, что это возможно.

Теперь не лишним будет добавить фильтр по годам. Для этого в файле archive.php (и/или index.php) перед:

<?php while (have_posts()) : the_post(); ?>

вставьте:

<?php if (is_category(42) || in_category(42) && !is_home() && !is_single()) { ?></p>
<form method="post" action="">
<p>Год:</p>
<select name="imyear" >
<option value=""></option>
<p><?php<br />
$listyears2 = $wpdb->get_results("SELECT DISTINCT meta_value FROM $wpdb->postmeta<br />
WHERE meta_key = 'imyear' ORDER BY meta_value");<br />
foreach ($listyears2 as $listyear2) {<br />
if ($listyear2->meta_value != '') {<br />
$option = '<br />
<option ';<br />
if ($listyear2->meta_value == $_REQUEST["imyear"]) {$option .= 'selected '; }<br />
$option .= 'value="'.$listyear2->meta_value.'">';<br />
$option .= $listyear2->meta_value;<br />
$option .= '</option>
<p>';<br />
echo $option;<br />
}} ?><br />
</select>
</p>
<input type="submit" value="Показать" class="s_submit" name="submitimyear" />
</form>
<p><?php if (isset($_REQUEST["imyear"])) { $paramyear2=$_REQUEST["imyear"]; } else { $paramyear2=""; };<br />
if ($paramyear2!= "") {<br />
query_posts($query_string . '&x_imyear='.$paramyear2);<br />
} ?><br />
<?php }; ?>

Всё работает, наслаждаемся.

Конечно, это один из самых простых примеров издевательства над Wordpress с помощью плагина Magic Fields, потенциал которого невероятен. Как только я закончу серию уроков по использованию этого плагина, я планирую составить из них книгу, более подробную и с большим количеством примеров.

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

P.S. Кстати, вчера получил на почту февральский выпуск журнала БлогоNEWS, который я прочитал почти ни на что не отвлекаясь за пару часов, от чего получил массу удовольствия, особенно когда обнаружил в рубрику «Дайджест Блогосферы» упоминание моего недавнего урока «Украшаем комментарии в Wordpress», за что благодарен всетельно и вседушно и призываю всех почитать новый выпуск журнала БлогоNEWS — очень много интересностей.