Использование миниатюр на главной странице без плагина

Главная » Создание блога » Обходимся без плагинов » Использование миниатюр. Как вывести миниатюры на главной странице

Использование миниатюр. Как вывести миниатюры на главной странице

2014-01-12 автор: Виталий Кириллов

Всем привет! В последнее время получается так, что на seo-mayak.com я публикую статьи на темы, которые попросили осветить мои читатели. Этот пост как раз из данной серии и называется серия — использование миниатюр в WordPress.

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

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

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

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

А вы знаете, что означает слово миниатюра? Слово «Миниатюра» произошло от латинского «minium», что означает — «красные краски», которые применяли в росписи древних книг.

ispol'zovanie miniatyur na glavnoy

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

Примечание! По умолчанию функция использования миниатюр в WordPress неактивна и ее надо включать.

Как включать миниатюры в WordPress, я описывал здесь.

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

Выводим миниатюры с заголовками на главной в несколько рядов

Начнем с вывода миниатюр в несколько рядов. Должно получится что-то наподобие каталога товаров в интернет магазине. Именно с такой просьбой обратился ко мне вышеупомянутый веб-мастер и пусть данный пост будет моим ответом.

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

Дело в том, что по-умолчанию в WordPress размеры для миниатюр установлены 150х150 пикселей, т.е. если изображение, к примеру 450х333 пикселей, то при создании миниатюры края просто обрезаются.

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

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

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

Итак, вроде все сказал, всех предупредил, давайте теперь преступим непосредственно к реализации.

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

<div class="home_page">
 <ul>
   <?php query_posts('showposts=8'); ?>
   <?php while (have_posts()) : the_post(); ?>
    <li><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
    <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
   <?php endwhile; ?>
 </ul>
</div>

Далее, в файле style.css прописываем стили для класса .home_page:

.home_page li{          /* стили для элементов списка */
  float: left;          /* миниатюры располагаются слева от соседней */
  height: 230px;        /* высота ячейки с миниатюрой и заголовком */
  width: 150px;         /* ширина ячейки */
  margin: 5px 10px 0 0; /* внешние отступы сверху и справа от ячейки */    
  overflow:hidden;      /* скрываем все что не поместилось в ячейку */
}
.home_page {      /* общие стили для блока */
  width: 99%;     /* общая ширина блока */
  margin: 0 auto; /* внешние отступы сверху и снизу, а также выравнивание по центру */
} 
.home_page img{
  /* здесь можно задать отдельные стили для миниатюр */
}
.home_page a{
  /* здесь можно задать отдельные стили для ссылок */
}

После чего получаем следующий результат:

ispol'zovanie miniatyur

Как видите, я вывел миниатюры на главной странице в 2 ряда по 4 картинки. Можно сделать хоть 10 рядов, все зависит от поставленной задачи.

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

Допустим надо, чтобы рядов было 5. Не вопрос! Для этого нам потребуется внести изменения в один участок кода, а именно:

<?php query_posts('showposts=8'); ?>

Где цифра 8 — это количество выводимых миниатюр.

Количество выводимых миниатюр в одном ряду, напрямую зависит от их размера. У меня на ширину страницы влезло четыре миниатюры, т.е. сколько помещается в один ряд, столько и выводиться.

Ну раз у меня влезло 4 миниатюры, то для того, чтобы было 5 рядов, меняю цифру 8 на 20. Вот такая несложная арифметика.

Не уверен, что у новичков с первого раза так все просто возьмет и получиться. Придется изрядно повозиться со стилями прежде, чем миниатюры встанут как надо, но без этого не стать настоящим веб-МАСТЕРОМ. Для облегчения собственного труда, советую научиться пользоваться расширением для браузерf Firebug.

Идем дальше. В коде, приведенном мой выше, миниатюры берутся из последних опубликованных постов по-порядку, но товарищ, что обратился ко мне за помощью, просил написать код, который бы выводил миниатюры с определенной рубрики. Пожалуйста! Берем тот же участок кода и добавляем вызов из категории по id. Выглядеть это будет так:

<?php query_posts('cat=133&showposts=8'); ?>

