RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Окт
7

Как добавить миниатюру к записи

Добрый день уважаемые пользователи блога Золотой серфер. Сегодня по многочисленным просьбам я расскажу вам,  как очень просто добавить миниатюру к записи для cms wordpress.

Миниатюра к записи wordpress для темы Twenty Eleven.

По умолчанию, в только что установленной cms  wordpress, стоит  тема Twenty Eleven. При добавлении новой записи имеется такая опция как: «выбрать миниатюру записи». Она может быть расположена у вас справа или как у меня снизу под окном редактирования — это зависит от настроек экрана.

 

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

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

Первым делом нам нужно внести изменения в файл content.php. Для этого идем в «Внешний вид->Редактор-> content.php». Находим код :

<div class="entry-content">

После которого вставляем код для отображения нашей миниатюры:

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

>Где 1-ая строка отвечает за то, чтобы по щелчку на картинку можно было бы перейти на статью. А вот 2-ая строка как раз и вставляет нашу картинку-миниатюру. Обновляем файл content.php, чтобы изменения вступили в силу. После сделанных исправлений на главной появится долгожданная миниатюра.

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

Давайте это сделаем, воспользовавшись свойствами CSS.

Идем в «Внешний вид->Редактор» и в файле style.css в самом конце добавляем следующий код:

img.attachment-thumbnail {float: left;
margin-right: 10px;
}

Код этого правила означает, что каждое изображение с классом attachment-thumbnail будет обтекаться текстом справа и отступ от текста будет 10px. После внесения изменений снова идем на главную страницу своего блога и обновляемся. Возможно придется несколько раз обновиться, так как стили обновляются не сразу. В результате мы можем убедиться в том, что добились чего хотели.

Миниатюра к записи для темы Twenty Ten.

Теперь мы рассмотрим как сделать миниатюру к записи для стандартной темы Twenty Ten, поскольку многие используют именно эту тему.

В этой теме отсутствует файл content.php его аналогом является файл loop.php, поэтому редактировать мы будем именно этот файл.

Открываем файл loop.php, после строки:

<div class="entry-summary">

вставляем следующий код:

<?php if  ( function_exists ("has_post_thumbnail") && has_post_thumbnail
() ) { the_post_thumbnail (array (300,100), array ("class" => "alignleft
post_thumbnail")); } ?>

Где, array (300,100) означает размер отображаемой миниатюры в пикселях, можете изменить эти значения на свое усмотрение.
Обращаю Ваше внимание, что строк <div class=»entry-summary»> в этом файле две, поэтому после второй такой строки предыдущий код также нужно прописать и сохранить изменения.

Теперь нужно найти строчки:

<?php if ( is_archive () || is_search () )

их тоже две и заменить на следующую:

<?php if ( is_archive () || is_search () || is_front_page () )

Чтобы с миниатюры была ссылка на статью используем следующий код:

<a href="<?php the_permalink() ?>" class="thumb"><?php if ( function_exists ("has_post_thumbnail") && has_post_thumbnail
() ) { the_post_thumbnail (array (300,300), array ("class" => "alignleft
post_thumbnail")); } ?></a>

Кстати, на всякий случай скажу, что при загрузке новой картинки на блог, автоматичеки создаются еще три копии картинки: миниатюра, уменьшенная копия до средних размеров и крупная копия. Так что не удивляйтесь, если вы обнаружили обрезанные края у миниатюры и, сняв галочку »Обрезать миниатюру точно по размерам», не увидите изменений. Миниатюра у уже залитой на сайт картинки не изменится. Картинку придется перезаливать снова, чтобы создалась пропорцианальная миниатюра.

Получай первым обновления блога!

Введите Ваш e-mail:


Комментарии (4) на “Как добавить миниатюру к записи”

  • Александра Воронова (1 коммент.) 25 Ноябрь 2012 в 4:54

    Здравствуйте, уважаемый автор! Вы меня простите, если я буду не совсем объективна, но мне кажется что статья не отображает полной картины. Например, на моей теме я столкнулась с проблемой: я устанавливаю картинку как миниатюру, и в результате в статье у меня появляется 2 одинаковых картинки. Разумеется, я потом убираю вторую картинку. И вот я хотела разобраться: что такое вообще миниатюра, почему у меня так. К сожалению, на вашей статье я нашла еще много чего интересного, но не конкретно то, что искала. С уважением, Воронова А.

    • CMSONY
      CMSONY (172 коммент.) 25 Ноябрь 2012 в 6:03

      Александра, рассмотреть вопрос установки миниатюры к записи для каждой конкретной темы wordpress — это просто невозможно (их очень большое кол-во). Я рассмотрел этот вопрос для самых популярных тем: Twenty Eleven и Twenty Ten. Если данная методика добавления миниатюры к записи не подходит для вашей темы или что-то не получается опишите проблему полностью, я попробую Вам помочь.

  • Дмитрий (9 коммент.) 26 Июнь 2015 в 23:40

    Спасибо за разъяснение, все четко, все работает. есть одно но, где вставить этот код:

    <a href="» class=»thumb»> «alignleft post_thumbnail»)); } ?>

  • Delalpapa (1 коммент.) 5 Август 2016 в 16:24

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

Оставить комментарий


вверх