Как создать свой дизайн на wordpress

Закрыть ... [X]

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

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

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

1. Приступим

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

Создание шаблона на twitter bootstrap для wordpress

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

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

<meta charset="utf-8" /> Шаблон для WordPress
  • Добавляем мета теги в отсек head. Добавим мета тег author который в будущем поможет нам с подтверждением авторских прав на контент. После чего прописываем meta og (Open Graph), которые помогут выводить информацию в социальные сети.

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="author" content="Имя автора" /> <meta content="Название сайта" /> <meta content="website" /> <meta content="Ссылка на изображение логотипа" />
  • Подключаем стили, фикс html5 для IE6-8

<link href="./css/bootstrap.css" rel="stylesheet" /> <link href="./style.css" rel="stylesheet" /> <link href="./css/bootstrap-responsive.css" rel="stylesheet" /> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="./js/html5shiv.js"></script> <![endif]-->

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

<!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"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="./js/html5shiv.js"></script> <![endif]--> </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 дизайн шаблона, и уже на данном этапе вы можете заметить как ведет себя навигация при уменьшении окна браузра.

Создаем шаблон на twitter bootstrap

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

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

Метки: bootstrap верстка, twitter bootstrap, создаем шаблон, уроки по bootstrap, шаблон для wordpress Дата 16.07.2013

Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?

Свяжитесь со мной
Источник: http://wp-query.ru/verstka-shablona-dlya-wordpress-chast-1/



Рекомендуем посмотреть ещё:



Создание шаблона Wordpress: как собрать тему с нуля?
Как выглядит белорусский рубль в 2018Спальня с гардеробной дизайн интерьераАнгелы карли фильм 2018 трейлерНовый сузуки sx4 2018 отзывы владельцевКак восстановить стс при утере 2018


Как создать свой дизайн на wordpress Как создать свой дизайн на wordpress Как создать свой дизайн на wordpress Как создать свой дизайн на wordpress Как создать свой дизайн на wordpress Как создать свой дизайн на wordpress Как создать свой дизайн на wordpress Как создать свой дизайн на wordpress



ШОКИРУЮЩИЕ НОВОСТИ