Создание фотосайта на Wordpress без использования плагинов

На днях случилось мне создать сайт на 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. Юридической фирмой «Центр правового обслуживания» предлагается защита от рейдерского захвата — многолетний профессиональный опыт в этой области.