Както "от нулата" кодирани WordPress Тема 3

Работно място Set

За да започнете с този урок, ще трябва да инсталирате на компютъра си сървър чрез XAMPP или WAMP (особено ако сте с помощта на компютър) или MAMP, ако работите на Mac. Тези инструменти позволяват да създавате за WordPress местната среда за тестване и да се уверите, че не е нужно по време на работата по проекта непрекъснато изпращане на файлове чрез FTP.

По отношение на промяната на кода, аз бих препоръчал особено Notepad ++. В присъствието на излъчваната синтаксис, прост и лесен потребителски интерфейс за кодиране, аз твърдя, че това е - личният ми фаворит (плюс едно не може да отрече факта, че това е безплатно), но Notepad или Notepad 2 ще работи също така добре.

Искате ли да научите как да се създаде уеб сайтове и блогове на WordPress с уникален дизайн?

Получите пълния в RuNet безплатно създаване на система за обучение на WordPress сайт

Изготвяне на необходимите файлове и папки

В папката с инсталационния файл на вашия WordPress, отидете на WP-съдържание / теми / и да се създаде папка, наречена "Нова 3.0 Тема" (нова тема 3.0). Той е тук, за начинаещи, ние ще запазим всичките си файлове. Сега създайте следните файлове и папки:

Стъпка 1 - style.css

Сега нека създадем някои основни определения, които по-късно ще реализират в няколко PHP-шаблонни файлове.

Пакър #wrapper ще бъде размера на цяла страница, #header, става ясно от заглавието, ще бъде водещ на #blog съдържа последните публикации в блог сайт. На последно място, ние имаме .sidebar и #footer, и двете от които ще съдържа дефиниции на основни тези области, които ние ще обсъдим по-подробно по-късно.

Стъпка 2 - header.php

След това се създаде header.php, които в момента ще съдържа нашия сайт лого, както и интуитивна навигация.

В действителност, този код не се нуждае от подробно обяснение, просто не забравяйте, че тя трябва да присъства в header.php на всички ваши теми. Първо ние заявяваме типа на документа, както и използването на стандарт, който се използва за показване на името на сайта на начина, по който го напиша в настройките си на WordPress, а след това style.css и PHP код, който активира препратките WordPress 3.0.

Стъпка 3 - Добавяне на потребителски навигация

Сега, когато имаме кодиран вашия header.php с цялата основна информация, както и името на блога си, можете да добавите персонализирано навигационното меню - функция, която е въведена в WordPress 3.0. Въпреки това, преди всъщност добавянето на кода в header.php ние трябва да отворите functions.php и да добавите кода необходимо да активирате потребителското меню.

Трябва да добавите ред код навън на header.php в края на документа, за да го направи.

Сега ще разгледаме какво означава точно. Основната употреба на функцията - това wp_nav_menu, с sort_column, container_class и theme_location използвани като аргументи. Sort_column гарантира, че избраният от вас в таблото WordPress отбор се извършва, container_class ви позволява да изберете CSS клас, който сте създали, за да прилагате стилове към менюто си. И накрая, theme_location просто определя менюто там, където имаме нужда в момента е основен-меню.

Стъпка 4 - Определяне на стиловете навигация

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

За трети падащото меню отново сме леко променен цвета на фона, така че да се откроява, задаване на ляво (левия край) от 100% до левия й край винаги е бил в дясно от първото падащо меню и да зададете на върха (горе) с 30%, така че той все още е бил прикрепен към второто падащо меню, но се отделя от цялото меню.

Стъпка 5 - Index.php

Index.php ще бъде началната страница на нашия сайт и ще съдържа кода за включване на хедър, футър и лента, както ще обясня по-долу, както и кода включва най-новите от блога, и ние ще се използват, за да се възползват от WordPress 3.0 функция, за да поставите контрол изображение (картинка).

