WordPressのオリジナルadmin_menuにメディアライブラリのボタンを追加する

サラリーの仕事で、大小問わずオリジナルのテーマ作成の依頼がチョイチョイあり、専用のadmin_menuを作る事も多いので、ちょっとしたメモ。
画像の入れ替えを出来るだけ簡単に、という要望が多いので、それに合わせた専用の管理ページを作って、メディアライブラリからAjaxを使って挿入させる。

専用admin_menu にメディアライブラリを呼び込み挿入

見出しの通りのメモ。

wp_enqueue_media();

admin_menuにフックする際にwp_enqueue_mediaをコールしておく。

<p>
    <img class="hoge__image" src="<?php echo $html;?>" style="width: 300px; height: auto;">
</p>
<p>
    <button class="hoge__select button">メディアライブラリから選択</button>
    <button class="hoge__clear button">画像をクリア</button>
</p>
<input type="hidden" class="hoge__ur" name="html" value="<?php echo $html;?>">
<p>

画像確認のHTMLと、メディアライブラリを呼び出すボタンとか設置。

<script>
    let $uploader = document.getElementsByClassName('hoge')

    Array.from($uploader).forEach( (item) => {
        const $url = item.querySelector('.hoge__url')
        const $image = item.querySelector('.hoge__image')
        const $select = item.querySelector('.hoge__select')
        const $clear = item.querySelector('.hoge__clear')
        let uploader

        $select.addEventListener('click', (e) => {
            e.preventDefault()

            if (uploader) {
                uploader.open()
                return
            }

            uploader = wp.media({
                title: 'メディアの選択またはアップロード',
                library: {
                    type: 'image'
                },
                button: {
                    text: '選択'
                },
                multiple: false
            })

            uploader.on('select', () => {
                const images = uploader.state().get('selection')

                images.forEach( (data) => {
                    const url = data.attributes.url
                    $url.value = url
                    $image.setAttribute('src', url)
                })
            })

            uploader.open()
        })

        $clear.addEventListener('click', (e) => {
            e.preventDefault()
            $url.value = ''
            $image.setAttribute('src', '')
        })
    })
</script>

そんでJavascriptを設置して終了。

こんな感じで、画像挿入が分かりやすくなる。

ではでは

---

---