Всем привет! Функции, хаки, фильтры очень и очень нужны при разработке любого проекта с помощью WordPress, поэтому я и решил начать вести эту рубрику. В первом volume Вы узнаете о том как: отключить показ изображений записей на главной странице, предотвратить сжатие изображений, автоматически удалить ширину и высоту изображений, добавить атрибуты изображению, вывести миниатюру к записи, вывести миниатюру статьи в RSS ленте и как вывести несколько изображений в анонсе записи.

Отключаем показ изображений постов на главной странице

Очень полезная штука), допустим на главной странице Вы выводите анонсы записей, но не с помощью «цитаты», а с помощью тега «read more» и допустим перед этим тегом в теле записи идет картинка, а на главной мы не хотим ее видеть. Вот тут на помощь приходит еще один волшебный фильтр WordPress, который нужно поместить в файл functions.php Вашей темы:

add_filter('the_content','htm_image_content_filter',11);

function htm_image_content_filter($content){
	if (is_home() || is_front_page()){
		$content = preg_replace("/<img[^>]+\>/i", "", $content);
	}
	return $content;
}

Предотвращаем компрессию(сжатие) изображений

По умолчанию WordPress проводит над изображениями компрессию(сжатие) и заметно ухудшает качество картинок, чтобы предотвратить эту ситуацию необходимо просто добавить следующий фильтр в functions.php Вашей темы:

add_filter( 'jpeg_quality', function($arg){ return 100; } );

И есть по поводу компрессии одно замечание: если версия php Вашего хостинга меньше 5.3, то приведенный хак будет вызывать ошибку, в таком случае попробуйте вместо него заюзать такой код:

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

У меня заработала только вторая версия.

Автоматически удаляем высоту и ширину изображений

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

add_filter( 'post_thumbnail_html', 'htm_remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'htm_remove_width_attribute', 10 );

function htm_remove_width_attribute($html) {
	$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
	return $html;
}

Больше всего мне не понравилось, то что этот хак работает только для публикации новых картинок, а это печально, хотя если очень хочется, то можно воспользоваться jQuery:

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#main').find('img').removeAttr('width');
	jQuery('#main').find('img').removeAttr('height');
});
</script>

Добавляем атрибуты ко всем изображениям блога

Довольно распростанненная задача, когда возникает необходимость добавить атрибуты к изображениям, например все изображения в записях открываются в модальных окнах, а скрипт Вы писали сами и его логика опирается на атрибут rel или name. Естественно, если Вы имеете на блоге или сайте много записей, то дописывать в каждое изображение эти атрибуты реально напряжно. Выход есть)) добавляем следующий код в functions.php:

add_filter('the_content', 'htm_add_attr');

function htm_add_attr($content) {
	global $post;
	$pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
	$replacement = '<a$1href=$2$3.$4$5 rel="lightbox" name="lightbox" title="'.$post->post_title.'"$6>';
	$content = preg_replace($pattern, $replacement, $content);
	return $content;
}

htm_add_attr — название нашей функции, префикс htm_ можете поменять на тот который Вам нравится.

Выводим миниатюру к записи

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

add_theme_support( 'post-thumbnails' );

а чтобы вывести миниатюру, в шаблоны categor.php, index.php, archive.php, tag.php, search.php в главный цикл loop нужно добавить следующий код:

<?php if (function_exists ('has_post_thumbnail') && has_post_thumbnail () ) {
	the_post_thumbnail (array (150,150)); 
} ?>

во второй строке в параметре array(150,150) выставляются размеры миниатюры, ставьте их на свое усмотрение. Плюс на разных страницах шаблона можно указать разные размеры изображений. Миниатюры теперь Ваши).

Выводим миниатюру к записи в RSS ленте

Чтобы приукрасить RSS ленту, в нее можно добавить миниатюру привязанную к записи, для этой махинации нужно вставить следующий код в файл functions.php Вашей темы:

function htm_rss_post_thumbnail($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {
		$content = '<p>' . get_the_post_thumbnail($post->ID) .
		'</p>' . get_the_content();
	}
	return $content;
}

add_filter('the_excerpt_rss', 'htm_rss_post_thumbnail');
add_filter('the_content_feed', 'htm_rss_post_thumbnail');

Выводим несколько изображений в анонсе записи

