Как добавить миниатюры изображений в связанные сообщения в WordPress

В: Ваш сайт мне очень помогает. Не могли бы вы рассказать мне, как встроить эти связанные сообщения, например, из вашего сайта, в мой? Я перепробовал множество альтернатив. Не могли бы вы рассказать мне, как вы добавляете похожие сообщения с помощью эскизов?

Если вы часто просматриваете Интернет, вы заметите, что во многих блогах отображаются эскизы изображений для раздела "Похожие сообщения", как и в случае с Techberg. В WordPress это можно сделать несколькими способами. Давайте проверим.

Используя плагин

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

Перейдите в LinkWithin. Заполните детали на первой странице.

wpthumb-linkwithin

Щелкните Получить виджет. После этого вы будете перенаправлены на страницу, где сможете скачать плагин.

Установите и активируйте плагин. Пост, связанный с вашим эскизом, сразу же появится в вашем блоге.

wpthumb-linkwithin-on-post

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

  1. конечный пользователь имеет ограниченный контроль: вы не можете настроить миниатюру изображения, отображаемую для каждого сообщения.
  2. вы не можете настроить размер и стиль виджета.
  3. вы не можете установить позицию для отображения виджета. По умолчанию он появляется сразу после завершения содержимого сообщения, но бывают случаи, когда вы хотите вставить информацию об авторе или рекламу перед соответствующим сообщением. в данном случае это не пригодится.

Взлом файла темы WP

Лучший способ полностью настроить взаимодействие с пользователем - это зайти в файл темы и взломать его. Для этого потребуется некоторый опыт программирования.

Во-первых, используя инструкция здесь, активируйте функцию миниатюр сообщения (применимо только в WP 2.9 и выше).

Затем установите и активируйте плагин Another Related Posts. Что мне нравится в этом, так это возможность использовать систему шаблонов для стилизации связанного содержимого поста.

В папке плагина YARPP перейдите в папку yarpp-templates и скопируйте файл "yarpp-template-thumbnail.php" в папку своей темы.

Далее на странице параметров WordPress YARPP:

  • снимите флажок " Автоматически отображать похожие сообщения?"
  • выберите количество связанных сообщений, которые вы хотите отобразить
  • выберите yarpp-template-thumbnail.php из раскрывающегося списка файла шаблона.

wpthumb-yarpp-options

Откройте "yarpp-template-thumbnail.php" в текстовом редакторе. Замените код следующим.

Этот код проверяет, есть ли эскизы для каждого связанного сообщения. Если да, отобразится эскиз и постоянная ссылка.

Затем в папке вашей темы откройте файл " single.php" и добавьте следующую строку в ту часть, где вы хотите отобразить связанный пост:

Наконец, нам нужно немного стилизовать. Скопируйте и вставьте следующий код стиля в файл style.css.

.related_posts ul{ width:100%; list-style:none; margin:0; padding:0;}.related_posts li { display:inline; float:left; margin:0; padding-left:0; padding-right:10px; width:140px; /* change this value accordingly to your template */}.related_permalink{ width:140px;/*change this value accordingly to your template */ text-align:left; font-size:0.85em; padding-top:5px;}.related_thumbnail{ width:140px; /*change this value accordingly to your thumbnail size */ height:80px; overflow:hidden; text-align:center;}

Это оно.

Изображение предоставлено: wuzhao.album

