WordPress

[WordPress] 間違って記事を公開しないように、「公開」ボタンを押した後に確認アラートを入れる

公式プラグイン化しました。→ 記事公開前に確認アラートを表示する「One Step Before Publishing」が WordPress プラグインディレクトリに掲載されました · rakuishi.com

WordPress で記事をしこしこ書いて、下書きとして保存しようとした時に、間違って記事を「公開」してしまった経験は誰でもあると思います。

これは、「下書きとして保存」ボタンよりも「公開」ボタンが青く強調されているからいけません。例えるならば、剥き出しの非常ベルがそこにある状態です。誰でも押したくなる、よくない設計だと思います。

この記事では、間違って記事を公開しないように「公開」ボタンを押した後に、一度確認アラートを表示するように WordPress を改造してみます。

間違って記事を公開しないように、確認アラートを入れる

WordPress を改造と言いましたが、きちんと WordPress 側で用意された方法に則って修正していきます。

現在、使用しているテーマの「テーマのための関数（functions.php）」を開いて、以下の文章を <? php > 内に記述します。

function publish_confirm_admin_print_scripts() {
	echo <<< EOM
<script type="text/javascript">
<!--
window.onload = function() {
	var id = document.getElementById('publish');
	if (id.value.indexOf("公開", 0) != -1) {
		id.onclick = publish_confirm;
	}
}
function publish_confirm() {
	if (window.confirm("記事を公開してもよろしいですか？")) {
		return true;
	} else {
		var elements = document.getElementsByTagName('span');
		for (var i = 0; i < elements.length; i++) {
			var element = elements[i];
			if (element.className.indexOf("spinner", 0) != -1) {
				element.classList.remove('spinner');
			}
		}
		document.getElementById('publish').classList.remove('button-primary-disabled');
		document.getElementById('save-post').classList.remove('button-disabled');

	        return false;
	}
}
// -->
</script>
EOM;
}

// 公開する前にアラートを表示する
add_action('admin_print_scripts', 'publish_confirm_admin_print_scripts');

管理画面に JavaScript を追加して記述できる admin_print_scripts のアクションをフックして、新しくアラートを表示するための JavaScript を記述しています。

「公開」ボタン（id="publish”）が押された後に、記事を公開してもよいかどうかの確認アラートを表示するようにしています。

キャンセルした際に、色々とクラスを削除していますが、こちらは、ボタンを押せないように見せるクラスやローディングアニメーションのクラスを削除する処理となっています。

Pocket