// 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
});
