WordPressのサイト管理やテーマ開発において、エラーを特定するために便利なデバッグモード。しかし、エラーログの出力をオンにしたまま放置してしまい、気づけばサーバーの容量が圧迫されていた……という経験はないでしょうか。

手動でFTPを開いて毎回 debug.log を削除したり空にしたりするのは、地味に面倒な作業です。

そこで本記事では、デバッグログの肥大化を完全自動で解決してくれるプラグイン「LH Clear Debug Log by Cron」をご紹介します。有効インストール数は「10+」と超マイナーですが、一度設定すればバックグラウンドで賢くログを管理してくれる優れものです。

LH Clear Debug Log by Cron

A simple plugin that clears the debug log by the cron schedule when it gets too big.

ja.wordpress.org

プラグインの詳しい内部仕様から、最新のWordPress 7.0環境での検証結果までを分かりやすく解説します。ログ管理の手間を減らして、サイトのパフォーマンスを最適に保ちたい方はぜひ参考にしてください。

WordPressのデバッグログ（debug.log）が肥大化する原因とリスク

WordPressの不具合調査やカスタマイズに便利なデバッグモード（WP_DEBUG_LOG）。しかし、これを有効にしたまま運用を続けると、エラーやNotice（注意）が蓄積され、ログファイルが数GB単位まで肥大化することがあります。

ログファイルが大きくなりすぎると、以下のトラブルを引き起こすリスクがあります。

• サーバーのディスク容量を圧迫し、サイトが停止する。
• サーバーのI/O負荷が上がり、サイトの表示速度が低下する。

「気づいた時には手遅れ」になりがちなログ問題ですが、手動でFTPを開いて毎回削除するのは非効率です。

プラグイン「LH Clear Debug Log by Cron」の内部仕様と仕組み

「LH Clear Debug Log by Cron」は、有効インストール数こそ「10+」と非常にマイナーですが、ログの自動クリーンアップに特化した実用的なプラグインです。公式のFAQに公開されている内部仕様は以下の通りです。

自動削除の基準値（しきい値）は「4MB」

デフォルトでは、ログファイルが「4,194,304バイト（約4MB）」を超えたタイミングで、自動的に中身をクリア（空に）します。数GBになる前に数MB単位で確実にリセットするため、サーバーを圧迫しません。

フィルターフックによる容量制限のカスタマイズ

プラグイン内に用意されているフィルターフックを利用することで、削除基準となる容量（4MB）を自由に変更可能です。サイトの運用環境に合わせて「2MBで消す」「10MBまで許容する」といった調整がコード側から行えます。

WP-Cronによるバックグラウンド処理

WordPressの定期実行システム（WP-Cron）を利用して、ログのサイズを定期的に監視・削除します。

【動作検証】公式4年未更新でも、最新のWordPress 7.0環境で正常動作を確認

公式のメタデータでは「最終更新：4年前」「検証済み最新バージョン：6.0.12」となっているため、一見すると導入に不安を覚えるスペックです。

しかし、実際に最新の「WordPress 7.0」環境に導入し、デバッグログが4MBを超えた時点で正常に自動削除（クリア）されることを検証・確認済みです。

管理画面（UI）や余計な設定ページを持たない、単一機能（シングルタスク）の極めてシンプルなコード設計であるため、WordPressのメジャーアップデートの影響を受けにくく、現行バージョンでも安定して動作します。

まとめ：エラーログの手動削除から解放される軽量な解決策

万人向けの派手なツールではありませんが、「開発環境で常時デバッグモードにしている」「本番環境でログを監視しつつ、容量制限をかけたい」という管理者にとって、「LH Clear Debug Log by Cron」は非常に確実な選択肢になります。

ぶっちゃけ以下のようなPHPコードを function.php かプラグイン「Code Snippets」に貼った上で、プラグイン「WP Crontrol」で delete_debug_log_daily を週1回で発動するように設定することでも同様のことはできます。

//wp-content/debug.logを一定期間で自動削除する
add_action('delete_debug_log_daily', function () {
    $file = WP_CONTENT_DIR . '/debug.log';
    if (file_exists($file)) {
        unlink($file);
    }
});

ただ個人的にはPHPコードを増やすほどデバッグやリファクタリングが増えて大変なことになるのを身に沁みて感じているのでできるだけ人の手を借りたいと思っています。

