Menambah Gambar ke dalam RSS Feed WordPress
Ilustrasi

Menambah Gambar ke dalam RSS Feed WordPress

Kayaknya, salah satu fitur WordPress yang jarang dipakai adalah RSS feed widget. Padahal kalau di explore lebih dalam lagi, fitur RSS dapat mempercantik tampilan blog dengan menampilkan konten sindikasi hasil kolaborasi antar web.

Tapi kalau desain tampilannya harus bagus!

Baca juga tutorial sebelumnya: Cara membuat WordPress page pagination

RSS adalah singkatan dari Really Simple Syndication, artinya “sindikasi yang sangat simple“. RSS memanfaatkan format XML untuk melakukan penyebaran dan pertukaran data antar website dengan mudah dan simple.

Selain format .xml, ada juga format .json untuk melakukan melakukan distribusi dan pertukaran data melalui protokol HTTP.

Nah mungpung fitur RSS feed sudah terintegrasi dalam sistem WP sejak versi 2.8.0, kali ini kita mencoba meredesain tampilan RSS feed ke dalam theme Pehthempress, dengan memanfaatkan fungsi fetch_feed().

Baca dokumentasi dulu tentang fungsi fetch_feed() di laman resmi developer.wordpress.org/reference/functions/fetch_feed/.

Sistem WordPress sendiri memanfaatkan library SimplePie untuk memparser RSS melalui fitur widget. Masalahnya, memasang RSS web lain melalui widget bawaan WP, hasil desainnya sangat buruk sekali.

Hanya menampilkan list judulnya saja, tidak adanya gambar.

By default, hasil output RSS sistem WordPress memang tidak menyertakan gambar.

<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" version="2.0">
   <channel>
      <title>Pehthemepress</title>
      <atom:link href="http://localhost/pehthemepress/feed" rel="self" type="application/rss+xml" />
      <link>http://localhost:8888/pehthemepress</link>
      <description>Just another Simple WordPress Themes</description>
      <lastBuildDate>Mon, 01 Nov 2021 07:55:06 +0000</lastBuildDate>
      <language>en-US</language>
      <sy:updatePeriod>hourly</sy:updatePeriod>
      <sy:updateFrequency>1</sy:updateFrequency>
      <generator>https://wordpress.org/?v=5.8.1</generator>
      <item>
         <title>How do I add an image to an item in RSS 2.0?</title>
         <link>http://localhost:8888/pehthemepress/how-to-add-image-in-rss/</link>
         <comments>http://localhost:8888/pehthemepress/2021/11/01/how-to-add-image-in-rss/#respond</comments>
         <dc:creator><![CDATA[Pehthempress]]></dc:creator>
         <pubDate>Mon, 01 Nov 2021 07:55:02 +0000</pubDate>
         <category><![CDATA[News]]></category>
         <guid isPermaLink="false">http://localhost:8888/pehthemepress/?p=63</guid>
         <description><![CDATA[Lorem ipsum, dolor sit amet..]]></description>
         <content:encoded><![CDATA[<p>Lorem ipsum, dolor sit amet...</p>]]></content:encoded>
         <wfw:commentRss>http://localhost:8888/pehthemepress/2021/11/01/how-to-add-image-in-rss/feed/</wfw:commentRss>
         <slash:comments>0</slash:comments>
      </item>
      <item>
        ...
      </item>
      <item>
        ...
      </item>
   </channel>
</rss>

Pasalnya, sudah dari bawaan struktur markah RSS versi 2.0 pun tidak menyertakan tag <image> di dalam bagian <item> yang menampung data konten. Tag <image> berada dalam sub <channel> dalam struktur RSS format xml.

Baca dokumentasi lengkap tentang aturan format RSS di https://cyber.harvard.edu/rss/rss.html

Tag <image> yang berada didalam sub tag <channel> bisa bermanfaat untuk menampung gambar favicon atau cover utama website, tapi tidak memungkin untuk image post.

Cara Menambah Image ke dalam Item RSS Feed WordPress

Jadi, cara menambah gambar feature image ke dalam item RSS feed WordPress untul setiap post, yaitu dengan memanfaatkan tag enclosure yang berada dalam tag <item>.

Enclosure-RSS-item.jpg

Tag <enclosure> memiliki tiga attribute, salah satunya attribute url.

<enclosure url="http://www.scripting.com/mp3s/weatherReportSuite.mp3" length="12216320" type="audio/mpeg" /> 

Dengan demikian, kita bisa memerintahkan sistem WordPress untuk menambahkan satu elemen lagi ke dalam output RSS WordPress dengan menambahkan tag <enclosure url="" length="" type="" />.

Caranya cukup mudah, tingga install plugin. No…no…no…