Тези редове код, използвани за да се покаже цялата информация в header.php, sidebar.php и footer.php, без значение къде сте ги сложили в тематични файлове.

В допълнение, кодът тук е доста лесно да се разбере. След като нарече header.php ние използваме малко по-рано създадена #blog и се обадете на цикъла се използва за показване на скорошните публикации в WordPress блог. След това се увива името на своите постове в DIV, които имаме по-рано също определени стилове.

Единствената част от код тук, показва как ние ще се възползваме от свойствата на WordPress 3.0 да се поставят контрола на изображението - то ... Това означава, че този код няма да направи нищо, докато не активирате функцията в functions.php, което е това, което ние трябва да направим в следващата стъпка.

Стъпка 6 - Активиране на "kontrolek" публикации

Добавихме позоваване на изображението дисплей код на публикации в началната страница, но в момента нищо не се случва, защото в действителност ние не им се дава възможност да работи правилно. Сега отворете functions.php, по които е работил и преди, и да добавите следния менюто след като се придвижите код.

Код на върха на самата обяснява, тъй като почти точно да обясни какво е направено. Вторият ред допринася за нашата тема да подкрепят позициите справка с изображения, а на третия ред се определят точните размери на нашия контрол за печат, който в тази статия са настроени на ширина 520 пиксела и височина 250 пиксела.

Етап 7 - sidebar.php

Както се досещате, sidebar.php - файл, който ще се появи информацията, че трябва в страничната лента. Тъй като ние вече са включени в досието им на index.php, а след това всичко, което трябва да се направи - е да поставите кода, както и нашата странична лента ще се появи на началната страница.

Да, това е всичко, кодът добавя към sidebar.php на функционалност. Ние наричаме Разделение, създадени в style.css и кода показан в долната част ще даде възможност за добавяне на джунджурии в страничната лента и в правилния ред, ако е необходимо чрез прилагане на WordPress. Въпреки това, както с много имоти, ние трябва първо да се измени functions.php файла на тази функция работи добре.

Кодът само уточнява WordPress'u регистрирате лента нас, причинени sidebar.php. WordPress може да бъде доста лесно да се създаде разнообразие от съраунд високоговорители, ако имате нужда от тях в размер на повече от един, но за да се намали това вече дълго урок, нека да дадем възможност Google'u отговори на въпроса как да го направя.

Етап 8 - single.php

Стъпка 10 - Page.php

Стъпка 11 - Category.php

Кодовия фрагмент, тук ще бъде единственият допълнение, ние да го включи в най-кратък цикъл на WordPress.

Стъпка 12 - на собствен фон, линкове за сваляне

Както вече бе обяснено, един от продадените имоти в WordPress 3.0 - е възможността да се създават или променят на фона на вашия сайт, независимо дали това е изображение или основен цвят е, просто използвайте гръб WordPress. Това, което трябва за този имот? Това кратко малко ред код:

Нека functions.php добавете следния код, за да го получите работи правилно имот правилно.

Стъпка 13 - footer.php

Стъпка 14 - Други функции?

Ето няколко от имоти, не толкова необходимо, но може да бъде полезно. На първо място, за това как да се даде възможност на Многосайтово имот за WordPress 3.0, така че може да носи много сайтове с едно WordPress инсталирате. Отново, ние трябва да добавите този код в functions.php.

заключение

Така че, доколкото ни учебник. В този момент, вие успешно кодиран "от нулата" на тема WordPress 3.0, като всички предимства на най-популярните функции, но достатъчно малък, че тя може да бъде променен в нещо по-графично впечатляващ.

Редакционен: Виктор Хорн и Андрю Bernatsky. webformyself екип.

Най-IT новини и уеб разработки на нашия канал Телеграма

Искате ли да научите как да се създаде уеб сайтове и блогове на WordPress с уникален дизайн?

Получите пълния в RuNet създаване безплатен сайт с WordPress обучение система "уникален уеб сайт от нулата"