Не ошибусь, если предположу, что это одна из самых востребованных опций для владельцев сайтов, и для её реализации есть много способов.

Для тех кто абсолютно не знаком с языками программирования и структурой сайта есть с десяток плагинов, но это не наш путь.

Аксиома — чем меньше плагинов, тем лучше.

Для тех кто знает, что такое файлы шаблона и как в них что-то добавить, есть Скрипт для увеличения изображений адаптированный к WordPress.

Для тех же кто знаком с основами html, css и javascript, сейчас рассмотрим ещё более лёгкий вариант этой опции.

Начальную разработку можно посмотреть тут, а в этой статье добавим оформление и привязку к шаблону.

Итак, у нас имеется html код картинки, знакомый всем пользователям WordPress, загруженной загрузчиком изображений CMS.

<img src="https://starper55plys.ru/wp-content/uploads/2013/03/10.png"
title="" alt="" width="122" height="246" class="alignleft" />
В этот тег добавляем курсор лупу с плюсом и обработчик события onClik с именем функции, которая будет увеличивать и уменьшать изображение.

<img src="https://starper55plys.ru/wp-content/uploads/2013/03/10.png"
title="" alt="" width="122" height="246" class="alignleft"
style="cursor: zoom-in;" onclick="example(this)" />

HTML готов, теперь напишем скрипт.

<script>
var t, a;
function example(e){
clearTimeout(t);
var w = e.width;
if (a) {
t = setInterval(function () {
if (w <= 450) clearTimeout(t); // Стили на уменьшение
e.style.cursor = 'zoom-in';
e.style.borderRadius = '1px';
e.style.boxShadow = '2px 2px 5px #fff'
e.width = w--;
}, 5);
}
else {
t = setInterval(function () {
if (w >= 650) clearTimeout(t);
// Стили на увеличение
e.style.cursor = 'zoom-out';
e.style.borderRadius = '5px';
e.style.boxShadow = '2px 2px 5px #888'
e.width = w++;
}, 5);
}
a = !a;
}
</script>

Вот такая маленькая, простенькая, но очень полезная программка.