Скрипт для увеличения картинок на WordPress

Здравствуйте уважаемые начинающие оптимизаторы.

Продолжим тему Работа с изображениями.

В WordPress, по умолчанию, при клике на картинку, пользователь переводится на страницу картинки. Согласитесь — это очень неудобно, когда тебя вдруг перекидывает на другую страницу.

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

Как он работает, можно посмотреть на картинке выше или на картинках в сайдбаре.

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

Пришлось немного напрячься, и исправить эту ситуацию, так что дальше речь пойдёт о прекрасно работающем на всех шаблонах, и валидном скрипте.

Способ его установки, доступен даже для тех, кто ничего не знает о скриптах, и вообще о языках программирования.

Вместе с тем, он при отличном результате, позволяет обойтись без плагина, и предполагает обязательное заполнение тега alt, соответствующим текстом, а это очень хорошо скажется на оптимизации сайта.

Не секрет, что плагины тормозят скорость загрузки, так как многие из них размещают свои скрипты в блоке head.

А заполнять тег alt, зачастую просто недосуг. Тут же, хочешь не хочешь, а придётся вписать подходящий текст, так как он отобразится в виде подписи под увеличенной картинкой.

Можно просто задать нумерацию по странице, если изображений много.

Ещё одна фишка заключается в том, что скрипт увеличивает не всё подряд, а только те изображения на которые Вы укажете.

Удобно? Удобно. Ведь если картинка в оригинальном размере прекрасно умещается на странице, то зачем её увеличивать.

Переходим к установке.

Получить zip со скриптом можно совершенно бесплатно, просто скачав его с моего Яндекс Диска. Скачать

После этого его нужно закинуть в корень сайта. Коревая папка — это папка в которой находятся wp-admin, wp-content, и так далее.

Через FTP загружаем zip, распаковываем, после чего в директории появляются три файла, и одна папка.

Папку с zip нужно удалить. Так же, теперь нужно удалить, если был, плагин увеличивающий изображения.

Следующее действие, нужно сделать в файле footer.php. можно, не выходя с сервера, пройти wp-content — themes — Ваша тема — footer.php.

А можно зайти в консоль сайта, затем Внешний вид — Редактор — footer.php, или Подвал. И так и так можно.

В этом файле, в самом конце, перед тегом </body>, нужно вставить следующий код:

<script type="text/javascript" src="https://starper55plys.ru/simplebox_util.js"></script>
<script type="text/javascript">
(function(){
var boxes=[],els,i,l;
if(document.querySelectorAll){
els=document.querySelectorAll('a[class=simplebox]');
Box.getStyles('simplebox_css','https://starper55plys.ru/simplebox.css');
Box.getScripts('simplebox_js','https://starper55plys.ru/simplebox.js',function(){
simplebox.init();
for(i=0,l=els.length;i<l;++i)
simplebox.start(els[i]);
simplebox.start('a[class=simplebox_group]');
});
}
})();</script>

В трёх строках, где стоит адрес моего сайта, Вам нужно заменить его на свой, и можно обновлять файл.

С установкой скрипта — закончили, теперь, как указать те изображения, которые нужно будет увеличить.

Загружаем изображения как обычно, через загрузчик, затем в режиме Текст редактора, находим ссылку на загруженное изображение.

И перед атрибутом href, прописываем следующий класс:

class="simplebox"

Ну вот теперь всё, изображение будет увеличиваться при клике и выводится по центру. Мы решили сразу два вопроса.

1. Улучшили поведенческий фактор, так как посетителям будет гораздо комфортнее просматривать, увеличенные до оригинального размера, изображения.

2. Внедрили опцию без плагина, и она не повлияет на скорость загрузки сайта.

До этого у меня стоял плагин Fancybox for WordPress, и каждый раз, при анализе страниц в PageSpeed Insights, под грифом «Исправьте обязательно», стояло требование «Удалите из верхней части страницы код JavaScript», внедрённый этим плагином.

Так что я с огромным облегчением его снёс, чего и Вам советую.

Желаю высоких позиций в поиске.

Неужели не осталось вопросов? Спросить

В раздел >>>


Перемена

Особенности работы с изображениями в WordPress < < < В раздел > > > Snippet

Рекомендую: Готовые HTML шаблоны на русском

Запись опубликована в рубрике Новости. Добавьте в закладки постоянную ссылку.
А так же:

54 комментария на «Скрипт для увеличения картинок на WordPress»

  1. Алексей говорит:

    Спасибо. Не смотря на то, что программирование у меня на уровне и , подобная информация показывает направление развития.

  2. stariс говорит:

    Вообще-то я этим вопросом не заморачивался, но если вам нужно, то тут возможны два варианта решения.

    1. Скрипт отображает картинку в изначальных размерах. То есть — что загрузили, то и получили. Если перед загрузкой задать картинке определённый размер в каком либо фотошопе, например у меня бесплатный и простой GIMP, то таким образом можно изменить отображаемый размер. Плюс в том, что качество отображаемого изображения так же останется изначальным.

    2. Если вы уже волокёте в программировании, то после распаковки скрипта откройте файл simplebox.css, найдите в нём селекторы simple-outer, simple-img, возможно и в других селекторах, надо посмотреть по веб инспектору, и попробовать задать в них требуемые размеры. Но, в этом случае нет гарантии, что качество изображения не пострадает.

    Насчёт совместимости — сами можете убедится, у меня работает на последней версии. Да и что ему будет. Это же js.

  3. Алексей говорит:

    Спасибо растолковано «по уму». Только вот…А размер миниатюры, расположенной на сайте, обозначен в скрипте? Его можно менять ? И каков он сейчас?

  4. stariс говорит:

    Для появления контактной формы Simplebox не нужен. Я правда этим не разу не заморачивался, но по моему появление контактной формы можно сделать чисто в css.

    Сделать её по умолчанию прозрачной (opacity: 0;), а при клике (:active) непрозрачной (opacity: 1;), и для плавного появления transition секунды 3-4. Ну и спозиционировать туда где должна появится, рамочки там, тени, размер, всё в css.

  5. Роман говорит:

    С помощью Simplebox можно только картинки увеличивать? Есть возможность в всплывающем окне отобразить контактную форму заявки?

  6. stariс говорит:

    Две ошибки: 1. Нет пробела между simplebox и href. 2. Нет закрывающей скобки после адреса. И код самого изображения-то не забудьте вставить в эту ссылку.

  7. Анатолий говорит:

    Сергей, добрый день!
    Сделал так как Вы написали, но после добавления на сайте изображение продукции вообще пропадает, соответственно не работает. Код ниже, возможно в нем что-то не так. Посмотрите пожалуйста.

    <a class="simplebox"href="http://ck-ua.com/wp-content/uploads/2017/05/манометры-300x252.jpg"; </a>
  8. stariс говорит:

    Кажется я понял вашу проблему. Вордпресс сейчас загружает только код изображения типа:

    <img src="https://starper55plys.ru/wp-content/uploads/2017/05/39.png" alt="" width="434" height="175" class="aligncenter size-full wp-image-17737" />

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

    А вам нужно сделать следующее:

    1. Добавить изображение.

    2. Дописать в код картинки ссылку.

    Ссылка делается так:

    а) Пишите перед <img следующий код ссылки:

    <a href="">

    б) Копируете адрес который есть в src изображения, только без кавычек. Вот он этот адрес:

    и вставляете этот адрес в кавычки атрибута href

    в) Пишите class="simplebox" так как показано на картинке в статье.

    г) В конце всего кода закрываете ссылку </a>

    Общий вид кода показан на картинке в статье. Как видите, там и тег alt есть с пустыми кавычками. Вот в эти кавычки и вводится описание картинки.

  9. Анатолий говорит:

    Сергей, симплебокс не работает, это работал fancy box, сейчас я его отключил.
    Мне нужно, чтобы работал Ваш скрипт, а не плагин. И нужно чтобы он работал в продукции, как там добавить class=»simplebox»?

  10. stariс говорит:

    У вас же работает симплебокс. Только alt не заполнен, как я погляжу. Ваш код в комментарии не отобразился из-за угловых скобок. WordPress видит html элемент, а сам элемент найти не может. Чтоб передался именно код, в комментарии вместо угловых скобок ставятся спецсимволы: открывающая &lt; закрывающая &gt;

  11. Анатолий говорит:

    Сергей, спасибо за ответ! Я Вас понял, но дело в том что я пробовал добавлять class=»simplebox» в разделе товары. Но даже в разделе записи после добавления медиафайла, в режиме текст я вижу такой код:
    .

    Нет атрибута href, перед которым вставляем следующий атрибут: class=»simplebox». Как с этим быть? Спасибо!

  12. stariс говорит:

    Добрый вечер Анатолий. По вопросу могу предположить, что Вы не пользуетесь текстовым режимом редактора при написании статей. Видимо только визуальным, а в нем не видно кода изображения, видно саму картинку.

    А если переключить редактор в режим Текст, то Вы увидите код изображения так, как показано на последней картинке в статье. Вот в этот код и вставляется class="simplebox" и тег alt тоже там.

  13. Анатолий говорит:

    Спасибо. Все сделал как описано, с последним пунктом возникла трудность,
    где правильно добавить это class=»simplebox», непосредственно в разделе медиафайлы? Выше Вы писали, что нужно заполнять тег alt. Где гужно его заполнить?

  14. stariс говорит:

    Вот ссылка на мой Яндекс Диск с simplebox https://yadi.sk/d/uO-WCjFvd2BL9

  15. Вундар говорит:

    Скиньте пожалуйста Вашу версию simplebox. У меня на моей окно делается не по центру экрана, а по низу и в результате не видно alt текст без промотки вниз.

  16. stariс говорит:

    Вполне одобряю ваше настороженное отношение к плагинам. Меньше — лучше. Первое время, когда сайт только развивался я даже подписку и оповещения делал в ручную. Кмментов и подписчиков было не много, так и делал расслку через мыло. Зато удерживал хорошую скорость загрузки.

    Ладно бы они предоставляли только ту функцию, которая требуется, а то ведь наворочат что надо и что не надо. Скрипты другое дело. Прописывается только то, что необходимо.

    Так что для нормального развития блога надо изучать веб, или иметь в команде программиста.

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

    Ссылку на скрипт отправил на указанный в комменте адрес.

  17. GALANT говорит:

    Здравствуйте! Не знаю. как к Вам обратиться… Но пришлите, пожалуйста, свой скрипт и мне.
    Я совсем новичок в блогинге, и у меня голова идет кругом от обилия всяческих рекомендаций, типа: 20-30-50 самых необходимых плагинов для Вордпресс. У меня их сейчас пять. И больше ставить пока не хочу. Но есть необходимость делать кликабельными скриншоты. Думаю, что Ваш скрипт – это отличная альтернатива многим плагинам по изображениям. В код лезть, конечно, боюсь. Но что делать? Блог развивать надо. Благодарю Вас заранее.
    P.S. М.б. для сегодняшнего дня Ваша информация уже обновилась?

  18. stariс говорит:

    Пользуйтесь на здоровье. Отправил ссылку на указанный майл.

  19. Тарас говорит:

    О и я б себе поставил такой скрипт. Буду рад такому скрипту. Заранее спасибо.

  20. stariс говорит:

    Здравствуйте Алексей. Очень оригинально. Оставляю Вашу ссылку. К сожалению я владею php только «с краешку». Всё нет времени засесть за него капитально, но и мне видно, что Ваш способ проще. Принцип то тот же, а вот реализация легче.

    Маленькое замечание, куда-ж без этого. Ну это чисто по внешнему виду. Выводимая картинка у Вас смотрится тяжеловато. Может чуть подправить css? Ну там background попрозрачнее, для оригинальности можно ему синевы добавить, немного теней, padding поменьше.

    И ещё, красные заголовки — это не то. Не то что-бы взгляд замылен, просто не то.

    А так Ваши решения очень интересны. И я обязательно буду их использовать. Наверное не только я.

  21. Алексей говорит:

    Доброго времени суток!

    Тоже озадачился такой же темой: увеличение картинок без плагина. У меня , вроде как, получилось еще проще.
    1. Прописываем, как и в вашей статье, определенный код в в папке темы в файл footer.php
    2. В админке WP вставляем картинку как миниатюру со ссылкой на полный файл. Всё. Больше ничего делать не надо. Ничего дополнительно прописывать не надо.

  22. stariс говорит:

    Отправил на указанный в комментарии адрес

  23. Вадим говорит:

    Здравствуйте можно воспользоваться скриптом для изображений мне понравилось.Спасибо.

  24. stariс говорит:

    Пользуйтесь на здоровье. Отправил ссылку на ваш Е-mail/

  25. Елена говорит:

    Великолепная и очень нужная функция.
    Я говорю про Скрипт для увеличения изображений.
    Пришлите его мне, пожалуйста

  26. Павел говорит:

    Да, есть ещё над чем работать 🙂 Я тоже рад знакомству.

  27. stariс говорит:

    Думаю ошибки кода не желательны молодым сайтам, так сказать для получения визитной карточки у поисковика. А потом основной вес имеет качество содержания и поведенческие факторы. Что касается «у Вас чуточку больше». Не чуточку. Будь мой сайт на XHTML, их было-бы на порядок больше.
    Хочу с вами поделиться некоторыми наблюдениями по seo, это что касается качества текста. Прочитайте мою статью Оптимизация текста, там есть два сервиса, благодаря которым половина статей моего основного детища Секреты и нюансы, выскочили в топ, при чём я в жизни не купил ни одной ссылки ни на один сайт. Остальные статьи ещё не проработал. Особенно уникален Главред. Я посмотрел в нём несколько ваших статей — очень много мусора, хотя ваши статьи и не относятся к чисто информационым, но почистить можно. А тема у Вас очень интересная, достойная первых позиций. И ещё позвольте уж один совет: увеличьте число пробелов. Ширина контента маленькая, и статья без пробелов тяжело читается, особенно на экранах меньше 1900px. И адаптивность. Я как только адаптировал свои сайты, посещаемость увеличилась вдвое. На Секреты и нюансы вообще половина посещений с мобил. А у Вас так сказать социальная эзотерика и путешествия — самая мобильная тема. И рад знакомству.

  28. Павел говорит:

    работает другая версия. про кеш знаю, дело не в нём, тут какая-то тайна видимо непостижимая. фиг с ним, основные ошибки исправил, остались только от кнопки гугла, плагина по сео и вот от simplebox 🙂 думаю 11 ошибок это хороший результат, у Вас чутка больше, а куда без них 🙂 У меня только форум совсем без ошибок, а так смотрю даже сайты продвинутых сеошников с тиц выше 500 и ошибок у них хватает тоже. Надо без фанатизма к этому вопросу подходить и статьями заниматься :)))

  29. stariс говорит:

    Ваш шаблон написан на XHTML, который не рекомендуется для использования в веб. Конечно ничего страшного в этом нет, но придётся смириться с ошибками в валидаторе. А скрипт работает, я посмотрел на вашем сайте

  30. stariс говорит:

    Скрее всего валидатор получает кешированную версию. Почистите кеш.

  31. Павел говорит:

    Увы и ах. Не работает и кроме того валидатор показывал те же 3 ошибки. Установил всё досконально. Вернул старые файлы. Может не у всех работает, не знаю отчего зависит.

  32. stariс говорит:

    Отправил ссылку на указанный E-mail

  33. Павел говорит:

    Да, сейчас перечитал свой коммент и он действительно труден к пониманию, но Вы всё верно осознали. Я использую прохожий скрипт и пробовал поставить на него Ваш код для футера. Буду рад получить ссылку на скачивание рабочего и валидного сбора 🙂 Я правильно понимаю, что мне достаточно будет подменить имеющиеся файлы, а всё остальное идентично в плане настроек в уже опубликованных материалах?

  34. stariс говорит:

    Я не совсем понял вашу ситуацию. Я давал вам ссылку на скачивание скрипта? Или вы используете какой-то похожий, и попробовали привязать к нему тот код, который я указал в статье?

    Дело в том, что я доработал скрипт, и он полностью валидный, и код в статье подойдёт только к моему скрипту. Если надо, пишите — вышлю ссылку на скачивание.

  35. Павел говорит:

    Доброго времени, использую этот скрипт но выдаёт кучу ошибок на валидность. Пробовал поставить в футере ваш скрипт не меняя файлы и он перестал работать. Требуется и файлы Ваши использовать?

  36. stariс говорит:

    Ага, спасибо, очень интересно. После выходных покопаюсь в подробностях

  37. stariс говорит:

    Да. После последнего обновления WP, кнопка пропала. Спасибо что подсказали, а то я давно не заглядывал. Отправляю ссылку по мейлу.

  38. Alexander говорит:

    Кстати в плагине, который вы упомянули, нашли критическую уязвимость.

  39. Alexander говорит:

    извините, но я не нашел кнопки «получить»ю Вышлите, пожалуйста скрипт на emai. Спасибо за сайт

  40. Alexander говорит:

    Полезный сайт, мне понравилось. Хорошая работа

  41. stariс говорит:

    Извините, я неправильно выразился. Скрипт ничего не масштабирует, он открывает то, что загружено на сервер, масштабирует браузер под экран.
    Проверьте какой размер у Вас загружается на сервер, и какой стоит в ссылке изображения.

  42. Михаил говорит:

    «simplebox откроет его в полный размер, или если не позволит экран, то смасштабирует его относительно ширины экрана, а не блока content» — у меня этот скрипт не открывает изображение в полном размере, а масштабирует, но мне этого масштаба недостаточно, как еще увеличить?

  43. stariс говорит:

    Конечно вышлю на mail.ru, но только пожалуйста отпишите мне сюда, какие проблемы у Вас возникли с получением скрипта с сайта? Вроде бы я упростил процесс до предела: пишете комментарий, отправляете, жмёте «Получить подарки», и выбираете то что нужно. Всё это описано в сайдбаре в блоке «Подпишитесь». Если что-то не так, напишите, подправлю.

  44. Алексей говорит:

    День добрый, вышлите мне скрипт пожалуйста.

  45. Галина говорит:

    очень полезная статья!!! очень актуально!

  46. stariс говорит:

    Только что скачал скрипт и установил на тех. сайт, который у меня постоянно на Денвере. Сразу заработало. Я даже боялся, а вдруг не заработает, ведь на Денвере не проверял. Но нет всё в порядке. Значит где-то Вы допустили мелкую ошибочку. Проверьте внимательно, может одиночную кавычку где-то стёрли, или ещё что. Поначалу такие мелочи просто ускользают от внимания. Отдохните и проверьте всё с самого начала свежим взглядом.

    Ошибка у Вас где-то есть. Ведь скрипт скачали уже 14 раз, и ни от кого не было жалоб.

    Адрес вашего сайта, который нужно вставить вместо моего, берётся так: открываете Ваш сайт, и копируете адрес из адресной строки браузера, потом вставляете вместо моего.

  47. stariс говорит:

    Попробую на Денвере — отпишу.

  48. Ольга говорит:

    Прошу прощения, но скрипт всё равно не работает, хотя я всё сделала, как вы говорили.

  49. stariс говорит:

    Здравствуйте. Прежде всего, если внимательно посмотреть код вставляемый в footer, то там адрес моего сайта есть в трёх строках. Во всех этих строках нужно стереть starper55plys.ru, и вставить mysite. Вот так должно работать.

    По размеру изображения. Конечно лучше загружать полное изображение. Даже если WordPress его уменьшит, относительно блока с текстом, то simplebox откроет его в полный размер, или если не позволит экран, то смасштабирует его относительно ширины экрана, а не блока content

  50. Ольга говорит:

    Здравствуйте.
    Прежде всего, спасибо Вам большое за Ваш скрипт! Дальнейшего Вам процветания!

    Только одна заминка. Я, конечно же, чайник: только-только начала создавать свой сайт. Делаю это пока на денвере. И почему-то там Ваш скрипт не работает. Точнее говоря, в трёх ссылках в футере, где вы сказали заменить адрес Вашего сайта на свой (то бишь мой), я заменила на localhost/mysite/simplebox_util.js; папка и три файла скрипта в корневой папке (где файлы WP). Может я сделала что-то не так? Кстати, изображения я загружаю в их оригинальном размере (т.е. 600*300, 1200*800, 350*300 и т.д., т.е. что есть по факту). Очень буду Вам благодарна, если вы сможете подсказать, что я делаю не так. Заранее спасибо, очень буду ждать вашей помощи.

  51. stariс говорит:

    Отправил по почте ссылку. А что вы не забрали при подписке? Я же там эту ссылку даю.

  52. Ольга говорит:

    Здравствуйте. Я подписалась на вашу рассылку. Не могли бы вы, как и обещали в своей статье, выслать мне на мою почту скрипт? Спасибо, очень буду ждать.

  53. stariс говорит:

    Я отправил Вам ссылки на скачивание, и ссылки на статьи с инструкциями, на E-mail, который Вы указали.

  54. Владимир говорит:

    А если я уже подписан, то как получить скрипт и инструкцию себе?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *