WordPress 3分間フッキング：投稿一覧に画像チェック機能を追加
こんにちは！埼玉県川越市を拠点に活動するWordPressカスタマイズのスペシャリストです。今回の「WordPress 3分間フッキング」では、投稿一覧画面に独自のカラムを追加して、記事内の画像をチェックする機能を実装します。
SEO対策やページ表示速度の最適化において、画像の「alt属性」の設定や「WebP形式」の利用は重要なポイントです。しかし、これらを手動でチェックするのは大変な作業ですよね。今回紹介するフックを使えば、投稿一覧画面で一目で確認できるようになります！
今回のフックコード
|
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 |
add_filter('manage_post_posts_columns', 'wp3min_add_image_check_columns'); add_action('manage_post_posts_custom_column', 'wp3min_show_image_check_content', 10, 2); function wp3min_show_image_check_content($column_name, $post_id) { if ($column_name === 'image_check') { $content = get_post_field('post_content', $post_id); preg_match_all('/<img[^>]+>/i', $content, $matches); $img_tags = $matches[0]; $alt_empty_count = 0; $non_webp_count = 0; foreach ($img_tags as $img) { // alt属性がない or 空 if (!preg_match('/alt=["\'][^"\']+["\']/', $img)) { $alt_empty_count++; } // webp以外 if (preg_match('/src=["\']([^"\']+)["\']/', $img, $src_match)) { $src = $src_match[1]; if (!preg_match('/\.webp(\?.*)?$/i', $src)) { $non_webp_count++; } } } // 赤文字スタイル $alt_style = ($alt_empty_count > 0) ? 'style="color:red;"' : ''; $webp_style = ($non_webp_count > 0) ? 'style="color:red;"' : ''; echo "<span {$alt_style}>ALTなし: {$alt_empty_count}</span><br>"; echo "<span {$webp_style}>非WebP: {$non_webp_count}</span>"; } } function wp3min_add_image_check_columns($columns) { $columns['image_check'] = '画像チェック'; return $columns; } |
このフックを追加するだけで、投稿一覧画面に「画像チェック」カラムが表示され、各投稿内のalt属性がない画像の数とWebP形式ではない画像の数がすぐにわかるようになります！問題がある場合は赤字で表示されるので一目瞭然です。
フックの目的と効果
このフックコードには、大きく分けて2つの目的があります：
- alt属性の確認：SEO対策として重要な画像のalt属性が設定されていない画像を検出
- WebP形式の確認：サイト表示速度を向上させるWebP形式が使われていない画像を検出
フックを実装することで、投稿一覧画面で記事を編集せずとも、どの記事に対応が必要な画像があるのかを瞬時に把握できます。問題がある場合は赤文字で表示されるため、修正が必要な記事を視覚的に識別できます。
コードの詳細解説
それでは、今回のフックコードを詳しく解説していきましょう。
1. 新しいカラムを追加するフック
|
1 |
add_filter('manage_post_posts_columns', 'wp3min_add_image_check_columns'); |
このフックは、「投稿」タイプの一覧画面に表示されるカラム（列）を管理するためのものです。manage_{投稿タイプ}_posts_columnsというフィルターフックを使って、表示する列の配列を追加・変更できます。
注意：このフックは「投稿」タイプ専用です。他の投稿タイプ（固定ページや商品など）に適用したい場合は、フック名の「post_posts」の部分を対象の投稿タイプに合わせて変更する必要があります。
2. カラムに表示する内容を制御するフック
|
1 |
add_action('manage_post_posts_custom_column', 'wp3min_show_image_check_content', 10, 2); |
こちらは、追加したカスタムカラムに具体的にどんな内容を表示するかを定義するためのアクションフックです。manage_{投稿タイプ}_posts_custom_columnというアクションが、各カラムのレンダリング時に実行されます。
最後の「10, 2」の部分は重要です：
- 10：フックの優先度（通常は10のままでOK）
- 2：関数が受け取る引数の数（カラム名と投稿IDの2つ）
3. カラム追加関数
|
1 2 3 4 |
function wp3min_add_image_check_columns($columns) { $columns['image_check'] = '画像チェック'; return $columns; } |
この関数は非常にシンプルです。既存のカラム配列に、新たに「image_check」という識別子のカラムを追加し、表示名を「画像チェック」に設定しています。そして変更した配列を返しています。
返り値は必須です。WordPress内部でカラムリストを更新する際に、この返り値が使用されます。返り値を忘れると、カラムが表示されないので注意しましょう。
4. カラム内容表示関数
|
1 2 3 4 5 |
function wp3min_show_image_check_content($column_name, $post_id) { if ($column_name === 'image_check') { // 処理開始... } } |
この関数は、カラム名と投稿IDの2つの引数を受け取ります。最初に条件分岐で、このカラムが「image_check」（先ほど定義したカラム識別子）かどうかをチェックします。
これは重要なポイントで、このアクションはすべてのカラムに対して発動するため、自分が担当するカラムかどうかを必ずチェックする必要があります。
5. 投稿内容の取得と画像タグの抽出
|
1 2 3 4 |
$content = get_post_field('post_content', $post_id); preg_match_all('/<img[^>]+>/i', $content, $matches); $img_tags = $matches[0]; |
ここでは、まずget_post_field()関数を使って投稿の本文内容を取得しています。そして正規表現/を使って、本文中のすべてのimgタグをマッチさせています。
| 正規表現 | 説明 |
|---|---|
<img |
imgタグの開始部分を検索 |
[^>]+ |
「>」以外の文字が1回以上続くもの（タグの属性部分） |
> |
タグの終了部分 |
i（フラグ） |
大文字/小文字を区別しない |
マッチした結果は$matchesに格納され、$matches[0]にはマッチしたimgタグの完全な文字列が含まれています。
6. 画像タグの解析
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$alt_empty_count = 0; $non_webp_count = 0; foreach ($img_tags as $img) { // alt属性がない or 空 if (!preg_match('/alt=["\'][^"\']+["\']/', $img)) { $alt_empty_count++; } // webp以外 if (preg_match('/src=["\']([^"\']+)["\']/', $img, $src_match)) { $src = $src_match[1]; if (!preg_match('/\.webp(\?.*)?$/i', $src)) { $non_webp_count++; } } } |
この部分では、抽出したimgタグを一つずつ解析しています。2種類のチェックを行っています：
1. alt属性のチェック
正規表現/alt=["\'][^"\']+["\']を使って、alt属性が存在し、かつ空でないかをチェックしています。マッチしない場合、$alt_empty_countをインクリメントします。
2. WebP形式のチェック
まず/src=["\']([^"\']+)["\']でsrc属性の値を抽出し、次に/\.webp(\?.*)?$/iでファイル拡張子がWebPかどうかを確認します。WebPでない場合は$non_webp_countをインクリメントします。
7. 結果の表示
|
1 2 3 4 5 6 |
// 赤文字スタイル $alt_style = ($alt_empty_count > 0) ? 'style="color:red;"' : ''; $webp_style = ($non_webp_count > 0) ? 'style="color:red;"' : ''; echo "<span {$alt_style}>ALTなし: {$alt_empty_count}</span><br>"; echo "<span {$webp_style}>非WebP: {$non_webp_count}</span>"; |
最後に、カウントした結果を表示します。問題がある場合（カウントが0より大きい場合）は赤文字で表示するよう、インラインスタイルを設定しています。
問題がある場合は視覚的にすぐわかるよう赤字で表示することで、修正が必要な投稿を一目で識別できるようになっています。
実装方法
では、このフックを自分のWordPressサイトに実装する方法を見ていきましょう。
実装手順
- WordPressの管理画面にログイン
- 「外観」→「テーマエディター」を選択（または「外観」→「テーマファイルエディター」）
- 右側のファイル一覧から「functions.php」を選択
- functions.phpの最後に今回のコードを追加
- 「ファイルを更新」ボタンをクリック
注意：直接テーマファイルを編集する場合は、必ず事前にバックアップを取っておきましょう。また、テーマの更新時にコードが上書きされる可能性があります。安全に実装するなら、子テーマの利用をおすすめします。
より安全な実装方法
より安全な方法として、子テーマを使用している場合は、子テーマのfunctions.phpに追加することをお勧めします。または、「Code Snippets」などのプラグインを使用すれば、テーマファイルを直接編集せずにコードを追加できます。
カスタマイズポイント
さらに便利に使えるよう、いくつかカスタマイズポイントを紹介します。
1. 他の投稿タイプにも適用する
|
1 2 3 4 5 6 7 8 9 10 11 |
// 投稿タイプ'post'用 add_filter('manage_post_posts_columns', 'wp3min_add_image_check_columns'); add_action('manage_post_posts_custom_column', 'wp3min_show_image_check_content', 10, 2); // 固定ページ'page'用も追加 add_filter('manage_page_posts_columns', 'wp3min_add_image_check_columns'); add_action('manage_page_posts_custom_column', 'wp3min_show_image_check_content', 10, 2); // カスタム投稿タイプ'product'にも追加（例：WooCommerceの商品） add_filter('manage_product_posts_columns', 'wp3min_add_image_check_columns'); add_action('manage_product_posts_custom_column', 'wp3min_show_image_check_content', 10, 2); |
2. カラムの位置を調整する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function wp3min_add_image_check_columns($columns) { // 新しいカラム配列を作成 $new_columns = array(); foreach($columns as $key => $value) { $new_columns[$key] = $value; // 「タイトル」カラムの後に「画像チェック」カラムを挿入 if($key == 'title') { $new_columns['image_check'] = '画像チェック'; } } return $new_columns; } |
3. チェック項目を拡張する
|
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 |
function wp3min_show_image_check_content($column_name, $post_id) { if ($column_name === 'image_check') { $content = get_post_field('post_content', $post_id); preg_match_all('/<img[^>]+>/i', $content, $matches); $img_tags = $matches[0]; $alt_empty_count = 0; $non_webp_count = 0; $large_size_count = 0; // 大きすぎる画像をチェック foreach ($img_tags as $img) { // alt属性のチェック if (!preg_match('/alt=["\'][^"\']+["\']/', $img)) { $alt_empty_count++; } // src属性を取得 if (preg_match('/src=["\']([^"\']+)["\']/', $img, $src_match)) { $src = $src_match[1]; // WebP形式のチェック if (!preg_match('/\.webp(\?.*)?$/i', $src)) { $non_webp_count++; } // 幅と高さの属性をチェック（幅1000px以上をカウント） if (preg_match('/width=["\'](\d+)["\']/', $img, $width_match)) { if ((int)$width_match[1] > 1000) { $large_size_count++; } } } } // 結果表示 $alt_style = ($alt_empty_count > 0) ? 'style="color:red;"' : ''; $webp_style = ($non_webp_count > 0) ? 'style="color:red;"' : ''; $size_style = ($large_size_count > 0) ? 'style="color:orange;"' : ''; echo "<span {$alt_style}>ALTなし: {$alt_empty_count}</span><br>"; echo "<span {$webp_style}>非WebP: {$non_webp_count}</span><br>"; echo "<span {$size_style}>大きい画像: {$large_size_count}</span>"; } } |
4. ソート機能を追加する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// ソート可能なカラムとして登録 add_filter('manage_edit-post_sortable_columns', 'wp3min_sortable_image_check_column'); function wp3min_sortable_image_check_column($columns) { $columns['image_check'] = 'image_check'; return $columns; } // ソートロジックを実装 add_action('pre_get_posts', 'wp3min_image_check_orderby'); function wp3min_image_check_orderby($query) { if (!is_admin() || !$query->is_main_query()) { return; } if ($query->get('orderby') === 'image_check') { // ここでメタデータを使ったソートロジックを実装 // この例では、実装が複雑になるためスケルトンのみ提示 $query->set('meta_key', '_wp3min_alt_missing_count'); $query->set('orderby', 'meta_value_num'); } } |
ただし、この機能を完全に実装するには、各投稿の画像チェック結果をメタデータとして保存する追加処理が必要になります。
応用例：アクションとしての活用
このフック機能を単なる「チェック」だけでなく、問題解決のための「アクション」と組み合わせることもできます。以下に応用例を示します。
修正リンクを追加する
|
1 2 3 4 5 6 7 8 9 10 |
function wp3min_show_image_check_content($column_name, $post_id) { if ($column_name === 'image_check') { // 既存のコード... // 問題があれば編集リンクを表示 if ($alt_empty_count > 0 || $non_webp_count > 0) { echo '<br><a href="' . get_edit_post_link($post_id) . '" style="color:blue;text-decoration:underline;">修正する</a>'; } } } |
バルクアクション機能を追加する
投稿一覧のバルクアクション（一括操作）に「画像チェック」機能を追加することで、複数の記事を同時に分析できます。これを実装するためには、以下のようなフックが必要になります：
|
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 |
// バルクアクションにオプションを追加 add_filter('bulk_actions-edit-post', 'wp3min_add_image_check_bulk_action'); function wp3min_add_image_check_bulk_action($bulk_actions) { $bulk_actions['run_image_check'] = '画像チェックを実行'; return $bulk_actions; } // バルクアクションのハンドラー add_filter('handle_bulk_actions-edit-post', 'wp3min_handle_image_check_bulk_action', 10, 3); function wp3min_handle_image_check_bulk_action($redirect_to, $action, $post_ids) { if ($action !== 'run_image_check') { return $redirect_to; } // 選択された各投稿に対して画像チェックを実行 foreach ($post_ids as $post_id) { // 画像チェックロジック... // 結果をメタデータとして保存 } // リダイレクト先URLにクエリパラメータを追加 $redirect_to = add_query_arg('bulk_image_check', count($post_ids), $redirect_to); return $redirect_to; } // 結果メッセージを表示 add_action('admin_notices', 'wp3min_bulk_image_check_admin_notice'); function wp3min_bulk_image_check_admin_notice() { if (empty($_GET['bulk_image_check'])) { return; } $count = intval($_GET['bulk_image_check']); printf('<div class="updated"><p>' . _n('%s件の投稿の画像チェックを完了しました。', '%s件の投稿の画像チェックを完了しました。', $count) . '</p></div>', $count); } |
よくある質問（FAQ）
Q1: この機能はサイトの表示速度に影響しますか？
A1: この機能は管理画面でのみ動作し、フロントエンド（一般訪問者が見るサイト）には影響しません。ただし、投稿数が非常に多い場合、管理画面の読み込みに若干の影響を与える可能性があります。
Q2: alt属性や画像形式を一括して修正する方法はありますか？
A2: WordPressのメディアライブラリで一括編集機能を使うか、専用のプラグイン（例：「Media Library Assistant」や「Enable Media Replace」など）を使用することで、alt属性の一括編集や画像形式の変換が可能です。
Q3: WebP形式に対応していないブラウザがあると問題になりませんか？
A3: 現在ではほとんどのモダンブラウザがWebP形式をサポートしていますが、一部の古いブラウザでは表示されない可能性があります。対策として、picture要素を使って代替フォーマットも提供するか、サーバー側で対応するブラウザにのみWebP画像を配信する設定を行うことをお勧めします。
Q4: 正規表現がエラーになる場合はどうすればいいですか？
A4: HTMLタグを正規表現で解析する方法は完全ではない場合があります。より堅牢な実装が必要な場合は、DOMParserやHTMLのパーサーライブラリを使用することをお勧めします。例えば、PHPのDOMDocumentクラスを使用する方法があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function parse_img_tags_with_dom($content) { $dom = new DOMDocument(); @$dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8')); $imgs = $dom->getElementsByTagName('img'); $img_data = array(); foreach ($imgs as $img) { $has_alt = $img->hasAttribute('alt') && !empty($img->getAttribute('alt')); $src = $img->getAttribute('src'); $is_webp = preg_match('/\.webp(\?.*)?$/i', $src); $img_data[] = array( 'has_alt' => $has_alt, 'is_webp' => $is_webp, 'src' => $src ); } return $img_data; } |
まとめ
今回紹介した投稿一覧に画像チェック機能を追加するフックは、WordPress管理画面を拡張する素晴らしい例です。この機能により、SEOとパフォーマンスの両面で重要な画像の最適化状況を一目で確認できるようになります。
WordPress管理画面のカスタマイズは、日々の運用効率を大幅に向上させる強力な手段です。今回紹介したような小さなカスタマイズでも、長期的には大きな時間節約につながります。
私たち埼玉県川越市のWordPressスペシャリストチームは、このようなカスタマイズを通じてクライアントのサイト運営をサポートしています。サイト運営で何かお困りのことがあれば、ぜひWordPressトラブル対応・お悩み相談サービスをご利用くださいね（https://edel-hearts.com/wordpress-trouble-shooting/）。
次回の「WordPress 3分間フッキング」もお楽しみに！
