Сегодня мы посмотрим, как, имея в распоряжении новостной RSS-канал, PHP, SimplePie, JQuery и 20 минут времени сочинить симпатичный новостной блок с плавной прокруткой записей (смотреть демо).
Коротко о главном. Если вы не в курсе, что такое «SimplePie» – рассказываю.
SimplePie – это очень простая в использовании PHP-библиотека, предназначенная для работы с RSS-каналами. Поддерживаются следующие версии каналов: RSS (0.90, 0.91, 0.92, 1.0, 2.0), Atom (0.3, 1.0). С помощью с этого скрипта мы можем выводить текст новостей, заголовки и другие нужные штуки, как, например, дату публикации или изображение к новости. На самом деле у библиотеки гораздо больше возможностей, чем здесь перечислено. С полным перечнем функций можно ознакомиться на официальном сайте библиотеки.
Итак, приступим.
В работе нам понадобится:
На своём тестовом сервере создаём папку, в которой у нас будет храниться наш новостной МегаМодуль. Назовем ее, например, «simple-news» и создадим внутри простую, но удобную структуру директорий для размещения требуемых файлов.
Simple-news (корневая директория)
- lib (директория для библиотеки SimplePie)
- cache (кэш, который будет генерировать SimplePie)
- js (директория для JQuery и плагина прокрутки новостей)
- css (стили оформления)
- images
Теперь:
Всё. Едем дальше.
Самое время позаниматься программированием). Открываем «index.php» в любимом редакторе и начинаем.
1) сначала создадим простейшую HTML-разметку страницы, не забыв подключить CSS и нужные нам js-скрипты.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?php //Здесь мы позже что-нибудь накодим ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" /> <title>Новостной модуль</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.newsScroll.js"></script> </head> <body> <!--Начало модуля--> <div class="news"> <h1>Новостной модуль</h1> <span>PHP, SimplePie, jQuery... и всё, собсно</span> <!--В этой области будем организовывать вывод новостей --> </div> <!--Конец модуля--> </body> </html> |
2) подключаем SimplePie
Для этого в начале index.php вставим следующий код:
1 2 3 | require_once 'simplepie.inc'; //подключение библиотеки $feed = new SimplePie('http://feeds2.feedburner.com/jquery/'); //создаём объект класса, скармливая при этом адрес нужного нам фида $feed->handle_content_type(); // настройка HTTP-заголовков страницы с указанием нужной кодировки |
Это все, что необходимо в нашем случае.
Теперь самое главное: контент, который будет импортироваться из указанного RSS , доступен с помощью метода
$feed->get_items()
Кстати, в $feed->get_items() можно указывать диапазон записей. Так, например:
$feed->get_items(0, 5)
получит для нас 5 записей RSS-фида.
Итак, давайте допишем еще одну строчку кода к трем вышеперечисленным:
1 | $news = $feed->get_items(0, 5); //получаем массив записей |
Теперь в $news содержится массив с записями, и все, что нам нужно – пройтись в цикле по полученным значениям:
foreach ($news as $item){ … }
Мы хотим выводить получаемую информацию в следующем формате:
Применительно к используемому нами SimplePie, интересующие нас атрибуты записей мы получаем с помощью следующих методов:
Чтобы познакомиться поближе с упомянутыми методами, а также получить информацию по многим другим – рекомендую почитать справочник по API библиотеки SimplePie , который специально для вас расположен вот тут.
Давайте уже применим все полученные нами знания и изобразим рабочий вариант новостного модуля.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <?php require_once 'lib/simplepie.inc'; //подключение библиотеки $feed = new SimplePie('http://www.gazeta.ru/export/rss/first.xml'); //создаём объект класса, скармливая при этом адрес нужного нам фида $feed->handle_content_type(); // настройка HTTP-заголовков страницы с указанием нужной кодировки $news = $feed->get_items(0,5); //получаем массив записей ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="windows-1251" /> <title>Новостной модуль</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.newsScroll.js"></script> </head> <body> <!--Начало модуля--> <div class="news"> <h1>Новостной модуль</h1> <span>PHP, SimplePie, jQuery... и всё, собсно</span> <ul> <?php foreach($news as $item) {?> <li> <h3><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h3> <span class="date"><?php echo $item->get_date(); ?></span> <p><?php echo $item->get_description(); ?></p> </li> <?php }?> </ul> </div> <!--Конец модуля--> </body> </html> |
Выглядеть все будет примерно так:
Настало время облагородить вывод информации.
Посмотрим, что нас не устраивает в текущем положении вещей:
Будем исправлять.
Для начала, “заберем” из общего текста изображение (если оно там есть, конечно) и сделаем его ссылкой на статью. А если картинки нет – поставим вместо нее графическую «заглушку». Плюс ко всему, очистим текст от HTML-тэгов и обрежем его до пятидесяти слов. Для этого воспользуемся небольшим вспомогательным классом (есть в архиве с исходными кодами), в котором содержатся необходимые методы. Класс имеет чисто символическое название – «MyHelper» и содержит всего два метода – один из которых извлечет картинку из текста, а другой – впоследствии очистит и обрежет текст.
Итак, подключаем класс:
1 | require_once 'lib/helper.class.php'; |
Теперь получим изображение и очищенный текст. Вставим следующий фрагмент внутрь ‘foreach’:
1 2 3 | $helper = new MyHelper($item->get_description()); $img = $helper->getimg_from_tag(); //достаем картинку из текста $text = $helper->clean_text(); //очищаем текст и обрезаем его до 50 слов |
добавим $img к выводу новостей и заменим $item->get_description() на $text.
Ура, наши новости приобретают все более завершенный вид. Самое время применить CSS-магию к нашему творению. Думаю, на данном этапе действия не требуют объяснений – каждый может оформить результаты по своему вкусу. А сейчас просто посмотрим, что получилось:
Еще на первом этапе нашего эксперимента мы создали папку “js” и поселили в ней JQuery и его плагин. Самое время снова вернуться к ним.
Напомню, плагин ‘newsScroll’ нужен нам, чтобы организовать прокрутку новостей в нашем блоке.
Инициализация плагина происходит следующим образом:
1 2 3 4 5 6 | <script type="text/javascript"> $('.news ul').newsScroll({ speed: 2000, delay: 5000 }); </script> |
Но, прежде чем подключать эффекты, нам необходимо произвести некоторые манипуляции с CSS, – в частности, сделать высоту нашего новостного блока фиксированной – примерно по высоте двух записей.
Итак, фиксируем высоту списка и, для порядка, высоту каждого элемента списка – тоже.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .news ul { overflow: hidden; background: #E5DAC0; padding: 1em; border: 1px solid #F1EAD4; height: 260px; position: relative; float: left; min-width: 450px; } .news ul li { clear: left; list-style: none; overflow: hidden; position: relative; height: 130px; } |
Смотрим на результат. Впечатляемся ).
Как мы смогли убедиться, SimplePie – действительно простой и удобный инструмент для импорта RSS.
На этом все, до новых встреч.
Приветствую! Я Чернова Ирина, автор этого блога. Здесь я пытаюсь писать о том, что в наибольшей степени меня интересует, а именно - веб-разработках и управлении ими. 
Блогово Зайсла © 2009 
 |
|
Встретился с небольшим глюком.
После того как скопипастил ваш код, title и стал показывать крякозябрами. Посмотрел в вики симплипая и изменил строчку:
$feed->set_output_encoding(‘Windows-1251′);
$feed->handle_content_type();
Ириночка, какая Вы молодец! Три дня убил, чтобы это на русском найти (с английским плохо), да еще в отличном представлении. Берусь делать, и предложение сразу – где-то вычитал, что с помощью симплипая и еще какой-то штуки можно импортировать несколько лент, компилировать их и воспроизводить как одну свою. Давайте вместе?
woos, действительно, заголовок в знаках вопроса, но остальное-то работает. А если ваше изменение внести, вообще что-то непонятное возникает – код отображается. Хоть бы ссылку на вики дали.
Ну что, подведем резюме “от любителей”. Непонятно, как специалист по веб-разработкам (а тем более – по управлению ими), приводит в кач. образца для использования веб-страницу с практически неиспользуемым доктайпом, без примера вставки кода на обычную страницу, да еще и без включения функции iconv для перекодировки новостей из формата UTF-8 (rss или xml) в Windows-1251. Далее – зачем в “«js» закидывать последнюю версию jquery”, а ссылаться в heade на нее же гугловскую? Есть еще несколько вопросов, но видно, что ответов не будет, так что закругляюсь. А по поводу “фирмы своей мечты” – таковой может быть только своя фирма, где вы сама и хозяин, и работник. Нужно дозреть, поработать на дядю, пока не надоест. Чужая фирма “мечтой” никогда не будет, к сожалению.
А как сделать горизонтальную прокрутку ?
Подскажите пожалуйста как убрать обрезания текста? И как сделать обновления побыстрее?
Vaness пишет: В файле css найди эту строку
.news ul {
overflow: hidden;
и поминяй ее на какую тебе надо
visible
Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden
Отображается только область внутри элемента, остальное будет обрезано.
scroll
Всегда добавляются полосы прокрутки.
auto
Полосы прокрутки добавляются только при необходимости.
А добавлять easing можно ?
Очень прикольный плагин, короый позволяет заменить стандартную анимацию jQuery (normal и swing)на другую.
Спасибо вам большое!!! Мне очень понравилось очень красиво и приятно! у меня есть маленькая просьба если конечно не сложно,не могли бы создать картинку при нажатие на нее она увеличивается ну как zoom,это конечно уже всем понятно как делается,но еще выплывает кнопка скачать,если можно то просто напишите код,а то я сижу и думаю как мне это сделать,в принципе я сделал кнопку скачать но она заключается в title, тоже увидел это у вас в одной из тем,но хотелось бы сделать красочно,если конечно это возможно,наверно просто нужно создать отдельную группу(Class),которая будет в себе заключать возможность вставить ссылку!))) премного благодарен! если даже не сделаете,то я думаю что все таки довояю,и выкину сюда вам на страницу или на почту вышлю))