На днях случилось мне создать сайт на Wordpress, в основе которого фотогалерея с разными симпатяшками. Хотел было взяться за привычные потуги с плагином Magic Fields, примерно как в моём «предыдущем уроке», но мой коллега вовремя меня одёрнул, указав на то, что Wordpress теперь вполне самостоятельный в плане колдовства с фотографиями.

Стал он таким примерно с версии 2.9.2 (на более ранних не смотрел), но здесь ещё присутствует небольшая неприятность: до создания миниатюры записи необходимо либо сохранить запись, либо после загрузки изображения закрыть окно управления галереей, снова открыть его и только тогда выбрать миниатюру.

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

Для сегодняшнего урока я создал тестовый сайт с наипоследнейшей версией Wordpress, где мы будем упражняться с кодом, и где вы сможете оценить результат наших стараний. Новый шаблон по умолчанию до некоторой степени заумный, и я ещё не успел разобраться с его устройством, поэтому операцию буду проводить на привычном шаблоне Default (отчего и у вас не должно возникнуть трудностей, потому что большинство шаблонов используют похожую структуру).

В последнее время получаю всё больше отзывов, в которых читатели просят делать мои уроки более подробными, чтобы даже «самые юные» пользователи Wordpress сумели со всем этим разобраться. По всему по этому буду стараться этим просьбам удовлетворять, и если что-то покажется вам до смеха элементарным — не серчайте, просто улыбнитесь.

Для начала создадим отдельную рубрику для наших фотографий, для чего пройдём в Записи → Рубрики.

Не пугайтесь забавных фраз на англо-русском, это потому что версия Wordpress третья, а языковые файлы от второй.

Также нам нужно настроить размеры миниатюр, которые Wordpress будет любезно создавать для нас из загруженных в него изображений. Откроем страницу Параметры → Медиафайлы и установим нужные нам значения для маленькой, средней и крупной миниатюр. Я поставил 100, 400 и 900 пикселей по ширине и высоте.

Теперь мы можем загружать наши фотографии. Пройдём в Записи → Добавить новую, укажем заголовок, набросаем немного описательного текста для наших картинок, отметим нужную рубрику и приступим к загрузке фотографий.

Можно поступить по-разному: показывать в каждой записи по одной миниатюре или помимо миниатюры отображать ещё и остальные картинки из галереи. Я рассмотрю оба примера, а вы уже сами прицельтесь и сделайте так, как вам будет нужнее.

Для загрузки фотографий, воспользуемся самой первой кнопкой из четырёх находящихся справа от текста «Загрузить/вставить». Если навести на неё курсор, должна появиться надпись «Добавить изображение» (или подобная, зависит от используемого перевода). После нажатия откроется симпатичное окошко, в котором мы и будем наслаждаться загрузкой изображений.

Чтобы добавить заголовки изображений, необходимо справа от изображения кликнуть на слове «Показать», откроется редактор изображения. В нём, справа от кнопки «Вставить в запись», которую в данном случае нажимать не нужно, находится ссылка «Использовать как миниатюру», которую мы и используем, чтобы создать миниатюру для записи.

Публикуем запись и открываем файл functions.php, который находится в папке используемого шаблона, и в который мы добавим пару нужностей. Если вы, как и я, хотите изменять файлы темы непосредственно через админку Wordpress, перейдите на страницу Внешний вид → Редактор (Editor) и из списка справа выберите необходимый файл.

Приступим к изменениям. Во-первых, если в вашей теме нет фразы «add_theme_support» (это можно выяснить поиском по странице: Ctrl+F), это означает что тема не поддерживает миниатюры, что необходимо исправить добавлением следующего кода:

if ( function_exists( 'add_theme_support' ) )<br />
add_theme_support( 'post-thumbnails' );

в подходящее место, например перед последним закрывающим тегом:

?>

Во-вторых, для более удобного управления записями с фотографиями, добавим сразу после нашего кода ещё чуть-чуть писанины:

