Увеличение картинок при нажатии

Здравствуйте! Когда я писал статью о настройках WordPress, сделал несколько скриншотов. Получились они не очень широкие, зато высокие. Когда они были установлены на странице, сразу стало понятно, что такая подача статьи не годится. Слишком долго надо крутить колесико, чтобы добраться, наконец, до сути вопроса. Я, понятное дело, видел на многих сайтах как выглядит увеличение картинок при нажатии, осталось только реализовать это на своем блоге.

Увеличение картинок при нажатии плагином

После недолгих поисков нашел плагин, который называется Auto-highslide. Пробовал установить стандартным способом — через админку. Ничего не получилось. В базе такого плагина нет. Нашёл откуда скачать, скачал, установил. Все работает, как мне и хотелось. Насторожил то факт, что с официальной страницы разработчиков плагин удален, а значит, они его больше не поддерживают и не делают обновлений. Вот и подумалось, что со временем окажется, что он несовместим с актуальной версией WordPress, вот и будет мне увеличение картинок при нажатии. Так что поиск пришлось возобновить.

Увеличение картинок при нажатии скриптом

В итоге нашел скрипт, который выполняет эту же задачу. Нашел откуда его скачать и как установить. Только вот все, кто об этом писал, описывали способ установки в файлы исходной темы. Возможно потому, что темы у них свои собственные и можно там делать все, что угодно без всяких последствий. Я же использую тему Twenty Eleven  от разработчиков WordPress, которая систематически обновляется, и чтобы я там ни сделал, при обновлении будет потеряно. Так что у меня появился шанс сразу же испытать свою дочернюю тему. Как ее создать, можно почитать в этой статье.

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

Последнее, что надо сделать в файл footer внести небольшой код. Для этого я использовал дочернюю тему. Для работы с одиночными файлами прямо на сервере я использую Notepade++. Может быть не все знают, но в этом редакторе есть ftp-клиент,  который очень удобно использовать для этих целей. Работаешь с файлом как бы на своем компьютере, а результат виден сразу же в сети. Согласитесь, что это очень удобно.

Как создать файл footer.php в дочерней теме

Создание новой папки на сервереЧтобы увеличение картинок при нажатии на них было таким, как оно выглядит на блоге, я использовал дочернюю тему. Как видно на картинке, в дочерней теме, которую я назвал twentyeleven-child уже есть несколько файлов, в том числе и footer.php.Создавал я их прямо на сервере, используя для этого ftp-клиент, текстового редактора Notpage++. Это совсем не сложно, во-первых и совершенно безопасно, во-вторых, потому что, работая с дочерней темой, я не вношу никаких правок в файлы темы. Все правки исключительно в файлах дочерней темы. Кроме того после обновлений, все внесенные правки сохраняются и сайт сохраняет внешний вид и функционал, созданный владельцем.

Итак, открываем, используя ftp-клиент, папку wp-content ==> themes, а далее действуем так же, когда хотим открыть на своем компьютере (на рабочем столе, например) новую папку или текстовый документ. Жмем правую кнопку мышки, всплывает окошко, в первом пункте предлагается создать папку, но нам нужен второй, где предлагается создать новый файл. Жмем на этот пункт, опять появляется окошко с полем ввода где надо ввести имя файла с расширением. Пишем footer.php и подтверждаем свои намерения кнопкой OK. Файл сразу же появляется в списке.

Обязательно создайте резервную копию файла, если решите вносить изменения в файл родительской темы

Какой код и куда писать в файле footer.php

Файл footer.php создан, но пока там ничего нет. Открываем его в редакторе Notpade++. Затем переходим в родительскую тему и открываем также одноименный файл из родительской темы, копируем содержимое файла родительской темы и всталяем его в файл дочерней темы. Файл родительской темы можно закрыть, а файл дочерней темы footer.php сохраняем. Поскольку работаем в режиме он лайн, файл с новым содержимым сохраняется на сервере. Затем вставляем небольшой код

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

<!— код для скрипта sbox -конец —>

 

<?php wp_footer(); ?>
</body>
</html>

В какое место файла footer.php вставлять код надеюсь здесь расписано более чем понятно. Скорее всего сюда будут добавлены еще какие-то коды и скрипты, а чтобы с ними в итоге не запутаться и легко найти место в случае ошибки, обратите внимание, что в начале и конце кода я вставляю комментарии, например, <!— код для скрипта sbox -конец —>, вначале тоже.

Добавление картинки в статью

Добавление картинки в статьюЗдесь делается все стандартным способом. После загрузки картинки заполняем атрибут alt, затем переходим к настройкам отображения, где выбираем выравнивание, затем там, где ссылка, выбираем медиафайл. Сразу после выбора, чуть ниже отобразится ссылка, по которой картинку можно найти. Далее выбираем размер картинки. WordPress, а может и не только он, но и тема принимает в этом участие, генерирует несколько картинок разных размеров. Их может быть от четырех до восьми, в зависимости от настроек как я настраивал WordPress можно почитать в настройках WordPress в админке в этой статье И, наконец, последнее, что здесь надо сделать — нажать на кнопку вставить в запись. Однако это ещё не всё. Остался последний штрих.

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

В дополнительных настройках надо прописать title, а в пункте отношение прописать слово simplebox. Вот и все на этом установка скрипта и настройка параметров для одной из картинок можно считать законченной. На этом можно было бы и статью закончить, но……!!! Все оказалось не так радужно. Нет, увеличение картинок при нажатии происходит, они увеличиваются, но грузятся вместо открытой страницы. Закрываешь картинку и все — страница потерялась. Точно так же я потерял ту самую страницу, в которой прочитал совет поместить содержимое архива скрипта в отдельную папку.

Битый час искал ошибку. Все вроде правильно. Тогда решил переместить содержимое архива из отдельной папки в корневую. Всё моментально заработало, так как надо. Ларчик открывался просто. Далее пишу первую строку кода, который размещен в футере.Все дело в ссылках. Ссылка на файл simplebox_util.js, который размещен в корне, потому что стоит сразу за vikinfo.ru

<script type=»text/javascript» src=»https://vikinfo.ru/simplebox_util.js»></script>.

Далее как надо было написать, если содержимое архива скрипта размещено в отдельной папке

<script type=»text/javascript» src=»https://vikinfo.ru/sbox/simplebox_util.js»></script>.

В этом случае, после vikinfo.ru  указываем папку sbox, в которой находится файл simplebox_util.js. Так нужно было прописать во всех трех ссылках. Но как говорится: хорошая мысля приходит опосля. Так что переделывать ничего не буду. Главное сам понял, записал, чтобы не забыть, а может и прочтет кто.

На этом все! Удачи.

 

 

 

 

 

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

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