Розпродаж хостинг-планів на неймовірних умовах!
Знижка від 300 до 500грн!
 

автор Дмитро Кондрюк

18.12.2010

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(); ?>

Далі відкриваємо файл loop.php та після стрічки <?php while ( have_posts() ) : the_post(); ?> додаємо наш код для відображення фотогалерей:

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

Ще потрібно замінити у стрічці <?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?> 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">Фотогалереї<span> > <?php print $term->name; // Друкуємо назву терміну таксономії ?></span></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(); ?>

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

Дмитро Кондрюк

Автор публікації Дмитро Кондрюк

В веб-індустрії з 2003 року. В 2009р. заснував проект Український WordPress (що у подальшому став офіційним сайтом команди локалізації WordPress в Україні). З 2010 року засновник і технічний директор проекту Український хостинг для WordPress (WPHost.me) - повноцінного хостинг-сервісу, максимально оптимізованого на використання CMS WordPress.

Є що відповісти?

Ваш email не буде публікуватися

Можна скористатися такими тегами в тексті:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  • 07.09.2014 at 23:56

    Дуже цiкава стаття! Але не можу зрозумiти як працювати з таксономiею. Допоможiть створити цикл виведення власноi такскономii.

  • Наврядчи у коментарях буде зручно вести цю дискусію, створіть, будь ласка, тему на нашому форумі з описом того, як створена таксономія http://e-support.in.ua/