Скрипт для увеличения картинок на 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

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

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

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

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

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

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

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

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

  2. GALANT говорит:

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

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

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

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

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

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

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

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

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

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

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

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

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

    Подробности на моём сайте http://kulagin-alex.ru/galereia-na-wopdpress-bez-plagina/

    Очень бы хотелось услышать ваше мнение относительно моего способа. Сайт совсем молодой, хотелось бы стороннее мнение о моем коде.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  23. Alexander говорит:

    Кстати в плагине, который вы упомянули, нашли критическую уязвимость.
    https://wpmag.ru/2015/fancybox-for-wordpress/

  24. Alexander говорит:

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

  25. Alexander говорит:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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