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

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

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

Ну и внутри которых соответственно будут ссылки на 1234 и так далее — это будут наши ссылке то есть разметка здесь абсолютно общем-то. Вот такая. Элементарная видим до ул пейджер свои классы со ссылками и активной пункт то есть, но тот на котором в данный момент мы находимся он имеет классно у просто чтобы мы могли назначить некоторые для для для номера той страницы на которые мы находимся вот наш пейджер отобрази лся.

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

Ну первое list-style None убираем все наши стиле в каком-то из макетов мы сделали для у мы сделали list-style None для ул. И вынесли его в начало то есть вот как имидж. Как из ссылки. Да вот здесь вот мы где-то добавляли у list-style None и поэтому нам нигде не приходилось добавлять. Вот и мы в данном макете сделали тоже самое нам бы не пришлось добавлять не для Pajero II рестайл они для навигации постраничной вот когда мы пару уроков назад версали версали. Вот — это вот отсюда не для основного меню то есть не. Где бы нам не пришлось. Вот — это прописывать то есть ну вот в данном пакете немножко другим. Да таким путём. А значит Overflow hidden. Но таким образом вы просто можете посмотреть почему вот назначаем общие стили. Да почему бы не назначают каждый раз другие стили тоже самое в общем-то мы на протяжении всей нашей верстки. Мы видим, что для заголовков. Где бы он ни был наш заголовок, но когда если — это заголовок то шрифт у него droidsniff если — это не заголовок к любой другой то соответственно у него шрифт PT Sans соответственно мы опять-таки вынести в самое начало 10 через запятую H1 H2 H3 H4 H5 font-family droidsniff указать все средства в каждом заголовки бы нам вот — это droidsniff вот — это таскать бы не пришлось вот ну скажем кто понимает — это можно сделать кто не понимает скажем все в любом случае — это можно можно попробовать — это сделать — это в любом случае правильнее лучше чем. Ну каждый раз вот в общем-то да. Потому, что если завтра нам захочется поменять шрифт заголовков. Нам нужно будет выискивать и походу CSS менять в каждом месте шрифт заголовка. Ну то есть. Можно попробовать и понять преимущества и недостатки данного метода поэтому тут как бы на первых порах to чтобы пояснять именно было лучше, что мы назначаем застели и для чего они откуда они берутся то. Вот лучше писать таким. Ну когда со временем придёт понимание того, что мы как бы делаем да то понятное дело, что вот этот шрифт можно будет вынести в общее оформление скажем так страница. Так значит, что мы назначили мы убрали стиле Overflow сделали и floatride выравнивание по правому краю нашу навигацию до далее продолжаем Ranger делаем по. РВП Jelly float Left float Left можно сразу здесь ещё и фонд задать значит он будет болт 14 пикселей и PT Sans так PT Sans далее. Далее нам нужно украшать наши ссылки. Потому, что если мы сейчас посмотрим то всё будет вроде бы неплохо, но ссылке и вот остаются нашего синего цвета а.а. должны они так должны быть цвета 363636 переходим за соответственно для ссылок нужный. Нам свет задаем для ссылок дисплей блок чтобы можно было назначать паддинги задаем посредственно сами паддинги 5 пикселей сверху снизу и по 10 пикселей справа и слева так переходим смотрим вот собственно. Да как бы готовы практически наше меню единственное не меню постраничная навигация единственное, что у нас вот есть класс. Нау так который который мы должны сдать для ссылки которые активно в текущий момент лео. Now Take for any Font Color цвет нашего шрифт там насчёт будет белый-белый и background background. Сейчас мы посмотрим какой будет бэкграунд такой же как собственно и все наши borders так переходим смотрим. Ну вот собственно. Да примерно так вот оно должно выглядеть. Ну единственный момент чтоб 1 наши заполнились до расстояние уменьшилось. Ну то есть если посмотреть то вот здесь расстояние получается у нас непосредственно между 1 и 2, а получается. Больше чем между 2 и 3. Но — это за счёт того, что padding запомнился рыжим цветом поэтому мы можем добавить здесь ещё Morgen 0 пикселей. То есть как бы вот нарастить вот этот как бы padding. Для активного нашего состояния. Ну вот так — это двинем и получаем абсолютно готовые на пейджер нашу постраничную навигацию. Ну на этом с портфолио портфолио на этом. Мы закончили да я буду завершать осталось у нас одна одна единственная страничка — это так портфолио Single то есть портфолио детальный просмотр портфолио. То есть если, тогда вот мы где-нибудь нажимаем на вот здесь на кнопочку ритма попадаем вот на такую страницу где у нас опять-таки присутствует наш предстоятель далее присутствует галерейка небольшая. Да и здесь related Post есть которые опять-таки мы можем. Скопин Ну так или иначе общем-то в данной странице мы приступим с вами начиная. Со следующего урока можете что-то попробовать уже сделать может быть заготовить по крайней мере страницу попробовать что-то насчёт Power стать по поводу данной странице. Спасибо за внимание жду вас.

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

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