Верстка шаблона для WordPress. Часть 1

Опубликовано: 01.09.2018

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

Наша задача, сделать шаблон для wordpress на html5 с адаптивной версткой. За основу будущей темы мы возьмем фреймворк Twitter Bootstrap . Данный курс будет своеобразными уроками bootstrap, а так же наглядным примером как строятся шаблоны на bootstrap.

1. Приступим

Создадим отдельную web папку на вашем хостинге (подразумевается что у вас уже есть свой сайт), если вы еще только хотите купить дешевый хостинг, могу посоветовать friendhosting.net , сам размещаю сайт у них, очень доволен качеством, советую. После того как вы создали папку, скачиваем фреймворк нажав на кнопку Download Boostrap. И разархивируем его в ранее созданную папку web.

Натяжка шаблона на WordPress | #1

2. Создаем макет

Для начала создадим файл index.php в котором и начнем строить наш макет сайта. Прописываем стандартную разметку, подключаем кодировку utf-8 , и указываем русский язык для html ( Указав lang=”ru” в html теге, виджеты twiitter, facebook и вконтакте будут автоматически отображаться на русском языке ).

Добавляем мета теги в отсек head . Добавим мета тег author который в будущем поможет нам с подтверждением авторских прав на контент. После чего прописываем meta og (Open Graph), которые помогут выводить информацию в социальные сети.

Вот что должно получиться у нас в итоге

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Шаблон для WordPress</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="Имя автора"> <meta content="Название сайта" /> <meta content="website" /> <meta content="Ссылка на изображение логотипа" /> <link href="./css/bootstrap.css" rel="stylesheet"> <link href="./style.css" rel="stylesheet"> <link href="./css/bootstrap-responsive.css" rel="stylesheet">   </head>

Создаем файл style.css для дальнейшей стилизации и подключения шаблона на wordpress. После чего скачиваем js файл фикса для html5.

В архиве заходим в папку dist и копируем оттуда файл html5shiv.js который вставляем в нашу js папку.

Разметка шаблона. Для разметки я выбрал стандартный каркас для блога.

<body> <div id="wrap"> <header> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"><a class="brand" href="#">Имя сайта</a> <div class="nav-collapse collapse"> <menu></menu></div> </div> </div> </div> </header> <div class="container"> <div class="row"> <div class="span7">Тест контент</div> <div class="span3"> <aside>Тест сайдбар</aside></div> </div> </div>  <div id="push"></div> </div> <footer> <div id="footer"> <div class="container">Подвал</div> </div> </footer> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script> </body> </html>

и в файл style.css

header { padding-bottom: 70px; } /* Стили для подвала внизу страницы */ html, body { height: 100%; } #wrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -60px; } /* Высота футера */ #push, #footer { height: 60px; } #footer { background-color: #f5f5f5; } @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } /* Ширна контейнера */ .container { max-width:970px; width: auto; } } .container .credit { margin: 20px 0; }

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

В следующем уроке как создать шаблон для wordpress мы приступим к оформлению шаблона, созданием стиля записи, оформим сайдабр и подвал. Думаю после того как мы закончим уроки, вы перестанете задавать себе вопрос как создать дизайн сайта? Я буду рад если моя статья поможет кому нибудь создать шаблон сайта для wordpress. Если возникли вопросы, задавайте в комментарии.

Верстка шаблона для WordPress. Часть 1

1. Приступим

2. Создаем макет

Похожие записи