Архив категорий Темы WordPress

Автор:human

Создание адаптивного шаблона для WordPress. ч 1

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

1. Приступим


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

bootstrap

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


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

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

1
2
3
4
5
6
<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

1
2
3
4
5
6
7
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]-->

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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="https://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. Если возникли вопросы, задавайте в комментарии.

Автор:human

55 бесплатных адаптивных тем WordPress на 2015 год

Сегодня  я предлагаю вам  55  адаптивных тем WordPress на 2015 год. Под каждым изображением ссылки на демо, описание и загрузку темы.

1. Lovecraft

01-lovecraft1

Описание | Демо | Скачать

2. Gridsby

02-gridsby

Описание | Демо | Скачать

3. Radcliffe

03-radcliffe

Описание | Демо | Скачать

4. Ghazale

04-ghazale

Описание | Демо | Скачать

5. Resonar

05-resonar

Описание | Демо | Скачать

6. Magnifique

06-magnifique

Описание | Демо | Скачать

7. Founder

07-founder

Описание | Демо | Скачать

8. Auberge

08-auberge

Описание | Демо | Скачать

9. Avocation

09-avocation

Описание | Демо | Скачать

10. Lindeza

10-lindeza

Описание | Демо | Скачать

11. Esteem

11-esteem

Описание | Демо | Скачать

12. Sorbet

12-sorbet

Описание | Демо | Скачать

13. Poet

13-poet

Описание | Демо | Скачать

14. Ophelia

14-ophelia-theme

Описание | Демо | Скачать

15. Ample

15-ample

Описание | Демо | Скачать

16. Coherent

16-coherent

Описание | Демо | Скачать

17. Prana

17-prana

Описание | Демо | Скачать

18. The Princess

18-the-princess

Описание | Демо | Скачать

19. Bakery

19-bakery

Описание | Демо | Скачать

20. Receptar

20-receptar

Описание | Демо | Скачать

21. Sento

21-sento

Описание | Демо | Скачать

22. Rara Clean

22-rara-clean

Описание | Демо | Скачать

23. Arcade Basic

23-arcade

Описание | Демо | Скачать

24. Metro CreativeX

24-metrox

Описание | Демо | Скачать

25. SKT IT Consultant

25-skt-it-consultant

Описание | Демо | Скачать

26. Ward

26-ward

Описание | Демо | Скачать

27. evolve

27-evolve

Описание | Демо | Скачать

28. Quidus

28-quidus

Описание | Демо | Скачать

29. Woodley

29-woodley

Описание | Демо | Скачать

30. Hemingway

30-hemingway

Описание | Демо | Скачать

31. Customizr

31-customizr

Описание | Демо | Скачать

32. Lucy

32-lucy-theme

Описание | Демо | Скачать

33. Nictitate

33-nictitate

Описание | Демо | Скачать

34. Oblique

34-oblique

Описание | Демо | Скачать

35. Hannari Pink

35-hannari

Описание | Демо | Скачать

36. Aries

36-aries

Описание | Демо | Скачать

37. Simplified Blog

37-simplified

Описание | Демо | Скачать

38. Flat

38-flat

Описание | Демо | Скачать

39. Dispatch

39-dispatch

Описание | Демо | Скачать

40. Hathor

40-hathor

Описание | Демо | Скачать

41. Yuuta

41-yuuta

Описание | Демо | Скачать

42. Radiate

42-radiate

Описание | Демо | Скачать

43. Loose Leaf

43-loose-leaf

Описание | Демо | Скачать

44. Fortunato

44-fortunato

Описание | Демо | Скачать

45. ColorMag

45-colormag

Описание | Демо | Скачать

46. Tracks

46-tracks

Описание | Демо | Скачать

47. Amadeus

47-amadeus

Описание | Демо | Скачать

48. Relic

48-relic

Описание | Демо | Скачать

49. Interface

49-interface

Описание | Демо | Скачать

50. Freak

50-freak

Описание | Демо | Скачать

51. StrongHold

51-strong-hold

Описание | Демо | Скачать

52. Totomo

52-totomo

Описание | Демо | Скачать

53. Atomic

53-atomic

Описание | Демо | Скачать

54. Parchment

54-parchment

Описание | Демо | Скачать

55. Make

55-make

Описание | Демо | Скачать

Автор:human

Создание темы для WordPress

В данном видео вы можете увидеть как создать свой шаблон для WordPress

Файлы для видео здесь

Автор:human

10 лучших тем wordpress «из коробки»

WordPress является лидером среди систем управления контентом (CMS) и блогерских платформ. Команда разработчиков постоянно стремиться улучшить доступность платформы за счет написания различных руководств для разрабочиков.

Лучшие темы WordPress по критерию «скачал и работай»

1. Unlimited

Unlimited  это тема с качественно подобранным дизайном с правым сайдбаром. Быстро грузится и использует высоконтрастную цветовую схему (белый и серый против темно-серого) что делает ее привлекательной для пользователей.

Unlimited WordPress Theme

Демо

2. Simone

Simone имеет довольно простой ,полностью адаптивный дизайн с огромным изображениемМожно работать на сайте   используя только клавиатуру.

Simone WordPress Theme

 Демо

3. Accessible Zen

Accessible Zen еще одна тема с минималистичным дизайном.

Accessible Zen WordPress Theme

Демо

4. Stock

The Stock WordPress тема с элегантным черно-белым заголовком в который встроено меню. Такая цветовая схема всегда выйгрышна для сайтов, так как он а имеет контрастность 21 к 1.Stock WordPress Theme

 

Скачать тему с Github .

5. Apex

Apex сайты основанные на этой теме выглядят профессионально. Верхняя навигация состоит из главного меню в левой части сайта, что делает этот шаблон привлекательным для людей с ограниченными способностями.Apex WordPress Theme

Демо

6. Tiny Framework

Tiny Framework еще одна тема на wordpress.Tiny Framework WordPress Theme

The Tiny Framework theme uses a high contrast colour palette with black, orange and green colours. Blockquotes, headings and links all have different colours, which increases the legibility of the content in a significant way.Buttons are also easily noticeable, and the theme overally has a quiteenergetic and vivid look, but not in the obtrusive way.

7. Kuorinka

Kuorinka  загружается реально быстро,  «хлебные крошки» под меню для удобства навигации и т.д.Kuorinka WordPress Theme

The headings of the sidebar and the footer widgets are highlighted with a light-blue background that greatly helps the visual segmentation of the content. On the demo site you can see other cool features such as a user-controlled slider, 3 different layouts (one column, left sidebar, right sidebar), and many others.

8. Aaron

Aaron коркорпоративная тема.

Aaron WordPress Theme

 Хорошо интегрируется с плагинами WooCommerce plugin, кнопка поиска в верхней правой части экрана

9. Storefront

Storefront гибкая  тема для интернет магазина , интеграция с woocommerce  и высокая настраиваемость. Наиболее важная информация, заказанные товары в корзине и их цены, прямо рядом с главным меню в верхней части сайта, что делает тему невероятно «дружественной». Более 436 000 скачиваний.

Демо

Storefront WordPress Theme

Данная тема имеет классную дочернюю тему Boutique так же имеющую адаптивный дизайн.

Boutique WordPress Theme

10. Author

Author прекрасная тема для блога с левым сайдбаром.

Author WordPress Theme

Яндекс.Метрика