【WordPress】スマホでのメディア選択・編集のUIを改善するコード①

みなさんこんにちは。
かなり久しぶりの投稿になります。Kです。

今年も一年が終わり、無事に新年を迎えることができそうです。

さて、今回の記事ではタイトルの通り、
スマホからのワードプレスの操作性を向上させたい、そんな人のためのコードを考えたのでご紹介します。

改善前：画像の一覧部分とメニューが重なってかなり邪魔

まずスマホからのUIの問題点として、下記のスクリーンショットを見ていただくと分かりますが、記事の投稿時にメディア追加から画像の一覧で画像を選択したときに表示されるメニューが、画面の横から表示され画像の一覧と重なってしまいます。

この状態だと例えば、他の画像を選択したいときに右端の列の画像は完全にメニューに隠れてしまい、一度メニューを閉じて選択し直し、という手間のかかる操作が必要になります。

手間としてはほんの少しかもしれませんが、人によってはストレスを感じる人もいると思います。

改善後：メニューの配置を修正

メニューのCSSを上書きするためメニューに使用されているHTMLブロックのクラス名を調べたところ「.media-sidebar.visible」というセレクタを利用すればなんとかなりそう。

下記のような感じでメニューの配置を修正することができました。
果たして、どれほど需要があるかは分かりませんが、ストレスの溜まる手間を省くことができるようになりました。

ソースコードの紹介

それでは、ソースコードを紹介します。
下記のソースコードをfunctions.phpに追加するだけ。

function admin_style_custom(){
  ?>
<style>
  
  /* スマホでのメディア編集や選択画面の調整 */
  @media(max-width:767px){
   
    /* メディア選択画面 */
    .media-sidebar.visible{
      top: auto !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 200px !important;

    }

  }
</style>
  <?php
  
}
add_action('admin_print_footer_scripts', 'admin_style_custom', 9999);

今後のワードプレス本体のバージョンアップなどでうまく動かなくなる可能性があります。
また、バージョンアップでUIの改善が行われる可能性もありますのでご注意ください。

今回は、スマホからメディア選択画面のUIを改善する方法をご紹介しました。
次回は、スマホからメディア編集画面のUIを改善する方法をご紹介します。