Как се прави WordPress тема – Урок 1

Здравейте, тъй като от SEOS сме привърженици на най-разпространената, предпочитана от търсачките и удобна система за изработка на сайт WordPress, решихме да направим уроци на български език за това, как се прави тема за WordPress от самото начало. Ясно е, че за целта ще са Ви нужни познания по HTML, CSS и много малко PHP. Затова, ако нямате такива познания, Ви препоръчваме да се запознаете предварително с нашите уроци за изработка на сайт. Въпреки всичко, ако следвате инструкциите, бихте могли да се справите, но за направата на дизайна впоследствие ще се наложи да научите поне CSS.
Темата, която ще направим, ще бъде Responsive, което ще рече, че ще се чете от всички най-разпространени, съвременни версии на браузърите Firefox, IE, Chrome, Opera и Safari. Също така темата ще бъде направена в крак с най-новите тенденции за писане на HTML, а именно – с HTML5. За Вас това може да е чудесна основа, за да направите впоследствие своя собствена WordPress тема.

Какво е преимуществото на една такава тема, изработена от самите Вас?

Вие сте наясно, че кодът е абсолютно изчистен, защото е написан от Вас. Няма скрити послания, няма нежелани връзки към сайтове. Винаги можете да правите лесно промени като автори на темата. Това значително Ви спестява време впоследствие при бъдещи промени.

Направихме уроците, защото по тази тема на български език към момента има оскъдна информация.
Темата, която ще изработим в следващите уроци, ще има всички основни, необходими функционалности за една WP тема и въпреки всичко ще бъде направена елементарно, за да може информацията да е полезна за начинаещи. Ще се използват само основни стилове в CSS. Дизайнът ще бъде съвсем семпъл, но подходящ за основа на Вашите разработки. Ще се радваме, ако се включите с коментари и съвети относно това, как да подобрим кода, така че да бъде още по-достъпен именно за начинаещи.

Как се прави WordPress тема – Урок 1

Като начало всяка една тема за WordPress си има дизайн. За целта ние създаваме два файла. Първият файл се казва index.html, а вторият – style.css. Файлът, който се казва index.html, трябва да съдържа представения по-долу код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>WordPress Theme</title >
    <link rel="stylesheet" type="text/css" media="all" href="style.css">
</head>
<body>
   <header>
		<h1>Моята първа WordPress тема</h1>
		<p>Кратко SEO описание на страницата, съдържащо важни ключови думи</p>
		<div class="clr"></div>
		<nav>
			<ul>
				<li>Меню 1</li>
				<li>Меню 1</li>
				<li>Меню 1</li>
				<li>Меню 1</li>
				<li>Меню 1</li>
				<li>Меню 1</li>
			</ul>
		</nav>
	<div class="clr"></div>
    </header>
	<div class="clr"></div>
	<div id="main">
		<section>
		   <article>
		   <h1>Заглавие на статия</h1>
		   Съдържанието на Вашата статия. Това ще бъде динамичната част от Вашата страница и тя ще се променя
		   за всяка страница в зависимост от съдържанието, което сте публикували.
		   </article>
		</section>
		<aside>
			<ul>
				<li>Съдържание в страничната лента. Това е вашият Sidebar или мястото, на което ще вмъквате своите Widgets в WordPress</li>
			</ul>
		</aside>
	</div>
	<div class="clr"></div>
    <footer>
	Информация за авторски права и лого на фирмата. Заключителна част от сайта.
    </footer>
</body>
</html>

Вторият файл, чрез който ще стилизирате Вашата WordPress тема и който е абсолютно задължителен, се казва style.css. В кода по-долу можете да се запознаете с примерното съдържание на файла style.css.

body {
	color: #2b2b2b;
	margin: 0 auto;
	padding: 0;
	max-width: 980px;
}

header {
	border: 1px solid #ddd;
	width: 100%;
	height: 100%;
}

header h1 {
	border: 1px solid #ddd;
	max-width: 47%;
	float: left;
	padding:10px;
	margin: 10px;
}
header p {
	float: right;
	border: 1px solid #ddd;
	max-width: 47%;
	padding: 10px;
	margin: 10px;
}

nav {
	border: 1px solid #ddd;
	line-height: 40px;
	max-width: 100%;
	margin-top: 20px;
	max-width: 980px;
}

nav ul {
	border: 1px solid #ddd;
	height: 40px;
	padding:0;
	margin: 0;
	max-width: 980px;
}

nav ul li { 
	border: 1px solid #ddd;
	list-style-type: none;
	float: left;
	line-height: 40px;
	vertical-align: middle;
	padding-left: 10px;	
	padding-right: 10px;
	max-width: 100%;
}

nav ul li:hover {
	background: red;
}

