Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Анонс с миниатюрами на главной странице wordpress блога

Приветствую вас уважаемые веб-мастера! Сегодня на «Progress-project» мы с вами будем говорить о том, как вывести миниатюры на главной страницы вашего сайта или блога wordpress, без применения каких либо спец-плагинов, так же подробно рассмотрим функцию the_post_thumbnail(), отвечающую за вывод изображений необходимого нам размера в том числе и самих миниатюр в зависимости от указанных в ней параметров и плюс ко всему сегодня я приведу вам уже готовый вариант кода вывода миниатюр с анонсом на главной странице или страничек категорий либо же меток по примеру «Прогресс-проект».

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

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

the_post_thumbnail() — функция вывода изображений

the_post_thumbnail() работает исключительно внутри wordpress циклов на основе get_the_post_thumbnail() и с тем условием, что в ней в отличии от последней не получится вывести миниатюру только через id странички либо записи, то есть миниатюра может браться только из имеющихся в статье изображений.

В параметрах данной функции мы можем задать необходимый размер выводимой картинки, например:

full — исходная картинка;
large — крупное изображение;
medium — среднее;
thumbnail — миниатюра.

То есть просто указываем нужный размер картинки в параметрах функции:

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

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

Дело в том, что все размеры картинок указанные мной выше генерируются в wordpress одновременно с загрузкой основной, то есть при каждой очередной новой загрузки изображения, cms автоматически создаёт три её копии, но уже совершенно разных размеров и если вы уже имеете на своём ресурсе несколько записей с изображениями и при этом не меняли настройки заданные по умолчанию, то теперь надумав их изменить изображения выводимые функцией the_post_thumbnail() в уже имеющихся постах скорее всего будут обрезанными.

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

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

Чтобы указать в функции необходимый размер картинки выводимой в качестве миниатюры просто прописываем их в функции:

<?php the_post_thumbnail(array(160,160)); ?>

То есть 160,160 и будет новым размером ваших миниатюр.

Так же в the_post_thumbnail(), мы с вами можем задать отдельный класс стилей css для улучшения внешнего вида миниатюр:

<?php the_post_thumbnail('thumbnail', array('class' => 'miniatyury')); ?>

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

.miniatyury {
 background: #fff; /* фон */
 border: 2px solid #5FB701; /* рамка */
 border-radius: 8px; /* радиус закругления углов */
 float: left; /* выравнивание по левому краю */
 height: 166px; /* высота миниатюры */
 width: 260px; /* ширина миниатюры */
 margin-bottom: 5px; /* внешний отступ снизу */
 margin-right: 15px; /* внешний отступ справа */
 padding: 0 0 0 5px; /* внутренние отступы */ 
}

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

Выводим миниатюру в анонс главной странице

Для главной страницы wordpress открываем файл темы; index.php, для категорий category.php, за вывод архивов обычно отвечает файл archive.php; а за метки tag.php.

Теперь здесь определяем строку выводящую заголовок, обычно она заключена в теги h1 или h2, например у меня она выглядит так:

<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

Сразу после неё вставляем:

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

Если вы не желаете, чтобы ваша миниатюра являлась дополнительно ещё и ссылкой, просто пропишите вот так:

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

Проделываем данную процедуру во всех файлах приведёнными мной выше, где нужно вывести анонс с миниатюрами, попутно при необходимости прописываем класс стилей либо меняем размер изображений на свой.

Думаю многим новичкам будет немного сложновато во всём сразу же разобраться, поэтому теперь, как я и обещал в самом начале давайте я приведу вам уже готовый вариант кода вывода анонсов с миниатюрами на главной странице, который также применяется на «Progress-project».

Код выводящий анонс с миниатюрами на главной странице wordpress

Итак открываем файл темы index.php, определяем необходимое место и вставляем следующий html код:

<div class="home_page">
 <?php if (have_posts()) : ?>
 <?php query_posts(array( 'showposts=5','paged' => get_query_var('paged')));?>
 <?php while (have_posts()) : the_post(); ?>
 <table>
 <tr>
 <td>
 <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, '', 60); ?><a class="alinks" href="<?php the_permalink() ?>" title="читать запись полностью <?php the_title_attribute(); ?>" >Читать полностью &raquo;</a></p>
 </td>
 </tr>
 </table>
 <?php endwhile; ?>
</div>

В некоторых темах данный код прекрасно работает и в таком виде:

<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, '', 60); ?><a class="alinks" href="<?php the_permalink() ?>" title="читать запись полностью <?php the_title_attribute(); ?>" >Читать полностью &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; /* черта по верхнему краю */
}
.alinks { /* стили для ссылки (Читать полностью) */
color:#5191df; /* цвет ссылки */
float:right; /* расположение по правому краю*/
margin-top:10px; /* верхний отступ */
font-size:12px; /* размер текста */
}

Редактируем стили под свой дизайн и незабываем сохранять изменения.

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

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

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

Далее уже при редактировании, если у вас вывод анонса производится с помощью the_content(), то тег <!—more—> вставляем обязательно до первой картинки. Про данный тег мы с вами подробно поговорим уже в одной из следующих статей, поэтому обязательно подпишитесь на обновления, чтобы не пропустить.

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

Также можно вообще сделать, что то похожее на каталог интернет магазина выводя только миниатюры и заголовки постов:

Код в index.php в этом случае необходим такой:

<div class="home_page">
 <ul>
 <?php if (have_posts()) : ?>
 <?php query_posts(array( 'showposts=8','paged' => get_query_var('paged')));?>
 <?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>

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

<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>

Стили css в данном случае будут следующего вида:

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

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

На сегодня у меня всё, надеюсь, что статья вам была полезна, желаю всего доброго до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-06-12

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly.ru(4)
Иван(3)
Олег(3)
Николай(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог