+7(982) 597-7179

Работа с изображениями в WordPress

Время на прочтение: < 1 минут

Миниатюры записей довольно полезны и просты в использовании в WordPress. Просто добавьте в файл functions.php :

add_theme_support('post-thumbnails'); 

После этого ваша тема начнет поддерживать миниатюры для ваших записей.

Также очень легко вывести эти изображение в виде HTML <img>:

get_the_post_thumbnail();

Но что, если вам просто нужен URL изображения? Скажем, вы собираетесь использовать его как background-imageэлемент, а не как изображение контента. К сожалению, для этого нет супер легкой / очевидной функции.

В цикле вам нужно сделать следующее:

$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
$thumb_url = $thumb_url_array[0];

Тогда $thumb_urlбудет этот URL.

Получить первое изображение из поста

Допустим вы захотели использовать миниатюры для ваших постов (раньше не было миниатюр), но постов уже много. Очень долго вам придется добавлять миниатюры к старым постам. Есть отличное решение для этого случая — выводить в миниатюре первое изображение с поста.

Добавьте это в functions.php 

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+?src=[\'"]([^\'"]+)[\'"].*?>/i', $post->post_content, $matches);
  $first_img = $matches[1][0];

  if(empty($first_img)) {
    $first_img = "/path/to/default.png";
  }
  return $first_img;
}

Чтобы использовать его, используйте этот код в цикле :

if ( get_the_post_thumbnail($post_id) != '' ) {

  echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
   the_post_thumbnail();
  echo '</a>';

} else {

 echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
 echo '<img src="';
 echo catch_that_image();
 echo '" alt="" />';
 echo '</a>';

}

Я обнаружил, что has_post_thumbnail не так надежен, как логика выше.

Спасибо за внимание. Если у вас будут сложности или вопросы, напишите в комментариях


Читайте также:

Приглашаем поучаствовать в обсуждении статьи:

Комментариев 0