換了新版型之後，總是特別想加點什麼。就花了點時間把之前一直想做的輪播牆給搞定了。原先的想法就是希望可以把後台設定的鏈結用圖像的方式表現出來，並加上該 Blog 最新的一則文章。成品就像下圖那樣，或是可以連到我的 Blogroll 分頁去觀看。
一開始是想先找找看有沒有現成的 plugin 可以用，如果有人造了車子我就不需要自己刻輪子了。找到最接近我需求的是 WordPress MyLinks 這個 plugin。但是看了一下要改成我想要的樣子還是需要費點功夫，與其這樣那倒不如我自己改可能自由度還比較高一點。
取出鏈結的部分相當簡單，只要透過 WordPress 內建的函式 get_bookmarks() 即可取得我需要的資料。然後再用迴圈跑一下就可以跑出大致上的樣子：
-
<ul id="linkbox"><?php
-
-
$linklist = get_bookmarks('category=2');
-
foreach ($linklist as $site) {
-
echo "<li>";
-
-
echo "<div class='linkname'>";
-
echo "<a href='".$site->link_url."' title='".$site->link_name."' rel='me'>".$site->link_name."</a>";
-
echo "</div>";
-
-
echo "<div class='linkimage'>";
-
-
echo "<a href='".$site->link_url."' title='".$site->link_name."'><img src='".$site->link_image."' alt='".$site->link_name."'/></a>";
-
echo "</div>";
-
-
} else {
-
echo "<div class='linkimage'></div>";
-
}
-
-
$objname = "rp_".$site->link_id;
-
-
echo "</li>\n\r";
-
}
-
?></ul>
然後網站的截圖部分，我一開始是用 websnapr 這個網站的服務，把呼叫 API 產生縮圖的網址丟進鏈結的圖片位址這個欄位，不過沒多久圖片就被 limit exceeded 的訊息圖片取代，看了一下說明，理論上我應該還沒有超過一個月 10,000 張縮圖的 request 才對，不懂。不過出現這樣的問題，所以我還是去找了一下其他的替代方案。最後找到日本的 Heartrails Capture 這個網站，試用了一下感覺還滿不錯的，不需要註冊，感覺也沒甚麼限制，使用也很方便，於是就把所有鏈結的圖片位址換成類似 http://capture.heartrails.com/medium?http://evenrain.com 這樣的 URL，就會自動產生一張 200x150 的縮圖。
blog 的最新文章部分，我則是透過 Google Ajax Feed API 來做。我將 Sample 稍稍改為下面這樣以符合我的需求，並使用 Steven Levithan 寫的 javascript date format 函式庫來解決 rss 顯示日期的問題
-
<script type="text/javascript">
-
google.load("feeds", "1");
-
-
function getfeed(objname, url) {
-
var feed = new google.feeds.Feed(url);
-
feed.setNumEntries(1);
-
feed.load(function(result) {
-
if (!result.error) {
-
var container = document.getElementById(objname);
-
for (var i = 0; i <result.feed.entries.length; i++) {
-
var entry = result.feed.entries[i];
-
var mydate = new Date(entry.publishedDate);
-
mydate = mydate.format("mediumDate");
-
container.innerHTML = mydate+":<br/><a href='"+entry.link+"'>"+entry.title+"</a>";
-
}
-
}
-
});
-
}
-
</script>
最後在頁面的最底下再跑一次迴圈，針對有設定RSS 位址的鏈結呼叫上面寫的函式
-
<?
-
foreach ($linklist as $site) {
-
$objname = "rp_".$site->link_id;
-
?>
-
getfeed('<?=$objname?>','<?=$site->link_rss?>');
-
<?
-
}
-
}
-
?>
這只是個人小小的野人獻曝，並沒有用到太多高深的技巧，程式碼也還有些地方要修改，暫且就做個紀錄 :)
The 我的輪播牆 by evenrain, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Taiwan License.