Доброго времени суток, друзья. Сегодня на sdelaemblog.ru, поговорим о движке dle. А точнее о похожих новостях. В прошлом, я уже писал об этом, но один ответ порождает другой вопрос. А вопрос заключается в следующем: «Как вывести похожие новости DLE в две колонки, или более«. В статье о похожих записях wordpress, я давал пример, как можно осуществить подобное на wordpress. А в статье про 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;
Если некоторые из свойств уже есть. Их необходимо заменить на те, которые представлены в этой статье.
Теперь, вспомним, как это выглядит по умолчанию.
А вот, что должно было получиться, после редактирования стилей CSS.
Вот таким не хитрым способом можно вывести похожие новости DLE в две колонки. Да, еще хочу сказать, что в ширине не обязательно использовать проценты. Ширину можно указать в пикселях.
Вывод похожих новостей DLE в несколько колонок.
Здесь все также просто. Единственное, что стоит изменить — это ширину. То есть, если для вывода в две колонки, мы указали ширину 50%. То для вывода трех колонок, необходимо указать 33%. То есть код будет выглядеть так:
width:33%;
float:left;
А результат должен быть таким:
Ну а если нужно еще больше колонок. То дальше простая математика: для вывода четырех колонок, необходимо указать ширину 25%, для вывода пяти — 20%, и так далее. Надеюсь, это понятно.
P.S. Если вы используете код из моей статьи о выводе похожих новостей DLE с картинкой и описанием, у вас наверняка возникли трудности. Так как ширина изменилась, а колонка осталась одна. :-) Для того, чтобы все заработало, нужно из конструкции в файле relatednews.tpl удалить тег:
<hr />
И в стилях CSS, удалить:
hr{ clear: both; }
Тогда вывод постов изменится.
У меня на этом все. Я надеюсь, что стало понятней, как вывести похожие записи DLE в две колонки и более…
Удачи!
@ Николай
Здравствуйте.
Попробуйте уменьшить размеры.
Например:
Здравствуйте. Все работает спасибо!
Но появилась проблема новости срослись с отзывами, пункта related ul li в css я не нашел, просто добавил:
Как только удаляю все нормально становиться, но в 1 колонку. Помогите!
@ Андрей: Здравствуйте. Не за что. Это не плагин, оформление также, как и в посте сделано, с помощью:
Здравствуйте, спасибо огромное за пост, но у меня возник один опрос… посмотрев дизайн вашего сайта, мне понравилось оформление похожих новостей (2 колонки), при помощи какого плагина вордпресс я могу сделать тоже самое?)