WordPressで記事を作成しているとき、タイトルやスラッグの入力中に間違えてEnterを2回押したら、『そのまま記事が公開されちゃった!』という経験は有りませんか?

もしくは、下書きで保存しようとしたら、ついつい目立つ『公開ボタンを押しちゃった!』とか…

今回は、誤って記事を公開するのを全力で防ぐために、WordPressに3つの設定を追加してみましょう。

 

Enterによる公開の無効化

概要

まずは、誤って公開してしまう原因の第1位(と僕が思っている)、Enterキーを押すことでに公開を無効化しましょう。

JavaScriptを使って、Enterキーを押した時のアクション(挙動)を制御する方法です。

実は、この方法を知っていると、お問い合わせなどのフォームにも流用でき、『間違って送信しちゃった!めんどくさいかたもう辞めた!』というふうな離脱を避けることができます。

 

参考にさせていただいたページ

WordPress › フォーラム » 投稿画面でエンターキーを押して記事が公開されてしまうのを防ぎたい

少し古い内容ですが、全く問題なく稼働します。

また、タイトルやスラッグの入力欄のEnterキーは無効化するけど、タグの入力欄は無効化しないで~等の内容も回答として乗っているので、非常に参考になります!

 

修正内容

参考にさせていただいたページに記載されているもののうち、こまろくNOTEに導入しているものを掲載しておきます。

下記のコードをfunction.phpにコピペするだけでOKです。

function.phpは、WordPressの管理画面の左ナビで、『外観』→『テーマ編集』の順に選択し、表示された画面の右ナビで『テーマのための関数(function.php)』を選んでください

↓のコードが表示されている枠内でダブルクリックをしていただくと、コピーのし易いモードに変わりますのでどうぞ!

//投稿画面でEnterキーを押して記事が公開されてしまうのを防ぐ
function no_enter(){
echo <<<JSCODE
<script type="text/javascript">
function BlockEnter(evt){
	evt = (evt) ? evt : event;
	var charCode=(evt.charCode) ? evt.charCode :
		((evt.which) ? evt.which : evt.keyCode);
	if ( Number(charCode) == 13 || Number(charCode) == 3) {
		return false;
	} else {
		return true;
	}
}
window.onload = function(){
	var elements = document.forms["post"].elements;
	for (var j=0; j < elements.length; j++) {
		var e = elements[j];
		if (e.type == "text"){
			e.onkeypress=BlockEnter;
		}
	}
	}
</script>
JSCODE;
}

add_action('admin_head', 'no_enter');

 

スポンサーリンク

『公開』ボタンをおした時に確認を表示させる

概要

続いて、誤って公開してしまう原因の第2位(と僕が ry)、間違って『公開』ボタンを押しちゃった時に、『ほんとに大丈夫?』とポップアップで確認を出してくれるように設定追加していきましょう。

 

参考にさせていただいたページ

wordpressの記事投稿時に確認ダイアログを出す « 吉祥寺北口システム

こちらも古い記事ですが動作は全く問題有りません。

(結構昔から使い続けてるな、この方法…)

 

修正内容

こちらもそのままfunction.phpにコピペでOKです!

//『公開』ボタンをおした時に確認を出す
function admin_edit_confirm() {
	echo '
<script>
  jQuery("#publish").live("click", function(e){
    if (!confirm(jQuery("#publish").val() + "してもよろしいでしょうか?")) {
      jQuery("#ajax-loading").hide();
      jQuery("#publish").removeClass("button-primary-disabled");
      jQuery("#save-post").removeClass("button-disabled");
      return false;
    }
 });
</script>';
}
add_action("admin_print_scripts", "admin_edit_confirm", 20);

 

補足:11月8日追記

今回の記事作成に合わせて、再度調査を行ったところ、プラグインでの実装も可能でした。

ってか、プラグイン、何でも有るな、マジで…

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

function.phpをいじるのはちょっと(^_^;)、という方はプラグインをお試しくださいませ!

 

スポンサーリンク

管理画面のボタンのCSSを変更

概要

最後に、誤って公開して(ry。

そもそも、『公開』ボタンが目立つ色なのが悪いんだ!という方は、色も変えちゃいましょ!

CSSが分からないって?

大丈夫!コピペしちゃおう!!

 

参考にさせていただいたページ

WordPressの「やべっ!公開ボタン押しちまったよwww」を回避する小技

WordPressの管理画面に、独自のCSSを効かせられるようにfunction.phpにコードを追記、その後、独自CSSを作成してアップロード、という流れになります。

 

修正内容

↑のページがマジ丁寧だから見てね!で問題ないのですが、子テーマを導入している場合うまくいかないことがあるので、こちらもコピペ用にコード貼っておきます。

まずはfunction.phpに下記のコードを追加。

※3行目の『/editor-color.css』は任意のファイル名でOKです。

補足

参考サイトでは.get_bloginfo('template_directory')というWordPressタグでテーマURLを取得しているのですが、子テーマを導入している場合、誤って親テーマのフォルダを見に行ってしまうことが有るため、3行目の『アップロードURL/editor-color.css』のところは直リンクを記載してください。

//管理画面にCSS追加
function wp_custom_admin_css() {
echo "\n" . '<link href="アップロードURL/editor-color.css" rel="stylesheet" type="text/css" />' . "\n";
}
add_action('admin_head', 'wp_custom_admin_css', 100);

 

 

続いて、テキストエディタ等でeditor-color.cssを作成。下記のコードをコピペして任意の場所にアップロードしてください(テーマフォルダの直下とかでOKです)。

※文字コードをUTF-8で保存するのを忘れずに!

@charset "utf-8";

/* 下書きとして保存ボタンを目立たせる! */
input#save-post {
	background: #ff0000;
	color: #fff;
	border-color: #fff;
	box-shadow: none;
}

/* 公開ボタンをひっそりさせる… */
#publish {
	background: #F5F5F5;
	color: #666;
	border-color: #F5F5F5;
}

 

これで無事にボタンが目立たなくなりました!

prevent-miss-publication-01

 

TSUNJI(@tsunji1983)的まとめ

SNSと連携していると特に、誤って公開すると焦りますよね?

この3つの設定をしておけば、さすがに間違って公開することは無くなるのでは無いでしょうか?

ぜひやってみてくださいね~