SdelaemBlog

Создание Сайтов и их настройка

Подключение миниатюр wordpress, их настройка и использование.

Главная Статьи WordPress Подключение миниатюр wordpress, их настройка и использование.
#WordPress

11 апреля 2013

Доброго времени суток, друзья. Сегодня на SdelaemBlog.ru, мы поговорим о миниатюрах wordpress. Или, как их еще можно назвать, превью изображений. В этой статье, вы сможете узнать, что такое миниатюра wordpress, как подключить ее к своей теме, если она не подключена, как настроить ее отображение, а также в каких случаях ее можно использовать на вашем сайте?

Подключение миниатюр wordpress, их настройка и использование.

И чтобы не затягивать, сразу начнем разбирать все вопросы, перечисленные выше.

Что такое миниатюра wordpress и где ее можно использовать?

Миниатюра wordpress — это уменьшенная копия изображения на сайте, использующем для администрирования движок wordpress, по другому ее можно назвать превью изображения или мини картинка.

Использоваться она может, как в анонсах статей, вместо стандартных изображений, так и в других областях сайта, например, при использовании популярных или похожих записей wordpress с картинкой. Также, существуют плагины, которые могут использовать превью изображений для вывода различной информации. Кроме того, мини картинку можно добавить в rss ленту нашего сайта, для более привлекательного внешнего вида анонсов статей. В общем, область применения миниатюр довольно широка, и довольно часто возникают вопросы, связанные с этим видом изображений.

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

Проверка поддержки миниатюры wordpress темой.

Итак, если мы не уверены в подключении миниатюр в теме, это можно легко проверить. Для этого, необходимо перейти в админку wordpress и зайти в редактор любой из записей, или же выбрать пункт «добавить новую» запись.

Если миниатюры wordpress подключены, то в правой колонке мы увидим окошко под названием «Миниатюра записи», со ссылкой «Задать миниатюру».

Подключение миниатюр wordpress, их настройка и использование.

Если этого окошка мы не видим, следует проверить отсутствие возможности добавлять миниатюру в настройках экрана. Для этого, в правом верхнем углу, необходимо кликнуть на вкладку «Настройки экрана». И проверить отсутствие пункта «Миниатюра записи».

Подключение миниатюр wordpress, их настройка и использование.

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

И обратите внимание, что из-за особенностей перевода тем, данная опция может называться по другому, например «Характерное изображение», и ссылка на создание миниатюры может быть такой:  «Установить специальное изображение».

Подключение миниатюры wordpress и вывод ее в анонсе статьи.

Чтобы подключить миниатюры wordpress к нашей теме, необходимо в админке, или с помощью текстового редактора NotePad++, открыть файл functions.php и в самом низу, перед ?>, добавить следующий код:

add_theme_support( 'post-thumbnails' );

После чего, в редакторе записи у нас появится возможность задать миниатюру. И если у нас не очень много статей, то мы можем задать, для каждой, миниатюру wordpress в ручную.

А как теперь использовать ее в анонсе статьи? Чтобы вывести миниатюру на главной странице, необходимо прописать в файле index.php или loop.php, в нужном месте код:

<?php the_post_thumbnail(); ?>

Если вы испытываете затруднения в поиске нужного места, то просто найдите вот такой код:

<?php the_content(); ?>

Или же, такой:

<?php the_excerpt(); ?>

И перед ним вставьте код вывода миниатюры wordpress.

После этих действий и назначения мини картинки в редакторе записей wordpress, на главной странице появятся уменьшенные копии изображений. Плюс ко всему, мы можем сделать это изображение ссылкой на продолжение статьи. Для этого, заменим стандартный код, на вот этот:

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>

Немного подробнее о том, из чего состоит данный код:

  • 1. открывающий тег <a>, и закрывающий </a> — тег предназначенный для создания ссылок. Именно он сделает миниатюру ссылкой.
  • 2. href="<?php the_permalink(); ?>" — ссылка на статью.
  • 3. title="<?php the_title(); ?>" — тайтл (заголовок) ссылки, который будет виден, при наведении на нее курсора. Берется из заголовка статьи.
  • 4. <?php the_post_thumbnail(); ?> — функция вывода мини картинки.

Теперь, должно быть немного понятней, как это работает. Нам останется только оформить внешний вид картинки, в зависимости от наших потребностей. Для этого, необходимо в style.css добавить следующий код, если его нет:

img.wp-post-image{
здесь стили миниатюры
}