「4MBで自動クリア」という明確な仕様と、現行バージョンでの動作実績を踏まえ、ログの肥大化対策を自動化したい方はぜひ導入を検討してみてください。

なお、デバッグログの自動削除つきでデバッグログを総合的に管理したい場合は「Debug Log Viewer」というプラグインもありますが、Free版は固定50MBとかなり大きいです。 Pro版は1〜5000MBの間で変更可能です。

Debug Log Viewer

Effortlessly view, search, filter and manage your WordPress debug.log in the admin dashboard. Real-time monitoring and e…

ja.wordpress.org

皆さんはWeb開発やサイトを運営していて「追加した画像にキャプションをつける場合、Alt属性（代替テキスト）も同時に指定できたらいいのにはなぁ…。」と思ったことはありますか？一般的にキャプションは閲覧するユーザー（人間）のため、Alt属性は徘徊するクローラー（Googlebotなどの機械）のためにつけるとされていて、どちらもあるとユーザエクスペリエンスやSEOが良くなり、サイトのアクセス数が増える可能性があります。私は長らくこの点で面倒さを感じていて困っていたので今回JavaScriptでスクリプトを作成しました。もしよかったら参考にしてみてください。

WordPress画像管理の課題を解決！ChatGPTを活用してキャプションとAlt属性を一括設定する方法

皆さんは「静的サイトやWordPressなどのCMSに追加した画像にキャプションをつける場合、Alt属性（代替テキスト）も同時に指定できたらいいのにはなぁ…。」と思ったことはありませんか？

私の運営しているこのブログは生き物について解説することが多くその際、生態写真を多く掲載するのですが、WordPressでは画像のキャプションは編集画面のメイン部分で簡単に指定できますが、Alt属性は編集画面の右側にあるサイドバーから選択し指定することになり、大量の画像を挿入している場合、一目でAlt属性の内容が確認できないので、指定できているかどうかの見落としが多発していました。

そもそも、キャプションとAlt属性は同じ内容になることが殆どで、「だったら同じになるプラグインはないのかな？」と思って探していました。

しかし見つからず、JavaScriptでの生成もできましたが当時では技術力がなくこの件は長らく放置していましたが、最近HTML・CSS・JavaScriptを本格的に学習したことと、生成AIの発展により、ChatGPTとJavaScriptを用いることで解決できることが分かったので、シェアしておきます。

キャプションとAlt属性とは？その違いは？なぜ両方必要？

まず大前提としてなぜキャプションとAlt属性を両方指定しなければならない（とされているか）について解説しておきます。

そもそも、キャプションは画像の説明や補足情報を提供するために使用されます。主にユーザーに対してコンテキストを提供し、理解を助ける役割があります。

キャプションはHTMLではキャプションは通常<figure>要素の中に配置され、その中に要素が使われます。

一方、Alt属性は画像が読み上げられたり、画像が表示できない場合に代替テキストを提供することが元々の目的です。

Alt属性の本来の機能は画像自体が表示できない場合に画像の代替情報を提供することでしたが（Craven, 2006）、特に視覚障害者の方が、音声で画像を理解するためにも利用されています（Bigham et al., 2010）。

Alt属性はHTMLでは<img>要素の「属性（attributes）」として指定されます。

HTMLのソースコードで示すと以下のような構造になっています。

<main>
    <figure>
        <img src="sample.jpg" alt="sample"/> <!--altで指定された部分がAlt属性-->
        <figcaption>sample</figcaption> <!--figcaptionで囲まれた部分がキャプション-->
    </figure>
</main>

ただ、これだけではなぜキャプションとAlt属性を両方指定しなければならないことなっているのか分からないかもしれません。

これはAlt属性の内容が現在では検索エンジン最適化（SEO）の一環としても利用され、検索結果に影響を与える可能性があるとされているからです。

『Google検索』などの検索サイトはGooglebotなどのクローラーを用いてプログラムによってWeb上の情報を収集していますが、『Google検索』ではこのクローラーがAlt属性を参照して検索結果に反映していることが研究で分かっています（Ferraz, 2015）。

一方、キャプションに関してはそれほど影響しないとされており、サイト閲覧者が記事を見やすくなるというユーザーエクスペリエンスを高める役割があるとされています。

要するに、現代ではキャプションは閲覧するユーザー（人間）のため、Alt属性は徘徊するクローラー（Googlebotなどの機械）のためにあるということです。

