Создание Сайтов и их настройка

DLE Похожие новости dle с картинкой и описанием.

Похожие новости dle с картинкой и описанием.

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

 Похожие новости dle с картинкой.

Модуль похожие новости dle

Итак. Если мы заглянем в нашу админку, то в настройках оптимизации запросов к базе данных, мы можем увидеть опцию «Отображение похожих новостей». Если такая возможность у вас присутствует, значит этот пост подойдет для вас, а если нет, то вы можете просто обновить движок до необходимой или последней версии dle.

Теперь включаем этот параметр, если он не включен, и переходим на сайт в полную новость. И под статьей мы можем увидеть работу модуля похожих новостей dle. Выглядит он так:

Модуль похожие новости dle.

Похожие новости dle  с картинкой

Но бывает, что такое отображение нас не устраивает, и нам необходимо вывести похожие новости с картинкой. Что делать в этом случае? Здесь все очень просто. Открываем файл templates/{THEME}/relatednews.tpl (данный файл имеет место быть, начиная с версии dle v9.4.) и меняем существующую строчку на:

Похожие новости с картинкой, если используется стандартный вывод картинок, с помощью {image-x}:

<li><a href="{link}"><img src="{image-1}" alt="{title}" />{title}</a></li><hr />

Похожие новости с картинкой, если используется вывод картинок, с помощью дополнительных полей [xfvalue_x]:

<li><a href="{link}"><img src="[xfvalue_x]" alt="{title}" />{title}</a></li><hr />

{link} — это ссылка на похожую новость.

{title} — это тайтл новости на которую будет вести ссылка.

{image-1} — url первой картинки в краткой новости.

[xfvalue_x] — дополнительное поле, которое содержит url к картинке. (важно: значение x, нужно заменить на свое).

Вот таким нехитрым образом можно выводить похожие новости dle  с картинкой. Останется только настроить внешний вид в стилях вашей темы и все (style.css).

Но если вам и этого мало, то можно еще добавить сюда описание нашей новости.

Похожие новости dle  с картинкой и описанием

Для добавления описания к нашей конструкции, достаточно добавить:

{text limit="150"}

И тогда код похожих новостей с картинкой и описанием, будет выглядеть так:

<li><a href="{link}"><img src="{image-1}" alt="{title}" />{title}</a><br>{text limit="150"}</li><hr />

{text limit=»150″} — описание, берется с краткой новости, где 150 — это количество символов, которое будет выводиться.

После всех этих действий похожие новости на сайте станут выглядеть примерно так:

Похожие новости dle с картинкой и описанием.

Довольно убого. Правда?

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

/*---похожие новости---*/
hr{
 clear: both;
}
.related ul li img {
 width:150px;
 height:150px;
 float:left;
 margin: 0 10px 5px 0;
 list-style:none;
}

width:150px — ширина картинки в похожих новостях.

height:150px — высота картинки.

После этого, похожие новости dle с картинкой и описанием, приобретают совершенно иной вид и выглядят более приятно, нежели ранее.

Похожие новости dle с картинкой и описанием.

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

Удачных экспериментов.

