WordPress 建站指南（2）

寫在前面

一直不願意升級 wordpress 版本和 twentytwelve 主題，因為添了一些自定義的東西，對原有模版做了不少修改，擔心一升級就又得重做一遍

趁著改版，點了更新，結果就耗費了差不多一整天時間來善後。。。越來越不喜歡 wordpress 了

一。添加自定義頁面

步驟比較簡單，但不太友好：

1. 進入 wordpress/wp-content/themes/twentytwelve/ 找到 page.php，下載到本地

2. 修改文件頭部註釋，例如：

   <?php
   /*
   Template Name: My Page Name
   */
   ?>
   

My Page Name 可以換成自定義名稱，將會出現在模版下拉列表中

P.S. 雖然以註釋形式來設置模版名稱不太科學，但 wp 就是這樣，勉強接受吧

3. 修改文件內容，添加自定義邏輯，例如：

   <?php
   /*
   Template Name: My Page Name
   */
   get_header(); ?>
   
       <div id="primary" class="site-content">
           <div id="content" role="main">
               <?php
                   query_posts('cat=51');
   
                   while ( have_posts() ) : the_post();
                   get_template_part('content');
                   comments_template( '', true );
                   endwhile; // end of the loop.
   
                   wp_reset_query();   // reset query
               ?>
           </div><!-- #content -->
       </div><!-- #primary -->
   
   <?php get_sidebar(); ?>
   <?php get_footer(); ?>
   

4. 保存，修改文件名，上傳至 wp 當前主題模版目錄下，如 wordpress/wp-content/themes/twentytwelve/page-templates

5. 進入後台/頁面/，新建頁面，標題就是會在首頁導航欄展示的那幾個字；選擇模版（在下拉列表中選取 My Page Name）；點擊更新（文章內容不用填）

6. 更新後，點擊查看文章

特別注意：一旦更新主題，這些自定義頁面都會被刪掉，建議不要升級，非要升級的話，切記備份

二。獲取最新文章列表

查詢文章信息主要用到一個函數：query_posts

這裡提供一個簡單的工具函數：

// 獲取文章列表，生成：
// <li><h2 class="icon icon-item"><a href="blog/響應時間的 3 個重要界限/" target="_blank">響應時間的 3 個重要界限</a></h2></li>
// 具體樣式類可自行修改
function getPostList($strFilter) {
    global $post;

    query_posts($strFilter);

    while (have_posts()): the_post();
    echo '<li><h2 class="icon icon-item"><a href="';
    echo the_permalink();
    echo '" target="_blank">';
    echo mb_strimwidth(strip_tags(apply_filters('the_title', $post->post_title)), 0, 50," ");
    echo '</a></h2></li>';
    endwhile;
    
    wp_reset_query();   // reset query
}

工具函數簡單用法示例：

1. 獲取最新的 10 篇文章列表

   getPostList('showposts=10');

2. 獲取某分類最新的 10 篇文章列表

   getPostList('cat=301&showposts=10');

cat 的值很有意思，在後台也不能直接看到，有彩蛋：進入後台/文章/分類目錄，鼠標懸停在分類名稱上，看瀏覽器左下角顯示的 URL，其中類似於 tag_ID=133 這樣的東西，133 就是 cat 的值

關於 query_posts 函數的更多信息請查看 WordPress 函數：query_posts（查詢文章）

三。如何在 wordpress 目錄外使用 wp API

用處不是特別大，比如本站根目錄下的所有二級頁面都是在 wordpress 目錄之外的（wp 被藏在了自定義首頁後面），那麼在首頁如何獲取文章列表？

wp 的 API 入口是 wordpress/wp-load.php，換句話說，只要引入了該文件，就可以使用 wp 提供的 API 了，示例代碼如下：

define('WP_USE_THEMES', false); // 不使用主題
require('./cms/wordpress/wp-load.php');

另一個應用場景是在 wp API 的基礎上開發自定義接口，返回 JSON 數據之類的，這樣的東西沒有必要也不建議放在 wp 目錄下（萬一不小心點下更新把這些文件給刪掉了呢？），在 wp 目錄外新建個目錄放進去就很合理，也便於維護

四。如何解決 google 字體阻塞頁面的問題

升級主題之後發現頁面加載很長時間，在 Network 面板發現是 google 字體（fonts.googleapis.com）的鍋，請求字體資源的語句在 wordpress/wp-content/themes/twentytwelve/functions.php 中，雖然不太科學，但確實是在這裡定義的

解決方案有 3 個：

• 把 Google 字體換成 360 字體（推薦做法）

具體做法是把 functions.php 中的 https://fonts.googleapis.com 換成 http://fonts.useso.com（注意 http，後者不支持 https）

• 把請求的字體都下載下來，上傳到自己的目錄下，把 Google 字體的 URL 改為服務器上的字體 URL

• 刪掉相關語句，不加載這些字體

把 twentytwelve_get_font_url 函數修改為：

    function twentytwelve_get_font_url() {
        return '';
    }

這些字體對中文站沒什麼用，直接去掉也無妨

五。修改 entry-meta

預設的 entry-meta 很醜，比如：

本條目發佈於 xxx，屬於 xx 分類，被貼了 x,x,x 標籤。

想改這個就比較費勁了，寫在配置文件（漢化文件）裡：wordpress/wp-content/languages/themes/twentytwelve-zh_CN.mo 和 twentytwelve-zh_CN.po，需要藉助 PoEdit，具體操作步驟請查看 如何打開 mo 文件並修改 PoEdit，有點反編譯的感覺~

改完之後上傳到原路徑即可（還是建議修改前先備份，避免悲劇）

注意：某些主題會反覆自動生成 po 和 mo 文件，導致修改失效，所以上傳後還需要修改 mo 文件的讀寫權限，改為 444（-r--r--r--）只讀

六。頭像無法顯示

頭像來自 www.gravatar.com，已經被牆掉了，會導致後台打開速度極慢，解決方案是改用 https 請求這些頭像圖片，在 functions.php 中添加如下代碼：

function get_ssl_avatar($avatar) {
   $avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2" class="avatar avatar-$2" height="$2" width="$2">',$avatar);
   return $avatar;
}
add_filter('get_avatar', 'get_ssl_avatar');

點擊更新立即生效，但頭像會變得很大很醜（預設是 100*100px 的），建議再添點樣式控制（在 style.css 中）：

.avatar {
    width: 50px !important;
    height: 50px !important;
}

P.S. 上面需要修改的 functions.php 和 style.css 可以直接在後台/外觀/編輯裡面選擇文件在線編輯