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

2014-05-192021-08-17

WordPress 管理画面のエディタで記事を編集するさい、作成途中のものは「下書きとして保存」しますよね。

ところが、ついうっかり「公開」や「更新」ボタンを押してしまったり、半角英数字でタイトルを入れているときに Enter を押して公開してしまったことがありませんか？

すぐ非公開に戻せばいいのですが、Twitter を自動連携させていると作成途中の記事が見られてちょっと恥ずかしく、なぜか後ろめたいに気持ちに。

というわけで、今日はそんなついうっかりを回避する小技をご紹介します。

管理画面のCSSを調整してボタンの色を変える

まず、「下書き」ボタンを強調し、「公開」ボタンを目立たなくする小技から。

通常、投稿エディタの右上はこのように公開ボタンが目立っています。

夜中に記事を書いているときなど、ぼーっとしているとついつい公開ボタンを押しちゃいそうですね。

下書きボタンのほうを目立たせるようにしておけば、そんなうっかりを回避できるかもしれません。

これは CSS で変更できます。

管理画面にオリジナルCSSを適用する方法

管理画面の CSS は WordPress 本体の「wp-admin」ディレクトリに格納されているため、そこを直接編集すれば自由にカスタマイズできます。

ただ、これだとアップデート時に上書きされてしまうので、別にオリジナル CSS を作って管理しましょう。専用プラグインもありますが、functions.php に数行追記するだけで OK です。

functions.php に追記するコード

下記コードを functuins.php に追記してください。

//管理画面にCSS追加
function wp_custom_admin_css() {
echo "\n" . '<link href="' .get_bloginfo('template_directory'). '/admin.css' . '" rel="stylesheet" type="text/css" />' . "\n";
}
add_action('admin_head', 'wp_custom_admin_css', 100);

これで管理画面の <head> 内に CSS が埋め込まれます。CSS の名前と場所はお好きなものに変更してください。

CSSファイルの作成とアップロード

上記コードは、テーマ直下の「admin.css」を読み込む指定になっています。

テキストエディタで CSS ファイルを新規作成し、該当する場所にアップロードすればそのファイルが読み込まれます。中身を空のままアップして、管理画面の［外観］から編集するのでもよいですね。

今回変更するのは 2 箇所なので、あらかじめ記述してからアップすればすぐに適用されます。

ボタンの色を変えるCSSサンプル

クラス名や ID 名がわからないと指定できないので、Chrome のデベロッパーツールで確認してみましょう。

ここでは特に使いませんが、右上の公開ボックス全体は「submitdiv」という ID になっているのがわかりますね。

「下書き」ボタンのID名とCSS

下書きボタンには「save-post」という ID が振られています。

背景色を緑に、文字色を白に変更しておきましょう。

input#save-post {
	background: #138800;
	color: #fff;
	border-color: #fff;
	box-shadow: none;
}

「公開」ボタンのID名とCSS

公開ボタンは「publish」という ID になっています。

背景色を薄いグレーに、文字色を濃いグレーに変更して目立たなくします。

input#publish {
	background: #f7f7f7;
	border-color: #ccc;
	box-shadow: none;
	color: #555;
}

これで完成。

その他、デベロッパーツールで各パーツの ID やクラスを確認して、オリジナルの管理画面に変更するのも面白いですね。

ブログカスタマイズで重宝するブラウザ開発ツールの使い方

個人ブログで自分が使うだけならあまり意味がないかもしれませんが、納品するときに簡単なカスタマイズをしたいなら便利だと思います。

公開ボタンを押したら確認画面を出してみよう

CSS で見た目を変更しても、公開ボタンを押せばそのまま投稿されるのには変わりありません。

そこで、公開ボタンを押したら確認アラートを出してみましょう。

JavaScriptを管理画面フッターに挿入する

先ほどは CSS へのリンクを <head> 内に挿入する方法でしたが、今度はフッターに JavaScript を挿入して、簡単なアラートウィンドウを出してみます。

functions.php に以下を追記します。

$c_message = 'あら、いいの？このクソ記事公開しちゃうわよ？';
function confirm_publish(){
 
// JavaScriptを管理画面フッターに挿入する
global $c_message;
echo '<script type="text/javascript"><!--
var publish = document.getElementById("publish");
if (publish !== null) publish.onclick = function(){
return confirm("'.$c_message.'");
};
// --></script>';
}
add_action('admin_footer', 'confirm_publish');

「公開」ボタンを押すと……