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

DLE Похожие новости dle в две колонки и более.

Похожие новости dle в две колонки и более.

Доброго времени суток, друзья. Сегодня на sdelaemblog.ru, поговорим о движке dle. А точнее о похожих новостях. В прошлом, я уже писал об этом, но один ответ порождает другой вопрос. А вопрос заключается в следующем: «Как вывести похожие новости DLE в две колонки, или более«. В статье о похожих записях wordpress, я давал пример, как можно осуществить подобное на wordpress. А в статье про DLE, это было упущено. Поэтому, сегодня я расскажу, как можно осуществить вывод похожих новостей в несколько колонок в DLE.

Похожие новости dle в две колонки и более.

Порывшись в интернете, я, если честно, был немного удивлен. На форумах и других различных ресурсах, на подобные вопросы, дают довольно интересные ответы. Но мне они показались слишком сложными. Я не понял просто, какой смысл в подобных действиях. Чтобы сделать вывод похожих новостей в несколько колонок, предлагают лезть в файлы движка, писать функции и тому подобные вещи. Это все конечно весело, но для чего, я не понял. Если кто знает, просветите, пожалуйста, в комментариях. :idea:

Мы, естественно пойдем другим путем. Без написания функций и тому подобных вещей.

Вывод похожих новостей DLE в две колонки.

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

Для начала, в настройках оптимизации запросов к базе данных DLE, необходимо включить отображение похожих новостей на сайте. Если конечно данная опция еще не включена.

Затем, в настройках вывода новостей DLE, желательно указать четное количество похожих новостей. То есть 2, 4 и тому подобные значения.

После чего, можно приступить непосредственно к организации колонок похожих новостей. В стандартном виде, вывод похожих новостей выглядит так:

<li><a href="{link}">{title}</a></li>

Если же, мы используем код из этой статьи, то суть не меняется. Главное обратить внимание на присутствие тега li. Именно его стили и помогут нам, с выводом новостей в две колонки. Если же в файле relatednews.tpl нет тега li, и вывод происходит, например, с помощью блоков div, что маловероятно. Но все же. В этом случае придется редактировать стили блока div, а не элемента списка li. Что также сути не меняет.

Итак, открываем файл style.css в админке или на компьютере в текстовом редакторе — не имеет значения.

Нажимаем сочетание клавиш Ctrl+F, и в появившуюся форму поиска вводим .related ul li, после чего нажимаем «Enter». Если же у нас нет такого селектора — стоит проверить, какой селектор используется, для вывода похожих новостей. В этом поможет вот эта статья.

После того, как мы нашли нужный селектор. В его стили необходимо добавить:

width:50%;
float:left;

Если некоторые из свойств уже есть. Их необходимо заменить на те, которые представлены в этой статье.

Теперь, вспомним, как это выглядит по умолчанию.

Вывод похожих новостей DLE в две колонки.

А вот, что должно было получиться, после редактирования стилей CSS.

Похожие новости dle в две колонки и более.

Вот таким не хитрым способом можно вывести похожие новости DLE в две колонки. Да, еще хочу сказать, что в ширине не обязательно использовать проценты. Ширину можно указать в пикселях.

Вывод похожих новостей DLE в несколько колонок.

Здесь все также просто. Единственное, что стоит изменить — это ширину. То есть, если для вывода в две колонки, мы указали ширину 50%. То для вывода трех колонок, необходимо указать 33%. То есть код будет выглядеть так:

width:33%;
float:left;

А результат должен быть таким:

Вывод похожих новостей в несколько колонок.

Ну а если нужно еще больше колонок. То дальше простая математика: для вывода четырех колонок, необходимо указать ширину 25%, для вывода пяти — 20%, и так далее. Надеюсь, это понятно.

P.S. Если вы используете код из моей статьи о выводе похожих новостей DLE с картинкой и описанием, у вас наверняка возникли трудности. Так как ширина изменилась, а колонка осталась одна. :-) Для того, чтобы все заработало, нужно из конструкции в файле relatednews.tpl удалить тег:

<hr />

И в стилях CSS, удалить:

hr{ clear: both; }

Тогда вывод постов изменится.

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

Удачи!

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

    @ Николай
    Здравствуйте.
    Попробуйте уменьшить размеры.
    Например:

    .related ul li{
    width:30%;
    float:left;
    }
    Ответить
  2. Николай

    Здравствуйте. Все работает спасибо!
    Но появилась проблема новости срослись с отзывами, пункта related ul li в css я не нашел, просто добавил:

    .related ul li{
        width:33.33%;
        float:left;

    Как только удаляю все нормально становиться, но в 1 колонку. Помогите!

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

    @ Андрей: Здравствуйте. Не за что. Это не плагин, оформление также, как и в посте сделано, с помощью:

    float:left;
    Ответить
  4. Андрей

    Здравствуйте, спасибо огромное за пост, но у меня возник один опрос… посмотрев дизайн вашего сайта, мне понравилось оформление похожих новостей (2 колонки), при помощи какого плагина вордпресс я могу сделать тоже самое?)

    Ответить

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

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

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