Здравствуйте уважаемые начинающие оптимизаторы.
Продолжим тему Работа с изображениями.
В 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» и выбирайте
Скажите, ПОЖАЛУЙСТА:
HTML6 про него пишут ,а пример проверить , работает ЛИ ? — НЕГДЕ. На каком интернет-сайте можно вставить HTML6-код и посмотреть, как он работает ? Большое СПАСИБО Вам , за ОТВЕТ
Спасибо. Мне 63. И я теперь только пожинаю урожай. Бороздить больше не охота.
Я не знаю, что такое элементор. Класс добавляю прямо в код картинки в редакторе. Что касается панели, то через неё не получится изменить что либо на сервере.
Добрый вечер, установил скрипт для увеличения картинки, ео не получилось.Делаю через элементор. Добавил класс каринке в элементоре, но класс не прописался, в панеле разработчиков не отображается. Там же в панеле прикрутил класс но эффекта нет. Не подскажете какова может быть причина? и еще пользуюсь дочерней темой
stariс И сколько же вам лет? Далеко не вся молодежь продвинутая в инет технологиях а вы в своем возрасте ещё бороздите интернет 🙂 Желаю здоровья и удачи.
Спасибо. Не смотря на то, что программирование у меня на уровне и , подобная информация показывает направление развития.
Вообще-то я этим вопросом не заморачивался, но если вам нужно, то тут возможны два варианта решения.
1. Скрипт отображает картинку в изначальных размерах. То есть — что загрузили, то и получили. Если перед загрузкой задать картинке определённый размер в каком либо фотошопе, например у меня бесплатный и простой GIMP, то таким образом можно изменить отображаемый размер. Плюс в том, что качество отображаемого изображения так же останется изначальным.
2. Если вы уже волокёте в программировании, то после распаковки скрипта откройте файл simplebox.css, найдите в нём селекторы simple-outer, simple-img, возможно и в других селекторах, надо посмотреть по веб инспектору, и попробовать задать в них требуемые размеры. Но, в этом случае нет гарантии, что качество изображения не пострадает.
Насчёт совместимости — сами можете убедится, у меня работает на последней версии. Да и что ему будет. Это же js.
Спасибо растолковано «по уму». Только вот…А размер миниатюры, расположенной на сайте, обозначен в скрипте? Его можно менять ? И каков он сейчас?
Для появления контактной формы Simplebox не нужен. Я правда этим не разу не заморачивался, но по моему появление контактной формы можно сделать чисто в css.
Сделать её по умолчанию прозрачной (opacity: 0;), а при клике (:active) непрозрачной (opacity: 1;), и для плавного появления transition секунды 3-4. Ну и спозиционировать туда где должна появится, рамочки там, тени, размер, всё в css.
С помощью Simplebox можно только картинки увеличивать? Есть возможность в всплывающем окне отобразить контактную форму заявки?
Две ошибки: 1. Нет пробела между simplebox и href. 2. Нет закрывающей скобки после адреса. И код самого изображения-то не забудьте вставить в эту ссылку.
Сергей, добрый день!
Сделал так как Вы написали, но после добавления на сайте изображение продукции вообще пропадает, соответственно не работает. Код ниже, возможно в нем что-то не так. Посмотрите пожалуйста.
Кажется я понял вашу проблему. Вордпресс сейчас загружает только код изображения типа:
Раньше вставлял со ссылкой, а теперь надо ссылку прописывать вручную. Доработаю статью по этому вопросу.
А вам нужно сделать следующее:
1. Добавить изображение.
2. Дописать в код картинки ссылку.
Ссылка делается так:
а) Пишите перед <img следующий код ссылки:
б) Копируете адрес который есть в src изображения, только без кавычек. Вот он этот адрес:
и вставляете этот адрес в кавычки атрибута href
в) Пишите class="simplebox" так как показано на картинке в статье.
г) В конце всего кода закрываете ссылку </a>
Общий вид кода показан на картинке в статье. Как видите, там и тег alt есть с пустыми кавычками. Вот в эти кавычки и вводится описание картинки.
Сергей, симплебокс не работает, это работал fancy box, сейчас я его отключил.
Мне нужно, чтобы работал Ваш скрипт, а не плагин. И нужно чтобы он работал в продукции, как там добавить class=»simplebox»?
У вас же работает симплебокс. Только alt не заполнен, как я погляжу. Ваш код в комментарии не отобразился из-за угловых скобок. WordPress видит html элемент, а сам элемент найти не может. Чтоб передался именно код, в комментарии вместо угловых скобок ставятся спецсимволы: открывающая < закрывающая >
Сергей, спасибо за ответ! Я Вас понял, но дело в том что я пробовал добавлять class=»simplebox» в разделе товары. Но даже в разделе записи после добавления медиафайла, в режиме текст я вижу такой код:
.
Нет атрибута href, перед которым вставляем следующий атрибут: class=»simplebox». Как с этим быть? Спасибо!
Добрый вечер Анатолий. По вопросу могу предположить, что Вы не пользуетесь текстовым режимом редактора при написании статей. Видимо только визуальным, а в нем не видно кода изображения, видно саму картинку.
А если переключить редактор в режим Текст, то Вы увидите код изображения так, как показано на последней картинке в статье. Вот в этот код и вставляется class="simplebox" и тег alt тоже там.
Спасибо. Все сделал как описано, с последним пунктом возникла трудность,
где правильно добавить это class=»simplebox», непосредственно в разделе медиафайлы? Выше Вы писали, что нужно заполнять тег alt. Где гужно его заполнить?
Вот ссылка на мой Яндекс Диск с simplebox https://yadi.sk/d/uO-WCjFvd2BL9
Скиньте пожалуйста Вашу версию simplebox. У меня на моей окно делается не по центру экрана, а по низу и в результате не видно alt текст без промотки вниз.
Вполне одобряю ваше настороженное отношение к плагинам. Меньше — лучше. Первое время, когда сайт только развивался я даже подписку и оповещения делал в ручную. Кмментов и подписчиков было не много, так и делал расслку через мыло. Зато удерживал хорошую скорость загрузки.
Ладно бы они предоставляли только ту функцию, которая требуется, а то ведь наворочат что надо и что не надо. Скрипты другое дело. Прописывается только то, что необходимо.
Так что для нормального развития блога надо изучать веб, или иметь в команде программиста.
То что голова кругом — это надолго. Можно даже сказать навсегда. Нет предела совершенству, и это понимают почти все владельцы сайтов. Чтоб быть на плаву придётся постоянно совершенствоваться.
Ссылку на скрипт отправил на указанный в комменте адрес.
Здравствуйте! Не знаю. как к Вам обратиться… Но пришлите, пожалуйста, свой скрипт и мне.
Я совсем новичок в блогинге, и у меня голова идет кругом от обилия всяческих рекомендаций, типа: 20-30-50 самых необходимых плагинов для Вордпресс. У меня их сейчас пять. И больше ставить пока не хочу. Но есть необходимость делать кликабельными скриншоты. Думаю, что Ваш скрипт – это отличная альтернатива многим плагинам по изображениям. В код лезть, конечно, боюсь. Но что делать? Блог развивать надо. Благодарю Вас заранее.
P.S. М.б. для сегодняшнего дня Ваша информация уже обновилась?
Пользуйтесь на здоровье. Отправил ссылку на указанный майл.
О и я б себе поставил такой скрипт. Буду рад такому скрипту. Заранее спасибо.
Здравствуйте Алексей. Очень оригинально. Оставляю Вашу ссылку. К сожалению я владею php только «с краешку». Всё нет времени засесть за него капитально, но и мне видно, что Ваш способ проще. Принцип то тот же, а вот реализация легче.
Маленькое замечание, куда-ж без этого. Ну это чисто по внешнему виду. Выводимая картинка у Вас смотрится тяжеловато. Может чуть подправить css? Ну там background попрозрачнее, для оригинальности можно ему синевы добавить, немного теней, padding поменьше.
И ещё, красные заголовки — это не то. Не то что-бы взгляд замылен, просто не то.
А так Ваши решения очень интересны. И я обязательно буду их использовать. Наверное не только я.
Доброго времени суток!
Тоже озадачился такой же темой: увеличение картинок без плагина. У меня , вроде как, получилось еще проще.
1. Прописываем, как и в вашей статье, определенный код в в папке темы в файл footer.php
2. В админке WP вставляем картинку как миниатюру со ссылкой на полный файл. Всё. Больше ничего делать не надо. Ничего дополнительно прописывать не надо.
Отправил на указанный в комментарии адрес
Здравствуйте можно воспользоваться скриптом для изображений мне понравилось.Спасибо.
Пользуйтесь на здоровье. Отправил ссылку на ваш Е-mail/
Великолепная и очень нужная функция.
Я говорю про Скрипт для увеличения изображений.
Пришлите его мне, пожалуйста
Да, есть ещё над чем работать 🙂 Я тоже рад знакомству.
Думаю ошибки кода не желательны молодым сайтам, так сказать для получения визитной карточки у поисковика. А потом основной вес имеет качество содержания и поведенческие факторы. Что касается «у Вас чуточку больше». Не чуточку. Будь мой сайт на XHTML, их было-бы на порядок больше.
Хочу с вами поделиться некоторыми наблюдениями по seo, это что касается качества текста. Прочитайте мою статью Оптимизация текста, там есть два сервиса, благодаря которым половина статей моего основного детища Секреты и нюансы, выскочили в топ, при чём я в жизни не купил ни одной ссылки ни на один сайт. Остальные статьи ещё не проработал. Особенно уникален Главред. Я посмотрел в нём несколько ваших статей — очень много мусора, хотя ваши статьи и не относятся к чисто информационым, но почистить можно. А тема у Вас очень интересная, достойная первых позиций. И ещё позвольте уж один совет: увеличьте число пробелов. Ширина контента маленькая, и статья без пробелов тяжело читается, особенно на экранах меньше 1900px. И адаптивность. Я как только адаптировал свои сайты, посещаемость увеличилась вдвое. На Секреты и нюансы вообще половина посещений с мобил. А у Вас так сказать социальная эзотерика и путешествия — самая мобильная тема. И рад знакомству.
работает другая версия. про кеш знаю, дело не в нём, тут какая-то тайна видимо непостижимая. фиг с ним, основные ошибки исправил, остались только от кнопки гугла, плагина по сео и вот от simplebox 🙂 думаю 11 ошибок это хороший результат, у Вас чутка больше, а куда без них 🙂 У меня только форум совсем без ошибок, а так смотрю даже сайты продвинутых сеошников с тиц выше 500 и ошибок у них хватает тоже. Надо без фанатизма к этому вопросу подходить и статьями заниматься :)))
Ваш шаблон написан на XHTML, который не рекомендуется для использования в веб. Конечно ничего страшного в этом нет, но придётся смириться с ошибками в валидаторе. А скрипт работает, я посмотрел на вашем сайте
Скрее всего валидатор получает кешированную версию. Почистите кеш.
Увы и ах. Не работает и кроме того валидатор показывал те же 3 ошибки. Установил всё досконально. Вернул старые файлы. Может не у всех работает, не знаю отчего зависит.
Отправил ссылку на указанный E-mail
Да, сейчас перечитал свой коммент и он действительно труден к пониманию, но Вы всё верно осознали. Я использую прохожий скрипт и пробовал поставить на него Ваш код для футера. Буду рад получить ссылку на скачивание рабочего и валидного сбора 🙂 Я правильно понимаю, что мне достаточно будет подменить имеющиеся файлы, а всё остальное идентично в плане настроек в уже опубликованных материалах?
Я не совсем понял вашу ситуацию. Я давал вам ссылку на скачивание скрипта? Или вы используете какой-то похожий, и попробовали привязать к нему тот код, который я указал в статье?
Дело в том, что я доработал скрипт, и он полностью валидный, и код в статье подойдёт только к моему скрипту. Если надо, пишите — вышлю ссылку на скачивание.
Доброго времени, использую этот скрипт но выдаёт кучу ошибок на валидность. Пробовал поставить в футере ваш скрипт не меняя файлы и он перестал работать. Требуется и файлы Ваши использовать?
Ага, спасибо, очень интересно. После выходных покопаюсь в подробностях
Да. После последнего обновления WP, кнопка пропала. Спасибо что подсказали, а то я давно не заглядывал. Отправляю ссылку по мейлу.
Кстати в плагине, который вы упомянули, нашли критическую уязвимость.
извините, но я не нашел кнопки «получить»ю Вышлите, пожалуйста скрипт на emai. Спасибо за сайт
Полезный сайт, мне понравилось. Хорошая работа
Извините, я неправильно выразился. Скрипт ничего не масштабирует, он открывает то, что загружено на сервер, масштабирует браузер под экран.
Проверьте какой размер у Вас загружается на сервер, и какой стоит в ссылке изображения.
«simplebox откроет его в полный размер, или если не позволит экран, то смасштабирует его относительно ширины экрана, а не блока content» — у меня этот скрипт не открывает изображение в полном размере, а масштабирует, но мне этого масштаба недостаточно, как еще увеличить?
Конечно вышлю на mail.ru, но только пожалуйста отпишите мне сюда, какие проблемы у Вас возникли с получением скрипта с сайта? Вроде бы я упростил процесс до предела: пишете комментарий, отправляете, жмёте «Получить подарки», и выбираете то что нужно. Всё это описано в сайдбаре в блоке «Подпишитесь». Если что-то не так, напишите, подправлю.
День добрый, вышлите мне скрипт пожалуйста.
очень полезная статья!!! очень актуально!
Только что скачал скрипт и установил на тех. сайт, который у меня постоянно на Денвере. Сразу заработало. Я даже боялся, а вдруг не заработает, ведь на Денвере не проверял. Но нет всё в порядке. Значит где-то Вы допустили мелкую ошибочку. Проверьте внимательно, может одиночную кавычку где-то стёрли, или ещё что. Поначалу такие мелочи просто ускользают от внимания. Отдохните и проверьте всё с самого начала свежим взглядом.
Ошибка у Вас где-то есть. Ведь скрипт скачали уже 14 раз, и ни от кого не было жалоб.
Адрес вашего сайта, который нужно вставить вместо моего, берётся так: открываете Ваш сайт, и копируете адрес из адресной строки браузера, потом вставляете вместо моего.
Попробую на Денвере — отпишу.
Прошу прощения, но скрипт всё равно не работает, хотя я всё сделала, как вы говорили.
Здравствуйте. Прежде всего, если внимательно посмотреть код вставляемый в footer, то там адрес моего сайта есть в трёх строках. Во всех этих строках нужно стереть starper55plys.ru, и вставить mysite. Вот так должно работать.
По размеру изображения. Конечно лучше загружать полное изображение. Даже если WordPress его уменьшит, относительно блока с текстом, то simplebox откроет его в полный размер, или если не позволит экран, то смасштабирует его относительно ширины экрана, а не блока content
Здравствуйте.
Прежде всего, спасибо Вам большое за Ваш скрипт! Дальнейшего Вам процветания!
Только одна заминка. Я, конечно же, чайник: только-только начала создавать свой сайт. Делаю это пока на денвере. И почему-то там Ваш скрипт не работает. Точнее говоря, в трёх ссылках в футере, где вы сказали заменить адрес Вашего сайта на свой (то бишь мой), я заменила на localhost/mysite/simplebox_util.js; папка и три файла скрипта в корневой папке (где файлы WP). Может я сделала что-то не так? Кстати, изображения я загружаю в их оригинальном размере (т.е. 600*300, 1200*800, 350*300 и т.д., т.е. что есть по факту). Очень буду Вам благодарна, если вы сможете подсказать, что я делаю не так. Заранее спасибо, очень буду ждать вашей помощи.
Отправил по почте ссылку. А что вы не забрали при подписке? Я же там эту ссылку даю.
Здравствуйте. Я подписалась на вашу рассылку. Не могли бы вы, как и обещали в своей статье, выслать мне на мою почту скрипт? Спасибо, очень буду ждать.
Я отправил Вам ссылки на скачивание, и ссылки на статьи с инструкциями, на E-mail, который Вы указали.
А если я уже подписан, то как получить скрипт и инструкцию себе?