Украшаем боковую панель превью

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

Как добавить превью к последним записям в боковой панели

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

Первым делом качаем scripts.zip. Этот архив содержит папку scripts, в которой находятся файл timthumb.php, отвечающий за уменьшение и обрезку изображений, а также папка cache, в которую скрипт будет складывать созданные превью.

Распакованную папку scripts заливаем к себе на сервер. Я закинул в папку с темой, думаю Вам стоит сделать также. Папке cache в обязательном порядке выставляем полные права доступа на чтение, запись и выполнение данных, а именно 777.

Timthumb.php загружен на сервер в папку с темой

Папке cache выставляем права на запись 777

Сделали. Переходим к редактированию темы.

Сначала правке подвергнется файл 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];
 
// no image found display default image instead
if(empty($first_img)){
$first_img = " ";
}
return $first_img;
}

Прописываем эту функцию перед закрывающим ?> и сохраняем. Кстати, Вы также можете указать картинку по-умолчанию на случай отсутствия в посте картинок вообще. Для этого укажите путь к ней в строчке $first_img = » «; в блоке идущем после комментария «// no image found display default  image instead».

На очереди файл sidebar.php.

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

<ul><?php query_posts('showposts=5'); ?>
 <?php while (have_posts()) : the_post(); ?>
 <li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</li>
 <?php endwhile; ?></ul>

Нам остается добавить в функцию тег img, путь в котором будет обрабатываться через timthumb.php. Выглядит он так:

<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo catch_that_image() ?>&w=88&h=48&zc=1&q=80" alt="" />

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

<?php query_posts('showposts=5'); ?>
 <?php while (have_posts()) : the_post(); ?>
 <a href="<?php the_permalink() ?>" rel="bookmark" >
 <img style="border: 1px solid #DADBDD; padding: 4px; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; margin: 0 8px 0 0; float:left;" src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo catch_that_image() ?>&w=88&h=48&zc=1&q=80" alt="<?php the_title(); ?>" /></a>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
 <div class="clear"></div><br />
 <?php endwhile; ?>

Можете скопировать этот код, прописать его в нужном месте sidebar.php, ну и сохранить не забудьте ;). Выглядеть будет примерно так:

Последние записи в блоге с превью

Получилось?


Комментарии

45 на запись "Украшаем боковую панель превью"
  1. Не совсем понятно где и что вставлять 
    sidebar.php. Мой файл выглядит так: 

  2. Боковую панель от поисковиков закрыть можно и наверное даже нужно, она для людей, вроде как, существует, хотя и им особа не нужна 🙂

  3. Очень рад, что пост в тему пришелся 😉 Пробуйте.

  4. Без проблем, отправил. Спасибо, что читаете.

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

  6. не понял смысл, есть же плагины

  7. Т.е.? Не понял, как портиться?

  8. Спасибо большое за добрые слова!

  9. Размеры изображения меняйте в самой функции (w=88&h=48).

  10. Евгений says:

    Сергей, у меня sidebar выглядит вот так:
    ——————————-

    ——————————
     так куда в этом случае вставлять
    <img src="<?php bloginfo('template_directory')…. а так же последнюю функцию ………
    Буду очень признателен за ответ.

    • Попробуйте после Archives
              
              
              
         
      добавить Последние записи, а здесь последний код из поста

      • Евгений says:

         т.е. после добавляю
        Последние записи и далее вставляю функцию
        ……(и т.д.)
        А куда вставлять тег <img src="<?php bloginfo('template_directory')…..в таком случае?Прошу прощения за "ламерские вопросы" ("мы все учились по немного, чему-нибудь и как-нибудь"(с))

  11. mitus66 says:

    Правка файла functions.php приводит к ошибке: Parse error: syntax error, unexpected T_STRING in …/public_html/wp-content/themes/twentyeleven/functions.php on line 610

  12. Это логично, ведь была нарушена целостность темы.

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

    • Чтобы такое случилось, достаточно одну кавычку не там поставить или забыть поставить вообще, тут уж ничего не поделаешь, нужна полная концентрация и внимательность.
      Кстати, блоги от этого не умирают. Просто сливаем functions.php, удаляем в редакторе зловредные строки и заливаем назад, заменив старый functions.php. Все на самом деле просто 😉

  14. Здравствуйте. Боюсь сделать это руками будет сложно. В этом случае могу порекомендовать плагин Featured Post with thumbnail. Этот плагин делает как раз то, что требуется.

  15. Т.е. Вы хотите код, в котором могли бы указать ID записей и размещать этот код в каком-то определенном месте, например под статьями, так?

  16. В общем примерно так: 
    array( 108, 21, 63 ) ) ); ?>
     
     <a href="" rel="bookmark" >
     <img style="border: 1px solid #DADBDD; padding: 4px; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; margin: 0 8px 0 0; float:left;" src="/scripts/timthumb.php?src=&w=88&h=48&zc=1&q=80" alt="" />
     <a href="" rel="bookmark" title="">
     
     
     

    Там где 108, 21, 63 — свои ID записей.

  17. Блин. Дискус код режет. Вот код, там где ? не забываем ставить :

    ?php query_posts( array( 'post__in' => array( 108, 21, 63 ) ) ); ?
     ?php while (have_posts()) : the_post(); ?
     "тут код из статьи"
     ?php endwhile; ?
     ?php wp_reset_query() ?

    Там где 108, 21, 63 — прописываем свои ID постов. «тут код из статьи» заменить на код описанный в статье выше, это если хотите с картинками выводить.

  18. Дмитрий says:

    Не отображаются картинки почему то. md-blog.ru
    В чём может быть причина?

    • Попробуйте на папку cache в папке themes/wpcatalogue_v2/scripts права на запись поставить, например 755. С меньшими у меня на одном блоге не запускались картинки также, как у Вас сейчас.

      • Дмитрий says:

        Поставил 755, результат не поменялся, что бы можно ещё сделать :/ Причём почему то по длине картинки разными выводятся…

      • Дмитрий says:

        Сергей, сносить? Нет предположений как исправить?

        • Сложно определить неисправность не наблюдая «изнутри».
          Смотрю, картинки на поддомене живут? Может в этом дело…

          • Дмитрий says:

            Да, картинки на поддомене, кстати давно хотел вернуть всё обратно, прироста скорости я не заметил всё равно…

          • Дмитрий says:

            Проблема была именно в этом, исправил, теперь всё нормально 😉 Спасибо.

  19. cpentyc says:

    http://konservov.net/pervye-blyuda/gribnojj-sup-pyure-iz-shampinonov.html Посмотрите у меня некоторые привью не отображаются

  20. Наталья says:

    Здравствуйте! Простите пожалуйста, а можно ли вывести в горизонтальном виде — для футера? К сожалению, я не очень разбираюсь в кодах, была бы очень признательна, если бы вы подсказали как изменить код

  21. Александр says:

    Получил следующий результат, так как не во всех постах есть картинки, а дефолтный путь не указал.

    Вопрос в следующем, как заставить скрипт брать не первую картинку поста а «post thumbnail»?

Спасибо, что оставили свой комментарий

banner