つまり、Alt属性を指定しておくことで、『Google画像検索』などの画像検索サイトで自サイトの画像を的確に表示してくれる可能性があるのです。

したがって、一般的はどちらも指定しておくメリットがあるとされています。またアクセシビリティの改善にも繋がります。

ただ、本当にクローラーがキャプションを無視しているのかについては不明なところも多く、それを検証した記事は見たことがないので、個人的にはAlt属性の影響力に確証があるというわけでもありません。

また先程の論文時点では『Yahoo!』・『Bing』・『DuckDuckGo』ではAlt属性を参照していないことが分かっています（Ferraz, 2015）。

JavaScriptでWordPressに実装する方法

しかし、少しでも影響があるなら最小限の手間で両方指定しておきたいものです。

残念ながらまだJavaScriptのDOM（Document Object Model）の知識が浅く一からの記述は難しかったので、ChatGPT 3.5とともに修正しながら作成することにしました。

そこで得られたのが以下のコードです。

var images = document.querySelectorAll('figure img');
images.forEach(function (img) {
  if (!img.alt) {
    var figcaption = img.parentElement.querySelector('figcaption');
    if (figcaption) {
      img.alt = figcaption.textContent || figcaption.innerText;
    }
  }
});

意外にシンプルな内容なので、汎用性は高いと思います。

日本語にすると以下のような操作を行っています。

1. ページ内のすべてのfigure要素内のimg要素を取得します。 取得された要素はNodeListオブジェクトとしてimages変数に格納されます。
2. images変数に対してforEachメソッドを使用して、各要素に対して指定された関数を実行します。
3. 各img要素のAlt属性が存在しない場合に分岐処理を行います。
4. img要素に対してparentElementメソッドとquerySelectorメソッドを使用して、img要素の親要素であるfigcaption要素を取得し、その中から最初に見つかった要素をfigcaption変数に格納します。
5. figcaption変数が存在する場合に処理を行います。
6. img要素のAlt属性に、figcaption要素のテキストコンテンツを設定します。textContentが存在すればそれを使用し、存在しない場合はinnerTextを使用します。これは、ブラウザによってはどちらか一方しかサポートしていないことがあるためです。

WordPressの場合は、このスクリプトを編集画面の左にあるメニューバーの「外観」→「テーマファイルエディター」に行き、「テーマファイル」という見出しの下にある「javascript.js」に貼り付ければ動作します。

なお、WordPressなどのCMS（Contents Management System）を利用している場合、HTMLのコードが膨大なため、以下のように本文が含まれるid属性が <main> に含まれるものに限定する方が処理が早いです。

セレクターはquerySelectorAll()とgetElementById()の2種類が存在しますが、1つのIDを指定する場合はgetElementById()を使用するほうが、処理が早いです。

更に以下のコードではdocument.addEventListenerメソッドを使用することで、完全にロードされるまで待機してからスクリプトを実行するようにしています。

document.addEventListener('DOMContentLoaded', function () {
  var main = document.getElementById('main');
  if (main) {
    var images = main.querySelectorAll('figure img');
    images.forEach(function (img) {
      if (!img.alt) {
        var figcaption = img.parentElement.querySelector('figcaption');
        if (figcaption) {
          img.alt = figcaption.textContent || figcaption.innerText;
        }
      }
    });
  }
});

Alt属性がうまく指定できているか確認する方法は？

うまくAlt属性が指定できているかは『Google Search Console』を確認することで分かります。

『Google Search Console』を利用するには自サイトのURLを予め登録し、投稿した記事もクロール済みにしておく必要があるのでご注意ください。

登録されている場合は確認したい記事のURLを「～内のすべてのURLを検査」と書かれている検索フォームに張り付けて検索してください。

検索後、表示されたページの「クロール済みのページ」をクリックすればGooglebotが認識したHTMLが右側に表示されます。

この右側のコード内を一度クリックして、キーボードで Ctrl + F を押せば検索窓が開くのでここで「alt=」を検索すると、画像のalt属性の指定が確認できます。

うまく上記のスクリプトが動作していればalt属性にテキストが追加されているはずです。

この方法のメリットとデメリットは？

この方法のメリットとして勿論、そもそもの目的通り画像のキャプションにテキストを入力すると、自動的にalt属性が指定されるというのがあります。

