Миниатюры в WordPress 3.0
Раньше я писала как автоматически выводить миниатюры к записям на главной или в архивах. Теперь указать какое изображение использовать для миниатюры в WordPerss 3.0 можно напрямую.
Начнем с азов. Добавляем картинку как обычно.
По-умолчанию теперь к изображению добавляется ссылка на отдельную страницу и изображением, меняем на ссылку на саму картинку, чтобы можно было использовать такие плагины как FancyBox (очень красиво оформленная всплывающая увеличенная картинка, такой эффект используется сейчас на Apple.com).
Вставляем основную картинку в текст.
Далее переходим к добавлению самой миниатюры. Если используете новую тему Twenty Ten, у Вас справа при редактировании статьи уже есть такой блок:
Если же нет, вам нужно добавить следующий код в родной файл functions.php вашей темы:
add_action( 'after_setup_theme', 'twentyten_setup' );
if ( ! function_exists( 'twentyten_setup' ) ):
function twentyten_setup() {
add_theme_support( 'post-thumbnails' );
}
endif;
В итоге у нас вместе с виджетами должен получится такой файл functions.php
<?php
if ( function_exists('register_sidebars') )
register_sidebars(2);
add_action( 'after_setup_theme', 'twentyten_setup' );
if ( ! function_exists( 'twentyten_setup' ) ):
function twentyten_setup() {
add_theme_support( 'post-thumbnails' );
}
endif;
Добавляем код, загружаем файл на сервер, обновляем страничку редактора и видим указанный блок. Нажимаем на ссылку «Загрузить миниатюру». Во всплывающем окне выбираем, будем ли мы загружать файл миниатюры с компьютера (отличный от той картинки, которая используется в тексте), или же вставим миниатюру, сгенерированную при загрузке основной картинки. В примере я выбрала картинку из галереи.
Нажимаем «Сохранить все». Справа увидим загруженную миниатюру.
Однако на самом сайте она еще не появится. Для ее показа нужно вставить такой код в файлах index.php, archive.php, search.php, category.php (в зависимости от того, на каких страницах сайта нужно показывать миниатюры):
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(300,100), array("class" => "alignleft post_thumbnail")); } ?>
300,100 – соответственно ширина и высота нашей миниатюры, можно менять. Поскольку в WordPress нет автоматической перегенерации картинок при изменении их размеров в меню Настройки — Медиафайлы, для этих целей используется плагин Regenerate Thumbnails.
Добавляем код перед the_excerpt в цикле вывода статей, the_content соответственно не используется, потому что дополнительно будет показана полноразмерная картинка. Кстати, в functions.php новой стандартной темы Twenty Ten можно посмотреть новый фильтр для вывода анонсов, можно указать текст ссылки «Читать далее» и длину анонса.
На этом все, теперь видим на сайте миниатюру.
Обновлено 27.07.2010. Поскольку многие спрашивают как вставить миниатюры в шаблоне Twenty Ten, привожу тут инструкцию.
Открываем файл loop.php, вставляем код
<?php if ( function_exists ("has_post_thumbnail") && has_post_thumbnail
() ) { the_post_thumbnail (array (300,100), array ("class" => "alignleft
post_thumbnail")); } ?>
перед строкой 105, 133
там где:
<div class="entry-summary">
!!тут будет ваш код!!
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
Также в строках 103 и 131
там где <?php if ( is_archive () || is_search () )
нужно заменить на
<?php if ( is_archive () || is_search () || is_front_page () )
Чтобы с миниатюры была ссылка на статью используем следующий код:
</pre>
<?php if ( has_post_thumbnail() ) :?>
<a href="<?php the_permalink() ?>" class="thumb"><?php the_post_thumbnail (array (300,100), array ("class" => "alignleft post_thumbnail")); } ?>
</a>
<?php endif; ?>
Анастасия, 19 Июн 2010. Рубрика: Настройки и плагины, Разработка шаблонов. Комментарии RSS 2.0.
Вы можете оставить трекбек.
Отзывов (103) на «Миниатюры в WordPress 3.0»
Отлично разжевано...глотнул быстро) только вот такой есть вопрос относительно wp-3.0 конкретно в админке на странице создания поста почему-то не работает в правом верхнем углу «Настройки экрана» — хотя на остальных страничках все отлично выезжает и заезжает.
хелп плиз!
prodvesseo@gmail.com
Анастасия, добавил код в index.php, archive.php, search.php, category.php и ничего не появилось(
Код добавляется в конец файлов?
Владимир, нет, код добавляется перед the_content , вернее нужно поменять на the_excerpt чтобы не дублировались картинки. В статье это есть.
Анастасия, покажите, пожалуйста, наглядно,куда добавлять код. Не вижу, ни the_content, ни the_excerpt. Спасибо.
Евгений, дайте ссылку на загрузку шаблона WordPress, который Вы используете, и тогда я смогу конкретно сказать в какой строке каких файлов вставлять этот код. Или можете на е-майл blogstyle{a}yandex.ru прислать архив с шаблоном.
А куда нужно добавить код чтобы миниатюра в списке популярных записей появилась?
Мне кто нить тут ответит?
Вы вот мне покажите, где в новом шаблоне Twenty Ten есть эти the_excerpt и the_content
Владимир, поскольку Вы не первый спрашиваете, добавила в конце статьи краткую инструкцию на эту тему.
Использую тему Arras и все работает без дополнительных редакций в файлах и функциях :( Может я лох :) или стоит обновить версию ВП или другую тему использовать?
Хорошо, а как добавить миниатюру с другого сайта? В окне «Задать миниатюру» на вкладке «С сайта» можно только вставить в запись, но не использовать как миниатюру...
Анастасия, большое спасибо за статью! Но у меня немного другая проблема: установлена тема edujournal, ВП версии 3.0.1. В этой теме реализована функция вывода картинок и текста, но картинки выводятся в реальный размер, такой как в самом посте, а хочется выводить все превьюшки с одинаковыми, маленькими картинками.
Подскажите, пжт,что поменять.
заранее спасибо
Не могу поменять размер миниатюр :( array (85,85) — реакции никакой, выводит 150×150
Анастасия, та же проблема в версии 3.0.2
Какие значения не задаешь — миниатюра выводится в 150×150.
Как-то можно решить проблему?
Заранее благодарю.
Настя, может и мне поможете? ) По Вашим рекомендациям все сделал, коды добавил и все вроде бы работает, кроме самого главного :). Миниатюры выводятся не на главную страницу, где анонсы записей, а уже в сам пост. WP 3.0.4. Использую тему education-premium-tema
Помогите плиз!
Проблема такая: никак не хотят отображаться миниатюры в анонсе. использую тему Newsweek. Спасибо!
Там используется произвольное поле postimg. Эта тема разрабатывалась до того, как появился WordPress 3.0.
Долго искала, как сделать так, чтобы в архиве и поиске отображались картинки. Сделала все, как написано в статье и теперь все получается! Анастасия, спасибо вам огромное.
Здравствуйте. У меня такая проблема: миниатюры не отображаются при публикации ссылок в сети «вконтакте», использую all-in-one-seo-pack. Вместо миниатюры, прикрепленной к посту публикуется логотип сайта. Поможете?
Я сомневаюсь что там можно прикрепить миниатюру статьи. А причем тут плагин all-in-one-seo-pack?
a-i-s-p — единственный известный мне способ «расширить» количество отображаемой в вк информации одним плагином. С ним импортируется и картинка (только вот вместо миниатюры импортируется лого), и заголовок, и описание ссылки.
Перед кодом вызова миниатюры добавляем < a href = " < ? php the_permalink() ? > " > и после < / a >. Только удалите пробелы, чистый код не пропускает ВП в комментариях.
Zdrastvujte a izveniajus za latynicu ,u menia inachej ne poluchitsa. Proshu pomosh razobratsa,3 den ischu infu no ni kak.Vobschem zagruzil ja temu,tema kakby poddezhivajet miniatiury Wordpres u menia 3.1.2 no pochemuto ne vyvoditsa kartinka v post.V chom mozhet byt problema ???plizz ochen nuzhno
Андрей, извините за задержку с ответом, когда загружаете картинку, вы ставите галочку «Использовать как миниатюру»?
Stranno,ja otpravil jescho razok,okazyvajetsa u menia ne tolko s sajtom problema no i s e-majlom :)
А на какой адрес Вы отправляете? Может лучше тогда в комментариях описать? :)
Mda naverno adres ne tot:) ja skidyval na adress existenciya (sobaka) gmail.com.Ja by ludshe skinul vxod v adminku i Vy by sami posmotreli na eto bezobrazije,mne kazhetsa ja vsio pravilno delaju no kartinok kak nebylo tak i net.Vy moja posledniaja Nadezhda xotia Anastasija vam bolshe k licu:)
:) На этот адрес ничего не приходило. В спаме тоже нет. Попробуйте через форму контактов на сайте отправить. или напишите, какой заголовок у письма был.
Zdrastvujte Anastasiya,ja stoko pisem ne pisal niodnoj liubimoj devushke,Vy uzhe mne kak rodnaja:) Poslal vam pismo formoj kontaktov. Sposibo rodnaja:)
Bolshoje chelovecheskoje SPOSIBO Anastasija,Vy prosto boginia,vsio zarabotalo.U menia ne xvatajet slov blagodarnosti,zhelaju Vam zhiznennyx i tvorcheskix uspexov:)
Спасибо за подробную инструкцию. Долго искала в интернете и наконец-то нашла у Вас :)
Как удалить понятие thumbnail из шаблона, чтобы миниатюры вообще не выводило???А то рамка мешает, как у меня на сайте.
Анастасия, спасибо большое за эту статью. После обновления WP на 3 +... шаблон BranfordMagazine оказался с версией не совместим. Очень помог такой полный ответ.
Посмотрите эту статью , просто найдите в шаблоне код вызова миниатюры и удалите вместе с окружающим стилем (примерно так < div class = " " >код изображения< / div >, обычно именно в стиле задается фиксированная высота, ширина и рамка.
в версии 3.1.3
тема Envisioned от Elegantthemes
к странице добавляю миниатюру, картинку выбираю полноразмерную 1600×1200.jpg нажимаю редактировать, указываю конкретный размер 500×335 указываю что сейчас редактируется миниатюра, нажимаю обрезать и сохранить, потом указываю использовать как миниатюру, но в миниатюре все равно вся картинка отображается целиком...
а вот если в редактировании изображения указать что сейчас размер редактируется для всех размеров то он картинку нормально обрежет и сохранит, а вот для миниатюры не хочет...
я за 3 дня уже фсю голову сломал, помогите кто чем может...=))
ОЧЕНЬ СРОЧНО нужно решить эту проблему
Владимир, а зачем вы обрезаете картинку вручную? Можно же поставить в настройках медиафайлов для миниатюры «Обрезать миниатюру точно по размерам», и выбрать нужный размер, он может быть 500×335.
Конкретно по вашему вопросу, миниатюра генерируется с оригинального изображения вроде при загрузке его на сайт.
мне как раз нужно с оригинального файла сделать миниатюру, но какой то конкретной области, а не всю картинку делать миниатюрой
Лучше на компьютере обрезать, и загрузить еще одно изображение, указав, что как миниатюру нужно использовать его. Обрезка делается очень легко программой Диспетчер рисунков Microsoft Office.
я так и делал, из основного изображения выделили кусок 500 х 335 px, вырезал и сохранил, потом назначил его как миниатюру, а вот как сделать чтоб когда наводишь курсор на это изображение, появляется лупа и когда на нее кликаешь чтоб выводилась эта картинка только полная
никак не пойму
Так не получится. Увеличивается то изображение, которое вы обрезали и с которого была сгенерирована миниатюра
вобщем если на этой теме
пролистать до картинки с попугаем который называется Birds of Beauty
то на этой миниатюре нижняя часть картинки зарезана а при клике на лупу вся картинка показана целиком и нижняя часть полностью (не зарезана как на миниатюре)
могу дать логин и пароль от админки если сможете помочь буду очень благодарен
Меня вчера ночью осенило очень простым решением :) Если эта картинка в самой статье, просто ставите ссылку на другой файл, полноразмерный, и все. Это есть при редактировании картинки, смотрите скрин . Если в архивах и на главной выводится часть статьи с картинкой, то тоже все будет открываться корректно. А вот если миниатюра вставляется автоматически, то не получится, не знаю как это можно сделать.
Владимир, полноразмерную картинку с попугаем нужно опубликовать в посте. Если это Галерея, то в коде для неё Вам нужно будет указать две ссылки: одну на перевьюшку, другую — на полноразмерную картинку.
Перевьюшки WordPress нарезает сам (когда Вы загружаете изображение с через админку WordPress) но такого размера, как указано в шаблоне.
До моего теперешнего шаблона я использовала шаблон от Elegantthemes, так шо я в курсе, именно так, как я Вам сказала, я оформляла Портфолио на блоге.
Анастасия, теперь вопрос к Вам, если позволите.
Мне пришлось перетаскивать/оформлять перевьюшки, сделанные на прошлом шаблоне (от Elegantthemes) с помощью произвольных полей, — получилось. Но теперь оформление любой картинки в постах принимает на себя оформление, назначенное перевьюшкам.
Уже несколько часов я бьюсь над этой проблемой. Тщетно :(
Нет ли у Вас совета по поводу?..
Простите, что надоедаю Вам с этими глупостями, мне ужасно стыдно! Тем более, что пост Ваш написан год назад, — Вы, наверное, устали уже от вопросов на тему этих чёртовых миниатюр... о.О
Allpa, пришлите через форму контактов файл со стилями, и адрес сайта, я скажу, какой стиль поправить.
Здравствуйте, всё описано отлично и у меня всё получилось с первого раза. плагин (ТвентиТен). Но хотелось бы спросить: Как сделать ТАК что бы то что мы указываем на 2-м и 6-м скрине (а это обтекание текста и размер миниатюры) автоматом передавалось в код. А не указывалось нами вручную в строках: { the_post_thumbnail (array (300,100), array («class» => «alignleft
post_thumbnail»)); } ???
Спасибо.
или хотя бы сделать так что б при клике на миниатюру открывалась сама статья?
По поводу открытия статьи, если брать стандартную тему Twenty Ten, то там при клике на миниатюру открывается именно статья, изображение нужно окружить ссылкой, на примере той же темы Twenty Ten < a class="size-thumbnail" href = " < ? php the_permalink ( ) ; ? > " > Тут код миниатюры < / а >. Про размер миниатюры и обтекание, не совсем понятно, откуда будут браться данные, если их там не указать.
Я бы хотел жёстко не указывать в коде параметры вывода. Чтоб они брались с (это обтекание) и с (размер). А иначе зачем мы это всё выбираем, если потом вручную настраиваем вывод?
Александр, размер может браться из настроек медиафайлов, а вот про обтекание не встречала.
Поставил... вроде все работает, но как сделать что бы текст обтекал картинку ?
В стилях задать float:left; margin-right:5px; это если нужно выровнять по левому краю. Попробуйте прописать это для стиля .alignleft
Подскажите как реализовать миниатюры в виде ссылок на пост. Заранее спасибо
Здравствуйте. С миниатюрой разобрался, но есть один вопрос: как сделать что бы миниатюра отображалась только на анонсе, а при открытии полной статьи — не отображалась. Заранее спасибо.
похоже нашел сам. удалил строку отвечающую за миниатюру из файла single.php вроде все работает. Если чего неправильно сделал скажите.
Да, все правильно. Ваше первое сообщение затерялось и я не смогла ответить.
Анастасия, подскажите пожалуйста, где ошибка?
<div id="post-" >
«alignleft
post_thumbnail»)); } ?>
Миниатюра не выводится
Елена, тут режется код, по нему ничего сказать не могу, пришлите, пожалуйста, полную версию кода через форму контактов.
У меня после всех операций, миниатюра появляется но почему то пропадает ссылка «Читать далее», как это можно исправить? (WP 3.3)
Валера, мало данных для конкретного совета. Пришлите шаблон, который изменяли, на blogstyle (@) yandex.ru, чтобы я могла посмотреть. Или временный доступ к админке.
Анастасия, вижу Вы неплохо разбираетесь в WordPress, может поможете решить проблему. Суть в следующем, поставил WP 3.3.1, тема Weekly 1.0.5 не отображаются миниатюры постов, в самих постах картинки отображаются. Установлены плагины:
Broken Link Checker, Cyr-To-Lat, FeedBurner FeedSmith Extend, Google XML Sitemaps, Platinum SEO Pack, Search Everything
Если нужна еще какая информация, я обязательно предоставлю. сайт yaremontnik.ru
изменил файлы сатегори.пхп и луп.пхп — превьюшка выводится но один раз в категориях. в зависимости от вставки выводится один раз с низу последней сттьи или сверху к первой. в чем я ошибся?
Полезный топик.И вопрос:каким кодом вывести на главной примерно 15-20 последних записей горизонтально — миниатюру, заголовок поста,несколько слов записи, автор и рубрики,в которых пост прописан...Помогите пожалуйста)))
Серый, придется только вручную, или выбрать шаблон, где что-то похожее уже реализовано, например этот
Анастасия, я просто кодом (вставил в файле index темы в нужном мне месте) пример на радикале и вывожу только название записи и ее рубрики, а хотелось бы миниатюру(если есть), название, рубрики(все, где прописана запись) и автора...
Добавила в конце статьи пример кода, где при нажатии на миниатюру ссылка ведет на статью.
Для категорий используйте файл category.php, если его нет, скопируйте файл archive.php и переименуйте.
код, где можно сделать кликабельной миниютюру, не подходит...лично у меня стоит тема article-directory , на которой я хотел бы организовать кликабельной миниатюру — не проходит этот код...ошибки
Проблема в следующем: ранее миниатюры к записям не использовались, необходимо задать всем старым статьям миниатюры. Я точно знаю, что есть плагин который переназначает всем записям миниатюры, но не знаю где его найти (пользовался им но засеял) может напомните?
Подскажите пожалуйста как решить мою проблему вот я хочу так как на этом сайте то есть хочу когда нажимая на картинку с материала при открытии пропадала заглавная картинка как это можно сделать ? лазила в редакторе картинки ,но ответ так и не нашла
<a href="" class="thumb"> «alignleft post_thumbnail»)); } ?>
Для того, чтобы сделать кликабельной миниатюру,вот этот код не проходит... Мне код нужно вставлять в файл category.php у меня ссылка на пост с категорией вот такая
«alignleft post_thumbnail»)); } ?>
<a href="" rel="bookmark">
Серый, по отрывкам кода не могу понять, в чем именно проблема. Свяжитесь со мной по адресу blogstyle (@) yandex.ru, если еще актуально.
Анастасия, помогите пожалуйста, разобраться с миниатюрами… На первый взгляд проблема банальна, но, для меня она стала настоящим геморроем…
Понимаете, я хочу чтобы у меня отображалась миниатюра после кнопки read more, а не полная картинка, как на данный момент… К сожалению, не могу этого исправить как не пытаюсь…
Константин, изображение похоже уже удалено. Уточните, почему не выводятся миниатюры. Лучше конечно дать мне файлы шаблона, чтобы я посмотрела. Можете написать через форму контактов.
Анастасия, вы меня не совсем поняли, как таковая миниатюра выводится на сайте, но, под катом её нет, то есть там цельное изображение… В принципе, вы можете зайти ко мне на сайт и посмотреть как говорится воочию…
Ваш отзыв
июня 19, 2010 в 23:38
Спасибо огромное, то что надо!