Всем привет! Функции, хаки, фильтры очень и очень нужны при разработке любого проекта с помощью 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: этот код отличная альтернатива миниатюрам к записям.
Заключение
Пока все. Надеюсь в скором времени эта статья пополнится новыми функциями, если у Вас есть хаки, которых тут нет, пожалуйста, пишите о них в комментариях, я включу их в статью.
Как видите, обработка изображений является достаточно сложным процессом, когда речь идет об адаптивном дизайне. Функция будет работать только с миниатюрами записей, а не со всеми изображениями в посте.
Добрый день!
пожалуйста, подскажите, куда именно поставить этот код, чтобы было несколько картинок в миниатюре:
это здесь:
Шаблон страницы «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» />
Доброго! Подскажите, пожалуйста, как задать всем размещаемым через редактор картинкам определенный класс, то есть добавить еще один класс к тем которые уже задает wp.
вот к этим еще прибавить класс «img-responsive»
JAH, спасибо, натолкнули на правильный путь! Искал решение и нашел в вашем посте. Добавлю ваш сайт в закладки =)
leo, да можно)
когда загрузил все картинки и нажал «Сохранить изменения» то перекидывает на окошко галереи и там есть две радиокнопки «файл изображения» и «страница вложения», нужно выбрать «файл изображения»
если влом что-то менять то можно написать скрипт js который будет предотвращать переход по ссылке в каждой галерее:
добавить этот скриптик можно или к общим скриптам Вашей темы, или в файл footer.php Вашей темы перед закрывающим тегом
</body>
а можно автоматически сделать все картинки не кликабельными? (галерея создана обычным способом WordPress)
Андрей, да можно, вот этот код вывода миниатюры:
нужно вставлять в файл category.php[index.php, tag.php, search.php] (в single.php — ее вставлять не нужно)
пс. если файла single.php нету то по умолчанию используется файл index.php, в этом случае просто создайте файл single.php в папке с Вашей темой и скопируйте в него содержимое файла index.php без вывода миниатюры
Здравствуйте, у меня на сайте все картинки в центре поста, а когда задаю миниатюру она появляется в посте наверху.Можно как то от нее избавиться. Или как можно сделать анонс с картинкой по другому,что бы не было дублей в самом посте.
Спасибо за советы. Кое что возьму на заметку, например скрытие изображения с главной.