Сайт-портфолио

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

1. Портфолио должно обладать интересным дизайном. Лучшие работы должны обладать яркой подсветкой, чтобы сразу бросаться в глаза при беглом просмотре сайта.
2. Портфолио должно иметь продающий вид. Люди, посещающие сайт с вашими работами, должны получить всю интересующую их информацию как относительно той или иной работы, так и относительно вас самих: кто вы, кем работаете, как долго и т.д.
3. Портфолио должно призывать посетителя к контакту с вами. Обычно это реализуется размещением как можно большего количества работ.

Некоторые сайты-портфолио имеют свой блог, выступающий в роли аккумулятора траффика. Однако, в большинстве случаев, блог и сайт-портфолио отделены друг от друга. Единственная необходимость связки блога и портфолио прослеживается лишь в том случае, когда вы что-либо продаете на своем блоге. В таком случае было бы разумно разместить на своем блоге список лучших работ, чтобы заказчик мог ознакомиться с ними.

Дизайн портфолио

Разработкой дизайна своего портфолио я занялся летом 2009 года. Основное внимание при разработке было уделено следующим принципам: простоте обновления информации, решительности предложения услуг, и отражению всего спектра моих работ, в которых я выступаю одновременно как дизайнер, разработчик и писатель. Я хотел использовать масштабные изображения, которые были бы отцентрованы относительно страницы. Естественно, одной графикой обойтись было нельзя, в результате чего мне пришлось воспользоваться также и текстовой информацией.

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

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

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

Рубрика «Дизайн»

Записи, принадлежащие рубрике «Дизайн», включают в себя большое изображение и поясняющий текст. Когда посетитель щелкает по изображению, осуществляется переход к полной записи, содержащей в себе галерею изображений и некоторое количество текстовой информации.

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

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

Представление отдельной записи будет основано на применении post_class(), что позволяет ограничиться минимальными корректировками проекта.

Рубрика «Произведения»

Записи в указанной рубрике будут основаны на текстовой информации. Мы будем выводить заголовки записей в списках и затем использовать the_excerpt() для описания рассматриваемого материала. Крупные шрифты позволят нам привлечь внимание пользователей. Стилизация записей будет осуществляться при помощи условных тегов. Представление отдельных записей будет управляться post_class(), по аналогии с рубрикой «Дизайн».

Рубрика «Объявления»

Эта рубрика будет выступать в качестве рубрики по умолчанию, то есть, к ней будут отнесены записи, не вошедшие ни в рубрику «Дизайн», ни в рубрику «Произведения». В ней будет сформирован основной цикл, использующий the_content() для вывода информации.

Представление отдельной записи будет аналогично двум предыдущим рубрикам.

Сервисные и контактные страницы

Здесь все довольно просто: достаточно будет создать общий шаблон page.php, который в дальнейшем будет использоваться для представления страниц с контактами и сервисами.

Основной код

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

<?php get_header(); ?>
<div id="content">
<p>Welcome text goes here.</p>
<?php query_posts($query_string.'&posts_per_page=10&cat=562,4,15'); while (have_posts()) :
the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if (in_category('4')) { ?>
<?php
$design_background = get_post_meta($post->ID, 'design_background', $single =
true); // check if there's a background
$design_background_height = get_post_meta($post->ID, 'design_background_
height', $single = true); // check if there's a set height
?>
<div style="background: #bbb url(<?php if($design_
background !== '') { echo $design_background; } else { echo bloginfo('stylesheet_directoy') . '/
design-listing-bg.gif'; } ?>) repeat; height: <?php if($design_background_height !== '') { echo
$design_background_height; } else { echo '300'; } ?>px;">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php
the_title(); ?>"><?php the_title(); ?></a></h2>
</div>
<?php } elseif (in_category('15')) { ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>
"><?php the_title(); ?></a></h2>
<div>
<?php the_excerpt(); ?>
</div>
<?php } else { ?>
<div>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_
title(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<?php } ?>
</div>
<?php endwhile; ?>
<div>
<div><?php next_posts_link(__('Read previous entries', 'notesblog')) ?>
</div>
<div><?php previous_posts_link(__('Read more recent entries', 'notes-
blog')) ?></div></div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Здесь перед основным циклом стоит query_posts(), который фильтрует материал в зависимости от необходимой рубрики. Действительно, вы же не желаете, чтобы на главной странице был выведен устаревший материал, а также записи, которые находятся в других рубриках. Данное условие можно было бы реализовать и при помощи условных тегов, но, поскольку материал для главной страницы пока что не существует, проще всего обойтись шаблоном home.php.

Цикл выполняет проверку, находится ли запись в рубрике с ID=4 (рубрика «Дизайн») в рубрике с ID=15 (Рубрика «Произведения»), или же запись представлена по умолчанию. Если какое-либо из условий верно, запись получает определенное представление.

Решение относительно бэкграундного изображения играет здесь значимую роль. Рассмотрим его внимательнее:

<?php
$design_background = get_post_meta($post->ID, 'design_background', $single = true); // check
if there's a background
$design_background_height = get_post_meta($post->ID, 'design_background_height', $single =
true); // check if there's a set height
?>
<div style="background: url(<?php if($design_background !== '') { echo
$design_background; } else { echo bloginfo('stylesheet_directoy') . '/design-listing-bg.gif'; }
?>) repeat; height: <?php if($design_background_height !== '') { echo $design_background_height;
} else { echo '300'; } ?>px;">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php
the_title(); ?></a></h2>
</div>

Данный пример начинается с проверки данных в двух произвольных полях: ‘design_background’ и ‘design_background_height’. Далее следует блок div.design-background, отвечающий за вывод актуального кода. Атрибут style блока div либо получает URL изображения, находящегося в произвольном поле ‘design_background’, либо сохраняет значение по умолчанию, если произвольное поле пусто. То же самое относится и к атрибуту height, который либо получает значение высоты блока из произвольного поля ‘design_background_height’, либо сохраняет значение по умолчанию, то есть 300 пикселей. Такое кодирование очень удобно, поскольку оно позволяет определять бэкграундные изображения с различными значениями высоты.

Для представления списков, поисковых результатов и сообщений 404 будет использоваться шаблон index.php, поскольку никакой необходимости в разграничении их отображения не существует.

Ни single.php, ни page.php ничем особенным не выделяются, так что пропустим их.

WordPress и одностраничный дизайн

В последнее время все популярнее становятся одностраничные портфолио, позволяющие быстро и удобно производить обновление имеющейся информации. Оправданно ли в данном случае будет использование WordPress? Ведь по своей сути такие сайты нуждаются в минимальном внимании со стороны разработчика. Попробуем ответить на поставленный вопрос.

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