WordPress 2.0 的照片管理

WordPress 2.0 Duke 前兩天正式釋出,不過,按照慣例,有興趣嘗鮮的人大概在正式釋出之前大概都已經先玩過了。WP 2.0 的新功能之一,就是對於照片上傳功能做了一定的改寫,將原本在選單上的「上傳」(Upload)這個選項,移到了發表文章的介面中,稱為是「行內」(inline)的上傳,與之前的版本或其他的網路出版工具相較,之前的照片上傳功能,就是把照片檔案傳到伺服器的某個目錄當中,而 WP 2.0 會在上傳之後,為這張照片發表一篇類型為附件(Attachment)的文章(post,在 WP 的設計中,文章分成「已發表」、「草稿」、「個人私有文章」、「靜態網頁」,以及新增的「附件」),將這篇「附件文章」,當成你正在處理的這篇文章的附件,而在這篇文章當中,寫入關於這張照片的相關 metadata。

例如,如果你設定的文章網址為 http://example.com/post/mypost ,當你上傳一張照片,並且將照片的標題設定為 myphoto 的時候,那麼,當你連到了 http://example.com/post/mypost/myphoto ,就會以一個獨立的頁面,顯示附件的內容。另外,雖然在官方模板中還沒有提供,不過你可以在自己的模板中,增加一個叫做 attachment.php 的 php 檔案,當成是顯示附件的模板。

不過,如果你只是把 page.php 或 single.php 複製成 attachment.php,應該是不會出現照片的,因為照片的網址並不是存在於 post_content 欄位裡頭,而是在一個新增的欄位 guid 裡。所以在模板的 loop 裡頭,試試以下的程式碼,用 img 語法顯示照片:

if($post->guid && strstr($post->post_mime_type, "image")) {
    echo '

'.$post->post_title.'

'; }

說到 guid,如果你已經升級到了 WP 2.0 ,而且設定了固定網址(permalink)的結構,可以發現,在之前的版本中,會在 .htaccess 檔案中增加了非常多的轉旨規則,可說是密密麻麻,但是在 WP 2.0 中,.htaccess 檔案就只有五行而已,就是因為 guid。系統會在每一篇文章的資料中,增加一筆叫做 guid 的資料,guid 就是這篇文章的網址,.htaccess 的規則就是把所有的網址都丟給 index.php 判斷,index.php 就會去資料庫中比對是否有符合這個位置的文章,然後就把文章找出來,而如果是照片,guid 裡頭,就是照片檔案的網址。

因為照片是被當成文章的附件處理,所以,每一張照片都有對應到「這張照片是屬於那篇文章」的 metadata(實際上,就是這個附件文章的上層文章的 ID – post_parent),那麼,我們還可以做這樣的事情:隨機選出幾張照片,當成照片列表,然後點到照片的鍊結上,就可以到這張照片的所屬文章了。換言之,就是一個「隨機文章」的圖片版,會比單純的「隨機文章」功能看來華麗些。

作法大概是這樣。比方說,我們要把這個照片列表,放在一個叫做 #photolist 的 div 裡頭,我們先在 css 樣式表中定義一下 #photolist:

#scroller a {
   display: block;
   width: 100px;
   height: 100px;
   border: 1px solid #CCC;
}

這個樣式的內容為,div 下的每個鍊結都是 100px 寬高的方塊,然後有一個 1px 寬的外框,而這個樣式表的設計,會將照片列表以垂直的方式呈現出來,如果要改成水平的,大概就是要加上一個 float 語法。—然後,我們要寫一個 function,看看是要放在 my-hacks.php 或是寫成一個 plugin,都可以。

function photolist(){
   global $wpdb;
   $images = $wpdb->get_results("SELECT ID, post_date, post_title, guid, post_parent FROM $wpdb->posts WHERE post_status = 'attachment' AND left(post_mime_type, 5) = 'image' ORDER BY RAND( ) LIMIT 5", ARRAY_A);
   /* ORDER BY RAND() 代表隨機選擇, LIMIT 5 代表選擇五張照片,
      這邊也可以寫成是要用最近五篇文章之類的語法。 */
   foreach ( $images as $key => $image ) {
      $attachment_ID = $image['ID'];
      $meta = get_post_meta($attachment_ID, '_wp_attachment_metadata', true); 
      $image = array_merge($image, $meta);
      if ( ($image['width'] > 128 || $image['height'] > 96) && !empty($image['thumb']) && file_exists(dirname($image['file']).'/'.$image['thumb']) ) {
         $src = str_replace(basename($image['guid']), '', $image['guid']) . $image['thumb'];
         $images_script .= "src".$attachment_ID."a = '$src';\nsrc".$attachment_ID."b = '".$image['guid']."';\n";
         $thumb = 'true';
         $thumbtext = $__thumbnail_on;
      } else {
         $src = $image['guid'];
         $thumb = 'false';
         $thumbtext = $__no_thumbnail;   
      }
      $href =  get_permalink($image['post_parent']);
      /* 如果改成 get_permalink($image['ID']) ,就是直接前往這張照片的附件文章網頁 */
      if($image['height'] && $image['width']) {
         if($href) echo ""; else echo "";
         echo "\"".$image['post_title']."\""; $image['width'])
         echo ' style="height: 90px; margin-top: 5px;" ';
         else  {
            $height = (int)(($image['height'] * 90) / $image['width']);
            $margin = (int)(100 - $height)/2;
            echo ' style="width: 90px; margin-top: '.$margin.'px;" ';
         }
         echo " />";
      }
   }
}

這個 function 最後幾行的用意,在於不讓 img 語法中的照片變形,如果照片是高大於寬,那就是將高度設為 90px,上下留 5px 的間距,反之,如果是寬大於高,那就是寬設為 90px,另外算出上下應該是怎樣的間距。最後,只要在模板中插入:

就可以了。

Be Sociable, Share!

6 thoughts on “WordPress 2.0 的照片管理

  1. Pingback: Blogging Pro China » Blog Archive » WordPress 2.0 的照片管理

  2. Pingback: :::zonble’s promptbook » WordPress 2.0 的 Photocast:::

  3. Pingback: maTT cHEn {dot} info » 更新一些 WP 的外掛

  4. Pingback: 游戏:云和钟 » Blog Archive » 乏味的生活?(2.11-18)

Leave a Reply