Новости
Статьи
Как создать свою тему для WordPress?
Опубликовано: 02.05.2018
Здравствуйте, друзья! Сегодня я расскажу о принципах и технических моментах создания темы для WordPress с нуля. Эта статья написана для тех, кто имеет какой-то опыт работы с движком WordPress и, хотя бы на базовом уровне, разбирается в HTML и CSS.
Как создать шаблон для WordPress. Грамотная посадка верстки на WordPress (Right Way)
Темы разрабатываются под разные задачи: интернет-магазин, фото или видео сайт и т.д., мы же рассмотрим обычную тему блога и алгоритм действий по ее созданию.
Если вы решили создать собственную уникальную тему оформления, то перед созданием темы нужно продумать дизайн и сверстать HTML шаблон сайта или заказать у фрилансеров, решать вам. В общем, у вас должен получиться сверстанный шаблон, например, вот с таким содержимым: файлы index.html и style.css, папка картинок images и папка js со скриптами. Из этого шаблона мы и будем делать тему оформления.
Как сделать шаблон для WordPress без особых знаний
Если же у вас пока нет собственного HTML шаблона для темы, то можете потренироваться, взять решение из данной статьи и набросать стили под себя. Для примера я возьму вот такой простенький HTML код главной страницы с разметкой шапки сайта, одного анонса поста, правой колонки и футера:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Мой блог</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <div id="logo"> <a href="index.html"><img src="images/shapka.png" alt="" title=""/></a> </div> <ul id="menu"> <li><a href="#">Главная</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Рубрика 1</a></li> <li><a href="#">Рубрика 2</a></li> </ul> </div> <div id="content-main"> <div id="content"> <div class="post-content"> <div class="post-img"><a href="#"><img width="275" height="230" src="images/mini.jpg" alt="Миниатюра поста"/></a></div> <h2 class="note-title"><a href="#">Заголовок поста</a></h2> <div class="post-text"> Текст анонса поста</div> <div class="readmore"><a href="#">Кнопка читать далее</a></div> </div> </div> <div id="saidbar"> <div class="widget-title">Популярные рубрики</div> <div class="widget"> <ul> <li><a href="#">Мои услуги</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">Сайтостроение</a></li> <li><a href="#">О заработке</a></li> <li><a href="#">О SEO</a></li> <li><a href="#">О YouTube</a></li> </ul> </div> </div> </div> <div id="footer"> <p>Все права защищены</p> </div> </body> </html>Для создания темы оформления необходимо знать функции или как их еще называют — теги WordPress. Мы разберем основные функции темы, со всеми тегами вы можете ознакомиться на официальном сайте codex.wordpress.org.