WordPress（バージョン6.4.2現在）の仕様として画像をビジュアルエディターから追加すると、画像のプロパティの「タイトル」の内容が自動的に挿入されるので、プロパティのタイトルを指定していれば、全て自動で入力することが可能になりそうです。ただ、私は別の用途でこのプロパティを使用しているので行っていません。

もう一つの副産物として感じたのはきちんと画像のキャプションにテキストを追加する習慣がつくということです。

いままで、「別に画像があればサイトを見に来た人には分かるし、キャプションの追加は面倒だからいいか～。」とユーザエクスペリエンスだけを考えて雑に画像を貼り付けてしまうことも多かったですが、SEO向上というメリットも加わるとなると、かなり真面目に、しかも的確な内容になるように入力する癖がつきました。

デメリットに関しては基本的には無いと思っていますが、JavaScriptで動的にコンテンツを生成するという特性上、クローラーがJavaScriptの実行を行わなかったり、実行が遅すぎる場合はうまく認識することができなかった場合は指定できていないかもしれません。JavaScriptなどを多用してサイト自体が重くなっている場合は注意しましょう。

上記のスクリプトでは既にAlt属性が入力されている場合は、そのAlt属性が優先されるようになっているので後からキャプションとAlt属性を別の内容にしたくなっても問題なく反映されます。したがって、Alt属性を個別に指定したい場合は上述のようにビジュアルエディターの右サイドバーから指定しましょう。

もし、Alt属性の入力が面倒だと思っている人はぜひ試してみてください！

PHPでfigcaptionの内容をAlt属性に追加する方法（2026年6月2日追記）

以前は上記までのJavaScriptを使用していましたが現在はWordPressへの理解度が上がり使用していません。

JavaScriptはページスピードへの悪影響が大きいことが分かっていたのでJavaScriptの使用は極力減らしています。

現在は以下のPHPでこの処理は行っています。これから同じことをしたい人は以下を利用してください。

なお、function_exists('trp_translate') は「TranslatePress」という自動翻訳WordPressプラグインを使用していないサイトでは不要です。逆にTranslatePressを使用しているサイトではページごとの言語で画像にAlt属性を追加してくれるので素晴らしいコードです。

add_action('template_redirect', function () {

    ob_start(function ($html) {

        /**
         * figcaption または 空alt が無ければ即return
         */
        if (
            strpos($html, '<figcaption') === false ||
            strpos($html, 'alt=""') === false
        ) {
            return $html;
        }

        return preg_replace_callback(
            '/<figure\b[^>]*>.*?<\/figure>/isu',
            function ($m) {

                $figure = $m[0];

                /**
                 * 空altが無ければスキップ
                 */
                if (strpos($figure, 'alt=""') === false) {
                    return $figure;
                }

                /**
                 * figcaption取得
                 */
                if (
                    !preg_match(
                        '/<figcaption\b[^>]*>(.*?)<\/figcaption>/isu',
                        $figure,
                        $cap
                    )
                ) {
                    return $figure;
                }

                $caption = wp_strip_all_tags($cap[1]);

                /**
                 * 区切り前のみ
                 */
                $caption = preg_split('/[｜|]/u', $caption)[0];

                /**
                 * TranslatePressで現在言語へ翻訳
                 */
                if (function_exists('trp_translate')) {

                    $caption = trp_translate(
                        $caption,
                        null,
                        false
                    );
                }

                $caption = esc_attr(trim($caption));

                /**
                 * alt置換
                 */
                return preg_replace(
                    '/alt=(["\'])\s*\1/isu',
                    'alt="' . $caption . '"',
                    $figure,
                    1
                );

            },
            $html
        );

    });

});

引用文献

Bigham, J. P., Brudvik, J. T., & Zhang, B. (2010). Accessibility by demonstration: enabling end users to guide developers to web accessibility solutions. In A. Barreto, & V. L. Hanson (Eds.), Proceedings of the 12th international ACM SIGACCESS conference on Computers and accessibility (pp. 35-42). Association for Computing Machinery. ISBN: 9781605588810, https://doi.org/10.1145/1878803.1878812

Craven, T. C. (2006). Some Features of “Alt” Texts Associated with Images in Web Pages. Information Research: An International Electronic Journal, 11(2), 250. ISSN: 1368-1613, https://informationr.net/ir/11-2/paper250.html

Ferraz, R. (2015). Exploring web attributes related to image accessibility and their impact on search engine indexing. Procedia Computer Dcience, 67, 171-184. https://doi.org/10.1016/j.procs.2015.09.261