カテゴリー: Wordpress

WordPressに関するいろんな話題を集めたコーナーです。テーマやプラグインのカスタマイズ、サイト運営のちょっとしたコツ、不具合解消のヒントまで幅広く!WordPressサイトを作っている人、これから始めたい人にもおすすめです。

  • WordPress 7.0アップデート後に発生する「アップロードしています」が消えないメディアライブラリの不具合

    WordPress 7.0アップデート後に発生する「アップロードしています」が消えないメディアライブラリの不具合

    WordPress 7.0へのアップデート、またはWordPress 7.0環境への移行に伴い、メディアライブラリ(グリッドビュー)の一部画像に「アップロードしています…」という進捗テキストが表示されたまま消失しない不具合が確認されています。

    この現象は、環境のアップデートやサーバー移転において、FTP経由での画像アップロード後に「Media Sync」での同期や「Regenerate Thumbnails」でのサムネイル再生成を行った環境などで顕在化するケースがあります。

    実務上の重要な視点として、この現象はWebサイトのフロントエンド(公開画面)の表示崩れやリンク切れを引き起こす致命的な欠陥ではありません。対象の画像は投稿編集画面から通常通り選択でき、記事内に挿入すれば正常に表示・出力されます。

    システムダウンを伴う重大なトラブルではないものの、メディアライブラリの管理画面を開くたびに未完了ステータスが表示され続けるため、サイト運用者やクライアントに不要な混乱や不安を与える原因となります。

    画像タイトルを空にすると不具合が発生する原因と再現条件

    この現象が発生する要因は、プラグインの不具合やサーバーのスペック不足ではなく、WordPress 7.0で実施された管理画面のアクセシビリティ改善と、データベース内に「タイトルのない画像データ」が存在することの不整合にあります。

    具体的な不具合の再現条件は以下の通りです。

    • メディアの編集画面において「タイトル」が完全に削除され、空欄(NULLまたは空文字)になっている
    • 「代替テキスト(alt属性)」には何かしらの文字列が入力されている

    過去のサイト運用者が「管理画面の見栄えをスッキリさせたい」「フロントに出ないから不要」という理由で、手動でタイトルの文字を消去し、alt属性だけを入力していた画像が多数存在する場合、WordPress 7.0環境にアップデートしたタイミングで一斉にこの表示不具合が顕在化します。

    WordPress 7.0のアクセシビリティ仕様変更とデータ競合のメカニズム

    WordPress 7.0では、音声コントロールユーザーやスクリーンリーダー(画面読み上げソフト)を利用するユーザーへの配慮として、管理画面のウェブアクセシビリティが大幅に強化されました。これにともない、メディアライブラリのグリッドビューで各画像の上にタイトルのオーバーレイ(重ねて表示する構造)を生成する仕組みが追加されています。

    WordPressの内部システム(JavaScriptおよびReact)は、画像をアップロードしている最中、暫定的に「アップロードしています…」というプレースホルダーテキストを表示します。通常はアップロード完了のシグナルとともに、データベースから取得した「画像タイトル」へと文字列が書き換わると考えられます。

    しかし、現在のWordPress 7.0の実装には、画像タイトルが空である場合の代替処理(フォールバック)が考慮されていません。タイトルが空のデータを読み込んだ際、文字列の書き換え処理が行われないため、初期値である「アップロードしています…」の文字が画面に残り続けます。これが、フロントエンドでは正常に機能するにもかかわらず、管理画面の表示だけが乱れる原因です。

    公式リファレンス・議論の参照元

    WordPressメディアデータにおけるタイトルフィールドの役割

    Web制作やサイト運用の現場において、メディアの「タイトル」は軽視されがちです。一般的なテーマやブロックエディターの仕様では、この項目はフロントエンドの <img> タグに title="" 属性として自動出力されないことが多いためです。

    しかし、WordPressの設計思想において、メディアのタイトルは単なる管理用のメモ書きではありません。データベース(wp_postsテーブル)上では、通常のブログ記事などと同じ「投稿タイトル(post_title)」として扱われる重要なパーツです。

    さらに、WordPress 7.0からは前述の通り、管理画面内で音声コントロールユーザーがオブジェクトを正しく認識・操作するための「識別ラベル」としての役割が与えられています。この変更は、公式のバグ追跡システム(WordPress Trac)で長年にわたり議論され、実装されたものです。

    画像の代替テキスト(alt)とタイトル(Title)の仕様上の違い

    実務で混同されやすい「代替テキスト(alt)」と「タイトル(Title)」の仕様と役割の違いは以下の通りです。

    項目データベース上の管理フロントエンドへの出力主な役割・目的
    代替テキスト (alt)wp_postmeta 内のメタデータ<img alt="内容"> として出力SEO・アクセシビリティ(検索エンジンやスクリーンリーダーに画像内容を伝える)
    タイトル (Title)wp_posts の post_title原則として出力されない管理画面内の識別・音声コントロール用ラベル(今回の不具合の引き金)

    このように、両者は完全に別物です。SEO対策として「代替テキスト(alt)」をどれだけ完璧に記述していても、管理画面のシステム構造を維持する「タイトル」を空にしてしまうと、WordPress 7.0以降の環境ではDOM構造の不整合(表示不具合)を起こしてしまいます。

    メディアライブラリの表示不具合を一括修正するデータベース操作

    すでに多数の画像でタイトルが空になっており、メディアライブラリの表示に問題が出ている場合は、データベース(MySQL)側からSQLクエリを発行し、一括でタイトルを補完・復旧させる方法が効率的です。

    WordPressの画像データは、wp_postsテーブルの中に post_type = 'attachment' として保存されています。以下の手順を実行することで、タイトルが空、またはスペースのみになっている画像に対し、自動生成されたスラッグ(拡張子を除いたファイル名)をタイトルとして一括挿入できます。

    データベースの一括修正手順

    データベースを直接操作する際は、作業前に必ず wp_posts テーブル、またはデータベース全体のバックアップ(エクスポート)を確実に取得してください。

    phpMyAdminなどのデータベース管理ツール、またはWP-CLIから以下のSQLコマンドを実行します。

    • データベースの接頭辞が「wp_」の場合の記述例
    • タイトルが空欄、または半角・全角スペースのみの画像データを抽出し、スラッグ名(ファイル名)をタイトルにコピーする
    UPDATE wp_posts 
    SET post_title = TRIM(post_name)
    WHERE post_type = 'attachment' 
      AND (post_title IS NULL OR TRIM(post_title) = '' OR TRIM(post_title) = ' ');

    コードの解説

    • WHERE post_type = 'attachment':通常の投稿ページや固定ページを除外し、メディア(添付ファイル)のみを対象に絞り込みます。
    • TRIM(post_title) = '':誤って半角・全角スペースだけが入力されているケースも検知して対象に含めます。
    • SET post_title = TRIM(post_name):画像アップロード時に自動生成されるスラッグ名(ファイル名ベースの文字列)を、空欄になったタイトルフィールドに流し込みます。

    このクエリを実行したあと、WordPress管理画面のメディアライブラリを再読み込みすることで、データ構造の不整合が解消され、正常な表示へと復元されます。

    WordPress 7.0以降のメディアライブラリ不具合を防ぐ再発防止策

    WordPress 7.0以降の環境においては、仕様変更に合わせた運用の標準化が必要です。同様の表示トラブルを未然に防ぐため、以下の運用ルールと設計を徹底します。

    メディア運用ガイドラインの改定

    「画像タイトルはフロントエンドに出力されないため不要」と判断し、手動で消去してしまう運用ケースが散見されます。しかし、前述の通り管理画面のDOM構造やアクセシビリティに影響を与えるため、「ファイル名のままでよいので、タイトルは絶対に空にしない」 というルールをWebサイトの運営マニュアルや制作ガイドラインに明記する必要があります。

    メディア同期プラグイン使用時のデータチェック

    FTP経由で画像をアップロードし、「Media Sync」などのプラグインでデータベースにインポートする際は、インポート設定においてタイトルが自動的に割り当てられる設定(ファイル名流用など)になっているか必ず確認します。インポート直後にメディアライブラリの動作確認を行うテスト工程を保守フローに組み込むことが推奨されます。

    ウィドックの見解(まとめ)

    今回の「アップロードしています…」という表示トラブルは、記事への挿入や公開画面の表示には影響しないため、実務上の優先度としては軽微なバグに分類される性質のものです。今回の不具合は、WordPressの仕様変更によるもので、今後のアップデートで解消されることを期待します。

    しかし、フロントエンドに直接露出しないデータ(管理画面内のみで消費されるデータ)を軽視する運用のあり方自体は見直すべきです。

    近年のWordPressコアのアップデート傾向を見ると、セマンティックなデータ構造の維持や、スクリーンリーダーを含むあらゆるユーザーへの配慮(アクセシビリティ)が最優先事項として組み込まれています。「フロントに出ないから消しても問題ない」という古い認識に基づいたデータ設計や運用は、今回のような予期せぬ表示バグを招くだけでなく、将来的なコアのメジャーアップデート時に致命的なスクリプトエラーを誘発するリスクを高めます。

    CMSのポータビリティや長期的な保守性を担保するためには、システムが求める本来のデータ構造(post_titleの保持)に準拠した運用設計を行うことこそが本質的なアプローチです。

  • WordPressの投稿画面にカスタム説明欄を追加する方法

    WordPressの投稿画面にカスタム説明欄を追加する方法

    WordPressで記事を作成する際、タイトルや本文に加えて「説明欄(description)」を個別に設定できると、SEO対策やSNSシェア時の見え方に大きな違いが出ます。特にGoogle検索のスニペットやX(旧Twitter)などのOGPにおいて、的確な説明文が表示されることで、クリック率や信頼性の向上にもつながります。この記事では、投稿画面にカスタム説明欄を追加する方法を、functions.phpに追記する具体的なコード付きで解説します。プラグインを使わずにテーマ内で完結させたい方にとって、柔軟で管理しやすいカスタマイズ手法として役立ちます。

    カスタム説明欄の追加は「functions.php」だけで実現できる

    WordPressでは、投稿画面に独自の入力フィールドを追加することが可能です。プラグインを使わず、functions.phpへの数行の記述だけで実装できるため、不要な拡張を避けたい方にも最適です。

    管理画面に表示するフィールドは「カスタムメタボックス」と呼ばれます。これは投稿画面の「タイトル下」「公開設定エリア下」などに配置でき、データはpost_metaとして保存されます。

    コードの導入に関するご注意
    この記事では、カスタマイズに利用できるサンプルコードを紹介していますが、使用・編集することで レイアウトが崩れる表示が乱れる意図した動作をしなくなる、あるいは サイト全体が表示されなくなる などの不具合が発生する可能性があります。必ず 事前にバックアップを取り、自己責任にてご利用ください。

    基本のコード(functions.phpに追記)

    以下のコードをテーマのfunctions.phpに追加します。

    // 投稿画面に説明欄を追加
    function wedok_add_description_meta_box() {
      add_meta_box(
        'wedok_description',
        '投稿メモ(内部用)',
        'wedok_description_meta_box_callback',
        'post',
        'normal',
        'high'
      );
    }
    add_action('add_meta_boxes', 'wedok_add_description_meta_box');
    
    function wedok_description_meta_box_callback($post) {
      $value = get_post_meta($post->ID, '_wedok_description', true);
      echo '<textarea style="width:100%;height:100px;" name="wedok_description">' . esc_textarea($value) . '</textarea>';
    }
    
    function wedok_save_description_meta_box($post_id) {
      if (array_key_exists('wedok_description', $_POST)) {
        update_post_meta($post_id, '_wedok_description', sanitize_text_field($_POST['wedok_description']));
      }
    }
    add_action('save_post', 'wedok_save_description_meta_box');

    このコードを反映すると、投稿画面の本文エリア下に「投稿メモ(内部用)」というテキストエリアが追加されます。

    活用シーンと運用時の注意点

    このカスタム説明欄は、公開ページには一切表示されません。あくまで管理用メモや編集履歴補足、SEOチェックリストの一時保存などに活用できます。

    運用上のおすすめ活用例

    • 外部ライターとやりとりする際の指示メモ
    • 公開前のチェックリスト(画像有無、リンク確認など)
    • 将来的に再編集予定のポイントの記録

    ただし、テーマ切り替えやfunctions.phpの競合で表示されなくなるリスクもあるため、バックアップやテーマ子テーマでの編集が前提となります。

    免責事項
    設定変更・作業・インストール方法などの紹介記事はあくまで参考情報です。読者が記事をもとに実行したことによるいかなる損害・不具合についてもウィドックでは一切責任を負いません。すべて自己責任で行ってください。