В этой серии статей для начинающих и мастеров, состоящей из шести частей, мы будем использовать расширенные функции WordPress для создания собственного портфолио и блога, включая страницу параметров, несколько стилей и поддержку новых функций WordPress 2.7. Сегодня мы будем работать над самим Портфелем.
Сегодня мы собираемся создать нашу главную страницу портфолио, которая на самом деле очень похожа на раздел «Последние работы» на главной странице.
Мы также собираемся создать представление «отдельная публикация» для элементов портфолио, где можно отобразить более подробную информацию об элементе.
Затем мы закончим, создав «Шаблон страницы по умолчанию». Это будет использоваться на всех других страницах, требующих нормальной структуры, таких как страница «О нас» или «Контакты».
Также доступно в этой серии:
- WordPress: от новичка до мастера, часть 1
- WordPress: новичок в освоении, часть 2
- WordPress: новичок в освоении, часть 3
- WordPress: новичок в освоении, часть 4
- WordPress: от новичка до мастера, часть 5
- WordPress: новичок в освоении, часть 6
Перейти в раздел
портфолио
Шаблон страницы портфолио очень похож на первый раздел нашей домашней страницы:
Мы показываем последние элементы портфолио, которые при нажатии переходят на их «единую» страницу.
Добавьте следующий код под существующий код в page-portfolio.php :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<h2>Portfolio</h2>
<?php
$paged = (get_query_var(‘paged’)) ?
query_posts(«paged=$paged&cat=$ts_portfolio_cat»);
$counter = 0;
while (have_posts()) : the_post();
$counter++;
$preview = get_post_meta($post->ID, ‘preview’,true);
$date = get_post_meta($post->ID, ‘date’,true);
?>
|
Вы должны распознать оператор $paged со страницы блога, что позволяет разделить элементы портфолио на несколько страниц. Внутри query_posts() мы используем нашу переменную разбиения на страницы, а также устанавливаем цикл для извлечения только сообщений из категории «Портфолио» ( cat=$ts_portfolio_cat ).
И так же, как цикл на домашней странице при получении двух последних элементов портфолио, мы увеличили $counter (как мы будем использовать его снова) и извлекли наши пользовательские поля portfolio и date используя get_post_meta() .
Следующий:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<div class=»work <?php if($counter == 2) { echo «last»; $counter = 0; }; ?>»>
<?php if($preview) { ?>
<a href=»<?php the_permalink(); ?>»>
<img src=»<?php bloginfo(‘template_directory’); ?>/inc/thumb.php?src=<?php echo $preview; ?>&w=450&h=210&zc=1&q=100″
alt=»<?php the_title(); ?>» />
</a>
<?php
} ?>
<p>
<a href=»<?php the_permalink(); ?>»>
<?php the_title();
</a> <?php
if($date) {
echo»<span>($date)
} ?>
</p>
</div><!—/work—>
|
Приведенный выше код точно такой же, как мы использовали на главной странице. $counter используется для добавления класса last ко всем другим элементам (для сохранения элементов в строке).
Если было использовано настраиваемое поле $preview , мы отображаем его и обрабатываем его через PHP-скрипт TimThumb для изменения размера изображения.
|
1
2
3
4
5
6
7
8
|
<?php endwhile;
<div class=»navigation»>
<div class=»alignleft»><?php next_posts_link(‘« Older Entries’) ?></div>
<div class=»alignright»><?php previous_posts_link(‘Newer Entries »’) ?></div>
</div>
<?php get_footer();
|
Мы закрыли цикл с next_posts_link() кнопки разбиения на страницы с помощью next_posts_link() и previous_posts_link() и включили нижний колонтитул.
Сохраните и просмотрите свою страницу портфолио. Теперь он завершен и не требует дополнительных стилей, поскольку мы повторно используем стили с домашней страницы. Он должен выглядеть примерно так, как показано ниже, если у вас есть несколько других элементов, добавленных в категорию Портфолио:
Единственная Портфельная Страница
Это макет, используемый для отображения более подробной информации по каждому элементу портфолио при нажатии (на его «единственной» странице); как показано ниже:
Помните, что в третьей части мы использовали некоторый код в single.php чтобы направлять любые запросы на элементы в категории «Портфолио» в файл single-portfolio.php .
Ниже приводится схема каждого раздела для страницы:
Внутри single-portfolio.php начните со следующего:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<?php
get_header();
if(have_posts()) : while (have_posts()) : the_post();
$preview = get_post_meta($post->ID, ‘preview’,true);
$previewfull = get_post_meta($post->ID, ‘preview-full’,true);
$date = get_post_meta($post->ID, ‘date’,true);
$client = get_post_meta($post->ID, ‘client’,true);
$link = get_post_meta($post->ID, ‘link’,true);
?>
|
Заголовок был включен, и нормальный цикл WordPress инициирован. Внутри цикла мы извлекаем настраиваемые поля preview , preview-full , date , client и link для публикации. Быстрое напоминание о том, для чего предназначено каждое настраиваемое поле (из части 2):
-
preview(URL-адрес изображения вашей работы шириной 930 пикселей) -
preview-full(увеличенная версия работы, будет отображаться в лайтбоксе) -
date(дата завершения работы) -
client(для кого была работа) -
link(на живую версию вашей работы)
Затем мы включаем заголовок с помощью the_title() , и если существует изображение $preview из настраиваемых полей, изображение анализируется с помощью сценария TimThumb, чтобы убедиться, что оно имеет ширину 930 пикселей, и выводится на страницу — в виде ссылки на $previewfull изображение, если оно существует:
|
01
02
03
04
05
06
07
08
09
10
11
|
<h2><?php the_title();
<div class=»work worksingle»>
<?php if($preview) { ?>
<div id=»fancyopen»>
<a href=»<?php if($previewfull) { echo $previewfull; } else { echo ‘#’; } ?>»>
<img src=»<?php bloginfo(‘template_directory’); ?>/inc/thumb.php?src=<?php echo $preview; ?>&w=930&h=430&zc=1&q=100″ alt=»<?php the_title(); ?>» /></a>
</div>
<?php
}
|
Под изображением находятся метаданные для элемента (содержащие поля date , client и link ):
|
1
2
3
4
5
6
7
|
if($date || $client || $link) {
echo ‘<ul class=»meta»>’;
if($date) { echo «<li>$date</li>»;
if($client) { echo «<li>$client</li>»;
if($link) { echo «<li><a href=’$link’>Visit Site</a></li>»;
echo ‘</ul>’;
}
|
В первой строке мы проверили, содержит ли хотя бы одно из трех полей что-либо — использование || означает «ИЛИ».
Внутри этого каждое поле проверяется отдельно и выводится, если оно содержит что-либо.
Наконец, the_content() используется для вывода основного содержимого, цикл закрывается, а нижний колонтитул включается:
|
1
2
3
4
5
6
7
|
the_content();
?>
</div>
<?php endwhile;
get_footer();
|
Предварительный просмотр темы, все должно выглядеть хорошо — кроме предварительного изображения, где нам все еще нужно включить лайтбокс.
Лайтбокс
Световой ящик FancyBox jQuery будет использоваться для отображения увеличенного изображения портфолио:
Загрузите файлы и /fancybox/ папку /fancybox/ папку /inc/ theme.
Также создайте новый файл в /inc/ именем animate.js .
Внутри header.php добавьте следующее между <?php wp_head(); ?> <?php wp_head(); ?> и </head> :
|
1
2
3
4
5
6
7
|
<link rel=»stylesheet» href=»<?php bloginfo(‘template_directory’); ?>/inc/fancybox/fancy.css» type=»text/css» media=»screen» />
<script type=»text/javascript» src=»http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js»></script>
<script type=»text/javascript» src=»<?php bloginfo(‘template_directory’); ?>/inc/fancybox/jquery.fancybox-1.0.0.js»></script>
<script type=»text/javascript» src=»<?php bloginfo(‘template_directory’); ?>/inc/animate.js»></script>
|
Во-первых, CSS-файл /inc/fancybox/fancy.css ( /inc/fancybox/fancy.css ) включен. Последняя библиотека jQuery (v1.3.1) включена в Google Code, за ней следуют файл javascript FancyBox и файл /inc/animate.js .
Библиотека jQuery загружается из Google Code, чтобы сократить время загрузки, поскольку посетитель, возможно, уже посетил сайт, также используя библиотеку, размещенную на серверах Google, и поэтому файл будет кэширован. Это небольшая разница, но вы всегда можете сохранить библиотеку jQuery в папку /inc/ и ссылаться на нее, если хотите.
Наконец, нам просто нужно сообщить FancyBox, к каким ссылкам он должен применить себя. Добавьте следующее в /inc/animate.js :
|
1
2
3
4
5
6
7
8
|
$(document).ready(function(){
$(«#fancyopen a»).fancybox({
‘hideOnContentClick’: true,
‘overlayShow’: true
});
});
|
Если вы не знакомы с jQuery, мы ссылались на fancybox({}) на любые объекты в #fancyopen a (ссылки внутри div с идентификатором fancyopen). Мы также прошли через несколько опций: hideOnContentClick закрывает изображение, когда на него overlayShow , и overlayShow «затемняет» фон, когда лайтбокс активен.
Дополнительные параметры FancyBox см. В разделе «Как использовать» здесь .
Совет: Хотите узнать больше о jQuery? Смотрите фантастический сериал Джеффри «JQuery для абсолютных новичков» в блоге ThemeForest .
Обновите свое портфолио и попробуйте лайтбокс.
Шаблон страницы по умолчанию
Мы создали шаблоны страниц для дома и портфолио, но еще не создали шаблон «по умолчанию», который будет использоваться для любых других страниц (например, «О нас» или «Свяжитесь с нами»).
Добавьте эти несколько строк в конец существующего кода в page.php :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<div id=»mainarea»>
<?php
if(have_posts()) : while(have_posts()) : the_post ();
<h2><?php the_title();
<?php the_content();
endwhile;
get_sidebar();
get_footer();
|
Основной цикл WordPress, выводящий заголовок и контент. Просто.