section {
	border: 1px solid #ddd;
	float: right;
	width: 70%;
	padding: 10px;
	margin: 10px;
	word-wrap:break-word;
}

#main {
	border: 1px solid #ddd;	
	width: 100%;
	height: 100%;
	display: inline-block;
}

aside {
	border: 1px solid #ddd;
	float: left;
	max-width: 19%;
	padding: 10px;
	margin: 10px;
	word-wrap:break-word;	
}

aside  ul, aside li {
	list-style-type: none;
	margin:0;
	padding: 0;
}

footer {
	border: 1px solid #ddd;
	text-align: center;
	padding: 10px;
}

.clr {
	clear: both;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 0;
	line-height: 0px;
	font-size: 0px;
	border: none;
}

@media screen and (max-width: 980px) {
 header p,  header h1{
	float: none;
	min-width: 200px;
	margin: 0 auto;
  }
  
}

@media screen and (max-width: 300px) {
   nav, nav ul, nav li{
	float: none;
	min-width: 300px;
	margin: 0 auto;
  }
}

@media screen and (max-width: 800px) {
section{
	float: none;
	margin: 0 auto;
	padding: 10px;
  }

aside{
	float: none;
	min-width: 200px;
	margin: 0 auto;
  }
}

Двата файла style.css и index.html вече формират нашата примерна страница. Сега трябва да „нарежем“ нашия файл index.html на части, като от тях ще създадем четири нови файла, които ще се казват index.php, header.php, sidebar.php, footer.php. Ще създадем и файл functions.php. Вижте петте примера по-долу.

Файл index.php

<?php get_header();?>
<div id="main">
		<section>
		   <article>
		   <h1>Заглавие на статия</h1>
		   Съдържанието на Вашата статия. Това ще бъде динамичната част от Вашата страница и тя ще се променя
		   за всяка страница в зависимост от съдържанието, което сте публикували.
		   </article>
		</section>
<?php get_sidebar();?>		
<?php get_footer();?>

Файл header.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>WordPress Theme</title >
	<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
   <header>
		<h1>Моята първа WordPress тема</h1>
		<p>Кратко SEO описание на страницата, съдържащо важни ключови думи</p>
		<div class="clr"></div>
		<nav>
			<ul>
				<li>Меню 1</li>
				<li>Меню 1</li>
				<li>Меню 1</li>
				<li>Меню 1</li>
				<li>Меню 1</li>
				<li>Меню 1</li>
			</ul>
		</nav>
    </header>
	<div class="clr"></div>

Файл sidebar.php

		<aside>
			<ul>
				<li>Съдържание в страничната лента. Това е Вашият Sidebar или мястото, на което ще вмъквате своите Widgets в WordPress</li>
			</ul>
		</aside>
	</div>

Файл footer.php

<?php
/**
 * The template for displaying the footer
 */
?>
 <div class="clr"></div>
    <footer>
	Информация за авторски права и лого на фирмата. Заключителна част от сайта.
    </footer>
</body>
</html>

Файл functions.php

Към момента остава празен.

След това прибавяме следния код в началото на файла style.css, преди всичко останало, и поставяме променения вече style.css файл в папката при останалите пет файла, които създадохме по-рано. С кода, който виждате по-долу и който поставихме в началото на нашия style.css файл, ние зададохме заглавието на нашата тема. Записахме също информация за автора, описанието на темата и интернет адрес към темата.

/*
	Theme Name: SEOS Theme
	Theme URI: http://seos.bg
	Description: SEOS Theme
	Author: SEOS
*/

След което правим още една промяна в нашия файл header.php, като заменяме пътя до нашия css с универсалната php функция, която ползва WP. Така автоматично WP за нас намира пътя до файла style.css. Ето го и кодът, който вмъкваме в header.php:

<?php bloginfo ('stylesheet_url');?>

Сега нашият файл header.php изглежда така:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title >WordPress Theme</title>
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo ('stylesheet_url');?>" />
</head>
<body>
   <header>
		<h1>Моята първа WordPress тема</h1>
		<p>Кратко SEO описание на страницата, съдържащо важни ключови думи</p>
		<div class="clr"></div>
		<nav>
			<ul>
				<li>Меню 1</li>
				<li>Меню 1</li>
				<li>Меню 1</li>
				<li>Меню 1</li>
				<li>Меню 1</li>
				<li>Меню 1</li>
			</ul>
		</nav>
    </header>
	<div class="clr"></div>

Създаваме папка, която носи името на нашата тема и съдържа към момента в себе поместените по-долу файлове:

papka

Темата вече е готова за инсталиране. За целта я поставете в архивиран файл и я инсталирайте. Нали не си мислите, че това е всичко? Това е началото – предстои да изградим функционалностите, които ще са ни необходими. Нека да преминем към урок втори.