【Wordpress】一部レイアウトをドラックアンドドロップで簡単操作

前提・実現したいこと

Wordpressのカスタマイズを行っています。
この度実現したい事は、

Game8 [ゲームエイト]｜【日本最大級】ゲーム・アプリの総合攻略サイト
https://game8.jp/https://game8.jp/

上記サイトの冒頭部「人気！話題のゲーム攻略」リストを作成する事です。
※作成したリストはトップページのみ表示させます。

具体的には、上記のリストをWordpressの管理画面で簡単に編集できるような機能を作成する事です。

Wordpressのカスタムメニュー機能のように、ドラックアンドドロップで簡単に順番を変更出来るようにしたいです。

具体的にどのような機能を使えば再現できるか全く思いつきません。

html,cssにてレイアウトはおおよそ完成しています。
それを、管理画面上の簡単な操作で順番や内容を変更出来るようにしたいと考えています。

■考えた方法その１

「Contact Form 7」のように、Wordpressの管理画面左側に専用のメニューを設け(例：アプリリスト)その画面から「画像」というボタンをクリックするとメディアライブラリが開き画像を選択、その横に入力フォームでテキストを入力

その後「生成」をクリックすると、用意してあったhtmlの任意の場所に上記の「画像」と「テキスト」が組み込まれ、htmlのショートコードが生成。
※例：「画像」は「img src="☆☆☆"」星の部分に自動で入力

この時生成されるショートコードの名前は固定で、すでにfanctions.phpに登録済みとし、テーマファイル「home.php」にも記載済みとします。

※ <?php echo do_shortcode('ショートコード'); ?>
を予定

上記の仕組みで生成されるショートコードの文字列は都度変わる事はなく固定、そうする事によって管理画面上で画像やテキストを変更する度に自動でテーマに反映される。

■考えた方法その１の問題点

ドラックアンドドロップやプレビューが出来ない、及び再現する方法が分かりません。

▲考えた方法その２

カスタムメニューの「Walker」を編集、カスタムウォーカー機能を使用する方法

▲考えた方法その２の問題点

本当にカスタムウォーカー機能で色々と弄れば望んでいる事が実現出来るのか不明、本当に出来るのか曖昧な為まだ詳しく勉強しておりません。

●考えた方法その３

フォームを使い変数を指定ヶ所に代入？
考えた方法その１に似ていますが、Wordpressの管理画面左に新規でメニューを追加し、そのメニュー内で、jqueryを使いフォームを任意の数だけ追加や削除
※参考記事https://webkaru.net/jquery-plugin/repeater/

作成するフォームは画像を選択するフォームとテキストを入力するフォーム

フォームのaction属性は新規作成するphpファイルとし、受け取る側のphpファイルでは
foreach文で決まったhtmlの指定ヶ所に「name」属性の値を指定

その後テーマファイルhome.phpの表示させたい部分にインクルードタグを使い上記で作成したphpを読み込む

●考えた方法その３の問題点

ドラックアンドドロップでの操作ではない
フォームで連想配列させる方法がわからない(調べましたが出来そうにありませんでした)

一度フォームへ入力して出力後、順番や内容を変更しようとした際にまた１から全て選択して入力する必要がある

結論

必死に考えましたが、上記の方法しか思いつかず、いずれも実現不可or希望通りの結果が得られません。

どのようなアプローチをとればベストなのか、実現出来るのか、何かしらのヒントなど頂けるとすごく助かります。

宜しくお願い致します。

補足情報

htmlやcssについてはある程度勉強しました。
jqueryについては勉強中で分からないことがあればネットで検索して1文ずつ解読できるといった程度です。
Wordpressについては、運営歴はかなり長いですが、テンプレートタグなどについての知識は全然です。
現在勉強中で、ネットなので言ってる意味は調べればある程度理解できます。