2022年5月3日(火)2022年5月1日(日) 投稿者: iwbjp

投稿を編集の画面でURLが日本語なら公開ボタンを無効にする方法(WordPress)

投稿を編集のタイトルがURLになる問題

WordPressで記事の新規作成の投稿を編集の画面でタイトルを入力して保存すると自動的にURLスラッグにもそのタイトルが入る。(パーマリンクで投稿名を設定している場合)

WordPressでタイトルを入力して保存すると自動的にURLスラッグにもそのタイトルが入る

日本語のWebサイトであってもURLスラッグは英語にしたい場合が多いので、この部分は英語のURLに書き換えることが多いが、うっかり英語のURLに書き換えるのを忘れてそのまま投稿してしまっているケースも多い。

この問題はWordPressの投稿を編集の画面のURLスラッグで日本語が含まれる場合にはJavaScriptで公開ボタンを無効(disabled)にすれば防止することができます。

JavaScriptで公開ボタンを無効にする方法

まず投稿を編集の画面でJavaScriptファイルを読み込むようfunctions.phpに以下のコードを追加します。

// 投稿を編集の画面のURLスラッグをチェック
// /^[a-z0-9-]+$/ に一致しなければ投稿ボタンを押せないようにする
// JavaScriptファイルを読み込む
function my_post_url_slug_check($hook) {
  if ( 'post.php' != $hook ) {
    return;
  }
  wp_enqueue_script('my_admin_script', get_template_directory_uri() . '/js/url-slug-check.js');
}
add_action('admin_enqueue_scripts', 'my_post_url_slug_check');

functions.phpにコードを追加したらJavaScriptファイルを新規作成して以下のコードを記述する。

※ iwb.jpではhttps://iwb.jp/wp-content/themes/twentyseventeen/js/post-check.jsに置いてあるが場所は任意

jQuery(window).on('load', () => {
  const $postButton = jQuery('.editor-post-publish-panel__toggle');
  const $urlSlug = jQuery('#inspector-text-control-0');
  $postButton.prop('disabled', true);

  $urlSlug.on('input', function() {
    if (/^[a-z0-9-]+$/.test(jQuery(this).val())) {
      $postButton.prop('disabled', false);
    } else {
      $postButton.prop('disabled', true);
    }
  });
});

コードの内容は投稿ボタンの要素にdisabled属性を追加して、URLスラッグが /^[a-z0-9-]+$/ に一致すればdisabled属性を削除して投稿ボタンを押せるようにするという簡単なもの。

jQuery(window).on('load', () => {
  const $postButton = jQuery('.editor-post-publish-panel__toggle, .editor-post-publish-button__button');
  const $urlSlug = jQuery('#inspector-text-control-0');

  $urlSlug.on('load input', function() {
    if (/^[a-z0-9-]+$/.test(jQuery(this).val())) {
      $postButton.prop('disabled', false);
    } else {
      $postButton.prop('disabled', true);
    }
  });
});

上記のJavaScriptが読み込まれるとURLスラッグが日本語だと公開ボタンが無効(disabled)となり、英数字 (/^[a-z0-9-]+$/) だと有効になる。