
WordPress 3分間フッキングシリーズについて
こんにちは、WordPressエンジニアの皆さん!今日から「WordPress 3分間フッキング」という新シリーズをスタートします。
あの国民的料理番組「3分間クッキング」をもじった、WordPress開発者のための「3分間フッキング」です!
このシリーズでは、WordPressの真髄とも言える「フック」を使ったちょっとした小技から実践的なテクニックまで、functions.phpに数行書くだけで実現できる便利な機能を紹介していきます。
「3分」にこだわる必要はありませんが、サクッと理解して、すぐに実装できる内容を心がけていきますね。
ダッシュボードウィジェットとは?
WordPressにログインすると最初に表示される管理画面、それが「ダッシュボード」です。ここには「クイックドラフト」や「WordPressニュース」など、デフォルトでいくつかのウィジェットが表示されていますよね。
でも、実はこのダッシュボードに自分でウィジェットを追加することができるんです!
今日はその方法として、サイトの統計情報(投稿数、ページ数、コメント数など)を一目で確認できるウィジェットを作成します。クライアントに納品するWordPressサイトに追加しておけば、「使いやすさ」と「プロフェッショナル感」がグッとアップしますよ!
今回実装する機能の概要
今回実装する機能は以下の通りです:
- WordPressダッシュボードに「サイト統計情報」ウィジェットを追加
- ウィジェット内に以下の情報を表示
- 公開済み投稿数
- 公開済みページ数
- 承認済みコメント数
- 総ユーザー数
- カテゴリー数
- タグ数
- スタイリングも含めて実装
それでは早速、コードを見ていきましょう!
コード解説
wp_dashboard_setupフックの活用
まず最初のコードブロックを見てみましょう:
1 2 3 4 5 6 7 8 9 |
function wp_3min_hooking_add_dashboard_stats_widget() { wp_add_dashboard_widget( 'site_statistics_widget', // ウィジェットのID 'サイト統計情報', // ウィジェットのタイトル 'wp_3min_hooking_stats_widget_callback' // 表示用コールバック関数 ); } add_action('wp_dashboard_setup', 'wp_3min_hooking_add_dashboard_stats_widget'); |
ここがフックの重要ポイント! ‘wp_dashboard_setup’ というアクションフックに自作関数をフックしています。
このコードでやっていることは簡単です:
wp_3min_hooking_add_dashboard_stats_widget()
という関数を定義しています- この関数内で
wp_add_dashboard_widget()
を呼び出し、新しいダッシュボードウィジェットを登録しています add_action()
を使って、WordPress が ‘wp_dashboard_setup’ アクションを実行するタイミングで上記関数を呼び出すよう設定しています
wp_add_dashboard_widget()
関数には3つのパラメーターを渡しています:
パラメーター | 役割 | 今回の設定値 |
---|---|---|
ウィジェットID | システム内部で使用する一意の識別子 | ‘site_statistics_widget’ |
ウィジェットタイトル | ダッシュボードに表示されるタイトル | ‘サイト統計情報’ |
コールバック関数 | ウィジェットの内容を生成する関数 | ‘wp_3min_hooking_stats_widget_callback’ |
ウィジェット登録の仕組み
WordPressのフックシステムは「いつ」と「何を」の2つの要素で成り立っています。
今回の例では:
- いつ:’wp_dashboard_setup’ アクションが実行されるとき(ダッシュボードが準備されるタイミング)
- 何を:’wp_3min_hooking_add_dashboard_stats_widget’ 関数を実行する
このように、WordPressの処理の流れの中で、特定のタイミングに自分のコードを「フック」することで機能を拡張するのが、まさにWordPressフックの基本的な使い方なんです!
統計情報の取得と表示
次に、ウィジェットの内容を生成するコールバック関数を見てみましょう:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
// ウィジェットの内容を表示するコールバック関数 function wp_3min_hooking_stats_widget_callback() { // 投稿数を取得 $count_posts = wp_count_posts(); $published_posts = $count_posts->publish; // 公開済みページ数を取得 $count_pages = wp_count_posts('page'); $published_pages = $count_pages->publish; // コメント数を取得 $comment_count = wp_count_comments(); $approved_comments = $comment_count->approved; // ユーザー数を取得 $user_count = count_users(); $total_users = $user_count['total_users']; // カテゴリー数を取得 $category_count = wp_count_terms('category'); // タグ数を取得 $tag_count = wp_count_terms('post_tag'); // HTML出力(適切なエスケープ処理を追加) ?> <div class="site-stats-widget"> <style> .site-stats-widget ul { margin: 0; padding: 0; } .site-stats-widget li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; } .site-stats-widget .stat-value { font-weight: bold; color: #2271b1; } </style> <ul> <li><span>公開済み投稿数:</span> <span class="stat-value"><?php echo esc_html($published_posts); ?></span></li> <li><span>公開済みページ数:</span> <span class="stat-value"><?php echo esc_html($published_pages); ?></span></li> <li><span>承認済みコメント数:</span> <span class="stat-value"><?php echo esc_html($approved_comments); ?></span></li> <li><span>総ユーザー数:</span> <span class="stat-value"><?php echo esc_html($total_users); ?></span></li> <li><span>カテゴリー数:</span> <span class="stat-value"><?php echo esc_html($category_count); ?></span></li> <li><span>タグ数:</span> <span class="stat-value"><?php echo esc_html($tag_count); ?></span></li> </ul> </div> <?php } |
このコードでは以下のことを行っています:
- 各種統計情報をWordPressの組み込み関数を使って取得しています
wp_count_posts()
– 投稿とページの数を取得wp_count_comments()
– コメント数を取得count_users()
– ユーザー数を取得wp_count_terms()
– タクソノミー(カテゴリー、タグなど)の数を取得
- 取得した情報をHTMLでリスト表示しています
- インラインCSSでスタイリングを追加しています
- セキュリティのために
esc_html()
でエスケープ処理を行っています
これらの関数はWordPressが提供している便利な関数群で、コアのデータを簡単に取得できます。知っておくと様々な場面で役立ちますよ!
実装手順
さあ、実際にこの機能を自分のWordPressサイトに追加してみましょう!
- WordPressの管理画面から「外観」→「テーマエディター」へ移動します
- 右側のファイル一覧から「functions.php」を選択します
- ファイルの適切な位置に、上記のコードを追加します
- 「ファイルを更新」ボタンをクリックして保存します
- ダッシュボードに移動して、新しいウィジェットが表示されているか確認します
こちらが実際のコード例です。HTMLの出力部分では、リスト表示のためのマークアップとスタイル指定、そして実際のデータをesc_html関数でエスケープして安全に表示しています。
上の画像のように、コード内のコメントやインデントを適切に設定することで、後から見直した時にも理解しやすくなります。特に、ユーザー数やカテゴリー数などの取得方法がわかりやすく記述されているため、カスタマイズも容易でしょう。
注意:子テーマを使用している場合は、親テーマのfunctions.phpではなく、子テーマのfunctions.phpに追加してください。
カスタマイズのポイント
このコードは基本形ですが、以下のようにカスタマイズすることも可能です:
カスタマイズ内容 | 変更箇所 |
---|---|
表示する統計情報を追加/削除 | コールバック関数内のデータ取得部分と表示HTMLのリスト項目 |
ウィジェットの表示名を変更 | wp_add_dashboard_widget() の第2引数 |
表示スタイルを変更 | コールバック関数内のスタイルタグ内のCSS |
特定のユーザーロールにのみ表示 | 条件文で現在のユーザーのロールをチェック |
データの更新頻度を調整(キャッシュ) | 一時オプションを使用してデータをキャッシュ |
例えば、管理者にのみウィジェットを表示したい場合は、次のように条件を追加します:
1 2 3 4 5 6 7 8 9 10 11 |
function wp_3min_hooking_add_dashboard_stats_widget() { // 現在のユーザーが管理者の場合のみウィジェットを追加 if (current_user_can('administrator')) { wp_add_dashboard_widget( 'site_statistics_widget', 'サイト統計情報', 'wp_3min_hooking_stats_widget_callback' ); } } |
まとめ
いかがでしたか?たった数十行のコードで、WordPressダッシュボードに便利な統計情報ウィジェットを追加することができました。
WordPressのフックシステムを理解すると、プラグインをインストールしなくても様々な機能拡張が可能になります。
今回のポイントをおさらいしましょう:
wp_dashboard_setup
アクションフックを使ってダッシュボードをカスタマイズできるwp_add_dashboard_widget()
関数でウィジェットを追加できる- WordPressの組み込み関数を使えばサイトの様々な統計情報を簡単に取得できる
- シンプルなHTMLとCSSでプロフェッショナルな見た目を作れる
次回の「WordPress 3分間フッキング」もお楽しみに!別のフックを使った便利技をご紹介します。
質問やご要望があれば、コメント欄でお気軽にどうぞ!
あなたも今日からWordPressフッキングマスターへの第一歩を踏み出しましょう!