WEB制作、マーケティングに関する情報をお届けします。

WordPressで記事を作成・公開する際に、サムネイル画像はユーザーの目を引く大切な要素です。しかし、うっかりサムネイルを設定しないまま記事を公開してしまうといったことがよくあります。サムネイルの設定ミスをなくすために「アラート」を表示する仕組みを導入しておくと安心です。本記事では、プラグインを使わずに投稿時に、サムネイルが設定されてい場合にアラートを出す方法を紹介します。

コードを紹介

functions.phpに記載します。

function custom_thumbnail_check_for_all_editors() {
  global $post;

  $post_types = array('post', 'works', 'news');

  if (is_admin() && $post && in_array($post->post_type, $post_types)) {
    ?>
    <script type="text/javascript">
      (function($) {

        //クラシックエディタ用//
        $(document).ready(function () {
          if ($('#post').length) {
            $('#post').on('submit', function (e) {
              if ($('#postimagediv .inside img').length === 0) {
                alert('サムネイルを設定してください。');
                e.preventDefault();
                return false;
              }
            });
          }
        });
        //ブロックエディタ用//
        window.addEventListener('DOMContentLoaded', function () {
          if (typeof wp !== 'undefined' && wp.data) {
            const { subscribe, select, dispatch } = wp.data;
            let wasSaving = false;

            subscribe(() => {
              const isSaving = select('core/editor').isSavingPost();
              const isAutosaving = select('core/editor').isAutosavingPost();

              if (!wasSaving && isSaving && !isAutosaving) {
                wasSaving = true;

                const featuredImg = document.querySelector('.editor-post-featured-image img');

                if (!featuredImg) {
                  alert('サムネイルを設定してください。');
                  dispatch('core/notices').createNotice(
                    'error',
                    'サムネイルが設定されていません。保存をキャンセルしてください。',
                    { isDismissible: true }
                  );
                }
              }

              if (!isSaving) {
                wasSaving = false;
              }
            });
          }
        });

      })(jQuery);
    </script>
    <?php
  }
}
add_action('admin_footer-post.php', 'custom_thumbnail_check_for_all_editors');
add_action('admin_footer-post-new.php', 'custom_thumbnail_check_for_all_editors');

コードを解説

関数を作成します。

function custom_thumbnail_check_for_all_editors() {}

現在の投稿データを取得します。

global $post;

対象にしたい投稿タイプを配列に入れます。以下では初期の投稿(post)に加え、works、newsのカスタム投稿タイプを対象にしています。

$post_types = array('post', 'works', 'news');

『is_admin()』で管理画面を表示しているかを確認、現在の投稿データがあるかどうか、先ほど配列に入れた投稿タイプかどうかを確認して条件に含まれている場合に実行します。

if (is_admin() && $post && in_array($post->post_type, $post_types)) {}

Javascriptで実行する

実行はHTMLタグを直書き、jqueryを使用するため、以下のように、実行するコードを書きます。

<script type="text/javascript">
      (function($) {

      })(jQuery);
</script>

クラシックエディタの場合

DOMの読み込みが完了してから実行します。

$(document).ready(function () {
});

クラシックエディターでは『post』というIDが存在しているため、それを使ってフォームの操作を監視します。

if ($('#post').length) {
}

submitボタンをクリックした際にサムネイルを内包する『postimagediv』が画像を所持しているかを確認、サムネイルがなければ『サムネイルを設定してください。』というアラートを出します。

ブロックエディタの場合

DOMの読み込みが完了してから実行します。

window.addEventListener('DOMContentLoaded', function () {
});

『typeof wp !== ‘undefined’』でWordPressが用意しているグローバルオブジェクトwpが存在するかを確認、『!=’undefined’』で値が設定されているかどうかを確認、尚且つ『wp.data』でブロックエディターを感知します。

if (typeof wp !== 'undefined' && wp.data) {
}

『wp.data』ではブロックが追加や投稿の保存状態になった時に『subscribe』、ユーザーデータの更新時に『dispatch』、現在の状態を取得するため『select』が存在します。これを監視して条件分岐を行ってアラートを立ち上げます。以下で分割代入し、wasSavingには初期値としてfalseを入れておきます。

const { subscribe, select, dispatch } = wp.data;
let wasSaving = false;

投稿保存の状態を監視する『subscribe』を使用します。

subscribe(() => {
});

『select』を使用して、エディターが投稿を保存中かどうか、自動保存が稼働しているかどうかを確認します。

const isSaving = select('core/editor').isSavingPost();
const isAutosaving = select('core/editor').isAutosavingPost();

通常保存が始まった瞬間に処理を実行します。

if (!wasSaving && isSaving && !isAutosaving) {
  wasSaving = true;
}

ブロックエディタのDOMからアイキャッチ画像の有無を確認します。

const featuredImg = document.querySelector('.editor-post-featured-image img');

サムネイルが未設定の場合はアラート、通知として表示を行います。

if (!featuredImg) {
  alert('サムネイルを設定してください。');
  dispatch('core/notices').createNotice(
    'error',
    'サムネイルが設定されていません。保存をキャンセルしてください。',
    { isDismissible: true }
  );
}

保存が終わったら状態を戻します。

if (!isSaving){
               wasSaving = false;
}

最後に新規追加、編集画面へのフックを設定します。

add_action('admin_footer-post.php', 'custom_thumbnail_check_for_all_editors');     // 編集画面
add_action('admin_footer-post-new.php', 'custom_thumbnail_check_for_all_editors'); // 新規追加画面

まとめ

WordPressでサムネイルの有無を確認し、未設定の場合にアラートを出すことで、公開開示のサムネイル設定ミスを防ぐことができます。ちょっとしたコードの工夫で「うっかり」を防止できるので、ぜひ導入を検討してみてください。