• Модифицируем галерею Wordpress

    Для сайта с рецептами приготовления блюд с иллюстрациями каждого шага, потребовалась простая и наглядная система добавления шагов-рисунков с кратким описанием каждого шага. В стандартной галерее вордпресса (шорткод GALLERY) уже реализован весь необходимый функционал: можно пачкой загружать фотки, прописывать к ним названия, описания и выводить в нужном порядке. Однако есть несколько «НО»:

    • невозможно в галерее вывести описание к изображению, его можно вывести только в шаблоне приложений, типа image.php, но нам нужно вывести их на странице самого поста.
    • невозможно как-то значительно влиять на дизайн галереи, мы не можем, например, физически переместить заголовок изображения выше самого изображения (по умолчанию заголовок идет как подпись под картинкой)

    В общем, разработчикам вордпресса есть еще над чем работать, надеюсь, в третьей ветке значительным изменениям подвергнется и стандартная галерея, тогда можно будет со спокойной душой выкинуть тормознутые галереи-плагины типа «NextGEN Gallery». Кстати, используя данный плагин вполне возможно выполнить поставленную задачу, однако такое решение выглядит несколько туповато, учитывая что все необходимые возможности уже реализованы в стандартной галереи, и все дело лишь в ее внешнем виде. Зачем изобретать велосипед, если можно просто его модернизировать?

    Модернизируем наш «велосипед»

    Любителям на досуге пописать плагинчики для вордпресса конечно же известны функции add_shortcode и remove_shortcode, первая регистрирует, а вторая удаляет регистрацию  шорткода. Шорткоды, если кто не знает, это специальные кодовые слова, которые можно прописывать прямо в теле статьи, и которые вызывают какую-то функцию. Например, шорткод CAPTION служит для вставки изображения с подписью, а шорткод GALLERY — необходимую нам стандартную галерею вордпресс.

    Нам нужно всего лишь переписать функцию вывода на экран галереи и сделать так, чтобы шортег GALLERY вызывал именно нашу функцию, а не стандартную. Сделать это проще, чем вы можете подумать =)

    В первую очередь нам нужно отключить стандартную функцию галереи. Открываем файл functions.php, и вставляем в конец файла (до знака «?>») строку:

    remove_shortcode('gallery');

    Затем нам нужна новая функция вывода галереи. Крутые программисты наверняка напишут ее сами, но лично мне нужно всего лишь добавить пару фишек к стандартной галерее, поэтому я просто немного изменю стандартную функцию, текст которой находится в файле wp-includes/media.php и называется gallery_shortcode. Файл большой, поэтому воспользуйтесь функцией поиска.

    Для версии вордпресс 2.9.2 эта функция выглядит так:

    function gallery_shortcode($attr) {
    	global $post, $wp_locale;
     
    	static $instance = 0;
    	$instance++;
     
    	// Allow plugins/themes to override the default gallery template.
    	$output = apply_filters('post_gallery', '', $attr);
    	if ( $output != '' )
    		return $output;
     
    	// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
    	if ( isset( $attr['orderby'] ) ) {
    		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
    		if ( !$attr['orderby'] )
    			unset( $attr['orderby'] );
    	}
     
    	extract(shortcode_atts(array(
    		'order'      => 'ASC',
    		'orderby'    => 'menu_order ID',
    		'id'         => $post->ID,
    		'itemtag'    => 'dl',
    		'icontag'    => 'dt',
    		'captiontag' => 'dd',
    		'columns'    => 3,
    		'size'       => 'thumbnail',
    		'include'    => '',
    		'exclude'    => ''
    	), $attr));
     
    	$id = intval($id);
    	if ( 'RAND' == $order )
    		$orderby = 'none';
     
    	if ( !empty($include) ) {
    		$include = preg_replace( '/[^0-9,]+/', '', $include );
    		$_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
     
    		$attachments = array();
    		foreach ( $_attachments as $key => $val ) {
    			$attachments[$val->ID] = $_attachments[$key];
    		}
    	} elseif ( !empty($exclude) ) {
    		$exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
    		$attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
    	} else {
    		$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
    	}
     
    	if ( empty($attachments) )
    		return '';
     
    	if ( is_feed() ) {
    		$output = "\n";
    		foreach ( $attachments as $att_id => $attachment )
    			$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
    		return $output;
    	}
     
    	$itemtag = tag_escape($itemtag);
    	$captiontag = tag_escape($captiontag);
    	$columns = intval($columns);
    	$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
    	$float = $wp_locale->text_direction == 'rtl' ? 'right' : 'left'; 
     
    	$selector = "gallery-{$instance}";
     
    	$output = apply_filters('gallery_style', "
    		<style type='text/css'>
    			#{$selector} {
    				margin: auto;
    			}
    			#{$selector} .gallery-item {
    				float: {$float};
    				margin-top: 10px;
    				text-align: center;
    				width: {$itemwidth}%;			}
    			#{$selector} img {
    				border: 2px solid #cfcfcf;
    			}
    			#{$selector} .gallery-caption {
    				margin-left: 0;
    			}
    		</style>
    		<!-- see gallery_shortcode() in wp-includes/media.php -->
    		<div id='$selector' class='gallery galleryid-{$id}'>");
     
    	$i = 0;
    	foreach ( $attachments as $id => $attachment ) {
    		$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
     
    		$output .= "< {$itemtag} class='gallery-item'>";
    		$output .= "
    			< {$icontag} class='gallery-icon'>
    				$link
    			";
    		if ( $captiontag && trim($attachment->post_excerpt) ) {
    			$output .= "
    				< {$captiontag} class='gallery-caption'>
    				" . wptexturize($attachment->post_excerpt) . "
    				";
    		}
    		$output .= "";
    		if ( $columns > 0 && ++$i % $columns == 0 )
    			$output .= '<br style="clear: both" />';
    	}
     
    	$output .= "
    			<br style='clear: both;' />
    		</div>\n";
     
    	return $output;
    }

    Эту функцию нужно просто вставить в файл functions.php вашей темы и внести нужные вам изменения. Скорее всего потребуются небольшие знания PHP. Я всего лишь добавил следующий код:

    		if (trim($attachment->post_content) ) {
    			$output .= "
    				< {$captiontag} class='gallery-description'>
    				" . wptexturize($attachment->post_content) . "
    				";
    		}

    сразу после:

    		if ( $captiontag && trim($attachment->post_excerpt) ) {
    			$output .= "
    				< {$captiontag} class='gallery-caption'>
    				" . wptexturize($attachment->post_excerpt) . "
    				";
    		}

    Благодаря этой вставке, в галерее теперь будут отображаться описания к файлам. Все просто!

    Если не хотите, чтобы в галерее отображалась миниатюра, просто замените строку:

    'exclude'    => ''

    На:

    'exclude'    => get_post_meta($post->ID, '_thumbnail_id', 1)

    Теперь нужно снова включить шортаг GALLERY, но уже с нашей функцией. Кстати, название функции необходимо изменить, иначе это вызовет фатальную ошибку (старая функция галереи все еще доступна в файле media.php, и я не советую ее удалять!) Просто переименуйте функцию из gallery_shortcode в, например, new_gallery_shortcode.

    Чтобы шортаг снова заработал, добавьте в functions.php строку:

    add_shortcode('gallery', 'new_gallery_shortcode');

    Она должна быть после remove_shortcode и нашей новой функции.

    Кстати, не обязательно отключать функцию стандартной галереи, можно сделать все тоже самое, но в add_shortcode написать, например:

    add_shortcode('new_gallery', 'new_gallery_shortcode');

    Тем самым мы создадим новый шорткод NEW_GALLERY и сможем его использовать при написании поста (ставлять придется ручками, в режиме HTML. Таким макаром можно связать любую функцию с шорткодом, какую захотите!

    Вот, собственно, и все =) Сохраняем файл и смотрим результат! Для людей, немного знакомых с программированием, не будет проблемой дописать любые фишки к стандартной галерее, и значительно расширить ее функционал, без всяких плагинов.

    Tags: , ,

4 коммент.


  1. media. says:

    А ссылка на рабочий вариант галерейки есть?

    • Илья says:

      Рабочий, в смысле рабочий пример показать? Можете посмотреть, например, на это: www.prohavchik.ru/salat-z...snoj-rybkoj.html

      1. Большая картинка в самом верху - это миниатюра записи (то есть в редактор код вызова картинки вставлять не нужно)

      2. Подпись под большой картинкой - это текст, набранный в редакторе записи

      3. Маленькие «пошаговые» картинки - это уже галерея, для нее прописан шорткод [recipe]"", который нужно просто вписать в редактор, после предыдущего текста.

      — порядок картинок соответствует порядку картинок в галерее

      — текст справа от каждой картинки задается описанием к ней

      Вот как-то так =)

  2. vital says:

    А можно как-то вывести описание не каждой картинки в галерее, а описание самой галереи на странице с ней?

    • Илья says:

      Собственно, можно все, что душа пожелает =) проблема в том, что в вордпрессе нет описаний к галерее, ибо сами галереи существуют в формате отдельной записи. Проще говоря, вот есть у вас запись «Hello World», и уже внутри этой записи, все привязанные к этой записи картинки формируют галерею =) Поэтому, описание галереи можно сделать простым текстом перед шорткодом вызова галереи =) Есть вариант — описание галереи прописывать в кратком содержании статьи, но имеет это смысл только если нигде вам не потребуется это самое краткое описание =) Грубо говоря, вместо описания статьи это поле будет содержать описание галереи =) Ну и для знакомых с программированием, можно модифицировать функцию галереи, и добавить шорткоду дополнительный параметр с названием галереи, и где-то его использовать. Тогда шорткод галереи будет выглядеть примерно так [gallery title='Название галереи']"". Надеюсь, все понятно описал =)

Оставить комментарий или два