Ръководство за развитие на WordPress за деца

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

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

В това ръководство искам да представя основните понятия за изграждане на детска тема на WordPress и защо е толкова добра идея.

Приготвяме се да започнем

Темите на децата не са толкова трудни, колкото изглеждат. Ползите от работата с родителска тема означава, че не е нужно да пишете всички HTML / CSS от нулата. Детската тема автоматично ще използва всички шаблони, които включвате, като например sidebar.php или footer.php. Но ако те липсват, тогава детето ви ще изтегли същите файлове от родителя си.

Тази функционалност предлага огромна свобода за персонализиране на вече съществуващи шаблони. Също така е чудесно за докосване на области около вашия уебсайт за специални събития, като добавяне на дизайнерски модели за Коледа или Нова Година.

Вашите задължителни файлове

Нуждаете се само от един .css стил, за да настроите дъщерна тема в WordPress. Също така трябва да създадете нова директория в / WP-съдържание / теми папка, в която ще се помещава детето ви. Обърнете внимание, че вие не са създаването на тази папка в родителската тема, но точно заедно с нея в една и съща директория.

Разработчиците често включват функции.php и screenshot.png в същата папка като новия CSS файл. Снимката на екрана се показва във вашия администраторски панел на WordPress, а файлът с темата за функциите може да се използва за тона на бекенд промени.

Но засега трябва да се съсредоточим върху основния стил. Това обикновено се нарича style.css и включва заглавка на коментар с мета информация. Това е важно, защото темата ви ще се показва само като дете, ако включите името на директорията на родителя. По-долу е даден примерен коментар за заглавието:

 / * Име на темата: URI на тема "Двадесет и единадесет деца": http: //example.com/ Описание: Детска тема за дизайна на двадесет и единадесет Автор: Jake Rocheleau Автор URI: http: //www.hongkiat.com/blog/ Шаблон: twentyeleven Версия: 0.1 * /

Стойността за шаблон трябва да бъде името на директорията за родителската тема. Освен това всички останали етикети трябва да са познати на стандартните теми на WordPress.

Въпреки че ще се използват всички родителски шаблони на PHP, ще се използва style.css от оригиналния родител не автоматично се импортира. Ако искате да работите с оригиналните стилове, ще трябва да го включите в горната част на документа за стила на вашето дете. По-долу е даден пример, включващ темата WP Twenty Eleven.

 @import url ("… / twentyeleven/style.css");

Настройване на нови стилове

Прилагането на правилата на CSS към вашата тема е също толкова лесно, колкото и редактирането на оригинала. Ако знаете кои елементи трябва да насочите, използвайте едни и същи селектори в собствената си детска тема.

Бихме могли да демонстрираме някои наистина лесни промени в връзки и параграфи. Използвал съм код от оригиналната тема „Двадесет Единадесет“ за насочване на различните елементи. Понякога е необходимо да използвате по-специфичен селектор, за да преодолеете по-стария дизайн.

 тяло подложка: 0 1.4em;  #page margin: 1.667em авто; max-width: 900px;  a цвят: # 5281df; текст-декорация: няма; фамилия: Calibri, Tahoma, Arial, sans-serif;  a: фокус, a: активно, a: hover text-decoration: underline;

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

Важните неща

CSS има специална декларация за маркиране на приоритет над другите стилове. Синтаксисът се показва като !важно започвайки с удивителния знак и завършвайки в края на CSS собствеността си. Това е необходимо, ако имате каскадни стилове от родителска тема, които пренебрегват вашите собствени персонализирани правила.

 a color: # 5281df! важно; текст-декорация: няма; фамилия: Calibri, Tahoma, Arial, sans-serif;

