WordPress 3分間フッキング：サイト読み込み時間を表示する方法

こんにちは！埼玉県川越市でWordPress関連のサービスを展開している私たちエーデルハーツです。今日も「WordPress 3分間フッキング」シリーズでWordPressの便利なフックの活用方法をお伝えします。

WordPressサイトのパフォーマンスを常に監視したい…でも重いプラグインは入れたくない。そんな悩みを持つ管理者の方に朗報です！たった数行のコードでサイトの読み込み時間を簡単に表示できる方法をご紹介します。

サイトの速度は、ユーザー体験とSEOの両方に大きな影響を与えます。今回は「shutdown」フックと「wp_footer」フックを使い、管理者だけが見られるページ読み込み時間の表示機能を実装する方法をご紹介します。

フック選びで迷ったら？shutdown と wp_footer の違い

今回のコード例には、2つのフックが候補として登場しています。


// shutdown フックを使う場合
add_action('shutdown', 'wp3min_show_load_time');

// または

// wp_footer フックを使う場合
add_action('wp_footer', 'wp3min_show_load_time');

// shutdown フックを使う場合

add_action('shutdown', 'wp3min_show_load_time');

// または

// wp_footer フックを使う場合

add_action('wp_footer', 'wp3min_show_load_time');

どちらを選ぶべきか迷いますよね？それぞれの特徴と違いを理解しましょう。

shutdown フックの特徴

「shutdown」フックはWordPressの処理が完全に終了する直前、PHPが実行を終える直前に動作します。

サイト全体のパフォーマンスを最も正確に計測したい場合は、shutdown フックが最適です。全ての処理とコンテンツ出力が完了した後に実行されるため、実際のページ読み込み時間を正確に把握できます。

ただし、出力バッファの処理後に実行されるため、表示位置が思った通りにならない場合があります。

wp_footer フックの特徴

「wp_footer」フックは、テーマのフッター部分（通常は </body> タグの直前）で実行されます。

このフックはユーザー向けコンテンツを表示するのに適しており、JavaScriptの挿入なども簡単です。ただし、テーマがこのフックを実装していないと動作しません。

多くのWordPressテーマでは wp_footer フックは標準実装されていますが、カスタムテーマでは実装されていない場合もあります。その場合は shutdown フックを使用しましょう。

実装コードの解説

それでは具体的なコードを見ていきましょう。まずは PHP 部分です。


// 管理者にのみ読み込み時間を表示する関数
add_action('shutdown', 'wp3min_show_load_time');
function wp3min_show_load_time() {
    // 管理者の場合のみ表示
    if (current_user_can('administrator')) {
        // 読み込み時間を取得
        $load_time = timer_stop();
        
        // HTML出力
        echo "<div class='load-time'>読み込み時間： {$load_time}秒</div>";
    }
}

// 管理者にのみ読み込み時間を表示する関数

add_action('shutdown', 'wp3min_show_load_time');

