У минулому уроці я розповідав як створити додатковий тип контенту — «Фотогалерею» і додаткову таксономію для неї(теґи).
У цьому уроці я розповім як налаштувати потрібний вигляд сторінки із фотогалереями, та сторінку таксономії фотогалерей.
Вважатимемо, що у нас стандартна тема Twentyten на її базі і будемо робити зміни у файлах.
Для початку створимо шаблон для виводу галерей. Відкрийте файл [php]archive.php[/php] та скопіюйте його вміст у новий файл із назвою [php]type-photogallery.php[/php], і дещо відредагуйте, щоб виглядало приблизно так:
[php]
Фотогалереї
Теґи фотогалерей
10,
‘largest’ => 22,
‘unit’ => ‘pt’,
‘number’ => 666,
‘format’ => ‘flat’,
‘orderby’ => ‘name’,
‘order’ => ‘RAND’,
‘link’ => ‘view’,
‘taxonomy’ => ‘photogallery_tag’, // Вказуємо назву таксономії для формування хмарки теґів
‘echo’ => true
);
wp_tag_cloud( $args ); // Виводиму хмаринку теґів фотогалерей
?>
[/php]
Далі відкриваємо файл [php]loop.php[/php] та після стрічки [php][/php] додаємо наш код для відображення фотогалерей:
[php]
[/php]
Ще потрібно замінити у стрічці [php][/php] if на elseif
Також створимо сторінку для відображення сторінки теґів фотогалерей. Створимо файл [php]taxonomy-photogallery_tag.php[/php] із таким вмістом:
[php]
Фотогалереї > name; // Друкуємо назву терміну таксономії ?>
Теґи фотогалерей
10,
‘largest’ => 22,
‘unit’ => ‘pt’,
‘number’ => 666,
‘format’ => ‘flat’,
‘orderby’ => ‘name’,
‘order’ => ‘RAND’,
‘link’ => ‘view’,
‘taxonomy’ => ‘photogallery_tag’,
‘echo’ => true
);
wp_tag_cloud( $args );
?>
[/php]
Файли для відображення фотогалерей і її таксономії створено. Лишається оформити засобами CSS.
Відкриваємо файл і пишемо код на власний розсуд, а я написав такий:
[css]
/**
* For Photogallery
*/
#content figure {
float:left;
border:1px #666 solid;
margin: 10px 6px 25px;
overflow:hidden;
}
#content figure a.thumb {
display:block;
height:150px;
width:200px;
}
#content figure h2 {
position:absolute;
left:0;
bottom:0;
padding:0 4px 4px;
margin-bottom:0;
width:192px;
line-height:1;
font-family:Helvetica,Arial,sans-serif;
text-align:center;
background-color:rgba(0,0,0,.75);
}
#content figure h2 a { font-size:14px; color:#fff; text-decoration:none; }
#content figure h2 a:hover { text-decoration:underline; }
/* Style for IE */
#content figure.work h2 {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
}
[/css]
коментарі 2
Дуже цiкава стаття! Але не можу зрозумiти як працювати з таксономiею. Допоможiть створити цикл виведення власноi такскономii.
Наврядчи у коментарях буде зручно вести цю дискусію, створіть, будь ласка, тему на нашому форумі з описом того, як створена таксономія http://e-support.in.ua/