ブログやWebサイトをより親しみやすくしたい…そんな時、訪問者の閲覧時間に合わせた挨拶メッセージを表示すると、サイトに人間味が生まれます。今回は「the_content」フィルターフックを使って、時間帯に応じた挨拶メッセージを記事の冒頭に自動表示する方法をご紹介します。
たった数行のコードで、朝には「おはようございます」、昼には「こんにちは」、夜には「こんばんは」と時間帯に合わせた挨拶を表示できます。WordPressのフック機能を活用して、訪問者に優しい心遣いを示しましょう！
the_content フィルターフックの基本
今回使用する「the_content」フィルターフックは、WordPressが投稿コンテンツを表示する直前に実行されます。このフックを利用すると、データベースから取得した記事内容を表示前に加工できます。
フィルターフックの重要ポイント
- 処理のタイミング：投稿内容が出力される直前に実行される
- 引数：投稿コンテンツ（$content）が渡される
- 戻り値：加工後のコンテンツを必ず返す必要がある
- 優先度：add_filterの第3引数で指定（デフォルト値は10）
「the_content」フィルターを使用する際は、必ず元のコンテンツ（または修正したコンテンツ）をreturnする必要があります。戻り値がない場合、記事内容が消えてしまいます。
時間帯別挨拶メッセージの実装
それでは、時間帯によって異なる挨拶メッセージを表示するコードを見てみましょう。以下のコードをテーマの functions.php に追加するだけで実装できます。
|
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 |
add_filter( 'the_content', 'wp3min_add_time_greeting' ); function wp3min_add_time_greeting( $content ) { // シングルページ（投稿やカスタム投稿）でのみ実行 if ( is_singular() && in_the_loop() && is_main_query() ) { // 現在の時間を取得（date_i18nを使用） $current_hour = (int) date_i18n( 'G' ); $greeting_message = ''; // 時間帯によって挨拶を変える if ( $current_hour >= 5 && $current_hour < 12 ) { // 朝 (5時～11時台) $greeting_message = '<div class="time-greeting morning">' . 'おはようございます！今日の情報をお届けします。' . '</div>'; } elseif ( $current_hour >= 12 && $current_hour < 18 ) { // 昼 (12時～17時台) $greeting_message = '<div class="time-greeting afternoon">' . 'こんにちは！午後のひとときに、こちらの記事はいかがですか？' . '</div>'; } else { // 夜 (18時～翌4時台) $greeting_message = '<div class="time-greeting evening">' . 'こんばんは。夜の読書タイムをお楽しみください。' . '</div>'; } // スタイルを追加（オプション） $style = '<style> .time-greeting { margin-bottom: 20px; padding: 10px 15px; border-left: 4px solid #0073aa; background-color: #f8f9fa; font-style: italic; color: #555; } .time-greeting.morning { border-color: #f6ad55; } .time-greeting.afternoon { border-color: #4299e1; } .time-greeting.evening { border-color: #805ad5; } </style>'; // メッセージとスタイルをコンテンツの前に追加 return $style . $greeting_message . $content; } return $content; // 条件外なら元のコンテンツをそのまま返す } |
コードの解説
上記のコードは、以下のような流れで動作します：
- 表示条件の確認：個別記事ページ（is_singular()）で、メインループ内（in_the_loop()）のメインクエリ（is_main_query()）の場合のみ実行
- 時間の取得：WordPressの現在時刻取得関数「date_i18n(‘G’)」で24時間形式（0-23）の時間を取得
- 時間帯判定：取得した時間に応じて表示するメッセージを分岐
- スタイル適用：メッセージの見た目を整えるCSSスタイルを追加
- コンテンツ加工：メッセージとスタイルを元の投稿内容に追加して返す
WordPressでは「date_i18n()」関数を使うことで、管理画面で設定されたタイムゾーンを自動的に考慮した日時を取得できます。これにより、サーバー設定に関わらず、サイトに設定された正確な現地時間での判定が可能です。
date_i18n() 関数の重要性
WordPressでは時間に関する処理を行う場合、通常のPHP関数（date(), time()）ではなく、WordPress独自の「date_i18n()」関数を使用することをお勧めします。
| 関数 | 特徴 | 推奨度 |
|---|---|---|
| date() | PHPデフォルト関数、サーバーのタイムゾーンに依存 | △ |
| date_default_timezone_set() | PHPのタイムゾーン設定関数、別途設定が必要 | △ |
| date_i18n() | WordPress関数、WP設定のタイムゾーンを自動反映 | ◎ |
サーバーのタイムゾーン設定と異なるタイムゾーン設定をWordPressで行っている場合、通常のPHPのdate()関数を使うと、正しい時間が取得できない可能性があります。date_i18n()を使えば、WordPressの管理画面で設定したタイムゾーンに基づいた日時を簡単に取得できます。
表示確認と条件分岐の重要性
このコードを functions.php に追加すると、個別記事ページでのみ時間帯に応じたメッセージが表示されます。
表示の確認方法
時間帯別メッセージが正しく機能しているか確認するには、2つの方法があります：
- 実際に時間を待つ：各時間帯（朝・昼・夜）に実際にサイトにアクセスして確認
- テスト用コード：テスト中は時間を固定して動作確認
開発中に挙動を確認する場合は、以下のようにテスト用のコードを使用できます：
|
1 2 3 4 5 6 7 |
// テスト用：時間を固定（開発時のみ） // $current_hour = 8; // 朝のテスト // $current_hour = 15; // 昼のテスト // $current_hour = 20; // 夜のテスト $current_hour = (int) date_i18n( 'G' ); // 本番用（実際の時間） |
条件分岐の重要性
コード内の条件分岐（is_singular() && in_the_loop() && is_main_query()）は非常に重要です。これらの条件がないと、以下のような問題が発生する可能性があります：
- アーカイブページや検索結果で各記事の冒頭に挨拶が表示される
- 同じページ内で複数回メッセージが表示される
- ウィジェットやショートコードで表示される投稿抜粋にもメッセージが付く
条件分岐を適切に設定することで、意図した場所でのみ挨拶メッセージが表示されるようになります。特に大規模なサイトでは、表示条件を慎重に設定することが重要です。
カスタマイズポイント
基本的な実装は上記の通りですが、サイトの性格や目的に合わせて様々なバリエーションが考えられます。以下にカスタマイズのアイデアをいくつか紹介します。
1. さらに細かい時間帯分け
時間帯をより細かく分けて、よりパーソナライズされたメッセージを表示することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// より細かい時間帯分け if ( $current_hour >= 5 && $current_hour < 8 ) { // 早朝 (5時～7時台) $greeting_message = '早起きは三文の徳！今日も素晴らしい一日になりますように。'; } elseif ( $current_hour >= 8 && $current_hour < 12 ) { // 午前 (8時～11時台) $greeting_message = 'おはようございます！今日も元気に頑張りましょう。'; } elseif ( $current_hour >= 12 && $current_hour < 14 ) { // お昼 (12時～13時台) $greeting_message = 'お昼の休憩時間ですね。リラックスしながらお読みください。'; } elseif ( $current_hour >= 14 && $current_hour < 18 ) { // 午後 (14時～17時台) $greeting_message = 'こんにちは！午後のひとときに、この記事はいかがですか？'; } elseif ( $current_hour >= 18 && $current_hour < 22 ) { // 夕方・夜 (18時～21時台) $greeting_message = 'こんばんは。今日も一日お疲れさまでした。'; } else { // 深夜 (22時～4時台) $greeting_message = '夜更かしですね。素敵な夜のひとときをお過ごしください。'; } |
2. 季節や特別な日に合わせたメッセージ
時間帯だけでなく、日付や月、季節に応じたメッセージも組み合わせることができます。
|
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 |
// 月を取得（1-12） $current_month = (int) date_i18n( 'n' ); // 日を取得（1-31） $current_day = (int) date_i18n( 'j' ); // 季節に応じたメッセージを追加 $season_message = ''; if ( $current_month >= 3 && $current_month <= 5 ) { // 春（3-5月） $season_message = ' 春の訪れを感じる季節です。'; } elseif ( $current_month >= 6 && $current_month <= 8 ) { // 夏（6-8月） $season_message = ' 暑い日が続きますが、お体にお気をつけください。'; } elseif ( $current_month >= 9 && $current_month <= 11 ) { // 秋（9-11月） $season_message = ' 秋の読書シーズン、じっくりとお楽しみください。'; } else { // 冬（12-2月） $season_message = ' 寒い日は暖かい部屋で読書が一番ですね。'; } // 特別な日のチェック if ( $current_month == 12 && $current_day == 25 ) { // クリスマス $special_message = 'メリークリスマス！ 素敵な休日をお過ごしください。'; $greeting_message = $special_message; } elseif ( $current_month == 1 && $current_day == 1 ) { // 元日 $special_message = '新年あけましておめでとうございます。本年もよろしくお願いします。'; $greeting_message = $special_message; } else { // 通常の時間帯メッセージに季節メッセージを追加 $greeting_message .= $season_message; } |
3. ユーザー別メッセージ
ログイン状態やユーザーロールに応じて、メッセージを変えることもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// ログインユーザー向けカスタマイズ if ( is_user_logged_in() ) { $current_user = wp_get_current_user(); $user_name = $current_user->display_name; // ユーザー名を含めたパーソナライズメッセージ $greeting_message = $user_name . 'さん、'; // ユーザーロールに応じたメッセージ if ( current_user_can( 'administrator' ) ) { $greeting_message .= '管理者としてログインしています。'; } elseif ( current_user_can( 'editor' ) ) { $greeting_message .= '編集者としてログインしています。'; } else { $greeting_message .= 'ようこそお越しくださいました。'; } } else { // 非ログインユーザー向けメッセージ $greeting_message = 'ゲストさん、ようこそ。会員登録するとさらに便利な機能が使えます。'; } |
これらのカスタマイズを組み合わせることで、訪問者一人ひとりに合わせたパーソナライズされたメッセージを表示できます。サイトの親しみやすさとエンゲージメント向上に役立つでしょう。
補助的アプローチ：ショートコードでの実装
the_contentフィルターを使った実装は自動的に適用される利点がありますが、より柔軟に挨拶メッセージを配置したい場合は、ショートコードを併用するのも効果的です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** * 時間帯に応じた挨拶を返すシンプルなショートコード */ function register_greeting_shortcode() { add_shortcode('edel_greeting', 'edel_time_greeting'); } add_action('init', 'register_greeting_shortcode'); function edel_time_greeting() { // 現在時刻を取得 $current_hour = (int) date_i18n('G'); // 時間帯で分岐 if ($current_hour >= 5 && $current_hour < 12) { return 'おはようございます'; } elseif ($current_hour >= 12 && $current_hour < 18) { return 'こんにちは'; } else { return 'こんばんは'; } } |
このショートコードは こんばんは という形式で使用できます。記事内の好きな場所に挿入するだけで、その時間帯に合わせた挨拶が表示されます。
the_contentフックを使うのも有効ですが、私はこちらのショートコードを使っています：［edel_greeting］
ショートコードの特徴と活用例は以下の通りです：
- シンプルな構文：わずか数行のコードで実装可能
- 汎用性：記事内だけでなく、ウィジェット、カスタムHTMLブロック、テンプレートファイル内で使用可能
- フレキシビリティ：必要な場所だけに挿入できる柔軟性
フィルターとショートコード、どう使い分ける？
| 比較ポイント | the_contentフィルター | ショートコード |
|---|---|---|
| 実装の複雑さ | やや複雑 | とてもシンプル |
| 自動適用 | すべての投稿に自動適用 | 手動挿入が必要 |
| 適用範囲 | 投稿コンテンツのみ | どこでも使用可能 |
| 非開発者の使いやすさ | 一度設定すれば意識不要 | タグの挿入が必要だが直感的 |
どちらのアプローチを選ぶかは、プロジェクトの要件によって異なります：
- フィルターの利点：すべての記事に一貫して挨拶を表示したい場合、一度設定するだけで済み、ユーザーの手間が省けます
- ショートコードの利点：記事ごとに挨拶の有無を選択したい場合や、テーマのテンプレートファイル内、ウィジェットなどの特定の場所に挨拶を表示したい場合に便利です
最も効果的なのは、両方のアプローチを状況に応じて使い分けることです。基本的にはthe_contentフィルターで全記事に適用し、特別な場合にはショートコードで柔軟に対応するという組み合わせが理想的でしょう。
セキュリティと最適化の留意点
フックやショートコードを実装する際は、以下のポイントに注意してください：
- コンディショナルタグの使用：is_singular(), in_the_loop(), is_main_query()などを使って、表示場所を制限する
- 出力エスケープ：ユーザーデータや動的内容を含む場合は、適切にエスケープする
- パフォーマンス：date_i18n()の呼び出しは毎回処理が発生するため、同一関数内で複数回使う場合は変数に格納する
- プラグイン互換性：キャッシュプラグインやSEOプラグインとの互換性を確認する
まとめ
時間帯に応じた挨拶メッセージを表示することで、ウェブサイトにパーソナルな要素を追加できます。WordPressの「the_content」フィルターフックを活用すれば、これを簡単に自動化できます。場合によっては、ショートコードを使った柔軟な実装も有効です。
WordPressのフックシステムは、少ないコードで大きな効果を生み出せる強力な機能です。今回学んだ技術を応用すれば、サイト訪問者により親しみやすい体験を提供できるでしょう。
埼玉県川越市にある私たちエーデルハーツでは、このようなWordPressのカスタマイズやプラグイン開発を行っています。さらに高度なカスタマイズやパフォーマンス改善について知りたい方は、ぜひご相談ください。
WordPressサイトをより魅力的で使いやすくするためのカスタマイズをご検討の方は、WordPressカスタマイズ・プラグイン開発を気軽にご相談くださいね：https://edel-hearts.com/wordpress-customize-and-plugin-development/
今後も「WordPress 3分間フッキング」シリーズでは、実用的なフック活用法をご紹介していきます。お楽しみに！
