Классный слайдер для WordPress в стиле Стартрек

Итак сегодня займемся добавлением слайдера для wordpress. Мне очень понравился необычный слайдер, сделанный на css+svg.  Выглядит он очень круто, в лучших традициях material design.

Демо Ι Скачать

Здесь вы можете просмотреть его и скачать.

После того как скачали его, его необходимо загрузить на хостинг. Этот слайдер не является обычным плагинов для WordPress, и поэтому, чтобы его установить надо сделать следующие. Я буду показывать все на примере своего сайта.

Заходим в папку с нашим сайтом и создаем там какую-нибудь папку, куда мы будем устанавливать слайдер. Я создал папку plugins, так как помимо этого слайдера я планирую устанавливать другие расширения и эффекты.

Лучший слайдер wordpress

Сюда закидываем наш плагин и распаковываем. Должно получиться что-то вроде этого

Лучший слайдер wordpress

Все файлы со слайдером лежат где нам нужно, запоминаем путь до файла index.html. Т.е. если вы загрузили файлы таким образом, как я вам показал, то путь до слайдера будет https:///ваш_сайт/plugins/PlayfulTrampolineEffect/index.html Запиши его себе в блокнот, он вам понадобиться.

Теперь перейдем непосредственно к вставке слайдера на сайт. Я вставлял его в верхнюю часть страницы, соответственно править мы с вами будем файл header.php. Он находится в папке  сайт в папке wp-content/themes/название_вашей_темы. Итак редактируем файл header.php — вставляем туда код для отображения слайдера в шапке. делать мы это будем через iframe.

Для того чтобы данный слайдер тображался вставляем код такого вида:

<iframe  frameborder=»0″ src=»https://itc-life.ru/plugins/PlayfulTrampolineEffect/index.html» width=»100%» height=»550″ scrolling=»no» >
Ваш браузер не поддерживает плавающие фреймы!

</iframe>

Слайдер будем занимать всю ширину и иметь высоты 550 px. У меня тема Twenty Eleven 1.0 и я вставил этот код после

 

</head>

<body <?php body_class(); ?>>
<div id=»page» class=»hfeed»>
<header id=»branding» role=»banner»>

    <!—
        <hgroup>
                <h1 id=»site-title»><span><a href=»<?php echo esc_url( home_url( ‘/’ ) ); ?>» rel=»home»><?php bloginfo( ‘name’ ); ?></a></span></h1>
                <h2 id=»site-description»><?php bloginfo( ‘description’ ); ?></h2>
            </hgroup>  —!>
        

тэг ngroup — я закомментировал, чтобы убрать картинку с сайта.

slider4

В итоге на моей страинце это выглядит так (сам ее начал делать совсем недавно)

:slider5

Всем удачи, С вами был Александр. Если хотите посмотреть другие 20 классные плагинов — то вам сюда.

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

Войти с помощью: 

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