Cukup insert micro script buatan Kaspars Dambis (https://github.com/kasparsd/feed-image-enclosure) ke dalam file function.php WordPress theme:

// Add feature image as RSS item

add_action( 'rss2_item', 'add_post_featured_image_as_rss_item_enclosure' );

function add_post_featured_image_as_rss_item_enclosure() {
  if ( ! has_post_thumbnail() )
    return;

  $thumbnail_size = apply_filters( 'rss_enclosure_image_size', 'thumbnail' );
  $thumbnail_id = get_post_thumbnail_id( get_the_ID() );
  $thumbnail = image_get_intermediate_size( $thumbnail_id, $thumbnail_size );

  if ( empty( $thumbnail ) )
    return;

  $upload_dir = wp_upload_dir();

  printf( 
    '<enclosure url="%s" length="%s" type="%s" />',
    $thumbnail['url'], 
    filesize( path_join( $upload_dir['basedir'], $thumbnail['path'] ) ), 
    get_post_mime_type( $thumbnail_id ) 
  );
}

Maka output RSS Feed akan menghasilkan:

<item>
   <title>How do I add an image to an item in RSS 2.0?</title>
   <link>http://localhost:8888/pehthemepress/how-to-add-image-in-rss/</link>
   <comments>http://localhost:8888/pehthemepress/2021/11/01/how-to-add-image-in-rss/#respond</comments>
   <dc:creator><![CDATA[Pehthempress]]></dc:creator>
   <pubDate>Mon, 01 Nov 2021 07:55:02 +0000</pubDate>
   <category><![CDATA[News]]></category>
   <guid isPermaLink="false">http://localhost:8888/pehthemepress/?p=63</guid>
   <description><![CDATA[Lorem ipsum, dolor sit amet..]]></description>
   <content:encoded><![CDATA[<p>Lorem ipsum, dolor sit amet...</p>]]></content:encoded>
   <wfw:commentRss>http://localhost:8888/pehthemepress/2021/11/01/how-to-add-image-in-rss/feed/</wfw:commentRss>
   <slash:comments>0</slash:comments>

  <!-- New item here -->
   <enclosure url="http://localhost:8888/pehthemepress/wp-content/uploads/2021/11/Logo-Tesla_pic_by_milan-csizmadia-unsplash.jpg" length="140541" type="image/jpeg" />

</item>

Cara menampilkan RSS feature image WordPress

Selanjutnya cara menampilkan RSS Feed beserta image yang baru saja ditambah dalam item enclosure ke dalam theme WordPress menggunakan function fetch_feed().

<?php

// Panggil dulu librarynya
include_once(ABSPATH . WPINC . '/feed.php');

// Mengambil objek RSS dari web yang dituju
$rss = fetch_feed('https://now.breedie.com/feed');

// Tentutan jumlah feed, nilai awal kembali ke 0
$maxitems = 0;

if (!is_wp_error($rss)) {

    // Dari jumlah feed item yang ada, cukup batasi saja menjadi 3, misalnya 
    $maxitems = $rss->get_item_quantity(3);

    // Bungkus semua item feed ke dalam satu array baru dimulai dari index 0 hingga maxitems
    $rss_items = $rss->get_items(0, $maxitems);
}

Berikutnya, tinggal looping array $rss_items ke dalam theme WordPress.

<?php if ($maxitems == 0) : ?>

  <!-- Tampilkan info error jika rss feed kosong -->
  <?php _e( 'No items ... ' ); ?>

  <?php else :
  // Jika RSS feed berisis list posting
  // Lakukan loop items
  foreach ($rss_items as $key => $item) : ?>

  <a href="<?php echo esc_url( $item->get_link() ); ?>">

  <figure class="card">

    <?php
    // Get image link
    if ( $enclosure = $item->get_enclosure() ) {
    echo '<img class="fluid" src="' . esc_url( $enclosure->link ) . '" alt="' . esc_html( $item->get_title() . '">';
    }
    ?>

    <figcaption class="p2">

      <?php echo esc_html( $item->get_title() ); ?>

    </figcaption>

  </figure>
  </a>

  <?php endforeach; ?>

<?php endif;?>

Bagaimana, mudah bukan?

Hasil akhir keseluruhan code, simpan ke dalam satu part file baru, content-rss.php misalnya.

<?php
/*
* Template part for displaying card RSS Feed
*/

// Panggil dulu librarynya
include_once(ABSPATH . WPINC . '/feed.php');

// Mengambil objek RSS dari web yang dituju
$rss = fetch_feed('https://now.breedie.com/feed');

// Tentutan jumlah feed, nilai awal kembali ke 0
$maxitems = 0;

if (!is_wp_error($rss)) {

    // Dari jumlah feed item yang ada, cukup batasi saja menjadi 3, misalnya 
    $maxitems = $rss->get_item_quantity(3);

    // Bungkus semua item feed ke dalam satu array baru dimulai dari index 0 hingga maxitems
    $rss_items = $rss->get_items(0, $maxitems);
}
?>

<div>
  
  <?php if ($maxitems == 0) : ?>
    
    <!-- Tampilkan info error jika rss feed kosong -->
    <?php _e( 'No items ... ' ); ?>

    <?php else :
        // Jika RSS feed berisis list posting
        // Lakukan loop items
        foreach ($rss_items as $key => $item) : ?>

        <a href="<?php echo esc_url( $item->get_link() ); ?>">

          <figure class="card">

            <?php
               // Get image link
               if ( $enclosure = $item->get_enclosure() ) {
                  echo '<img class="fluid" src="' . esc_url( $enclosure->link ) . '" alt="' . esc_html( $item->get_title() . '">';
               }
              ?>

            <figcaption class="p2">
                <?php 
                  // Tampilkan judul                
                  echo esc_html( $item->get_title() ); ?>
            </figcaption>

          </figure>
        </a>

    <?php endforeach; ?>

  <?php endif;?>

</div>

Note: Saat tutorial ini dibuat, script ini berjalan di WordPress 5.8.x. Kalau ada yang kurang jelas mengenai tips coding ini, silahkan bertanya via kolom komentar dibawah ini.

Comment

comments powered by Disqus