А чем, в вашем случае, будет отличаться открытие страницы редактирования от запроса на изменение того, что мы редактируем?
он мне и выдаёт site.com/about/wp-content/thems/xxx/upload/111.png (если через инструмент разработчик вручную убрать about/ то картинки видны),
а нужно site.com/wp-content/thems/xxx/upload/111.png
$path = $dir.$files[$i]; // Получаем путь к картинке
echo "<a href='$path'>"; // Делаем ссылку на картинку<?php
$dir = 'upload/'; // Папка с изображениями
$urlPath = '/wp-content/thems/xxx/'; // значение или руками вписать или определить скриптом. заканчивается слешем обязательно
$urlPath .= $dir; // теперь это web-path к перебираемым файлам
...
$path = $urlPath.$files[$i]; // Получаем путь к картинке ВОТ ЗДЕСЬ исправляем
echo "<a href='$path'>"; // Делаем ссылку на картинку
Коротко не получится.
По какой дисциплине? Думаю, от этого зависит на что нужно упор в проработке делать. Если не электронщик, то, думаю, вместо замок сойдет и в виде картинки на экране :) А если электронщик и не слышали про программатор ... печаль.