Над това копирах оригиналните си промени и редактирах цвета на котва с важна клауза. Това ще има предимство пред всички други стилове на същата дълбочина на селектора. По-дефинирани елементи (като например #access li: hover> a) обикновено притежават свои собствени стилове, освен ако цвят все още се е наследил от нашия оригинален селектор. В този случай родителската ни тема не настройва свойство на семейство от шрифтове на свързващи връзки, така че не се сблъскваме с проблеми с наследяването.

Ако имате проблеми с въвеждането на промените, опитайте да поставите една от тези важни марки в края на извлечението си за собственост. Това не е перфектно решение за всеки проблем с наследството, но е много по-често, отколкото бихте си помислили.

Клониране на функции.php

За разлика от основната таблица за стилове, детето ви автоматично ще импортира функциите на родителите си. Това означава, че не е необходимо да копирате някой от PHP кода, за да можете да го активирате в новата си тема. И все пак, ако искате да предефинирате някои от функциите, можете да създадете още функции.php и да напишете в новия си код всички промени.

Като пример имам функция, която анализира няколко JavaScript файла, когато шаблонът се инициира. Това ще премахне всички по-стари версии на скриптовете jQuery и SWFObject, като същевременно добави най-новите версии към wp_head ■ площ.

 // опашката js файлове за функция load mytheme_js () if (is_admin ()) return; wp_deregister_script ( "JQuery '); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ( "JQuery '); wp_deregister_script ( "swfobject '); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ( "swfobject ');  add_action ('init', mytheme_js);

Трябва да отбележа, че ако внасяте код от родителските functions.php, тогава ще трябва да използвате друго име на функция. В противен случай PHP ще издаде фатална грешка и ще трябва да FTP в сървъра, за да поправите грешката.

Работа с файловете с теми

Най-широката категория на тематизиране е изграждането на персонализирани оформления и типове страници. По подразбиране детето ви ще наследи всички файлове на темата на родителите си. Но имате възможност за създаване на нови файлове на дъщерна тема и WP ще ги регистрира като "основен" шаблон.

Например archive.php и index.php се използват съответно за показване на екрана след архивите и началната страница. Ако искате да направите промени, които изискват редактиране на HTML, ще бъдете по-безопасни за клониране на родителските файлове и редактирането им в директорията на темата на детето.

Персонализирани шаблони на страници

Докато говорим за шаблони, искам да представя и част от WordPress функционалност, с която много хора не са запознати. Можете да създавате шаблони за страници и публикации, които да могат да се избират от административния панел при създаването на ново съдържание. Дори ако родителската тема няма новия потребителски шаблон, WordPress ще продължи да използва детето вместо a page.php или single.php.

Първо създайте нов файл с име page-offer.php. Това ще бъде “специална оферта” промоционална страница, която е различна от всички останали. Тук можете да копирате върху оригиналния код на страницата си или дори да създадете темата изцяло от нулата. Единственият код, който трябва да знаем за WordPress за този нов шаблон е настройка на коментар в PHP.

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

Тя става по-полезна, ако можете да комбинирате тези две техники с други файлове с шаблони. Особено категориите и таговете работят добре, като използват собствените си файлове. Също така, ако се свържете с прикачени файлове в съдържанието си, тогава ще искате да разгледате различните възможни шаблони за всеки тип мим. Включих по-долу йерархията на шаблона за просто прикачване към JPEG изображение:

image.php
jpeg.php
image_jpeg.php
attachment.php

Полезни инструменти за WordPress

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

Очевидно е, че е създаден и тестван за най-новата версия на WordPress 3.x. Той добавя връзка към менюто в администратора ви “Теми” раздел за автоматично изграждане на дете, използвайки текущо активната тема. Това е фантастично, ако не искате да се забърквате с FTP и искате да си поиграете с някои нови идеи.

Ако възнамерявате да редактирате тези файлове в административния панел, ще се насладите и на по-ясно подсветване на синтаксиса. Това не се предлага в WordPress по подразбиране, но можете да инсталирате Advanced Code Editor за някаква много подобрена функционалност. Това прави преминаването през PHP блоковете и HTML / CSS много по-управляеми.

Допълнителни ресурси

Заедно с всички съвети в това ръководство искам да споделям набор от важни връзки за разработчиците на теми. Вече има толкова много страхотни статии и безплатни детски теми, които можете да проверите, за да изучите по-задълбочено тази тема. По-долу добавих прекрасна колекция от тези ресурси:

8 Свободни двадесет единадесет детски теми
Онлайн Кодекс на WordPress »Детски теми
Как да изградим WordPress Child тема, използвайки куки и филтри
Няколко думи за детските теми
Как да създавате, променяте и използвате детски теми в WordPress

заключение

Надявам се, че процесът на изграждане на WordPress детски теми е по-ясен за вас, след като прочетете тази статия. Опитах се да обясня как детските теми могат да наследят CSS и PHP шаблони от родител. Освен това е много лесно да се манипулират определени файлове и да се създават ваши собствени уникални теми.