if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) {<br />
// for post and page<br />
add_theme_support('post-thumbnails', array( 'post', 'page' ) );<br />
function fb_AddThumbColumn($cols) {<br />
$cols['thumbnail'] = __('Thumbnail');<br />
return $cols;<br />
}<br />
function fb_AddThumbValue($column_name, $post_id) {<br />
$width = (int) 35;<br />
$height = (int) 35;<br />
if ( 'thumbnail' == $column_name ) {<br />
// thumbnail of WP 2.9<br />
$thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );<br />
// image from gallery<br />
$attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );<br />
if ($thumbnail_id)<br />
$thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );<br />
elseif ($attachments) {<br />
foreach ( $attachments as $attachment_id => $attachment ) {<br />
$thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );<br />
}<br />
}<br />
if ( isset($thumb) && $thumb ) {<br />
echo $thumb;<br />
} else {<br />
echo __('None');<br />
}<br />
}<br />
}<br />
// for posts<br />
add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' );<br />
add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 );<br />
// for pages<br />
add_filter( 'manage_pages_columns', 'fb_AddThumbColumn' );<br />
add_action( 'manage_pages_custom_column', 'fb_AddThumbValue', 10, 2 );<br />
}

Это снабдит список записей миниатюрой.

На этом махинации с файлом functions.php заканчиваются, и нам остаётся отобразить наши изображения в шаблоне. Начнём с категории фотографий, откроем для редактирования файл archive.php (или index.php, если его нет) и после фразы:

the_post();

добавим:

if (is_category('photos') && !is_single()) { ?>ЗДЕСЬ БУДЕТ КАРТИНКА<?php } else {

и чтобы закрыть условие, перед:

endwhile;

вставим:

}

Вместо «photos», вставьте в код ID вашей категории с фотографиями или её slug (альтернативное имя латинскими буквами для адреса страницы). Теперь нам нужно заменить фразу ЗДЕСЬ БУДЕТ КАРТИНКА на код, который будет эту картинку показывать:

<a href="<?php the_permalink() ?>"><br />
<?php the_post_thumbnail('thumbnail'); ?></a>

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

<a href="<?php the_permalink() ?>"<br />
class="tooltip" style="z-index:<?php the_ID(); ?>;"><br />
<?php the_post_thumbnail('thumbnail'); ?><br />
<span><?php the_post_thumbnail(array(300, 300),<br />
array('class' => 'imagetooltip')); ?></span></a>

и чтобы всё было чистенько и красиво, в самом конце файла style.css добавим необходимые стили:

.tooltip img {<br />
border:4px solid #dddddd;<br />
z-index:1000;<br />
}<br />
.tooltip {<br />
position:relative;<br />
margin-right:15px;<br />
display:block;<br />
float:left;<br />
margin-bottom:15px;<br />
}<br />
.tooltip span {<br />
position: absolute;<br />
right: 0;<br />
top: 95px;<br />
display: none;<br />
left:95px;<br />
min-width: 50px;<br />
padding: 0;<br />
white-space: nowrap;<br />
font-size: 11px;<br />
text-align: right;<br />
background:none;<br />
color: #fff;<br />
z-index:9000;<br />
}<br />
.tooltip span img {border:0;<br />
}<br />
.tooltip span small {<br />
display:none;<br />
}<br />
.tooltip:hover span { display: block; }

В итоге получаем вот такую красотень. Ссылка с картинки ведёт на демо.

Займёмся теперь одиночной записью, шаблон которой скрывается в файле single.php. Откроем этот файл и после:

the_post();

добавим:

if (in_category('photos')) { ?>ЗДЕСЬ БУДЕТ КАРТИНКА<?php } else {

и закроем условие, добавив:

}

перед:

comments_template();

или, если вы не используете в своём шаблоне комментарии, перед:

endwhile;

Не забываем заменить «photos» на slug или ID своей категории. Чтобы наши изображения красиво увеличивались при нажатии, установим плагин Shutter Reloaded, и перейдя на страницу Внешний вид → Shutter Reloaded, активируем второй вариант преобразования ссылок (если это не сделано по умолчанию).