Где 133 и есть id категории. Читайте здесь, как определять id категории, страницы или записи.

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

<?php the_post_thumbnail('thumbnail'); ?>

Здесь изменяем размеры миниатюр следующим образом:

<?php the_post_thumbnail(array(138,120)); ?>

Где 138,120 — новые размеры миниатюр. Но учтите, изменяя размеры изображений, мы нагружаем сервер.

Как вывести миниатюры с анонсами постов на главной странице

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

Для этого нам потребуется следующий код, который также надо вставить в файл index.php:

<div class="home_page">
 <?php query_posts('showposts=5'); ?>
 <?php while (have_posts()) : the_post(); ?>
  <table>
     <tr>
       <td><a onclick="return !window.open(this.href)" href="<?php the_permalink()?>"><?php the_post_thumbnail('thumbnail');?><?php the_title();?></br></a>
  <p><?php the_content_rss('', FALSE, '', 50); ?><a href="<?php the_permalink() ?>" title="читать запись полностью <?php the_title_attribute(); ?>" style="color:#5191df; float:right; margin-top:10px; font-size:12px">Читать полностью &raquo;</a></p>
       </td>
     </tr>
   </table>
 <?php endwhile; ?>
</div>

В файл style.css вставляем следующее:

.home_page {   /* общие стили для блока */
 margin: 20px 0 0 20px;    /* внешние отступы */
}
.home_page a{        /* стили для ссылок-заголовков */  
 font-weight: bold;  /* выделение ссылки жирным */
 text-align: left;   /* прижимаем текст к левому краю */
 margin-left: 20px;  /* отступ от левого края */
 font-size:16px;     /* размер шрифта*/
}
.home_page img{  /* стили для миниатюр */
 float: left;    /* обтекание текста по левому краю */
 margin:10px;    /* внешние отступы */
 }
.home_page table {                  /* стили для таблицы */
 border-bottom: 1px solid #f2f2f2;  /* черта по верхнему краю ячейки */
}

Также в самом коде прописаны стили для ссылки «Читать полностью»:

style="color:#5191df; float:right; margin-top:10px; font-size:12px"

Где:

color:#5191df; — цвет ссылки.
float:right; — расположение ссылки по правому краю.
font-size:12px — размер шрифта

Наверное Вы заметили, что в данном варианте кода я не использовал элементы списка, а за основу взял структуру html таблицы.

В принципе коды очень схожи, но визуальная разница конечна огромна:

ispol'zovanie miniatyur1

В данном варианте анонсы выводятся с помощью тега the_content_rss, который применяется для отображения фида на сайте. Тег the_content_rss не учитывает тег more и обрезание текста происходит по количеству символов. Например:

<?php the_content_rss('', FALSE, '', 50); ?>

Где 50 — количество символов.

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

Не примените подписаться на обновления блога и наверняка узнаете много нового и интересного.

На сегодня у меня все. Если что непонятно, в самом низу страницы есть форма комментариев.

В наступившем году постараюсь писать почаще.

До встречи!

С уважением, Виталий Кириллов

Интересное на блоге

Комментарии: 128

Александр:

2015-08-22

Добрый вечер Виталий! мне нужно что бы в категории с подкатегориями выводилась ссылка вот код, сократил число миниатюр до 3 и нужно сделать дальше ссылку, подкатегорий несколько

Ответить

Виталий Кириллов:

2015-08-23

Александр, если я Вас правильно понял, то вывести ссылки в заголовках подкатегорий можно так:

<?php
$cat_args=array(
'child_of' => 14,
'orderby' => 'name',
'order' => 'ASC'
);
$categories=get_categories($cat_args);
foreach($categories as $category) {
$args=array(
'showposts' => -1,
'category__in' => array($category->term_id),
'caller_get_posts'=>1
);
$posts=get_posts($args);
if ($posts) {
echo '<h3><a href="'. get_category_link( $category->term_id ).'">'.$category->name.'</a></h3> ';
foreach($posts as $post) {
setup_postdata($post); 
?>
<ul>
<li> 
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(80,70)); ?></a>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><br/>
</li>
</ul>
<?php
} 
} 
} 
?>

Ответить