WordPressの「やべっ！公開ボタン押しちまったよｗｗｗ」を回避する小技
公開日：
WordPress管理画面のエディタで記事を編集するさい、作成途中のものは「下書きとして保存」しますよね。
ところが、ついうっかり「公開」や「更新」ボタンを押してしまったり、半角英数字でタイトルを入れているときにEnterを押して公開してしまったことがありませんか？
すぐ非公開に戻せばいいのですが、Twitterを自動連携させていると作成途中の記事が見られてちょっと恥ずかしく、なぜか後ろめたいに気持ちに。
というわけで、今日はそんなついうっかりを回避する小技をご紹介します。
目次
管理画面のCSSを調整してボタンの色を変える
まず、「下書き」ボタンを強調し、「公開」ボタンを目立たなくする小技から。
通常、投稿エディタの右上はこうなっていますね。
公開ボタンが目立つため、ぼーっとしているとココを押したくなります。
これをこのように変更してみましょう。
下書きボタンを目立たせることによって、うっかりを防ぐ効果がある……かも？
管理画面にオリジナルCSSを適用する方法
管理画面のCSSはWordPress本体の「wp-admin」ディレクトリに格納されているため、そこを直接編集すれば自由にカスタマイズできます。
ただ、これだとアップデート時に上書きされてしまうので、別にオリジナルCSSを作って管理しましょう。専用プラグインもありますが、functions.php に数行追記するだけでOKです。
functions.php に追記
下記コードをfunctuins.phpに記述します。
|
1 2 3 4 5 |
//管理画面に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が振られています。
背景色を緑に、文字色を白に変更しておきましょう。
|
1 2 3 4 5 6 |
input#save-post { background: #138800; color: #fff; border-color: #fff; box-shadow: none; } |
「公開」ボタンのID名とCSS
公開ボタンは「publish」というIDになっています。
背景色を薄いグレーに、文字色を濃いグレーに変更して目立たなくします。
|
1 2 3 4 5 6 |
input#publish { background: #f7f7f7; border-color: #ccc; box-shadow: none; color: #555; } |
これで完成。
その他、デベロッパーツールで各パーツのIDやクラスを確認して、オリジナルの管理画面に変更するのも面白いですね。
個人ブログで自分が使うだけならあまり意味がないかもしれませんが、納品するときに簡単なカスタマイズをしたいなら便利だと思います。
公開ボタンを押したら確認画面を出してみよう
CSSで見た目を変更しても、公開ボタンを押せばそのまま投稿されるのには変わりありません。
そこで、公開ボタンを押したら確認アラートを出してみましょう。
JavaScriptを管理画面フッターに挿入する
先ほどはCSSへのリンクを<head>内に挿入する方法でしたが、今度はフッターにJavaScriptを挿入して、簡単なアラートウィンドウを出してみます。
functions.phpに下記を追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$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'); |
「公開」ボタンを押すと……
と、警告してくれます。なんだか別の意味で警告されていますが、僕はドMなので気にしないでくださいｗ
文言はお好きなものをどうぞ。
参考記事を公開する前に確認アラートを出す – かちびと.net
まとめ
以上、『ぬあああぁぁぁ！記事公開しちゃったよーーー！！』を防ぐ小技でした。
パーマリンクが未設定だったり、カテゴリーが間違っていたり、意味不明なタイトルのまま公開して恥ずかしい思いをするのを防げると思います。
それでは、また。
Your Message