Вы забрели на блог Вебмастерицы


Я не "рублю бабло" - я просто зарабатываю в интернете.

Впервые на блоге и не знаете SEO-терминов? Тогда проходите в мой SEO-словарь!

07 Июн 2011

Как настроить вывод превью-картинок в анонсах на WordPress

как настроить вывод превью-картинок в вордпрессСегодня увидела на форуме вебледи, что sonehka просит помощи: не выводятся картинки к анонсам. Помнится, несколькими днями ранее я помогала еще одному человеку =) с анонсами… И подумалось мне, что тема-то насущная. Видимо, многим полезно будет узнать, как настроить вывод превью-картинок в анонсах на WordPress.

Выводить мы из будем с помощью встроенных средств самого Вордпресса, никаких плагинов. Работает для WordPress 2.9 и выше.

Как настроить вывод превью-картинок: инструкция

1. Заходим в админку. Переходим в Дизайн >> Редактор.
как сделать превью к анонсам на вордпресс

2. Смотрим в правый «сайдбар», там выбираем из файлов шаблона «Функции | functions.php».
картинки к анонсам на вордпресс

3. Теперь вставляем в конец файла следующий код:

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

4. Сохраняем изменения:
картинки на главной вордпресс

Должна появиться вот такая надпись:
вывод превью вордпресс

На этом самая простая часть закончена. А вот следующее будет сделать новичкам чуть сложнее, чем бывалым вебмастерам, знающим структуру ВП. Но ничего — справимся! :)

5. Теперь в списке файлов темы выбираем index.php, в разных версиях ВП по-русски файл называется по-разному.
картинки анонсы вордпресс

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

<?php the_content ?>

либо через

<?php the_excerpt(); ?>

Попробуйте поискать эти строчки в коде, для более быстрого поиска нажмите на клавиатуре комбинацию клавиш ctrl+F и в окошко скопируйте сначала the_content, а потом, если ничего не найдется, the_excerpt.

У меня на Вебмастерице посты выводятся с помощью the_content. Это как раз классический случай, когда выводится часть поста до тэга more. Выглядит в файле index.php этот кусок кода вот так:
вывод превью wordpress index.php
Скрин получился большой, кликните для увеличения, если не видно.

Удаляем строку с the_content (если же у вас the_excerpt — его оставляем) и вставляем следующий код:

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

Поясню:
120,120 — ширина и высота превью в пикселях.
‘class’ => ‘alignleft’ — обтекание картинки (картинка будет прижата к левому краю)

Ну а дальше нам нужно вывести текст. Если у вас уже был the_excerpt, то вы можете уже сохранять изменения. Если же был the_content, то после кода вывода превьюшки нужно вставить:

<?php the_excerpt(); ?>

То же самое нужно повторить с файлом archive.php, если он есть в файлах вашей темы Вордпресс.

Почему картинок не видно в анонсах?

Итак, вы все сделали и сохранили, но картинок в анонсах все так же нет. Это нормально, так и должно быть. Сейчас объясню, что сделать, чтобы долгожданные превьюшки наконец появились. =)

Зайдите в последнюю опубликованную статью (надеюсь, это все умеют делать и скрины тут не нужны). Если вы внимательно обследуете правый сайдбар админки, то увидите кое-что новое:
установить миниатюру wordpress
В других переводах там написано «Установить миниатюру».

Кликаете на ссылку, и он предлагает залить картинку, но если у вас уже есть картинки к статье, то можно просто зайти в Галерею:
превью wordpress

Там вы увидите список совсем маленьких превью картинок, и справа от каждой будет ссылка «показать». Выбираете нужную картинку, кликаете по ссылке. Затем прокручиваете до места, где есть кнопка «Вставить в запись». Рядом с ней вы увидите новую ссылку:
вывод превью на wordpress

Нажимаете на нее. Ждете появления надписи «Готово», после чего нужно закрыть окно загрузки картинок и обновить пост/статью.

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

Ну вот вроде бы и все. Пишите, если есть вопросы — постараюсь ответить.

ЗЫ. А вот и видео-урок от AlexGR:

Есть еще один метод вывода превью, в котором берется первая картинка в посте автоматически — читаем тут.

Понравился пост? Так поделитесь же! :)

Твитнуть
Нравится

Отзывы:

(116) на Как настроить вывод превью-картинок в анонсах на WordPress

  1. Вебмастерица
  2. Вебмастерица
  3. Вебмастерица
  4. Вебмастерица

Поболтаем о сайтиках?

Вы также можете зарегистрироваться и загрузить свою аватарку. :)


Или залогиниться, если вы уже зарегистрированы.

Полезное вебмастеру:

  • Точные апдейты Яндекса
  • Список всех аддурилок
  • Проверить домен:
    регистрация доменов
    домен RU - 99 руб
    домен РФ - 99 руб
    Зарегистрируй себе домен!
    имя: 

    2domains.ru