ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress5.3, 管理画面のCSSスタイルの見直し・統一

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

WordPress5.3では、管理画面の見た目の修正が始まりました。おおらかな人は気づかないくらいの細かいことですが。

開発者向けの話で、管理画面をイジっている人向けの情報です。ボタンやテキストボックスなどの見た目を変えているだけなので、そこまで重要なものではありません。

WordPress5でGutenbergを採用してから、管理画面のスタイル修正の必要性を感じていたようです。

しかしここで問題がありました。Gutenbergの部分(投稿編集画面)とそれ以外のスタイルがちがったからです。

(たしかに。同じシステムに見えない。)

そこで、Gutenbergのスタイル修正と同時に管理画面全体のスタイルを見直すことにしました。

それが今回の目的です。

ここに書いてあることは、WordPress.orgのフィールドガイドの和訳・解説です。

完全翻訳したあと、ポイントをピックアップして内容を再編集しました。

プラグイン・WordPress開発者の注意点

修正はCSSスタイルのみでHTMLに変更はありません。

(クラス属性も変わらない。)

<form>のスタイルをカスタムでオーバーライドしている場合は、WordPress 5.3 RC 1でのテストが必要です。

またプラグイン開発では、5.3に対応できているかチェックが必要です。

完全なカスタムスタイルを適用している場合は気にしなくていいです。

オススメの修正方法

管理画面のスタイルをカスタマイズしている人向けのオススメの修正方法です。

固定のheightの削除

高さのサイズの絶対値指定はやめようってこと。(pxとか)

%, em, rem , vhなどを使えばいい。

WordPressはフレキシブルに作るのがスタイル・コーディングの標準です。

top, bottom, padding, line-heightの削除

コンテンツの間隔、位置までも考慮して修正されたようです。それを無視する必要性はないってこと。

ボタンのfocus, hoverのカスタムカラー上書き

ボタンにアクションがあるときのカスタムカラーを適用している人は修正しましょうって言ってます。

HTMLに修正がないので、そのままでも大丈夫だと思うが...

『カスタムスタイルに今回の修正点が反映されるかもしれないから気をつけてね?』

ってことです。

主な変更点

フォームフィールド
<form>
<input type="text">
<input type="textarea">
<input type="checkbox">
<input type="radio">
<select>

そのほか、
カラーピッカー: 色を選ぶやつ
プライマリボタン: クラス属性: is_primary
セカンダリボタン: クラス属性: is_secondary
テーブル<table>
通知管理画面の上の方に表示されるやつ
メタボックスなんだろ?

プラグインのテスト

WordPressの開発者チームが、よく使われる上位20のプラグインでテストを行いました。スタイルの修正点や影響を調査するためです。

1Contact Form 7
2Yoast
3Akismet
4Classic Editor
5Jetpack
6WooCommerce
7WordPress Importer
8Really Simple SSL
9Elementor Page Builder
10Wordfence Security
11Duplicate Post
12TinyMCE Advanced
13All in One SEO Pack
14WP Forms
15Google XML Sitemaps
16Google Analytics Dashboard Plugin for WordPress
17All-in-One WP Migration
18UpdraftPlus Backup
19WP Super Cache
20Google Analytics Dashboard for WP

調査結果のスクリーンショットが用意されているので参考にしてください。

さっきのオススメの修正方法は、この調査の結果を踏まえています。

既知の問題

これらの修正は完全に終わっていません。現在進行中です。今後のマイナーアップデートで順次、細かい修正をしていきます。

次のメジャーリリース(5.4)では、さらにGutenbergとその他の管理画面の一貫性を向上させる予定。


見た目の修正なので、あまり気にする必要はありません。フィールドガイドにも修正前と後のスクリーンショットがありますが、大したちがいはないです。

ただ、あとでジワ~っとボディに効いてきますが。いい意味で。

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。


WordPressの本5選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください