Працюємо з custom post type. Урок 2

У минулому уроці я розповідав як створити додатковий тип контенту — «Фотогалерею» і додаткову таксономію для неї(теґи).

У цьому уроці я розповім як налаштувати потрібний вигляд сторінки із фотогалереями, та сторінку таксономії фотогалерей.
Вважатимемо, що у нас стандартна тема Twentyten на її базі і будемо робити зміни у файлах.

Для початку створимо шаблон для виводу галерей. Відкрийте файл archive.php та скопіюйте його вміст у новий файл із назвою type-photogallery.php, і дещо відредагуйте, щоб виглядало приблизно так:

<?php
/**
 * The template for displaying Photogallery.
 *
 * Used to display archive-type pages if nothing more specific matches a query.
 * For example, puts together date-based pages if no date.php file exists.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
get_header(); ?>
<?php
    /* Додаємо потрібну кількість одиниць контенту на сторінку і правильну паґінацію сторінками */
    global $query_string;
    query_posts($query_string . '&posts_per_page=9'); // «9» — це кількість фотогалерей на сторінку
    ?>

<section id="content" role="main">
<?php
/* Queue the first post, that way we know
 * what date we're dealing with (if that is the case).
 *
 * We reset this later so we can run the loop
 * properly with a call to rewind_posts().
 */
if ( have_posts() )
  the_post();
?>
<h1 class="page-title">Фотогалереї</h1>
<?php // Виводимо хмарку теґів фотогалерей ?>
<h3>Теґи фотогалерей</h3>
<?php
    $args = array(
          'smallest'  => 10,
          'largest' => 22,
          'unit' => 'pt',
          'number' => 666,
          'format' => 'flat',
          'orderby' => 'name',
          'order' => 'RAND',
          'link' => 'view',
          'taxonomy' => 'photogallery_tag', // Вказуємо назву таксономії для формування хмарки теґів
          'echo' => true
);
wp_tag_cloud( $args ); // Виводиму хмаринку теґів фотогалерей
?>
<br style="clear: both;" />
<?php
/* Since we called the_post() above, we need to
 * rewind the loop back to the beginning that way
 * we can run the loop properly, in full.
 */
rewind_posts();
/* Run the loop for the archives page to output the posts.
 * If you want to overload this in a child theme then include a file
 * called loop-photogallery.php and that will be used instead.
 */
 get_template_part( 'loop', 'photogallery' );
?>

</section><!-- /#content >
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Code language: HTML, XML (xml)

Далі відкриваємо файл loop.php та після стрічки

<?php while ( have_posts() ) : the_post(); ?>Code language: HTML, XML (xml)

додаємо наш код для відображення фотогалерей:

<?php // Display Photogallery ?>
<?php
$post_type = get_post_type(); // Отримуємо тип контенту
if( $post_type == 'photogallery' || is_tax( 'photogallery_tag' ) ) : // Вказуємо застосування цього формату виведення контенту для фотогалерей і їх теґів
?>
<figure id="post-<?php the_ID(); ?>">
 <a class="thumb" href="<?php the_permalink(); ?>">
  <?php the_post_thumbnail('thumbnail', array('class' => 'photogallery-cat-thumb', 'title' => __('View Photogallery','cehla'))); ?>
 </a>
 <h2>
  <a class="title" title="<?php _e('View Photogallery','cehla') ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</figure>
<!-- /#post-## -->Code language: HTML, XML (xml)

Ще потрібно замінити у стрічці

<?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>Code language: HTML, XML (xml)

if на elseif

Також створимо сторінку для відображення сторінки теґів фотогалерей. Створимо файл taxonomy-photogallery_tag.php із таким вмістом:

<?php
/**
 * The template for displaying Photogallery tag.
 *
 * Used to display archive-type pages if nothing more specific matches a query.
 * For example, puts together date-based pages if no date.php file exists.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
get_header(); ?>
<?php
    /* Додаємо потрібну кількість одиниць контенту на сторінку і правильну паґінацію сторінками */
    global $query_string;
    query_posts($query_string . '&posts_per_page=9'); // «9» — це кількість фотогалерей на сторінку
    ?>

<section id="content" role="main"><?php
/* Queue the first post, that way we know
 * what date we're dealing with (if that is the case).
 *
 * We reset this later so we can run the loop
 * properly with a call to rewind_posts().
 */
if ( have_posts() )
  the_post();
?>
<?php
    // Отримуємо назву терміну таксономії
    $term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );
    ?>
<h1 class="page-title">Фотогалереї > <?php print $term->name; // Друкуємо назву терміну таксономії ?></h1>
<?php
    // Отримуємо опис терміну таксономії
    $photogallery_tag__description = term_description( '', get_query_var( 'taxonomy' ) ); ?>
<?php if( $photogallery_tag__description ) { ?>
<div class="archive-meta"><?php print $photogallery_tag__description = term_description( '', get_query_var( 'taxonomy' ) ); ?></div>
<?php } ?>

<?php // Виводимо хмарку теґів фотогалерей ?>
<h3>Теґи фотогалерей</h3>
<?php
    $args = array(
        'smallest'  => 10,
		'largest' => 22,
		'unit' => 'pt',
		'number' => 666,
		'format' => 'flat',
		'orderby' => 'name',
		'order' => 'RAND',
		'link' => 'view',
		'taxonomy' => 'photogallery_tag',
		'echo' => true
	);
wp_tag_cloud( $args );
?>
<br style="clear: both;" />
<?php
/* Since we called the_post() above, we need to
 * rewind the loop back to the beginning that way
 * we can run the loop properly, in full.
 */
rewind_posts();
/* Run the loop for the archives page to output the posts.
 * If you want to overload this in a child theme then include a file
 * called loop-photogallery.php and that will be used instead.
 */
 get_template_part( 'loop', 'photogallery' );
?>

</section><!-- /#content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>Code language: HTML, XML (xml)

Файли для відображення фотогалерей і її таксономії створено. Лишається оформити засобами 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);
}
Code language: CSS (css)