На този адрес http://tutsplus.com/ може да откриете много полезни уроци по HTML, CSS, Design, Video Editing и отново полезна информация за WordPress.

Регистриране на Sidebar в страничната лента. Как се прави тема и сайт на WordPress?

В този урок за това, как се прави WordPress тема, ще разгледаме как да си направим Sidebar. За да може да използваме ефективно нашата странична лента и да поставяме в нея различни plugins (джаджи), направени за WordPress, ще регистрираме Sidebar.
Как да направим нашия Sidebar? За целта първо трябва да влезем във файла functions.php и да поставим в него следния код, който виждаме по-долу. С този код, който отново сме взели от кодекса на WordPress, задаваме id, име и описание на нашия Sidebar.

<?php
register_sidebar( array(
    'id'          => ('left'),
    'name'        => __( 'left' ),
    'description' => __( 'This sidebar is located above the age logo.', $text_domain ),
) );

Този код декларира нашия Sidebar. За да може да използваме нашите Widgets в WordPress, се нуждаем от още нещо. Трябва да направим някои промени във файла sidebar.php, като изрично посочим името на нашия sidebar и мястото, на което той ще се показва. И така на мястото на текста, който сме вмъкнали към момента в елемента aside, поставяме следния код:

<?php if ( ! dynamic_sidebar('left') ) : ?><?php endif; ?>

Съдържанието в нашия файл sidebar.php вече трябва да е следното:

	<aside>
		<ul>
			<?php if ( ! dynamic_sidebar('left') ) : ?><?php endif; ?>
		</ul>
	</aside>
</div>

Сега в нашата странична лента ще се появят всички widgets или джаджи, които сме използвали. Нека да поставим един бутон за търсене и един календар като пример, за да видим как те се визуализират. Трябва да се визуализират така, както е посочено в примера по-долу:

Вече регистрирахме нашия Sidebar и може да използваме спокойно нашите джаджи. Нека да преминем към следващия ни урок за изработка на сайт и тема за WordPress. Очаквайте скоро

Този урок е посветен на това, как се прави тема за WordPress. Тук ще създадем нашата WordPress динамична част. Динамичната част е тази част от нашата страница, която съдържа информация, различна за всяка страница. Динамичната част ще бъде публикацията, която се намира във файла index.php. Ние ще използваме отново функциите на WordPress, като вземем информация от кодекса на WordPress. Със следната php функции ние ще зададем начало и край на динамичната част.

Функция за начало на динамичната част:

<?php
	if(have_posts()):
	while (have_posts()):
        the_post();
?>

Така отбелязваме края на динамичната част:

<?php  
	endwhile;
	endif;
?>

В нашата динамична част ние имаме към момента заглавие и съдържание. За да декларираме заглавието, в тага h1 поставяме следната php функция:

<?php the_title(); ?>

За да декларираме съдържанието, в тага article отстраняваме излишната информация, която въведохме, и поставяме следната php функция:

<?php the_content();?>

Ето как изглеждат горепосочените функции, когато са поставени вече в нашата страница index.php:

<?php get_header();?>
<div id="main">
		<section>

<?php if(have_posts()) : while (have_posts()) : the_post(); ?>	

		   <article>
		   <h1><?php the_title(); ?></h1>
		   <?php the_content();?>
		   </article>

<?php endwhile; endif; ?>

		</section>

<?php get_sidebar();?>
<?php get_footer();?>

Сега трябва да направим някои настройки в WordPress, за да се показват коректно нашите нововъведения. Като начало създаваме страница, която се казва „Нашата първа страница“. След това отиваме в „Настройки на WP“ и избираме „Четене“, като задаваме нашата страница за основна:

Не забравяйте също да зададете при настройка на връзките да се показва името на публикацията.

Вече можете да разгледате как би се държала нашата страница в браузъра. Нека преминем към следващия урок четвърти.

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

Като начало ние трябва да създадем таблото за управление или Dashboard, което ще ни позволява да администрираме своята тема. Това става много лесно с вмъкването на две php функции, които ще вземем от кодекса на WordPress. Нужни са ни следните две функции, които ще поставим в нашите файлове header.php и footer.php.

Във файла header.php поставяме следния код в head частта на нашия HTML5 документ. За целта използваме редактора, който се намира в WP и ни позволява да видим кода на страниците и да го променим.

<?php wp_head(); ?>

Вмъкваме кода по-горе в края на head частта след всички останали елементи, както е показано по-долу:

Следва да поставим по идентичен начин кода по-долу в нашия файл footer.php, непосредствено преди тага body:

<?php wp_footer(); ?>

Както виждате, нашето табло за управление вече е готово и сега продължаваме със създаването на динамичната част.

Можете да преминете към следващия урок от тук.

Здравейте, тъй като от 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>
 

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

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

SEOS стартира своя нов проект за създаването на безплатни WordPress Теми. При създаване на шаблоните си за WordPress, SEOS се придържа към изчистения, лесен и достъпен за потребителя дизайн. Всички шаблони се създават според най-новите изискванията и тенденции при писане на код. WordPress темите на SEOS са лесно разпознаваеми от търсачките и са SEO достъпни. Чрез елементите използвани в HTML5 търсещите машини лесно може да се ориентират за важността на съдържанието в дадената страница. Скоростта на зареждане на страницата също е от значение, за това кода трябва да бъде изчистен от излишни скриптове. Коректното зареждане под всички основни браузъри също е задължително. WordPress дизайните са достъпни, както от настолни компютри така и от таблети и всички видове мобилни телефони. SEOS държи да няма грешки в кода на HTML и CSS документа и кода е тестван според изискванията на W3 за валидност на документа. SEOS си поставя за цел да създаде богата библиотека от специализирани теми, които да бъдат полезни в различни отрасли на бизнеса.
Всички безплатни шаблони към момента може да откриете на адрес seosthemes.com.