WordPress管理画面のカスタマイズ！CSSコピペで投稿ミスを防止しよう：Cocoon仕様

WordPressで投稿前にチェックしておきたいパーマリンク・アイキャッチ画像・カテゴリ・タグなどつい設定し忘れなどありませんか？

• 下書き保存するはずが、ボーっとして公開をポチ
• 公開後リンクの追加・誤字修正だけなのに、つい更新日を変更してしまう
• アイキャッチの置き忘れ…なども

ポイントとしてハイライトカラー入れると一息ついたとき確認できるので、間違い防止対策してみましょう＾＾

 投稿の編集画面のCSSカスタマイズ

冒頭で書いた以下項目の文字列をハイライトするCSSを『アイキャッチ画像』『カテゴリ』など見出しハイライトあり・見出しハイライトなしの2種類作ってみました。

• パーマリンク
• 下書き保存
• 公開後の更新設定
• アイキャッチ画像の設定

それに加えて

• 更新日の変更・アイキャッチ画像・カテゴリ・タグの見出しハイライト有

最小限の文字列だけハイライト：設定忘れ防止

最小限のみハイライト

間違い防止としてチェックしたい以下の文字列だけハイライトしたCSS

• パーマリンク
• 更新しない
• アイキャッチ画像を設定
• 下書きとして保存

/* *********************************** *
 *  投稿画面のチェック項目ハイライト *
 * *********************************** */

/* パーマリンク */
#editable-post-name,
/* 更新しない */
#singular_update_settings .inside div div:nth-child(2),
/* アイキャッチ画像を設定 */
#set-post-thumbnail {
	color: #d78aff;
}

/* 下書きとして保存 */
#submitdiv #save-post {
	background: #d78aff;
	color: #fff;
}

nth-child(2)は以下項目の2番目という意味です。更新日の消去をしたい場合3番目なのでnth-child(3)にすればOK！

更新
更新しない
更新日の消去
更新日を設定

WordPressエディタ横、見出しハイライトありCSS

見出しハイライトあり

上記にくわえて公開前にチェックしておきたいアイキャッチ画像・カテゴリ・タグなど見出しもハイライトしたい場合のスタイルです。

/* パーマリンク */
#editable-post-name,
/* カテゴリ：見出し */
#categorydiv .hndle,
/* タグ：見出し */
#tagsdiv-post_tag .hndle,
/* 更新日の変更：見出し */
#singular_update_settings .hndle,
/* 更新しない */
#singular_update_settings .inside div div:nth-child(2),
/* アイキャッチ画像：見出し */
#postimagediv .hndle,
/* アイキャッチ画像を設定 */
#set-post-thumbnail {
	color: #d78aff;
}

/* 下書きとして保存 */
#submitdiv #save-post {
	background: #d78aff;
	color: #fff;
}

投稿一覧の作者名を非表示にするCSS

カスタマイズ前

投稿一覧の作者名は1人で運営している場合、同じアカウント名が縦に並ぶだけなので不要です。私の場合『かうたっく・かうたっく・かうたっく・かうたっく』。

カスタマイズ後

作者名を消すとスッキリして、投稿タイトルも見やすくなります。

以下が作者名・アカウント名の2つを非表示にするCSS。

/* **************** *
 * 不要な項目：削除 *
 * **************** */

/* 投稿画面の作者名・アカウント名非表示 */
#author,
.column-author {
	display: none;
}

さいごに

ハイライトを作る事で公開・更新前にチラっと目に入りチェックできるのがメリットですよね。

もう1つ、WordPress管理画面テキストエディタが見にくい！と思った事ありませんか？

以下リンクよりコピペできるので、テキストエディタを見やすくしたい場合はどうぞ。

それでは。かうたっくでした！