[WordPress TwentyEleven] 替TwentyEleven佈景主題加上美觀的特色圖片

WordPress似乎由2.8版開始就提供了「特色圖片」的功能（未求證），也就是顯示在文章開頭的縮圖，除了美化網頁外，對文章內容也有畫龍點睛之效。但可惜WordPress 3的預設佈景主題Twenty Eleven並未支援顯示特色圖片的功能，我特別研究了一下，終於成功的把特色圖片加到Twenty Eleven，以下是修改說明。

修改Child Theme

我們使用的仍然是Child Theme的方法，在後台wp-content/themes/TwentyEleven-child資料夾裡修改content.php，在<header class="entry-headere">上方插入一行<?php the_post_thumbnail(); ?>：

 
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php the_post_thumbnail(); ?>
    <header class="entry-header">

同時修改Child Theme資料夾裡的style.css，在最後加入下列設定：

 
/* for featured image */
.home .attachment-post-thumbnail { float: left; margin-right: 2%; margin-top: 15px; }
.home h1.entry-title { clear: none; }
.home .entry-meta { clear: none; }
.home .entry-content { clear: both; }

設定特色圖片

the_post_thumbnail()會取出每篇文章裡設定好的特別圖片並顯示之。接著就是替每篇文章都指定好特色圖片。

在後台編輯文章網頁的右下角有設定特色圖片的連結，按下後會彈出上傳圖片的對話窗，本機上傳圖片和媒體庫都能選擇要設定為特色圖片的對象，按下【設定為特色圖片】就可以了，圖片大小最好是選用縮圖。

參考

• http://wordpress.org/support/topic/why-dont-i-see-post-thumbnails-in-twentyeleven-theme
• 加了特色圖片的示範網站：http://jdev.tw/newlife

＃＃

您可能也會有興趣的類似文章

• [WordPress 3] 以Child Theme機制修改Twenty Eleven佈景主題為中文版 (0則留言, 2012/01/19)
• [WordPress 3] 修改Twenty Eleven佈景主題在iPad瀏覽側邊欄的問題 (2則留言, 2012/01/23)
• [WordPress 3] 將Twenty Eleven佈景主題加上分頁導航樣式 (0則留言, 2012/01/22)
• 〔WordPress〕 前/後篇文章導航連結增加文章標題 (1則留言, 2012/03/12)
• WordPress瀏覽圖片的FancyBox外掛 (8則留言, 2010/07/10)
• [WordPress] 讓Twenty Eleven樣板也能顯示側邊欄的修改步驟 (9則留言, 2012/03/01)
• [Obs＃96] Obsidian分頁調整： CSS樣式與外掛，讓分頁操作更簡便 (0則留言, 2022/09/10)
• [Obs＃98] Obsidian的幾個CSS與HTML小技巧 (0則留言, 2022/10/02)
• Obs155｜程設師的編程好友：CodeBlock Customizer／Code Styler、Codeblock Tabs、Keyshots (0則留言, 2024/03/09)
• [轉貼] 架站好書，極度推薦《站長親授! WordPress 3.0 部落格架站十堂課》 (2則留言, 2010/11/09)
• Obs129｜Obsidian除了CSS片段以外的CSS進階用法與兩個CSS外掛 (0則留言, 2023/05/14)
• 02. 用IDEA快速建立第一支Flutter程式 (0則留言, 2019/09/19)
• 09. Flutter的常用佈局Widget：Container (0則留言, 2019/10/12)
• 自動產生文章目錄的WordPress外掛：jQuery Table of Contents (2則留言, 2010/06/13)
• TailwindCSS-2 JIT CSS編譯與JIT設定 (0則留言, 2022/11/02)