28 комментариев

  1. Я подумывал добавить на свой сайт раздел последних сообщений. Мне не пришло в голову показывать эскизы… отчасти потому, что в настоящее время я не добавляю изображения к своим сообщениям. С этой информацией я думаю, что у меня есть причина. Миниатюры очень привлекательны. Думаю, моим посетителям это тоже понравится.

    Спасибо за публикацию, с советами по взлому

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

  3. Еще один отличный плагин для изображений - это плагин WP-Flickr. Вам необходимо иметь изображение в вашей библиотеке Flickr, и вы можете добавить любое изображение из своей библиотеки в сообщение.

  4. Да, это тоже отличный плагин. Спасибо за рекомендацию

  5. Привет Дэмиен,

    Хочу поздравить вас с очень информативным уроком. Извините, если мой английский несовершенен, но я хочу получить результат, аналогичный тому, что вы сделали на своем сайте для статей по теме. Я вижу, что вы использовали таблицу для отображения миниатюр, но я не знаю, где мне разместить теги
    Php while ($ related_query-> have_posts ()): $ related_query-> the_post (); ?>
    php if (function_exists ('has_post_thumbnail')): if (has_post_thumbnail ()):?>
    со структурой вашего кода.
    Не могли бы вы мне помочь?
    Спасибо за продвигать

  6. Чаще всего тег вставляют после Php the_content ("Продолжить чтение…"); ?> в single.php

  7. Благодарю за ваш ответ ! Отличный блог;)

  8. Отлично работает. За исключением одного. Он не захватывает миниатюры, он захватывает изображения с полным разрешением и показывает только ту часть из них, которую вы определяете в CSS. У меня есть эскизы для каждого сообщения, но the_post_thumbnail, похоже, вытягивает первое изображение в сообщении, а не эскиз.

    Я надеюсь, что у вас есть решение, потому что мне очень, очень нравятся результаты с YARP, а не посторонние сообщения, показанные LinkWithin.

    Спасибо!

  9. Я был взволнован, когда нашел кого-то, кто рассказал, как делать посты, связанные со стилем LinkWithin, с тех пор, как WordPress представил миниатюры постов. Однако это, похоже, не вызывает миниатюру сообщения (у меня есть один набор для каждого сообщения с изображением), а просто изображение с полным разрешением из сообщения. Таким образом, он показывает только один угол изображения и обрезает остальные. Это нормально, если вы всегда используете в своем посте очень маленькие изображения, но иногда я использую изображения размером до 500 пикселей в ширину.

    Есть предложения о том, как на самом деле использовать миниатюры записей WordPress? Спасибо!

  10. Ой. Я обнаружил, что проблема была в размере эскиза, а не в коде. Простите!

  11. Я надеюсь, что теперь это работает для вас.

  12. Добавление второго

    right before in the template really helps the styling–everything below the thumbnails was wrapping around them until I added that.

    Единственная проблема, с которой я по-прежнему сталкиваюсь, это то, что мой заголовок "Похожие сообщения" показывает, есть ли похожие посты или нет! (См. Http://littlepinkhouse.bloggingmyworld.com/2010… - там по-прежнему отображается "Еще открытки", хотя их нет.)

    Я также хотел бы по-другому оформить постоянные ссылки и миниатюры. (Как видите, у меня есть изображение в качестве фона для миниатюр: http://littlepinkhouse.bloggingmyworld.com/2010…) Я подумал, что могу превратить ".related_posts li {" в ".related_thumbnail li {" и " .related_permalink li {"в CSS, но это не сработало. Есть какие-нибудь предложения? (У меня много сообщений без эскизов.)

    Большое спасибо! Ваш пост был бесценен. Я был так рад найти его !!

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


    Вы можете проверить:

    1. Вы установили и активировали плагин YARPP?
    2. Вы поместили файл yarpp-template-thumbnail.php в папку темы?
    3. Вы проверяли, правильный ли код?

  14. Я могу получить миниатюры для моей связанной области сообщений под моими статьями. Однако теперь заголовки статей не отображаются рядом с моими эскизами. Любая идея, как я могу это исправить - я искал везде и не могу решить эту проблему. Мой сайт http://www.stockgravity.com Пожалуйста, помогите, спасибо!


  15. Как указать плагину на форматирование эскиза img размером 150 × 150?
    И как создать цвет при наведении, похожий на цвет вашего сайта при наведении курсора мыши?

  16. Мне нравится, как вы оформляете похожие сообщения в своем блоге. Какой код мне нужно вставить, чтобы они выглядели точно так же? Я знаю достаточно, чтобы потом настроить его так, чтобы он лучше всего соответствовал моему дизайну, но я не знаю достаточно, чтобы перейти от простого к чему-то, похожему на ваш сайт.

    Большое спасибо за твою помощь!


    Там есть сложное кодирование. Во-первых, вам нужно установить миниатюру сообщения для каждого сообщения (используя настраиваемое поле). Во-вторых, я использую эффективные связанные сообщения, чтобы получить связанный пост. Наконец, я беру массив связанных сообщений из плагина и сопоставляю его с миниатюрой сообщения, а затем отображаю их.

  17. Есть ли способ установить yarpp для получения миниатюрной версии изображения. У меня есть изображения yarpp, работающие правильно на моем сиденье, но оно использует полное изображение вместо изображения миниатюрной версии. У меня установлены миниатюры размером 150X150, что значительно сократит время загрузки каждого моего сообщения, поскольку они есть в каждом сообщении. Если бы кто-нибудь мог мне помочь, я был бы очень признателен.


    Да, вы можете, просто замените строку the_post_thumbnail () на the_post_thumbnail (array (150,150))

    1. Привет, Дэмиен! Спасибо, что поделились этим хорошим уроком! Можете ли вы помочь с кодом или функцией для отображения первого изображения из сообщения, если там нет "has_post_thumbnail". Я хочу, чтобы YARPP показывал эскизы, но если в некоторых сообщениях их нет, возьмите первое изображение из сообщения и покажите его как эскиз. Теперь я использую the_post_thumbnail (array (150,150)), и я знаю, что у меня есть больше связанных сообщений, но теперь я показываю только те связанные сообщения, у которых есть миниатюры. Заранее спасибо

      1. ="css">