88 Shares

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

shock

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

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

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

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

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

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

通常、投稿エディタの右上はこうなっていますね。

WordPress投稿画面

公開ボタンが目立つため、ぼーっとしているとココを押したくなります。

これをこのように変更してみましょう。

WordPress投稿画面改造後

下書きボタンを目立たせることによって、うっかりを防ぐ効果がある……かも?

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

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

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

functions.php に追記

下記コードをfunctuins.phpに記述します。

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

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

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

テキストエディタでCSSファイルを新規作成し、該当する場所にアップロードすれば完了。中身を空のままアップしても、管理画面の[外観]から編集することができます。

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

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

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

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

#submitdiv

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

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

#save-post

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

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

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

#publish

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

これで完成。

WordPress投稿画面改造後

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

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

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

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

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

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

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

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

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

管理画面確認アラート

と、警告してくれます。なんだか別の意味で警告されていますが、僕はドMなので気にしないでくださいw

文言はお好きなものをどうぞ。

参考記事を公開する前に確認アラートを出す – かちびと.net

まとめ

以上、『ぬあああぁぁぁ!記事公開しちゃったよーーー!!』を防ぐ小技でした。

パーマリンクが未設定だったり、カテゴリーが間違っていたり、意味不明なタイトルのまま公開して恥ずかしい思いをするのを防げると思います。

管理画面カスタマイズ方法(プラグイン)はこちらもご参考に

WordPressサイトを快適に運用するためのTips【管理画面編】

それでは、また。