Слайд шоу для сайта на WordPress

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

Я предлагаю использовать, как обычно, методы без плагинов. Для тех кто хоть маленько разбирается в языках HTML и CSS не составит труда прикрутить несколько кодов.

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

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

Сделать такое слайд шоу на страницах сайта не сложно.

Слайд шоу для сайта

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

Слайд шоу для сайта

 

Ширину мы теперь знаем, а с высотой определитесь сами, какая вам нужна, такую и поставите.

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

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

В папке /domains/ваш сайт.ru/wp-content/themes/ найдите файл index.php и перекиньте его себе на рабочий стол. Откройте его и найдите место где выводятся ваши статьи, это или <div id="content"> или <div id="postarea">. После такого кода нужно вставить этот код:

Описание:

Количество слайдов устанавливайте сколько хотите! То есть добавляете новое изображение — добавляете новую строку:

Результат этого кода:

сделать cлайд шоу на сайте

Или вот такой код, он же используется для установки слайд шоу в статьях сайта, рекомендую ставить этот код:

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

Результат этого кода:

Как сделать слайд шоу на сайте WordPress

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

Все настройки изменяйте под свой вкус и цвет.

Теперь сохраните файл и закиньте обратно с заменой старого. На главной странице сайта обновите и посмотрите что получилось, должно все работать. А если вы хотите чтобы слайды крутились не только на главной, а например на других страницах и рубриках, то вытащите из той же папки файлы page.php — отвечает за страницы, и archive.php — отвечает за рубрики, и поставьте код так же как и в index.php. Сохраните и обновитесь, теперь слайд шоу будет на всех страницах.

Создание слайд шоу в статьях сайта!

Продолжаем создавать свое слайд шоу для сайта из картинок. Моя сестра, автор блога Handmade74.ru задала мне недавно вопрос — «Как мне сделать чтобы мои фотографии крутились слайдами в статье, чтобы много места не занимали?». Вот я и задумался, как же этот сделать. На WordPress есть галерея, которую можно использовать в таких случаях, но эффект не тот получается, который нужен.

Вот так это выглядит:

Галерея на wordpress

 

WordPress автоматически уменьшает изображения, и становятся они все в ряд, здесь показаны только два изображения. Конечно, можете использовать галерею чтобы не заморачиваться с изменением файлов, вставкой кодов и прочей ерунды. Мне сестра так и сказала, сойдет :)

Слайд шоу классно получилось, сказала она, когда я его установил ей.

Для того чтобы сделать слайд шоу пройдите в режим HTML/текст и вставьте вот такой код, там где хотите видеть слайды:

Описание кода я выложил выше.

 
Все статьиОбратная связьКак закрыть ссылки от индексацииКнопка наверхЗащита блогаЗащита от спама

 

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

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

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

Обратите внимание!!! После вставки кода при переходе из одного режима в другой, код может пропасть!!! Это происходит из за того, что WordPress так устроен, он не принимает некоторые коды в постах. Если у вас есть такая проблема, то необходимо добавить фильтр в файл functions.php, находится он в директории с вашей темой (/domains/ваш сайт/wp-content/themes/ваша тема/functions.php).

Вот этот код:

Поставьте код в самый конец файла до знака ?> Сохраните и закиньте обратно в папку с заменой. Обновите страницу и попробуйте еще раз поставить код слайд шоу в статью.

Если вы не знаете как поставить код в файл functions.php, обращайтесь, помогу чем смогу.

Ну, вроде все сказал, если что вспомню, то добавлю в статью! Задавайте свои вопросы в комментариях.

Если понравилась статья, подпишитесь на обновления!

заказать сайт на wordpress

Комментарии 5 комментариев

  • Супер, попробую реализовать, каждый раз к Вам захожу, и нахожу что-то интересненькое!

    • Рад, что для Вас есть интересный и полезный материал! Стараюсь :)

  • Красиво выглядит) Я возьму себе на заметку. Спасибо.

    • Рад помочь, мне тоже нравится как выглядит.

  • Много интересны фишек, спасибо за материалы, буду постепенно внедрять.

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

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

четырнадцать − 9 =