Расскажи друзьям:
Поделись ссылкой:
Комментарии
  1. Роман

    Михаил Веб пишет:

    А как Вы все это обнаружили, если только начали изучать DLE?

    Ну за три недели кое-что уже прочитал и посмотрел :-)

    Ответить
  2. Михаил Веб

    @ Роман:
    А как Вы все это обнаружили, если только начали изучать DLE?
    За ответы, спасибо. Но почему-то пробный текст не сработал. А у меня все работает. В общем нужно будет посмотреть как-нибудь :-)
    По авторизации ничего не скажу, на данный момент сайта на DLE у меня нет, поэтому с подобными проблемами не сталкивался)))
    Да, обращайтесь. Здесь: http://sdelaemblog.ru/svyaz/

    Ответить
  3. Роман

    У меня была очень прискорбная история с предыдущим вебмастером (на сайте шеллы, скрытые ссылки, кривые коды, установлены редиректы и много багов…) . В результате купил лицензию DLE и поставил себе задачу разобраться более-менее самому. Степ бай степ продвигаюсь :-)
    У меня список в 400 пунктов, что еще нужно сделать. Пока сам буду. В конце насобираю мелочи которые не смогу реализовать сам и тогда посмотрим. Не то чтобы я жлоб, но думаю, Вы должны меня понять.

    1. Панель меня лично устраивает.Кнопка есть и меню из кнопки «код» выпадает. в тексте теги появляются, но при публикации все идет сплошным текстом…

    2. Я сначала нажимал кнопку, выбирал тег и потом между него вставлял код… Может в этом и проблемка.
    сейчас вставлю пробно, как тест.

    Заголовок

    Попутный офтоп вопрос: обнаружил в админке кучу (15-20) неудачных попыток авторизации в админпанель сайта. стоит беспокоится?

    А к Вам можно по мелочным вопросом обращаться? Может не в комменты… Был бы очень признателен за помощь. В нете очень мало людей готовые давать толковые советы за так. Хотя я всему понимаю цену, но бюджет на сайт ограничен.

    Ответить
  4. Михаил Веб

    @ Роман:
    А зачем искать? Если нужно могу помочь. Загляните сюда: http://sdelaemblog.ru/uslugi/ Если устроит, то пишите. Главное задачу поставить четко)))
    Интересно почему тогда это не сработало. :idea: Если не сложно помогите ответами:
    На сколько удобна панель в комментариях. дело в том что многие не используют кнопку. Вот не могу понять почему. Ее не видно? Или может не понятно? Или что-то еще?
    И еще интересует, как Вы использовали кнопку? То есть в правильном варианте должно быть так: Добавляем код, затем его выделяем, затем наводим на кнопку «Код» и выбираем необходимый синтаксис (язык). А как сделали Вы?
    Буду признателен, если дадите ответы на эти вопросы.
    Не за что, проблема ведь не решена :-(

    Ответить
  5. Роман

    Не знаю откуда вебмастер взял тот код/стиль… Но работало и блок разбивало в две колонки…
    Михаил Веб пишет:

    Самый простой вариант в шаблоне добавить необходимый селектор (любой) и прописать стили для него.

    Знать бы еще как это сделать… Буду искать кого то — сам боюсь не справлюсь.

    Михаил Веб пишет:

    элемент ul обрамляет весь текст статьи

    Редактировать этот параметр нет смысла — косячит меню и еще пару элементов…

    Приношу свои извинения за код. Но я нажимал кнопку…
    Спасибо Вам!

    Ответить
  6. Михаил Веб

    @ Роман:
    Попробуйте так:

    ul.thumbnails li {
    width: 50%;
    float: left;
    }

    Но это не совсем будет правильно и могут возникнуть проблемы, так как элемент ul обрамляет весь текст статьи. Самый простой вариант в шаблоне добавить необходимый селектор (любой) и прописать стили для него.
    Написанные Вами свойства выше не понятно откуда взяты и причем здесь похожие новости?
    Да, и еще просьба, при добавлении кода, пожалуйста пользуйтесь кнопкой «Код» иначе wordpress вырезает все лишнее и приходится каждый раз ваш комментарий редактировать, чтобы был виден код.

    Ответить
  7. Роман

    @ Михаил Веб:
    Вот сайт: http:// islandlife. ru
    В принципе, там еще много недоработок, но вот уже второй день сижу с этой конкретной проблемой.

    Вот это код был в предыдущем шаблоне:

    .top-l70{float:left; width:100px; margin-right:10px;}
    .top-r70{ float:left; width:250px; height:70px; overflow:hidden;}
    .raz70{ background:#E2DFE0;height:1px;margin:7px;}
    
    
    
    
    <a href="{link}" rel="nofollow">{title}</a>{text limit="200"}
    
    
    
    В новом тоже работает, но исчезает надпись названия блока ниже, если его использовать. Спасибо что тратите на меня свое время!
    Ответить
  8. Михаил Веб

    @ Роман:
    Возможно селектор другой, тот пример был на стандартном шаблоне определенной версии dle, уже не помню какой. :oops:
    Дайте ссылку на сайт с проблемой. подскажу селектор.
    Или можете попробовать определить сами, в этом может помочь вот эта статья: http://sdelaemblog.ru/cvet-shrifta-na-sajte-html/

    Ответить
  9. Роман

    Все получилось, правда реализовал вот так в relatednews.tpl

    <a href="{link}" rel="nofollow">{title}</a> 
    
    Но не могу в две колонки сделать. В папке с шаблоном есть несколько документов css....
    Понимаю, что нужно сделать через float: left;   но нет у меня такого как 
    
    .related ul li {
    
    единственное место в папке с шаблоном, где что-то похожее - это 
    
    .findrelated {
    	width:99%;
    	background: #ffc;border:1px solid #9E9E9E;
    	padding: 5px;margin-top: 7px;
    	margin-right: 10px;
    }
    Уже два дня мучаюсь ))) Кому то может уже смешно бы было, но не могу разобраться...
    Ответить
  10. Михаил Веб

    @ Роман:
    Здравствуйте.
    Да, в папке со стилями (файл формата css) конкретного шаблона.
    Если все сделано по статье, и все коды взяты отсюда, то картинки должны быть одного размера.
    Нет, можно сразу выводить в две колонки.
    Не за что. Обращайтесь, если не понятно.

    Ответить
  11. Роман

    Но это легко исправляется редактированием стилей css.

    Я только осваиваю DLE. Возможно вопрос глупый, но где именно редактировать css? В папке со стилями конкретного шаблона?

    У меня получилось провести только первую часть вашего совета — вывел похожие с картинками одна новость за другой (но у меня каждая картинка разных размеров).

    P.S. Относительно совета по выводу похожих материалов в две колонки с картинками. Нужно вначале проделать все с этой странички, а потом уже реализовать две колонки?

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

    Ответить
  12. Михаил Веб

    @ Евгений: Здравствуйте. Все довольно просто. У меня в блоге, чтобы похожие статьи выводились в два столбика, в стилях для li прописано float:left. То есть в dle нужно добавить к стилям похожих новостей сторону выравнивания. Будет это выглядеть, как-то так:

    .related ul li {
    float: left;
     width:350px;
    }

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


    И удалить его стили:

    hr{
     clear: both;
    }

    Проверил в версии 9.7 — все отлично работает.
    Смотрел то, что предлагают в сети. Какие-то все предложения сложные, для осуществления такой простой операции. :mrgreen:

    Ответить
  13. Евгений

    Здравствуйте Михаил. Уже около недели ищу информацию как сделать вывод похожих статей в два столбика в версии 9.8, но ничего нормального пока найти не могу, все что есть в сети садится криво. Подскажите пожалуйста как реализуется вывод похожих записей в вашем блоге, буду очень признателен.

    Ответить
  14. Михаил Веб

    @ Новости России: Здравствуйте. Никогда не задавался подобным вопросом, так как никогда не было такой необходимости.
    Но насколько я понимаю, в код необходимо добавить в нужное место:

    {date}

    И настроить формат даты в админке сайта.
    Но я могу ошибаться.

    Ответить
  15. Новости России

    Здравствуйте!
    А как можно встроить в Похожие Новости дату и время добавления этих статей?

    Ответить
  16. Михаил Веб

    @ Alexexxx: Да, пропустил данный момент спасибо за дополнение. :oops:

    Ответить
  17. Alexexxx

    Еще для li указать list-style:none помоему без кружков красивее :)

    Ответить
  18. Владимир

    Интересно, а как это можно сделать на wordpress?

    Ответить
    1. Михаил Веб

      Подписывайтесь, скоро накатаю статейку.

      Ответить
    2. Михаил Веб
      Ответить

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Навигация по статье