Cocoonユーザーさんに
やりたいカスタマイズがあれば、お問い合わせよりお待ちしてます。
または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。

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

スポンサーリンク

WordPress管理画面にある『投稿一覧』の『作者名』非表示・投稿編集で未設定防止で『パーマリンク』や『文字列』をCSSでハイライトした様子

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

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

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

はじめに、admin.cssを導入するためサクッと『コピペ』カスタマイズを済ませてくださいね。

LINKCoccon管理画面スタイル変更に!CSSを子テーマに導入コピペで簡単、実装方法

スポンサーリンク
スポンサーリンク

 投稿の編集画面の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テーマ:Cocoon管理画面より

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管理画面テキストエディタが見にくい!と思った事ありませんか?

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

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

コメント

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております❦

トップへ戻る