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

みなさんこんにちは。Kです。

今回は前回に引き続き、ワードプレスのスマホからのUI改善のご紹介です。

画像情報メニューが操作ボタンやプレビューに重なって最高に邪魔！

さて今回の問題点についてですが、スマホからメディア編集を行おうとすると下記のスクリーンショット左側のようにアンビリバボーなUIが表示されます。
一応ボタンは見えているので編集自体は可能のようですが、なぜこのような配置になってしまっているのか謎です。

スマホで撮影した写真の向きがおかしいときやトリミングしたいときに編集しようとしてもこれではストレスMAX間違いなし。
とくにトリミングに関しては不可能かと思われます。

ちなみにトリミングの操作ですが、編集ボタンは何も押さない状態でプレビュー画像をタッチして範囲選択します。
すると点線でトリミング範囲が表示された状態で「トリミング」ボタンを押してください。

初見だと先にトリミングボタンを押してから範囲選択しようとしがちですが、その場合は範囲選択が出来ずに「アレッ？？」となるのでご注意ください。

ソースコードの紹介

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

function admin_style_custom(){
  ?>
<style>
  
  
  /* スマホでのメディア編集や選択画面の調整 */
  @media(max-width:767px){
    
    /* メディア編集 */
    .imgedit-wrap div[id*="imgedit-panel-"]{
      display: flex;
      flex-wrap: wrap;
    }
    .imgedit-wrap div[id*="imgedit-panel-"] .imgedit-settings{
      position: static;
      width: 100%;
      order: 2;
    }
    .imgedit-wrap div[id*="imgedit-panel-"] .imgedit-panel-content{
      position: static;
      width: 100%;
      order: 1;
    }
    .imgedit-wrap img[id*="image-preview-"]{
      max-width: 100%;
      height: auto;
    }

    .mce-container #content_ifr{
      height: 400px !important;
    }
  }
</style>
  <?php
  
}
add_action('admin_print_footer_scripts', 'admin_style_custom', 9999);

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

どうでしたでしょうか？困っている人がいたら助けになれば幸いです。