Совсем недавно подкинулась задача, в новом проекте была рубрика галерея, и заказчик хотел чтобы на главной выводился список постов из этой рубрики, и не просто так выводился, а хитро) Нужно было вывести название записи, ее анонс и 5 фоток из записи.

Так вот, если у Вас возникнет такая задача, то модифицированный loop (главный цикл) WordPress я привожу, имейте ввиду, что этот код желательно поместить в отдельный шаблон, чтобы не мешать другим записям блога

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="post">
/* Заголовок записи */
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

/* Текстовый анонс */
<?php the_excerpt(); ?>

/* Выводим последние 5 картинок из записи */
<div class="img_array">
<?php
	$args = array(
		'order'          => 'ASC',
		'orderby'        => 'menu_order',
		'post_type'      => 'attachment',
		'post_parent'    => $post->ID,
		'post_mime_type' => 'image',
		'post_status'    => null,
		'numberposts'    => 5
	);
	$attachments = get_posts($args);
	if ($attachments) {
		foreach ($attachments as $attachment) {
			echo wp_get_attachment_link($attachment->ID, array(70,70), false, false);
		}
	}
?>	
</div>

<?php endwhile; endif; ?>

* Примечание #1: в параметре ‘numberposts’ => 5, Вы можете указать сколько изображений выводить.

* Примечание #2: этот код отличная альтернатива миниатюрам к записям.

Заключение

Пока все. Надеюсь в скором времени эта статья пополнится новыми функциями, если у Вас есть хаки, которых тут нет, пожалуйста, пишите о них в комментариях, я включу их в статью.

Добавить комментарий:


Комментарии
  1. Гомельский блогер

    Спасибо за советы. Кое что возьму на заметку, например скрытие изображения с главной.

  2. Андрей

    Здравствуйте, у меня на сайте все картинки в центре поста, а когда задаю миниатюру она появляется в посте наверху.Можно как то от нее избавиться. Или как можно сделать анонс с картинкой по другому,что бы не было дублей в самом посте.

  3. JAH

    Андрей, да можно, вот этот код вывода миниатюры:

    <?php if (function_exists ('has_post_thumbnail') && has_post_thumbnail () ) {
    	the_post_thumbnail (array (150,150)); 
    } ?>
    

    нужно вставлять в файл category.php[index.php, tag.php, search.php] (в single.php — ее вставлять не нужно)

    пс. если файла single.php нету то по умолчанию используется файл index.php, в этом случае просто создайте файл single.php в папке с Вашей темой и скопируйте в него содержимое файла index.php без вывода миниатюры

  4. leo

    а можно автоматически сделать все картинки не кликабельными? (галерея создана обычным способом WordPress)

  5. JAH

    leo, да можно)

    когда загрузил все картинки и нажал «Сохранить изменения» то перекидывает на окошко галереи и там есть две радиокнопки «файл изображения» и «страница вложения», нужно выбрать «файл изображения»

    если влом что-то менять то можно написать скрипт js который будет предотвращать переход по ссылке в каждой галерее:

    <script type="text/javascript">
    	$('.gallery').find('a').click(function(){
    		return false
    	});
    </script>
    

    добавить этот скриптик можно или к общим скриптам Вашей темы, или в файл footer.php Вашей темы перед закрывающим тегом </body>

  6. Сергей

    JAH, спасибо, натолкнули на правильный путь! Искал решение и нашел в вашем посте. Добавлю ваш сайт в закладки =)

  7. Сергей

    Доброго! Подскажите, пожалуйста, как задать всем размещаемым через редактор картинкам определенный класс, то есть добавить еще один класс к тем которые уже задает wp.

    вот к этим еще прибавить класс «img-responsive»

  8. Olya

    Добрый день!
    пожалуйста, подскажите, куда именно поставить этот код, чтобы было несколько картинок в миниатюре:

    это здесь:
    Шаблон страницы «Blog» (template-blog.php)

    не пойму, куда именно это надо поставить, можете помочь? пожалуйста…


    ‘post’,
    ‘cat’ => ».$hathor[‘blog_cat_id’].»,
    ‘paged’ => ( get_query_var(‘paged’) ? get_query_var(‘paged’) : 1),
    );
    $the_query = new WP_Query( $args );
    ?>
    have_posts() ) : $the_query->the_post(); ?>

    <div id=»post-«>

    <a href="» title=»»>

    Posted by:

    <a href="» class=»more-link»>

    <img src="/images/sep-shadow.png» />

  9. find-way.net

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