はじめに
こんにちは！「WordPress 3分間フッキング」シリーズへようこそ。このシリーズでは、WordPressのフックを活用して、プラグインを入れずに簡単なコードでサイトをカスタマイズする方法をご紹介しています。
私たちは埼玉県川越市を拠点に、WordPressサイトのカスタマイズやトラブル対応、技術サポートを提供しています。地域の企業様からのご相談もお気軽にどうぞ！
今回は「the_content」フィルターを使った実用的なカスタマイズ方法をご紹介します。たった数行のコードで、記事の文字数と読了時間の表示、古い記事への注意喚起、外部リンクの自動カスタマイズという3つの便利なテクニックを実装していきましょう！
the_contentフィルターとは
WordPressの「the_content」フィルターは、投稿や固定ページの本文コンテンツが表示される直前に実行されるフックです。このフックを使うことで、記事の内容を自動的に加工したり、追加情報を表示したりすることができます。
「the_title」フィルターがタイトルだけに影響するのに対し、「the_content」フィルターは記事本文全体を対象にできるため、より幅広いカスタマイズが可能です。
実装手順の基本
フック処理を実装する際には、主に2つの方法があります。1つは名前付きの関数を定義してフック名と関数名を指定する方法、もう1つは今回使用している「無名関数」（クロージャ）を使う方法です。
無名関数とは、名前を持たない関数のことで、function() { ... }という形で直接定義します。コードをより簡潔にでき、その場限りの処理に適しています。一方、名前付き関数は再利用性が高く、別の場所からも呼び出せるメリットがあります。
以下は名前付き関数を使った同等の実装例です：
|
1 2 3 4 5 6 |
// 名前付き関数を使った実装例 function wp3min_reading_time($content) { // 処理内容 return $modified_content; } add_filter('the_content', 'wp3min_reading_time'); |
初心者の方は、このように関数に名前を付ける方法の方がわかりやすいかもしれません。大規模なテーマやプラグイン開発では、名前の衝突を避けるために名前付き関数が推奨されています。
以下のコードは全て、テーマの「functions.php」に追加するか、または独自のプラグインファイルに記述します。
カスタマイズ1：記事の文字数と推定読了時間を表示する
長い記事の場合、読者は「この記事を読むのにどのくらい時間がかかるか」を知りたいものです。以下のコードを使えば、記事の冒頭に文字数と推定読了時間を自動表示できます。
|
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 |
/** * 記事の文字数と推定読了時間を表示する */ add_filter('the_content', function($content) { // 記事アーカイブやフィードでは表示しない if (!is_singular()) { return $content; } // 記事の文字数をカウント（HTMLタグを除く） $text_only = strip_tags($content); $word_count = mb_strlen($text_only, 'UTF-8'); // 平均的な読書速度（1分あたり500文字と仮定） $minutes = ceil($word_count / 500); // 表示するHTML $reading_time = '<div class="reading-info" style="background: #f7f7f7; padding: 10px; margin-bottom: 20px; border-left: 4px solid #00a0d2; font-size: 0.9em;"> <p>📊 文字数: <strong>' . number_format($word_count) . '文字</strong> | ⏱️ 読了時間: 約<strong>' . $minutes . '分</strong></p> </div>'; // 記事の先頭に追加 return $reading_time . $content; }); |
このコードの特徴：
- HTMLタグを取り除いた実際の文字数をカウント
- 日本語に対応するため、マルチバイト関数を使用
- 1分あたり500文字の読書速度で計算（この値は調整可能）
- 個別記事ページでのみ表示（リスト表示では非表示）
読了時間の表示は、特に長文コンテンツを扱うブログでは読者に親切な機能です。時間がない読者は「後で読む」と判断したり、逆に「5分で読める」と知ればその場で読んでもらえる可能性が高まります。
注意点：字数と時間の計算は目安です。実際の読書速度は個人差がありますので、あくまでも参考値として表示しましょう。
カスタマイズ2：古い記事に更新日時の注意喚起を表示する
ITやトレンド情報など、時間の経過とともに内容が古くなる可能性がある記事では、読者に投稿日からの経過時間を知らせると親切です。以下のコードを使えば、一定期間以上経過した記事に自動で注意書きを表示できます。
|
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 |
/** * 古い記事に注意喚起メッセージを表示する */ add_filter('the_content', function($content) { // 記事アーカイブやフィードでは表示しない if (!is_singular()) { return $content; } $post_date = get_the_date('U'); $days_old = floor((time() - $post_date) / 86400); // 日数に変換 // 記事が180日（約6ヶ月）以上経過している場合 if ($days_old > 180) { // 更新日がある場合は更新日からの経過日数を計算 if (get_the_modified_time('U') > get_the_time('U')) { $update_date = get_the_modified_date('U'); $update_days_old = floor((time() - $update_date) / 86400); // 更新から3ヶ月以内なら警告を表示しない if ($update_days_old < 90) { return $content; } // 更新日からの経過も表示 $notice = '<div class="old-content-notice" style="background: #fff9e6; padding: 15px; margin-bottom: 20px; border-left: 4px solid #ffb900; font-size: 0.9em;"> <p>⚠️ この記事は投稿されてから <strong>' . floor($days_old/30) . 'ヶ月</strong> 経過しています。最終更新から <strong>' . floor($update_days_old/30) . 'ヶ月</strong> 経過していますので、情報が古い可能性がありますのでご注意ください。</p> </div>'; } else { // 更新がない場合は投稿日のみ表示 $notice = '<div class="old-content-notice" style="background: #fff9e6; padding: 15px; margin-bottom: 20px; border-left: 4px solid #ffb900; font-size: 0.9em;"> <p>⚠️ この記事は投稿されてから <strong>' . floor($days_old/30) . 'ヶ月</strong> 経過しています。情報が古い可能性がありますのでご注意ください。</p> </div>'; } return $notice . $content; } return $content; }); |
このコードのポイント：
- 投稿日から現在までの日数を自動計算
- 記事が半年以上古い場合のみ警告を表示
- 記事に更新がある場合は、更新日からの経過日数も表示
- 最終更新が3ヶ月以内なら注意書きを表示しない（=情報が比較的新しい）
これはとても実用的な機能です。特にWordPressの使い方やプログラミング言語、各種サービスの解説など、アップデートで情報が変わる可能性がある記事には必須の機能と言えるでしょう。
月数や表示のタイミングは、ご自身のブログの性質に合わせて調整してください。例えば、テクノロジー系なら3ヶ月、歴史や基礎知識のブログなら1年など、コンテンツの寿命に合わせて変更すると良いでしょう。
カスタマイズ3：外部リンクを自動的に新しいタブで開くようにする
SEO的にも、ユーザビリティの面でも、外部リンクは新しいタブで開くのがベストプラクティスとされています。以下のコードを使えば、記事内の全ての外部リンクを自動的に新しいタブで開くように設定し、さらに小さな外部リンクアイコンも追加できます。
|
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 |
/** * 外部リンクを自動的に新しいタブで開くようにする */ add_filter('the_content', function($content) { // 自サイトのドメイン名取得 $home_url = parse_url(home_url(), PHP_URL_HOST); // CSSを追加（headに入れるのが理想ですが、簡単のためインラインで追加） $style = '<style> a.external-link::after { content: "\f35d"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.8em; margin-left: 3px; display: inline-block; vertical-align: top; } </style>'; // preg_replace_callbackを使ってリンクを処理 $content = preg_replace_callback( '/<a(.*?)href=[\'"](http|https):\/\/(.*?)[\'"]([^>]*)>(.*?)<\/a>/i', function($matches) use ($home_url) { $url_host = parse_url($matches[2] . '://' . $matches[3], PHP_URL_HOST); // 現在のサイト内リンクかどうか確認 if ($url_host === $home_url) { // 内部リンクの場合はそのまま返す return '<a' . $matches[1] . 'href="' . $matches[2] . '://' . $matches[3] . '"' . $matches[4] . '>' . $matches[5] . '</a>'; } // 外部リンクの場合は属性を追加 return '<a' . $matches[1] . 'href="' . $matches[2] . '://' . $matches[3] . '"' . $matches[4] . ' target="_blank" rel="noopener noreferrer" class="external-link">' . $matches[5] . '</a>'; }, $content ); return $style . $content; }); |
この外部リンク処理の特徴：
- 自サイトへのリンクは処理せず、外部サイトへのリンクのみを対象
- すべての外部リンクに「target=”_blank”」を自動付与
- セキュリティ対策として「rel=”noopener noreferrer”」を追加
- 外部リンクには「external-link」クラスと小さなアイコンを付与
- Font Awesome 5を使用（テーマに既に導入されている前提）
外部リンクを新しいタブで開くようにすると、ユーザーがサイトから離れることを防ぎつつ、参照先も確認できるため、ユーザービリティが向上します。ただし、すべてのリンクを新しいタブで開くことはユーザーの混乱を招く可能性があるため、外部リンクのみに適用するのがベストプラクティスです。
Font Awesomeがテーマに導入されていない場合は、アイコン部分を削除するか、別のアイコン表示方法を検討してください。CDNから直接読み込むことも可能です。
これらのフックを組み合わせる
上記3つのフックを同時に使う場合は、順番に注意が必要です。最も外側に表示したいものを最後に処理するように順序を考えましょう。例えば：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// 1. 外部リンクを新しいタブで開くフィルター（コンテンツ自体を変更） add_filter('the_content', 'wp3min_external_links', 10); // 2. 古い記事の警告を表示するフィルター（コンテンツの前に追加） add_filter('the_content', 'wp3min_old_content_notice', 20); // 3. 文字数と読了時間を表示するフィルター（最も外側に表示） add_filter('the_content', 'wp3min_reading_time', 30); // 各関数の定義 function wp3min_external_links($content) { // 外部リンク処理のコード } function wp3min_old_content_notice($content) { // 古い記事の警告表示コード } function wp3min_reading_time($content) { // 文字数と読了時間の表示コード } |
フィルターの優先度（10, 20, 30の数値）が低いものから順に実行されるため、この例では「外部リンク処理 → 古い記事警告 → 読了時間表示」の順に適用されます。
カスタマイズのポイント
各フックは、サイトのデザインやニーズに合わせてカスタマイズできます：
文字数と読了時間の表示
- 読書速度の調整：速い読者向けなら「700文字/分」、じっくり読ませたい技術記事なら「400文字/分」など
- 表示スタイルの変更：背景色やアイコンを変えてサイトデザインに合わせる
- 特定のカテゴリやタグの記事のみに適用：条件分岐を追加
古い記事の警告表示
- 警告を表示する期間の調整：情報の鮮度に合わせて3ヶ月〜1年に設定
- 表示メッセージのカスタマイズ：記事カテゴリによって異なるメッセージを表示
- 特定のカテゴリを除外：「歴史」や「古典文学」など、時間経過の影響が少ないカテゴリを除外
外部リンクの処理
- アイコンの変更：独自アイコンや画像に変更
- 特定ドメインの除外：提携サイトなどは新しいタブで開かないよう設定
- PDF等の特定ファイルタイプへのリンクに専用アイコンを追加
| フック機能 | メリット | 注意点 |
|---|---|---|
| 読了時間表示 | 読者が記事を読むかの判断材料になる | 実際の読書速度には個人差がある |
| 古い記事の警告 | 情報の信頼性向上、誤った情報の拡散防止 | 更新が少ないブログでは過剰警告に注意 |
| 外部リンク処理 | UX向上、サイト離脱防止 | 正規表現のパフォーマンスに注意 |
まとめ
「the_content」フィルターを使うことで、WordPressの記事表示を様々な方法でカスタマイズできます。今回ご紹介した3つのテクニックは、プラグインを使わずに実装できる便利な機能です。
今回学んだポイント：
- 「the_content」フィルターで記事本文をカスタマイズする方法
- 記事の文字数と推定読了時間を自動表示する方法
- 古い記事に更新日時の注意喚起を表示する方法
- 外部リンクを自動的に新しいタブで開くようにする方法
WordPressのフックシステムを理解することで、プラグインに頼らずとも多くの機能拡張が可能になります。コード理解が進めば、より複雑なカスタマイズにも挑戦してみてください！
埼玉県川越市に拠点を置く私たちは、WordPressサイトのカスタマイズから保守管理まで幅広くサポートしています。カスタムコードの実装でお悩みの方は、お気軽にご連絡ください。
WordPressカスタマイズやプラグイン開発をご検討の方は、ぜひ WordPressカスタマイズ・プラグイン開発サービス をご利用くださいね。
よくある質問（FAQ）
Q: このフックは管理画面のプレビューでも動作しますか？
A: はい、管理画面のプレビューでも動作します。ただし、一部のテーマやプラグインとの相性によっては、プレビュー時と実際の表示が異なる場合があります。
Q: フォントアウェサムを使っていない場合はどうすれば良いですか？
A: 外部リンクのアイコン部分を変更するか、CDNから読み込むコードを追加してください。または「▲」や「→」などの記号で代用することもできます。
Q: 特定の記事だけフックを適用したくないのですが可能ですか？
A: 可能です。カスタムフィールドを使って記事ごとに設定を変えられます。例えば「disable_hooks」というカスタムフィールドを作り、その値をチェックする条件分岐をフック内に追加すれば制御できます。
Q: 文字数のカウントに画像の代替テキストは含まれますか？
A: いいえ、strip_tags()関数は画像のalt属性を含めませんので、文字数カウントには含まれません。純粋なテキスト部分のみがカウントされます。
Q: これらのフックはパフォーマンスに影響しますか？
A: 基本的に小さなフックですのでパフォーマンスへの影響は最小限です。ただし、大量の記事を表示するアーカイブページなどでは、条件分岐で個別記事表示時のみ実行されるよう設定することをおすすめします。
