Создание шаблона для WordPress с нуля урок №7

Автор Maksim Inshakov
Создание шаблона для WordPress с нуля урок №7

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

Ни один ни одну или две. Мы уже выставляли на протяжении предыдущих уроков значит переходим в дополнительные материалы здесь есть. Папочка слайдер.

То есть — это то, что я скачал на самом деле из интернета опять-таки вот то, что можно найти и скажем так и.

Ничего необычного в галерее нет 4 нам таким вот образом выглядит её скачал значит по наведению. Мы видим здесь появляются кнопочки, но несколько в таком виде наверное не до конца там картиночка закачалась или что-то ещё мне. Вот соответственно кнопки вправо влево и наши кнопки навигации. Нижний в общем-то если мы посмотрим на нашла торта из элементов управления. Кроме этого нам вообще больше ничего и не нужно. А вот поэтому в принципе нас данной галерее устраивает мы её берём и скажем как обычно устанавливаем поэтому опять-таки может быть вы попробуйте сами. Если что-то не получится. Посмотрите урок потому, что здесь. Всё может быть так весьма затянуто значит открываем индекс индексный файл здесь на самом деле есть много селе. Да есть. И вот и. Карусель именно до имеется в виду, но в общем-то индексные нам больше всего подходит поэтому мы его открываем, что у нас здесь получается вот вот — это наш блок который относится к нашей галереи до дали здесь вот подключаемые все шрифты скрипты скрипты которые необходимы для работы нашей галерее и здесь у нас. Вот соответственно. Наши все файлы которые опять-таки тоже нам могут понадобиться поэтому копируем копируем наш слайдер так начинают stiga section так далее будет у нас после нашего тгх поэтому, но каркас это. Поэтому вот каркас как мы оставляем, а слайдер ставим после хедера. Единственное, что section — это у нас Tag html5. Но поскольку мы указали и doctype xhtml его общем-то ничего кроме ничего из html5. Мы в общем-то не используем. Поэтому будем дальше двигаться в рамках нашего 2 типа и соответственно section мы заменим на она обычный наш Def. Значит так двигаемся дальше значит, что мы сейчас если перейдём, но у нас появится наши какие-то вот пулы и в общем-то всё. Даней картинок не изображение ничего нет, а значит ты откуда берутся наши картинки. Вот наши картинки — это имаджес и соответственно название картинки то есть мы приходим обратно. Делаем имаджес из копируем. Ну в общем-то пока, что мы с копируем. Да, но на самом деле нас картинах здесь не будет у нас свое содержимое со своими кнопками. Поэтому в данном случае мы просто их копируем до для того чтобы убедиться, что наш слайдер в конце концов заработает далее, что мы должны сделать перенести наш. Кедр так s-video. Да здесь Demons соответственно мы переносим нашу папку CSS которая единственная файл. Дима или. ЖЭК Дима CSS далее. У нас в шапке есть ещё один наш файл стилей файл стилей причём может быть и нам и dmx100 в общем-то не нужен. Но посмотрим, что в нём у нас происходит. А у нас видно то, что у нас значит background и уехали и наша Border для тега Body тоже куда-то сместилась соответственно если мы например откроем наш дсст. Мы видим, что здесь в общем-то идёт вот reset сброс всех стилей боди для каруселей, но по большому счёту. Я думаю, что пока, что мы. Давайте вот сделаем вот так дыма 123 чтобы наш вот этот файл даже ну как будто бы его и не было да вот, а подключим. Мы наш следующий flexslider то есть здесь. Наверное уже стиле относится лежать или те которые относятся к нашему слайдеру. Так значит flexslider у нас лежит вот здесь. Да можем положить просто рядышком с нашим Index HTML соответственно здесь мы поменяем просто пути так Flex Slider очевидно, что он подключился. Ну просто у нас всё всё пропало далее. Далее двигаемся нам нужно подключить. Так скорее всего. Я так понимаю, что все вот эти вот скрипты нам для нас и понадобится значит переходим подключаемых точно также перед закрывающим тегом Body. Так и, что мы должны сделать соответственно вот папочку GS всю перенести так перенесли значит Flex скрипты папку JavaScript мы перенесли CSS перенесли. Давайте посмотрим, что у нас подключается. И чего у нас здесь может не быть вот эти Script есть и все подключаются вот эти джинсы есть. Так так так нет у нас наверное. Вот вот этого файла то мы видим, что вот этот Flex Slider бери вот он да-да flexslider вот поэтому мы его переносим в нашу папку GS соответственно должны поменять сейчас здесь пути да то сейчас этот файл располагается в папке GS вместе со всеми вот этими файлами так. Смотрим так кнопочки наши появляются да так соответственно работают вот эти вот вещи у нас тоже появляются при наведении здесь появляется тут небольшой начес с этим в общем-то разберемся. Так, что у нас здесь почему и от чего зависит так в общем-то слайдер стоит установлен до галерейка и в данном уроке в общем-то собственно всё сделали. Единственное, что можем пока, что удалить лишние вот этот вот. Дима CSS нам абсолютно он видимо не нужен без него у нас всё и так прекрасно работает соответственно можем его удалить и нашей папке CSS так и.

0 комментариев
0

Читайте также