Затем приступим к замене фразы ЗДЕСЬ БУДЕТ КАРТИНКА на что-нибудь более существенное. Ранее я обещал показать два разных варианта отображения картинок в одиночной записи. На тестовом сайте вы можете посмотреть оба варианта на одной странице — используйте подходящий.

Чтобы отобразить среднее изображение, заменим нашу фразу на следующий код:

<a rel="lightbox[]" href="<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');<br />
echo $thumbnail[0]; ?>" ><?php the_post_thumbnail('medium'); ?></a>

а если нам нужны все изображения записи, то получить их можно следующим образом (нужно убрать из кода пробел перед gallery):

<?php echo do_shortcode('[ gallery columns="6" size="thumbnail" itemtag="ul" icontag="li" captiontag="p" link="file"]'); ?>

Объясню некоторые параметры:

• columns — количество изображений в строке;
• size — размер изображения, у нас указана миниатюра, можно выбрать среднее (medium) или большое (large) изображение;
• link — куда ведёт ссылка с изображения, в нашем случае откроется оригинальный файл.

Подробнее о разных параметрах здесь (осторожно, английский).

Теперь добавим немножко красок в файл style.css, чтобы всё у нас выглядело ровно и красиво. В конце файла вставим:

.gallery .gallery-item {<br />
width:110px !important;<br />
margin:0;<br />
padding:0;<br />
margin-right:15px !important;<br />
margin-bottom:15px !important;<br />
list-style:none;<br />
}<br />
.gallery .gallery-item li {<br />
margin:0 !important;<br />
padding:0 !important;<br />
list-style:none;<br />
}<br />
.gallery .gallery-item li a {<br />
border:4px solid #dddddd;<br />
display:block !important;<br />
}<br />
.gallery .gallery-item li a img {<br />
border:0 !important;<br />
}

Смотрим, что у нас получилось, и потихоньку начинаем радоваться.

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

?>

добавим виджет случайного показа изображений:

function randomimages() { $randomimg = new WP_Query('cat=3&showposts=2&orderby=rand');<br />
if($randomimg->have_posts()) : ?><br />
<h3>Случайные изображения</h3>
<p><?php<br />
while($randomimg->have_posts()) : $randomimg->the_post(); ?><br />
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(60, 60), array('class' => 'imagetooltip')); ?></a><br />
<?php endwhile; endif; };

ниже добавим виджет для показа последних добавленных изображений:

function lastimages() { $lastimg = new WP_Query('cat=3&showposts=2&orderby=date&order=DESC');<br />
if($lastimg->have_posts()) : ?><br />
<h3>Новые изображения</h3>
<p><?php<br />
while($lastimg->have_posts()) : $lastimg->the_post(); ?><br />
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(60, 60), array('class' => 'imagetooltip')); ?></a><br />
<?php endwhile; endif; };

и закончим всё это дело регистрацией виджетов:

function register_my_widget() {<br />
register_sidebar_widget('Случайные изображения', 'randomimages');<br />
register_sidebar_widget('Новые изображения', 'lastimages');<br />
}<br />
add_action('init', 'register_my_widget');;

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

На этом урок окончен. Посмотреть результат в действии можно на тестовом сайте. Помните, что всё это только примеры, которые вы можете использовать как вам угодно, изменяя их под себя — главное не бояться, читать документацию, и не забывать, что Гугл знает ответы на большую часть ваших вопросов, связанных с Wordpress.

Если будет нужна помощь — оставляйте комментарии, постараемся решить вопрос качественно и оперативно.

Желаю вам всего самого интересного. До новых встреч.
Артём Савельев.

P.S. Юридической фирмой «Центр правового обслуживания» предлагается защита от рейдерского захвата — многолетний профессиональный опыт в этой области.

Продолжаю серию уроков по использованию замечательного плагина 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 — очень много интересностей.