function wp3min_show_load_time() {

// 管理者の場合のみ表示

if (current_user_can('administrator')) {

// 読み込み時間を取得

$load_time = timer_stop();

// HTML出力

echo "<div class='load-time'>読み込み時間： {$load_time}秒</div>";

}

このコードを functions.php に追加するだけで、管理者ユーザーがサイトを閲覧するときに読み込み時間が表示されるようになります。

コードの重要ポイント

コードの重要なポイントを3つ解説します：

1. current_user_can(‘administrator’) – このチェックにより、管理者権限を持つユーザーだけに表示を制限しています。一般ユーザーには表示されません。

2. timer_stop() – WordPressの組み込み関数で、ページの読み込み時間を秒単位で取得します。

3. echo “<div class=’load-time’>…” – シンプルなHTML要素を出力して時間を表示します。

次に、スタイルを適用するためのCSS部分です。


/* 読み込み時間表示用のスタイル */
.load-time {
    position: fixed;
    bottom: 10px;
    left: 10px;
    padding: 10px;
    background-color: #eee;
    border: 1px solid #999;
    border-radius: 5px;
    z-index: 9999;
}

/* 読み込み時間表示用のスタイル */

.load-time {

position: fixed;

bottom: 10px;

left: 10px;

padding: 10px;

background-color: #eee;

border: 1px solid #999;

border-radius: 5px;

z-index: 9999;

}

このCSSコードをテーマのスタイルシートに追加するか、「追加CSS」機能を使って適用しましょう。

実装手順

それでは、具体的な実装手順をステップバイステップで見ていきましょう：

ステップ	作業内容
1	WordPress管理画面にログイン
2	「外観」→「テーマエディター」を選択（または「外観」→「テーマファイルエディター」）
3	右側のファイル一覧から「functions.php」を選択
4	ファイルの末尾にPHPコードを追加
5	「ファイルを更新」をクリック
6	「外観」→「カスタマイズ」→「追加CSS」を選択
7	CSSコードを貼り付け
8	「公開」をクリック
9	サイトをリロードして動作を確認

テーマファイルを直接編集する場合は、事前にバックアップを取っておくことを強くお勧めします。また、子テーマを使っている場合は、親テーマではなく子テーマの functions.php を編集してください。

カスタマイズポイント

基本的な実装はシンプルですが、さらにカスタマイズして機能を拡張することも可能です。以下にいくつかのアイデアを紹介します。

1. 詳細な情報を表示する


add_action('shutdown', 'wp3min_show_detailed_load_time');
function wp3min_show_detailed_load_time() {
    if (current_user_can('administrator')) {
        global $wpdb;
        $load_time = timer_stop();
        $query_count = $wpdb->num_queries;
        $memory_usage = round(memory_get_peak_usage() / 1024 / 1024, 2);
        
        echo "<div class='load-time'>";
        echo "読み込み時間: {$load_time}秒<br>";
        echo "クエリ数: {$query_count}<br>";
        echo "メモリ使用量: {$memory_usage}MB";
        echo "</div>";
    }
}

add_action('shutdown', 'wp3min_show_detailed_load_time');

function wp3min_show_detailed_load_time() {

if (current_user_can('administrator')) {

global $wpdb;

$load_time = timer_stop();

$query_count = $wpdb->num_queries;

$memory_usage = round(memory_get_peak_usage() / 1024 / 1024, 2);

echo "<div class='load-time'>";

echo "読み込み時間: {$load_time}秒<br>";

echo "クエリ数: {$query_count}<br>";

echo "メモリ使用量: {$memory_usage}MB";

echo "</div>";

}

このバージョンでは、読み込み時間に加えて、実行されたSQLクエリの数とピーク時のメモリ使用量も表示されます。

2. 速度に応じて色分け表示する


add_action('shutdown', 'wp3min_colored_load_time');
function wp3min_colored_load_time() {
    if (current_user_can('administrator')) {
        $load_time = timer_stop();
        $color_class = 'normal';
        
        if ($load_time < 1) {
            $color_class = 'fast';
        } elseif ($load_time > 2) {
            $color_class = 'slow';
        }
        
        echo "<div class='load-time {$color_class}'>読み込み時間： {$load_time}秒</div>";
    }
}

add_action('shutdown', 'wp3min_colored_load_time');

function wp3min_colored_load_time() {

if (current_user_can('administrator')) {

$load_time = timer_stop();

$color_class = 'normal';

if ($load_time < 1) {

$color_class = 'fast';

} elseif ($load_time > 2) {

$color_class = 'slow';

}

echo "<div class='load-time {$color_class}'>読み込み時間： {$load_time}秒</div>";

}

対応するCSSを追加します：


.load-time.fast {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.load-time.normal {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

.load-time.slow {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.load-time.fast {

background-color: #d4edda;

border-color: #c3e6cb;

color: #155724;

}

.load-time.normal {

background-color: #fff3cd;

border-color: #ffeeba;

color: #856404;

}

.load-time.slow {

background-color: #f8d7da;

border-color: #f5c6cb;

color: #721c24;

}

読み込み時間を色分け表示することで、一目でパフォーマンスの良し悪しがわかるようになります。問題のあるページを素早く特定できるでしょう。

3. 特定のユーザーロールにも表示する


add_action('shutdown', 'wp3min_role_based_load_time');
function wp3min_role_based_load_time() {
    // 管理者またはエディター権限を持つユーザーに表示
    if (current_user_can('administrator') || current_user_can('editor')) {
        $load_time = timer_stop();
        echo "<div class='load-time'>読み込み時間： {$load_time}秒</div>";
    }
}

add_action('shutdown', 'wp3min_role_based_load_time');

function wp3min_role_based_load_time() {

// 管理者またはエディター権限を持つユーザーに表示

if (current_user_can('administrator') || current_user_can('editor')) {

$load_time = timer_stop();

echo "<div class='load-time'>読み込み時間： {$load_time}秒</div>";

}

このバージョンでは、管理者だけでなくエディター権限を持つユーザーにも読み込み時間が表示されます。

まとめ：WordPress フックを使いこなそう

今回ご紹介した「shutdown」と「wp_footer」フックを使った読み込み時間表示機能は、シンプルながらも非常に実用的です。

WordPressのフックシステムを理解し活用することで、プラグインをインストールしなくても様々なカスタマイズが可能になります。それがコード数行で実装できるのが、WordPress フックシステムの素晴らしさです！

特に今回のような機能は、サイトのパフォーマンスチューニングやトラブルシューティングに非常に役立ちます。重いページを特定し、最適化のための基礎データとして活用しましょう。

よくある質問（FAQ）

Q: コードを追加してもエラーが表示される場合は？

PHP構文エラーが発生している可能性があります。コードをコピー＆ペーストする際に、余分な文字や改行が入っていないか確認してください。また、テーマの functions.php の末尾には必ず「?>」を入れないようにしましょう。

Q: 読み込み時間が常に0秒と表示される場合は？

WordPressのキャッシュプラグインやサーバーのキャッシュ機能が有効になっている可能性があります。管理者でログイン中はキャッシュが効かないようにするプラグイン設定を確認してみてください。

Q: 一般ユーザーにも表示されてしまう場合は？

コード内の「current_user_can(‘administrator’)」の条件チェックが正しく機能していない可能性があります。WordPressのユーザー権限が正しく設定されているか確認してください。

Q: 読み込み時間を小数点以下2桁まで表示するには？

timer_stop(0, 2) のように第二引数で桁数を指定することで、小数点以下の桁数を制御できます。

私たちは埼玉県川越市にオフィスを構え、WordPressサイトのカスタマイズやトラブル対応、プラグイン開発など幅広いサービスを提供しています。サイトのパフォーマンスでお悩みの方は、ぜひご相談ください。

サイトの読み込み速度で悩んでいる方や、もっと技術的な知識を深めたい方は、WordPressトラブル対応・お悩み相談をご利用くださいね（https://edel-hearts.com/wordpress-trouble-shooting/ ）

今後も「WordPress 3分間フッキング」シリーズでは、様々なフックの活用方法をご紹介していきます。お楽しみに！