WordPress サイト構築ガイド（2）

前言

ずっと WordPress のバージョンと twentytwelve テーマをアップグレードしたくなかったのです。カスタマイズしたものをいくつか追加し、既存のテンプレートにかなりの修正を加えたため、アップグレードするとまたやり直しになるのを心配していました

バージョン変更を機に更新をクリックした結果、ほぼ丸一日をかけて後処理に費やすことになりました。。。ますます WordPress が好きになれなくなってきました

一.カスタムページの追加

手順は比較的シンプルですが、あまり友好的ではありません：

wordpress/wp-content/themes/twentytwelve/に入り、page.phpを見つけてローカルにダウンロード
ファイルヘッダーのコメントを修正。例えば：
```
<?php
/*
Template Name: My Page Name
*/
?>
```

My Page Nameはカスタム名称に置き換え可能で、テンプレートドロップダウンリストに表示されます

P.S.コメント形式でテンプレート名を設定するのはあまり科学的ではありませんが、WP は就是这样。仕方なく受け入れましょう

ファイル内容を修正し、カスタムロジックを追加。例えば：

<?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(); ?>

保存し、ファイル名を修正して、WP 現在のテーマテンプレートディレクトリにアップロード。例：wordpress/wp-content/themes/twentytwelve/page-templates
バックエンド/ページ/に入り、新規ページ作成。タイトルはホームページナビゲーションバーに表示される文字列。テンプレートを選択（ドロップダウンリストから My Page Name を選択）。更新をクリック（記事内容は記入不要）
更新後、クリックして記事を表示

特に注意：一度テーマを更新すると、これらのカスタムページはすべて削除されます。アップグレードしないことをお勧めします。アップグレードする必要がある場合は、必ずバックアップを取ってください

二.最新記事リストの取得

記事情報の照会には主に 1 つの関数を使用します：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
}

ツール関数の簡単な使用例：

最新の 10 記事リストを取得

getPostList('showposts=10');
某カテゴリの最新 10 記事リストを取得

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

cat の値は面白く、バックエンドでも直接見ることができません。イースターエッグがあります：バックエンド/記事/カテゴリディレクトリに入り、マウスをカテゴリ名の上にホバーし、ブラウザの左下に表示される URL を見ます。tag_ID=133のようなものがあり、133 が cat の値です

query_posts関数の詳細情報については WordPress 関数：query_posts（記事照会）を参照

三.wordpress ディレクトリ外で wp API を使用する方法

用途は特に大きくありません。例えば、当サイトのルートディレクトリ下のすべての 2 級ページは 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 は、バックエンド/外観/編集の中でファイルを選択してオンライン編集できます

前言