И между скобками, вместо «здесь стили миниатюры», добавить необходимые стили. Это, что касается обычного, стандартного вывода, без использования, каких-либо параметров.

Параметры миниатюры wordpress.

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

По умолчанию, мы можем использовать следующие параметры для изображений:

the_post_thumbnail(); // стандартный вывод, без параметров, о котором мы говорили выше.
the_post_thumbnail('thumbnail'); // уменьшенная копия изображения (по умолчанию 150px x 150px). Есть возможность настройки из админки, но при этом размер не должен превышать 150px
the_post_thumbnail('medium'); // средний размер (по умолчанию 300px x 300px). Возможность настройки из админки.
the_post_thumbnail('large'); // крупный размер (по умолчанию 640px x 640px). Возможность настройки из админки.
the_post_thumbnail('full'); // полный размер (оригинальный размер изображения).
the_post_thumbnail( array(100,100) ); // свои размеры. Возможно назначить любые размеры ширины и высоты.

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

И соответственно, для каждого параметра, есть свои селекторы, для файла стилей css.

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

Выбор селектора на прямую зависит от выбора параметров, для миниатюры.

Автоматическое назначение миниатюры wordpress и вывод ее в анонсе статьи.

А как быть, если на сайте довольно внушительный список контента и задавать миниатюру вручную, будет довольно проблематично. Для этого мы можем использовать другую функцию, которая автоматически будет создавать мини картинку из первого изображения статьи. Для этого, в файле functions.php, после ?> добавим функцию:

<?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];

 return $first_img;
}
?>

Теперь, чтобы вывести миниатюру в анонсе статьи, то есть на главной, открываем файл index.php или loop.php и добавляем код с функцией вывода миниатюры (функцию из предыдущего примера можно удалить), в то же место, что и при стандартном выводе:

<img title="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" />

Теперь, немного разберемся, из чего состоит данный код.

  • 1. Тег <img> — собственно именно этот тег и будет выводить картинку, так как сама функция только выдергивает ссылку на первое изображение из поста.
  • 2. title="<?php the_title(); ?>" — тайтл (заголовок) изображения, который можно увидеть при наведении курсора на миниатюру записи wordpress.
  • 3. src="<?php echo catch_that_image(); ?>" — ссылка на изображение, которое будет выводиться. Как можно заметить, именно здесь находится функция, которая и отвечает за ссылку на мини картинку.
  • 4. alt="<?php the_title(); ?>" — альтернативный текст изображения. В случаях, когда в браузере отключена загрузка изображений, будет появляться alt, как бы описывая, что здесь должно быть за изображение.
  • 5. width="150" — задается ширина миниатюры. В данном случае изображение будет уменьшаться прямо пропорционально, ориентируясь на указанную ширину.

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

<?php the_content(); ?>

А чтобы данная ошибка исчезла, достаточно заменить его, на:

<?php the_excerpt(); ?>

После этого, данная проблема должна исчезнуть.

Последнее, что мы можем сделать сегодня, это сделать миниатюру wordpress, ссылкой. Для этого, просто обернем код тегом <a> с ссылкой на статью:

<a href="<?php the_permalink(); ?>" ><img title="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" /></a>

По использованию миниатюры wordpress в анонсе статьи, в принципе все. Но ведь нам еще может понадобится оформить внешний вид картинки, с помощью файла style.css. Возможно, у некоторых возникнет проблема, связанная с тем, какие селекторы использовать, для оформления.

Для оформления мини картинки, выводимой данным способом, можно просто добавить класс для тега <img>. Например, чтобы код выглядел так:

<a href="<?php the_permalink(); ?>" ><img class="mini" title="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" /></a>

Здесь мы добавили класс mini, который выглядит так: class="mini". Вы можете добавить любой другой. После данной манипуляции, стили для миниатюры можно будет прописать вот так:

img.mini{
здесь стили миниатюры
}

Вот и все. Теперь вы сможете подключить поддержку миниатюр к вашему шаблону и использовать их, для вывода анонсов статей. А также, оформить миниатюры wordpress по своему желанию.

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

У меня на этом все. Удачи!

Оставьте свой коммент
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом

Ознакомьтесь с условиями хранения ваших данных

