פיד RSS בצורת spezify

התבקשתי להכין עבור אתר וורדפרס תצוגת פיד RSS, כשה-RSS מכיל בתוכו פריטים מכל מיני מקורות: טוויטר, פייסבוק,
יוטיוב, פליקר.
פורמט התצוגה צריך להיות דומה לתוצאות חיפוש באתר Spezify.com (הכניסו מילות חיפוש, והתוצאות תראנה כך):

בדיוק יום לפני-כן שקיבלתי את הבקשה הזו, נתקלתי בתוסף של jQuery בשם masonry שמעמד
float-ים אחד מתחת לשני, גם אם הם בגבהים שונים (שזה מה שמיוחד בתוצאות של spezify). הוא עושה זאת ע”י חישוב של הגובה של
כל אחד מהפריטים, מוסיף padding ו-margin לפי ה-CSS, ואז מייצב אותם אבסולוטית.
הדבר השני שהיה עלי למצוא זה קורא RSS של וורדפרס, שמציג גם תמונות וסרטונים. הווידג’טים של RSS שהכרתי
לוורדפרס (זה הדיפולטי, ועוד
אחד שלפעמים אנחנו משתמשים בו כשהדיפולטי עושה בעיות) לא מציגים תמונות, אז התחלתי לחפש בתגית ה-RSS של http://wordpress.stackexchange.com,
ומצאתי שם שאלה זהה לשאלתי – איך להציג תמונות
ב-RSS של וורדפרס, והתשובה הראשונה שם היתה להשתמש ב-SimplePie.
SimplePie הוא מנוע קורא RSS שכתוב ב-PHP שיכול גם לעמוד בפני עצמו, וגם
להיות תוסף למערכות. כשרוצים להשתמש בו בוורדפרס, צריך להתקין קודם את SimplePie Core, ואח”כ את
SimplePie Plugin for
WordPress.
אחרי ההתקנה, צריך להכנס לאפשרויות של הפלגאין, ולבחור את ה-template המתאים, כך שיציג גם את התוכן של הפריטים,
ולא רק את הכותרת כמו שמוצג בתבנית הדיפולטית. אני בחרתי את blog_style_with_enclosures. קבצי התבניות השונים נמצאים
בספריה wp-content/plugins/simplepie-plugin-for-wordpress/templates/, ושם אפשר לשלוט ב-HTML שנוצר.
מה שנשאר (בסך הכל….) זה לאחד את שני הדברים. אז מתחילים בהוספת קבצי ה-JS הנצרכים – jQuery ו-masonry. את
jQuery אפשר להוסיף בצורה מאד פשוטה- מאחר ש-jQuery כבר מגיע עם WordPress, כל מה שצריך לעשות זה לקרוא לו ב-header.php
כפי שמסובר במאמר הוספת jQuery לוורדפרס. אבל במקרה שלנו אין בזה צורך: גם ל-masonry צריך לעשות wp_enqueue,
ובמתודה הזו אפשר להעביר מערך של שמות קבצי javascript שעליהם מסתמך הקובץ שלו אנחנו עושים enqueue. מכיון שה-masonry
מסתמך על jQuery, מספיק להעביר את jQuery במערך, וזה כבר מעלה אותו. לכן שורת הקוד היחידה שצריך לכדי להוסיף
את שני קבצים אלה היא זו:
wp_enqueue_script("jquery-masonry",'http://example.com/whatever/js/jquery.masonry.min.js',
array('jquery'), '1');
כעת היו דרושות התאמות. לפי הסקיצה שקיבלתי, היה עלי לתת אייקון שונה לכל פריט, לפי המקור שלו: טוויטר, פליקר
או יוטיוב:

אז זה היה די פשוט, אחרי שמבינים איפה מוצג ה-HTML (כפי שאמרנו קודם, בתיקיית tempaltes של הפלגאין, בקובץ
blog_style_with_enclosures.tmpl), ומאיפה ה-HTML הזה מקבל את המידע שלו (simplepie_wordpress_2 בתיקיית הפלגאין). בקובץ
ה-tmpl יש תגיות HTML, ובתוכן ביטויים, כמו למשל:
<p>{FEED_DESCRIPTION}</p>
בקובץ ה-PHP הזה יש קטע מאד ארוך (לא נמצא בתוך פונקציה…) שקבל את המידע מהפיד, ומכניס אותו לקובץ ה-HTML,
ע”י החלפה של המידע בביטוי. למשל:

$description = $feed->get_description()
$tmpl = str_replace('{FEED_DESCRIPTION}', SimplePie_WordPress::post_process('FEED_DESCRIPTION',
$description), $tmpl);

אז הכנסתי לקובץ ה-tmpl את השורה הזו:
<span class="{SOURCE_LOGO}"></span>
ובקובץ ה-PHP, הכנסתי את קטע הקוד:

if (strpos($item->get_permalink(), "twitter.com") !== false) {
    $working_item = str_replace('{SOURCE_LOGO}', SimplePie_WordPress::post_process('SOURCE_LOGO', 'twitter'),
        $working_item);
} else {
    if (strpos($item->get_permalink(), "flickr.com") !== false) {
        $working_item = str_replace('{SOURCE_LOGO}', SimplePie_WordPress::post_process('SOURCE_LOGO', 'flickr'),
            $working_item);
    } else {
        if (strpos($item->get_permalink(), "youtube.com") !== false) {
            $working_item = str_replace('{SOURCE_LOGO}', SimplePie_WordPress::post_process('SOURCE_LOGO', 'youtube'),
                $working_item);
        }
    }
}

כך נתתי ל-span את ה-class המתאים לפי המקור, ובקובץ ה-CSS, שמתי background ל-span, ושיניתי לו את ה-position
לפי ה-class (כי הלוגואים יושבים ב-sprite).
וזהו. הרבה מלל, אבל בתכל’ס – לא הרב
ה עבודה.
אפשר לראות את התוצאה באתר ננו צ’נלס, בצד ימין – Talking NanoChannels