Създаване на рамка за WordPress теми с ръцете си практика
Темата и CSS
За да започнете, трябва да направим, кодът за поръчка в CSS. В моята рамка, има 2 основни компонента: CSS файл с име style.css (задължително) на файлове и папки / CSS /. която е всичко, което е "вързан" към СГО за моята рамка. Файлът style.css съдържа два раздела: определението на теми и въпроси към моите текущи оформление и CSS параметри. Общ изглед от style.css файла - това е:
След определяне на параметрите на темата, което виждате три линии с @import. Тук, в тази част започва най-значимите промени в CSS. reset.css файл определя "чисти" настройките на CSS. Промених името на normalize.css по няколко причини.
На първо място. вместо всички настройки на дисплея на "изхвърлят" на неформатиран стил, този файл се създава стил, който е зададен по подразбиране в браузъра си. Например, стандарт - това не е от вида на шрифта, и тя определя normalize.css удебелен шрифт.
И на второ място. тя съдържа стилове по подразбиране за елементи, базирани на HTML5. че е необходимо да се подкрепят по-стари браузъри, когато няма подкрепа за нови функции.
Забележка: В тази тема, аз използвам HTML5. Тя работи в Firefox, Chrome, Safari, IE7-9.
Създаване на CSS. Поставих стила, който обикновено остават същите от сайт на сайт: като общата ширина на контейнера, моите навигационни стилове, като поставя моята лента и т.н. Също така, аз обикновено се използва граница и маржовете, които са кратни на 15, за моите точки и елементи от списъка, така че за тях аз също имат основна дефиниция.
Последното нещо, което мога да добавя към master.css. - клас, който прави слоеве на "самопочистване". Това премахва необходимостта .clearfix слой.
След като нарече master.css. Аз наричам последното парче от нашия пъзел - ie.css. Тук ние ще имаме всички видове корекции на IE. В момента, това е просто изменение на .group и PNG. Не забравяйте, че последователността на вноса е много важно, защото някои неща може да се замени, и по-нататъшни промени могат да бъдат объркващи в стиловете, които вече са определили.
functions.php
functions.php файла е важно, обаче, от CSS. Тук ние ще се добавят всички от общите характеристики, които възнамеряват да използват целия предмет, както и всички определения за странични ленти, менюта и т.н. Започвам с две линии:
Това е - две константи, че твърде често се използват в рамките на темата.
Първият - пътят към шаблона; че е подходящо да се отнасят до конкретна тема файлове. Аз използвам "stylesheet_directory" вместо "template_directory", защото, ако ние използваме темата като родител, "template_directory" вземе грешен път (а именно, че вместо подчинен начин).
Вторият ред използва TEMPPATH. да се създаде път до папката / изображения /, които ние също да използват много често, или в тази тема или тема, генерирани въз основа на нея.
След тези две линии мога да добавя поддръжка за динамични менюта и 2 странични ленти с джаджи: първо - първични и вторични - лента "за всеки случай" (в повечето случаи, да го използвам в моята тема долния). И накрая, съм създал две други функции, които ми харесва намерени редовно използват:
Първият показва навигацията на стълбовете, и трябва да се използва извън контура. Това означава, че можем да го използваме на всяка страница със списък на позициите (начална страница, търсене на някакъв специфичен тип с публикации).
Втората функция създава местност "Гладно не е намерен", който аз използвам за почти всеки шаблон страница.
Разбира се, че няма ограничения за броя на създадените функции. Ето една проста функция, която използвам често.
страници шаблони
Това е последвано от шаблона на страницата. Ще разгледаме страница 4: header.php. footer.php. single.php и page.php. Останалата част - в действителност, получени страници или отделни шаблони.
Горен и долен колонтитул
Тя изглежда като нашата header.php файла:
Вие ще видите, че там не са твърде много неща, в допълнение към стандартните ни обявления
за да сте сигурни, че нашата тема е съвместим с HTML5 и т.н. в тялото на страницата е създадена основно с глава с името на сайта и страничната лента за навигация, наречена и започва "по съдържание" част, сключено през предварително определен слой #container. Можете да видите, че моят начин на маркировка отговаря на тази, дадена ми CSS.
Забележка: Аз не говоря за sidebar.php шаблон. защото това е същото, както всеки стандартен лента: проверете дали даден район за програмките е определен; - ако не отпечатате някои програмки подразбиране.
Същото важи и за нашата долния:
Донесох, общо взето два нови редове, за да направите вашия код по-хубава, затвори слой съдържание, а след това започна долния. Имам включени малка странична лента в долната част на страницата, както обикновено правя, а след това даде обща информация за авторските права, и се стигна до този въпрос, който обхваща всички отворени тагове. Отново, аз се опитвам да не правя прекалено много с долен колонтитул, като тази рамка, но за да се създаде възможност за добавяне на информация към долната част на страницата, ако е необходимо.
Код за единично и Page
Тези файлове също са доста прости. Във всяка от тях съм се опитал да премахне всички излишните, оставяйки само това, което очаквате да видите.
В single.php файл код е:
Забележете, че не се използва за навигация за мнения, аз написах в functions.php. защото това е "вътрешен" цикъл, и на тази функция може да се държи непредсказуемо.
page.php шаблона малко по-къса:
Отново: Написах само това, което е необходимо. Не са излишни класове или информация. Страници сайтове се фокусират върху съдържание, така че аз се опитах да се опрости този модел.
други шаблони
Очевидно е, че не мога да опиша тук всички шаблони на страници; Предлагам ви да погледнете изходния код приложен. Всеки шаблон се опитах да го махна, не използвам, в някои случаи, оставих един и същ шаблон по подразбиране в WordPress.
Готов тема, както следва: Рамковата WordPress шаблон
Източник: WP.TutsPlus.com
