doors doors

自分だけのCSSで編集しやすく!

  • HOME
  • TRY
  • 【WordPress】投稿者が仲良くなれる管理画面にカスタマイズしてみた

【WordPress】投稿者が仲良くなれる管理画面にカスタマイズしてみた

この記事はWordPressを使用しており、複数人の投稿で成り立っています。
投稿の内容も十人十色となるわけで、
「ここのレイアウトこうしたい…」
「新しいレイアウト作ったからCSS変更したい!」
と言われても対応はできるものの、いちいち変更するのも時間が取られてしまいます。

そんなとき、iidaさんから一言
「自分用のCSSがほしい」

その発想はありませんでした。
というわけで早速実装します。

自分用のCSSを実装しよう

条件

これを実装するに至り、

  • プロフィール用CSSを投稿者の数分だけ準備しておく
  • 自分のCSSだけが自分の投稿ページのときにだけ反映されるようにする
  • できれば自分のCSSだけ編集できるようにする
  • できればCSSファイルは外部ファイル

といった条件が出されました。

CSSファイル名はカスタムフィールドへ

まずはカスタムフィールドを追加、ユーザープロフィール欄にcssファイル名を入力して置けるようにします。
なぜ名前やスラッグにしないのか?

ユーザーのスラッグ名はIDです。IDの表示はセキュリティ上問題になってしまいます。
一方ユーザー名は日本語名を入れられる可能性があります。これもダメです。
ニックネームも変更されやすいです。
なのでカスタムフィールドを追加しちゃったほうが早いですね。

CSSを準備し、投稿者のときに読み込む

CSSファイルを投稿者分だけ用意し、該当する投稿者の投稿ページのときだけ読み込めるようにします。

管理画面を編集

投稿者用管理画面

管理画面では他の人のCSSにアクセスされないようにします。
管理画面にCSSへのジャンプリンクを作ってみました。
これでミスが起こりにくいですね。

関連記事

【jQuery】slidetoggleの落とし穴

アコーディオンナビが作りやすい、jQueryのslidetoggle。 設定するだけでcssなどのアニメーションをつけなくても自動で動いてくれます。 クリックし...

【CSS】比率指定にも使える!heightとpadding、marginの計算方法

前回、calc計算で100vwを基準にすれば画像や要素の比率が維持できるというお話をしました。 要素のアスペクト比(縦横比)を維持する方法 しかしPCとなると話...

aspect

要素のアスペクト比(縦横比)を維持する方法

CSSにおいて、画面いっぱいの中の要素のアスペクト比(縦横比)を維持する方法を書き留めておきます。 単純に横幅も縦幅もpxで指定するのではなく、デバイスの変化に...

WEB:企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。 お気軽にお問い合わせください。東京・名古屋近郊の打合せもご相談ください。

花粉症との戦い

花粉症の季節がやってきてしまいました。 今年は去年より多いそうで、筆者は戦慄して...

進化したGoogle レンズ

写真や画像に関連する情報を取得したいなら、「Googleレンズ」が便利です。 こ...

もうすぐ節分!ことしは2月2日

早いもので1月があっという間に過ぎ、2月を迎えようとしています。 2月といえば節...

右横文字のアイキャッチ画像

はたらくクルマの“右横書き”に見る、風習や習慣の変化について。

トラックや業務用車両の右側面によく見かける、右から左に向かって書かれている「右横...