WordPressの記事内にある、imgのaltの中身が空の場合にエラーを表示するようにしてみた

記事内に画像を挿入した後、うっかりaltの中身を空(alt=””)にして投稿してしまうことがあると思います。

ある記事を見て出来そうだったので、altの中が空の場合に投稿画面でエラーを表示するようにしてみました。

functions.php

下記の記述を子テーマのfunctions.phpに記述します。

上記は公開や更新ボタンをクリックした時に動作するAjaxを定義し、そこから呼ばれたPHP側の処理で投稿された記事のバリデーションを行っています。

以下のサイトを参考にさせてもらいました。

WordPressで投稿時に、投稿した記事の中に特定の文字が入っているか確認し、入っていればそのまま保存し、入&

正規表現での検索や、エラーを表示する記述部分は以下になります。

解説1

imgの「alt=””」を正規表現で「$pattern」に代入しています。

解説2

「$pattern」に代入された結果(「alt=””」)を「preg_match」で記事内を検索して、マッチングした場合に「空のaltがあります。」という文言を表示します。

エラー表示

記事内のimgに「alt=””」があった場合、下記のようなエラーが表示されます。

altが空のエラー
エラー表示(Chromeブラウザ)

正規表現チェッカー

作成した正規表現の動作チェックを行う場合、「正規表現チェッカー PHP: preg_match() / JavaScript: match()」を利用すると楽になります。

正規表現チェッカー 入力

  1. 前後にデリミタをつけ、正規表現を入力。
  2. マッチング対象の文字列を入力。
  3. 「チェック!」ボタンをクリック。

上記の操作を行うと入力した正規表現の結果が表示されます。

正規表現チェッカー 結果
正規表現チェックの結果

まとめ

  • 子テーマのfunctions.phpにコードを記述する。
  • 正規表現を使ってマッチングさせる。
  • 「正規表現チェッカー」を使うと動作チェックが楽。

今回のaltバリデーションと、以前ご紹介したChrome拡張機能の「Alt & Meta viewer」を併用すると、かなりいい感じになりそうです。

今回の方法を応用すれば、何か他にもいろいろと出来そうな気がします。少し様子を見て、試していきたいと思います。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

WordPressの記事内にある、imgのaltの中身が空の場合にエラーを表示するようにしてみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!