Лучшие записи с автоматической генерацией миниатюр и анонсов

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

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

Для начала создадим у себя в блоге рубрику best — и все статьи, которые будут в рубрике как раз и будут попадать в этот блок. Теперь вставим в сайдбар такой код

 <?php $my_query = new WP_Query('category_name=best&showposts=3');
 while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="thumbnail-featured"><a href="<?php the_permalink() ?>"><img height="60" width="60" style="border: none;" alt="<?php the_title(); ?>" src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo catch_that_image() ?>&amp;h=60&amp;w=60&amp;zc=1" /></a></div>
<div id="featured-content">
  <h3 class="best-titles"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
  <div class="postf"><?php the_content_limit(70, ""); ?></div>
</div>
<?php endwhile; ?>

Теперь нужно объяснить, так как в этом коде используется сразу несколько техник.

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

showposts=3 — здесь указываем кол-во статей, которые будут в блоке.

Далее идет вывод картинки с авторесайзом. Причем здесь я вставил интересную функцию.

<?php echo catch_that_image() ?>

Раньше я все миниатюрки загружал вручную, но потом мне надоело делать это постоянно и я начал использовать функцию, которая вытягивает первую картинку с самой статьи. Чтобы это сделать, нужно добавить в 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 = "default.jpg";
  }
  return $first_img;
}

Как вывести картинку разобрались, но как сделать авторесайз? Просто, скачайте файлик с гугла и закиньте его в папку темы. Вот и все. Сделав эти 2 шага, код

<img height="60" width="60" style="border: none;" alt="<?php the_title(); ?>" src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo catch_that_image() ?>&amp;h=60&amp;w=60&amp;zc=1" />

начнет работать. &h=60&w=60&zc=1 — здесь указывается высота и ширина до которой делать ресайз, а также зумировать картинку или нет. Если зумировать не нужно, то ставьте zc=0

Далее, выводится тайтл статьи и анонс с автоматической генерацией по кл-ву символов. Генерация делается просто

<?php the_content_limit(70, ""); ?>

Чтобы эта функция заработала нужно в functions.php добавить

function the_content_limit($max_char, $more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
    $content = get_the_content($more_link_text, $stripteaser, $more_file);
    $content = apply_filters('the_content', $content);
    $content = str_replace(']]>', ']]>', $content);
    $content = strip_tags($content);

   if (strlen($_GET['p']) > 0) {
      echo "<div>";
      echo $content;
      echo "</div>";
   }
   else if ((strlen($content)>$max_char) && ($espacio = strpos($content, " ", $max_char ))) {
        $content = substr($content, 0, $espacio);
        $content = $content;
        echo "<div>";
        echo $content;
        echo "...";
        echo "</div>";
   }
   else {
      echo "<div>";
      echo $content;
      echo "</div>";
   }
}

Вот и все, теперь оформим только внешний вид. Вставим в css вашей темы такой код

.thumbnail-featured {
    border: 1px solid #E4E4E4;
    float: left;
    height: 60px;
    padding: 2px;
    width: 60px;
}
#featured-content {
    float: right;
    margin-right: 5px;
    width: 170px; /*тут может быть другая ширина в зависимости от ширины сайдбара*/
}
.best-titles {
    font-size: 12px;
    margin-bottom: 5px;
    margin-top: 0;
}
.postf {
    border-bottom: 1px dashed #CCCCCC;
    font-size: 11px;
    margin-top: 0;
    padding-bottom: 5px;
}

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

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

 

Похожие статьи:

• Кастомизируемая логин панель на wordpress
• Работа с миниатюрами в MODX — автоматический ресайз
• Похожие записи без плагина