Потребовалось мне недавно организовать на блоге вывод изображений рядом с анонсом поста. Как известно, при добавлении в пост картинок обычным способом, они выводятся только при публикации статьи полностью.
А как красиво смотрится главная страница блога, если на ней рядом с анонсами постов находятся картинки из этих постов!
Оказывается, это можно сделать при помощи Произвольных полей – есть такая фишка в WordPress.
Вот, как это делается:
Сначала вставляем ссылку на картинку во все файлы, в которых требуется вывод картинок:
<img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" /> |
Дальше ищем на странице редактирования записи Произвольные поля.
Добавить новое произвольное поле:
- В поле Ключ пишем название нашего поля thumbnail;
- В поле Значение пишем адрес, по которому расположена картинка. Например так:
http://vash_sait/wp-content/themes/theme_name/img/1.jpg |
Или так:
/wp-content/themes/theme_name/img/1.jpg |
Нажимаем: «Добавить новое произвольное поле»
Все! Наша картинка будет опубликована в посте.
Когда вам нужно будет добавить картинку в другой пост, просто выберите в поле «Выбор» название вашего Ключа, а в поле «Значение» добавьте адрес нужной картинки.
Имейте ввиду, при использовании этого кода:
<img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" /> |
на странице отобразится некрасивый прямоугольник с надписью из тега alt, если вы забудете добавить картинку к своему посту.
Чтобы этого не случилось, можно проверять существует ли значение произвольного поля thumbnail (т.е. не забыли ли вы указать адрес картинки или может быть указали картинку с другим ключом), и если оно отсутствует, то выводить дефолтнyю картинку defolt.jpg:
<?php $image = get_post_meta($post->ID, 'thumbnail', $single = true); ?> <?php if($image !== '') { ?> <img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" /> <?php } else { ?> <img src="<?php bloginfo('template_url') ; ?>/img/defolt.jpg" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" /> <?php } ?> |
Если вы не хотите использовать дефолтную картинку, да и вообще не собираетесь вставлять изображения в каждый свой пост (а только в некоторые) можно использовать следующий код:
<?php $image = get_post_meta($post->ID, 'thumbnail', true); if($image !== ''){ ?> <img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" /> <?php } ?> |
Этот код выводит изображение в посте и в анонсе, только тогда, когда вы его зададите. В противном случае ничего не выводится.
А как можно использовать этот метод для вывода картинки для категории?
Точно также - добавляете код вывода картинок в файл archive.php
Ну наконец-то, нашла действительно работающий код. Спасибо тебе большое!
Пожалуйста. Пользуйтесь на здоровье!
А есть способ, чтобы картинку можно было добавлять прямо в посте? А то отдельно закачивать, потом прописывать путь - довольно долгое занятие
presscar, есть такой способ. Просто пишете в посте тег img и в нем адрес картинки - т.е. стандартный способ добавления изображений в пост.
Но при таком способе картинки тоже нужно закачать на хостинг, к тому же, если вы вставляете изображения таким способом, то они не отображаются в анонсах постов, а только в самих постах.
Куда именно надо вставить ссылку? Куда-угодно или надо выбирать опр. блок и туда вставлять?
Шатов, вставляете туда, где вы хотите видеть свои картинки.
Закачиваете картинку с помощью медиазагрузчика, вставляете в запись, копируете то что вставилось и потом, вставляете в значение произвольного поля, таким образом, не надо будет вручную копировать)
Интересный способ, я о таком не знал.
Спасибо! Буду пользоваться.
Проблемка с плагином pagenavi(). Не видит картинку когда страница не первая
Как применить lightbox к картинкам в произвольных полях?
Лайтбоксы выводятся соответствующим скриптом. Поставь скрипт и будут тебе лайтбоксы.
Спасибо, мне очень помогло разобраться.
Спасибо за хороший код. Не подскажете как можно подправить размер выводимого изображения(свободного поля)? Заранее благодарен.
Очень просто - вставляете в тег img его атрибуты height и width,
например так - height=200 width=120.
Проблема в следующем: выводиться только одна картинка на страницу - к первому посту. То-есть, прикрепляю ко всем постам - но отображается только в самом верхнем. В чем может быть проблема?
У всех нормально все отображается?
Николай, не видя того, какой код у вас выводит изображения и как вы прописали ссылки на изображения, помочь вам не не получится.
Проверьте, все ли вы правильно сделали?
Вставляю код в файл category.php после: div id="content"
В записях добавляю произвольное: thumb и в значении прописываю ссылку.
Николай, этот код рабочий - я проверила на своем сайте.
У меня он выводит все изображения.
Может быть, вы не правильно прописываете путь к изображению?
Попробуйте так - /wp-content/uploads/1.jpg
Неа, не рапотаит ((
Спасибо !!! Всё работает, только с дефолтной картинкой не получается....
наверное код неправильный....
А может путь к этой картинке неправильно прописали?
Здравствуйте! Подскажите пожалуйста, я использую произвольные поля для вывода изображений в теме Arthemi (журнальная тема)? там функция была встроена я ничего не менял, но вот при первой загрузке сайта, картинки не показываются, если обновить еще раз то появляются. Почему так происходит? адрес onlyautonews.ru. Подскажите с чем это может быть связано, может с хостингом? на локальном работало нормально....
Возможно при первом просмотре изображение еще не успело загрузиться.
Дальше оно кэшируется в браузере и при следующей перезагрузке страницы отображается сразу.
Это может зависеть и от хостинга и от других, неизвестных нам причин.
Не нужно дважды вызывать одну и ту же функцию. Используйте переменную в которой сохранилось значение картинки. Это сэкономит время, ускорит реакцию сайта:
ID, 'thumbnail', true); if($image !== ''){ ?>
<img src="" title="" alt="" />
Незачем велосипеды изобретать.
get_the_post_thumbnail( $post->ID);
Извините за тупой вопрос, но куда именно вставлять
<img src="ID, "thumbnail", true); ?>"
title="" alt="" />
В сам пост, произвольное поле или в index.php single.php и т.д. ???
Заранее спасибо!
В index.php single.php и т.д
Спасибо! Теперь правда другая проблема... Можно ли как то выровнять картинку с текстом, а то у меня вот что получилось _http://i.piccy.info/i5/15/14/1031415/1.png
Еще раз спасибо за помощь.
Добавьте в стили для блока, в котором находится картинка с текстом float: left; чтобы выровнять его по левому краю.
А можно по подробней куда float: left ставить, а то я уже полчаса все перечитываю и не могу понять куда его вставить, проблема такая же как у Johnny
<img src="ID, "thumbnail", true); ?>"
title="" alt="" style="float:left" />
Это выровняет только картинку, а вам нужно и текст тоже.
А как сделать , что бы картинка была ссылкою на пост?
Привет 🙂
я наделала кучу полей и хотелось бы сделать так, чтобы при открытии новой записи они в админке уже были показаны. Сейчас надо их сперва выбрать к каждому посту, так можно и забыть их выбрать и заполнить 🙁
WordPress не поддерживает такой функции.
Чтобы ваши поля сами встраивались в админку, нужно написать специальный скрипт, который будет выводить ваши поля на страницу редактирования записи.
хм, все так просто... а скопировала код в основной шаблон темы, добавила произвольное поле - ан неть!( превьюшки неть( в чем может быть причина, не подскажете?
Может еще картинку добавить?
Здравствуйте, подскажите, пожалуйста, куда могло деться "Произвольное поле" в месте где "Редактировать запись" У меня установлен плагин Featured Content Gallery, а в него картинки можно поместить используя произвольные поля. Когда тестировала плагин, "Произвольные поля" были под каждой Записью. Просто нажимала "Редактировать запись", а ниже были произвольные поля. Сейчас решила поменять картинки...а произвольных полей нет!!! У меня паника, я не понимаю, почему так. Это мой первый сайт, подскажите плз. Пол инета опползала но нигде нет объяснения куда они делись, эти будь они неладны "Произвольные поля"
На странице редактирования записи вверху справа есть ссылка Опции отображения (или Настройки экрана), кликните по ней и в открывшемся поле поставьте птичку возле пункта Произвольные поля.
После этого они должны появиться.
Других способов я не знаю.
Спасибо, большое. Я уже нашла!
Ксана, а у меня та же проблема, но я не нашла пункт произвольные поля, у которого поставить галочку! Что же мне делать? мож плагин какой есть?
Плагин такой, наверняка есть - поищите в google.
Только зачем он вам нужен, если wordpress поддерживает эту функцию без всяких плагинов?
Кстати-говоря, про произвольные поля "галочками", попробуйте Advanced Custom Fields - это не совсем произвольные поля, а полноценный функционал для вывода данных, картинок и всего что потребуется в общем, в режиме "с помощью клика", например)
А у меня другой вопрос, может он и описан здесь - но я все же не понимаю как это все сделать...
Немогу понять как в Шаблоне Contrast _http://themeforest.net/item/contrast/full_screen_preview/68089 в разделе скажем "Портфолио" сделать так же...уже весь инет перерыл, потом психанул и скачал Полную Сборку WP с этого сайта, но как куда и что вставлять, через какие поля не понял =((( помогите пазалуста...
Дима, чтобы вам помочь, нужно скачать ваш шаблон, разобраться в том, как он устроен и как в нем изначально выводятся изображения.
А уже потом, удалив из него вывод изображений, добавить в него новые функции для вывода картинок.
Времени на это уйдет минимум несколько часов.
Увы, столько свободного времени у меня попросту нет.
Если вы хотите получить мою помощь, то в этом случае она может быть только платной.
У меня вордпресс версии 3.1.1 На странице Редактировение записи я не могу найти закладку "Произвольные поля". Где они могут быть?? Помогите пожалуйста, уже все вкладки обшарил. Извините, если вопрос кажется легким, просто движок поставил всего несколько дней назад(
ой ,нашел. Нужно в "опциях отображения" поставить галку "произвольные поля". Вот я ламер!
Подскажите пожалуйста, а есть ли какой-нибудь способ выводить подпись под картинкой, которая вставляется через произвольные поля? Или это вообще невозможно?
Есть.
В качестве подписи можно выводить название статьи. Для этого добавьте в цикл вывода изображения функцию wp_title();
Привет) У вас что-то странное с сайтом, и в хроме нельзя код скопировать. В мозиле работает. А в целом спасибо, пользуюсь вашим сайтом уже более года, в качестве справочника по произвольным полям. Хорошая сборка примеров 🙂
Well written post, nicely researched as well as useful for me personally in the future.
Хорошо написанный пост, отлично исследована тема, полезно для меня в будущем.
Спасибо, все понятно и доступно, картинки уже на главной. Только одна проблема осталась - как сделать отступ от картинки, чтоб текст к ней не прилипал? http://domovladenie.org/
Укажите для вашей картинки отступ img { margin: 0 10px 10px 0;}
А как можно вставить видео в текст? (извините, если спросила не в том месте)
Обычной ссылкой на видео-файл.