Вывод превью-картинок на главной wordpress

Приветствую.

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

По сути тут нет ничего сложного, всего несколько движений мышкой.

Сегодня, помимо текстового руководства, я еще сделал видео, для наглядности. Кому-то проще понять по тексту, а кому-то по видео.

Ну что, начнем?!

Заходим в админ панель блога, выбираем в меню «Внешний вид» -> «Редактор». Далее находим страницу «Функции темы» (functions.php) и открываем. Опускаемся в самый низ и вставляем следующий код:

1
2
<?php if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' ); ?>
<?php if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' ); ?>

Сохраняем. Затем находим и открываем страницу «Основной шаблон» (index.php) находим где выводится текст анонса записи, код:

1
<?php the_content ?>
<?php the_content ?>

либо

1
<?php the_excerpt(); ?>
<?php the_excerpt(); ?>

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

1
<?php the_post_thumbnail(array( 80,80 ), array( 'class' => 'alignleft' )); ?>
<?php the_post_thumbnail(array( 80,80 ), array( 'class' => 'alignleft' )); ?>

Поясняю: 80,80 — это размеры картинки, которая будет выводится; ‘class’ => ‘alignleft’ — это значит, что картинка будет выводится слева от анонса текста

Сохраняемся. Вот и все.

Сейчас идем в нашу созданную запись (либо создаем новую) и справа внизу мы видим пункт «Миниатюра записи», кликаем ссылку «Задать миниатюру» и выбираем нужную нам картинку. Обновляем (публикуем) запись.

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

P.S. если вам необходимо выводить превью-картинки не только на главной, но и на странице категории, архивов и т.д. — просто вставьте последний код в соответствующие страницы.

Для закрепления смотрите видео (делал на своем блоге):

Что-то не понятно? Спрашивайте, помогу.

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

Читайте также:

Я в сети:

Подпишитесь на обновление сайта по почте:

Google+ подборка иконок Тема для блога фотографа
22 Responses to Вывод превью-картинок на главной wordpress
  1. JIeHuH Ответить

    Скажите название трека пожалуйста который играет в видео

  2. Гульнур Ответить

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

    • Александр Ответить

      Ваш сайт не работает, а надо бы его посмотреть.

  3. Гульнур Ответить

    Спасибо ,за быстрый ответ.Но все сделала сама.Еще бы хотелось ,чтобы текст анонсов был по равнее и выделить его жирным и еще не могу вставить «подробнее» или там читать дальше. Тэг more вставляла Не моможете?

    • Александр Ответить

      Код php для читать далее:
      < ?php the_content('Читать далее...'); ?>
      текст можно изменить на любой необходимый.
      как я увидел у тебя анонсы выводятся при помощи < ?php the_excerpt(); ?> его надо заменить тем что я написал выше.

  4. Гульнур Ответить

    В шаблоне index hhp?

  5. Ал Са Ответить

    Саша, а как выводить превью миниатюр последних статей из РАЗНЫХ категорий на одной главной, подскажи пожалуйста, если знаешь.

    • Александр Ответить

      Тебе необходимо выводить лишь превью картинки из разных рубрик без текста??

    • Александр Ответить

      Ведь у тебя на сайте deyctvie.ru такое реализовано, посмотри index.php как там и что… Если честно, давно такое не делал, сразу не вспомню.

      P.S. если поделишься методом, буду благодарен.

  6. Олег Ответить

    А что посоветуете, если картинки к постам, которые тянутся с RSS не отображаются в превью на главной? Спасибо за инфо.

  7. юлия Ответить

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

    • Александр Ответить

      Я Александр ;)

      Что бы увеличить расстояние вам необходимо прописать стили к этой картинки. Для этого необходимо в css файл шаблона прописать:

      img.alignleft {

      float: left;

      border: 1px solid #000;
      padding: 5 px
      }

      в данном примере картинка будет отображаться слева, обводка черная в 1px, и отступ от нее в 5px

      • юлия Ответить

        Ой-йой, Александр, извините, так неудобно получилось(((( Большое спасибо за совет :)

        • Александр Ответить

          Юлия, до все нормально! :-) Обращайтесь если будут вопросы

  8. Марина Ответить

    Добрый день!
    Ни в какую не выводится картинка на главной :) Я новичек и все пока что пробую на Denwer. Сначала не могла добавит строки в «Функции темы
    (functions.php)» — каждый раз, когда добавляла все шло иероглифами какими-то и приходилось заменять файл. Потом уже открыла файл в notepad2 и там получилось добавить.
    В файлы «index» и «archive» строчка добавилась без проблем. Когда создаю запись вижу справа «Миниатюра записи», могу добавить картинку, но на главной так ничего и не отображается

    • Александр Ответить

      Марина, вы используете обычный шаблон?

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

      • Марина Ответить

        Спасибо Александр, видимо в этом все и дело :) Я как новичок пока еще не очень знаю какие шаблоны обычные, а какие нет..Буду изучать дальше :)

        • Александр Ответить

          Не за что, обращайтесь

  9. Ольга Ответить

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

    • Александр Ответить

      Вы наверное случайно удалили код который выводит текст
      < ?php the_content ?> или < ?php the_excerpt(); ?>

Добавить комментарий

Your email address will not be published. Please enter your name, email and a comment.

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">