WordPress メディアライブラリグリッド表示にタイトル追加 / Adding titles to the WordPress Media Library grid

// WordPress メディアライブラリ グリッド表示にタイトル追加
add_action('admin_footer', function () {
    ?>
<script type="text/javascript">
    var timerID_wmg123;
    document.addEventListener("DOMContentLoaded", () => {

        const targetNode = document.getElementById('wp-media-grid'); // 監視対象の要素を指定
		if (!targetNode) {
			return;
		}
        const config = { attributes: true, childList: true, subtree: true };

        const callback = function(mutationsList, observer) {
            clearTimeout(timerID_wmg123);
            timerID_wmg123 = setTimeout(() => {
                const li = document.querySelectorAll('.media-frame.mode-grid li.attachment.save-ready');

                for (const mutation of mutationsList) {
                    if (mutation.type !== 'childList') {
                        continue;
                    }

                    console.log('A child node has been added or removed.');

                    for (let i = 0; i < li.length; i++) {
                        let ariaLabel = li[i].getAttribute('aria-label');

                        // 既にタイトルが存在するか確認
                        if (!li[i].querySelector('.title-div')) {
                            // 新しい div 要素を作成してタイトルを追加
                            let titleDiv = document.createElement('div');
                            titleDiv.classList.add('title-div');  // クラス名を追加して一度処理したことを識別
                            titleDiv.style.textAlign = 'center';
                            titleDiv.style.marginTop = '5px';
                            titleDiv.style.fontSize = '12px';
                            titleDiv.style.lineHeight = '1';
                            titleDiv.style.color = '#333';
                            titleDiv.style.height = '26px';
                            titleDiv.style.overflowY = 'hidden';
                            titleDiv.textContent = ariaLabel;
                            li[i].appendChild(titleDiv);  // タイトルをサムネイルに追加
                        }
                    }
                }
            }, 200);
        };

        const observer = new MutationObserver(callback);
        observer.observe(targetNode, config);

    });
</script>
    <?php
});

// WordPress メディアライブラリグリッド表示にタイトル追加

add_action('admin_footer', function () {

var timerID_wmg123;

document.addEventListener("DOMContentLoaded", () => {

const targetNode = document.getElementById('wp-media-grid'); // 監視対象の要素を指定

if (!targetNode) {

return;

}

const config = { attributes: true, childList: true, subtree: true };

const callback = function(mutationsList, observer) {

clearTimeout(timerID_wmg123);

timerID_wmg123 = setTimeout(() => {

const li = document.querySelectorAll('.media-frame.mode-grid li.attachment.save-ready');

for (const mutation of mutationsList) {

if (mutation.type !== 'childList') {

continue;

}

console.log('A child node has been added or removed.');

for (let i = 0; i < li.length; i++) {

let ariaLabel = li[i].getAttribute('aria-label');

// 既にタイトルが存在するか確認

if (!li[i].querySelector('.title-div')) {

// 新しい div 要素を作成してタイトルを追加

let titleDiv = document.createElement('div');

titleDiv.classList.add('title-div'); // クラス名を追加して一度処理したことを識別

titleDiv.style.textAlign = 'center';

titleDiv.style.marginTop = '5px';

titleDiv.style.fontSize = '12px';

titleDiv.style.lineHeight = '1';

titleDiv.style.color = '#333';

titleDiv.style.height = '26px';

titleDiv.style.overflowY = 'hidden';

titleDiv.textContent = ariaLabel;

li[i].appendChild(titleDiv); // タイトルをサムネイルに追加

}

}, 200);

};

const observer = new MutationObserver(callback);

observer.observe(targetNode, config);

});

</script>

<?php

});

コメントを残す