Комментарии

  1. Ольга

    Здравствуйте. Уже второй день не могу решить проблему с отображением миниатюр. Когда задаю изображение для записи в редакторе, появляется картинка в анонсе статьи в рубрике (что мне нужно) и еще ненужный дубликат миниатюры в самом посте. Пробовала убирать функцию вызова миниатюр в файле content-single.php, и даже в файле functions, но миниатюра все равно отображается в самой записи, как убрать ее не знаю. Помогите пожалуйста решить эту проблему.

    7 месяцев назад11.02.2017 Ответить
    • Михаил Веб

      Здравствуйте.
      Если я не ошибаюсь в статье или в комментариях был ответ на вопрос по дублированию

      4 месяца назад13.05.2017 Ответить
  2. Михаил Веб

    @ Галина:
    Здравствуйте.
    Искать нужно там же — в файле стилей CSS, но селектор не обязательно должен быть thumbail.
    Посмотрите вот эту статью: http://sdelaemblog.ru/cvet-shrifta-na-sajte-html/ По ее аналогии сможете определить необходимый селектор

    2 года назад11.11.2015 Ответить
  3. Михаил Веб

    @ Денис:
    Здравствуйте. Это смотрите в файле со стилями CSS

    2 года назад11.11.2015 Ответить
  4. Галина

    Добрый день!

    У меня вордпресс поддерживает вывод миниатюры. И тема penscratch.1.0.3 поддерживает вывод миниатюры.

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

    Я попробовала найти в файле стилей css класс thumbnail чтобы скорректировать — уменьшить размер картинки и сделать обтекание, но не нашелся этот класс в моем стиле.

    Посоветуйте что сделать, если миниатюра выводится темой, но не так как хочется — трудно подобрать такие большие горизонтальные картинки.

    2 года назад09.11.2015 Ответить
  5. Денис

    @ Михаил Веб:
    Проблему решил с помощью вашего кода

    <a href="" title=""> добавил в него ('thumbnail', array('class' => 'attachment-extra-featured-image wp-post-image') и получившийся код<a href="" title=""> 'attachment-extra-featured-image wp-post-image')); ?>

    добавил в индекс.рнр миниатюры отображаются как нужно единственное миниатюра выводится в плотную к кнопке реад море, не подскажите как можно разделить их чтобы кнопка находилась ниже миниатюры (разделить их по вертикали)?

    2 года назад07.11.2015 Ответить
  6. Михаил Веб

    @ Денис:
    Здравствуйте.
    Код не понятен, возможно был вырезан частично движком.
    Советую посмотреть настройки используемой темы, если таковые имеются.
    Или использовать инструкции из этой статьи, тогда все будет работать точно.

    2 года назад05.11.2015 Ответить
  7. Денис

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

    // This theme uses post thumbnails
    	add_theme_support( 'post-thumbnails' );
    	add_image_size( 'extra-featured-image', 620, 200, true );
    	function zbench_featured_content($content) {
    		if (is_home() || is_archive()) {
    			the_post_thumbnail( 'extra-featured-image' );
    		}
    		return $content;
    	}
    	add_filter( 'the_content', 'zbench_featured_content',1 );
    	function zbench_post_image_html( $html, $post_id, $post_image_id ) {
    		if ($html)
    			$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '" rel="nofollow">' . $html . '</a>';
    		return $html;
    	}
    	add_filter( 'post_thumbnail_html', 'zbench_post_image_html', 10, 3 );  мой индекс.рнр 
    
    
    	
    	
    		
    			 1) $archive_title=' - '.sprintf(__('Page %s','zbench'),$paged).''; ?>
    			 
    		
    	
    	
    	
    	<div  id="post-"><!-- post div -->
    		<h2 class="title"><a href="" title=""></a>
    		
    			
    			
    		
    		
    		
    		
    
    		<!-- END entry -->
    
    	<!-- END post -->
    	
    
    	
    		
    		
    		
    			
    			
    			
    				
    				<a href=""></a>
    				
    			
    			
    			
    		<!--entry-->
    	<!--post-->
    
    max_num_pages;
    	if ( $total_pages > 1 ) {
    		echo '';
    			posts_nav_link(' | ', __('« Previous page','zbench'), __('Next page »','zbench'));
    		echo '';
    	}
    }
    ?>
    <!--content-->
    
    
    2 года назад26.10.2015 Ответить
  8. Михаил Веб

    @ Дмитрий:
    Здравствуйте.
    В статье и так должно быть обычное изображение. Если у вас автоматически ставится в статью миниатюра, попробуйте добавить изображение не только, как миниатюру, а добавить ту же картинку в саму статью с помощью редактора wordpress. Все должно работать в таком случае.

    2 года назад23.05.2015 Ответить

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

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

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: