Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development
Code

Распрацоўка вашай першай тэмы на WordPress: Дзень першы

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Developing Your First WordPress Theme.
Developing Your First WordPress Theme: Day 2 of 3

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

Тэмы - гэта велізарная частка таго, што робіць WordPress такім папулярным, якім ён з'яўляецца зараз, і ў першым ўроку мы вывучым пакрокавы працэс, які прывядзе нас да стварэння тэмы WordPress.  Ніякіх папярэдніх ведаў вам не патрабуецца, гэта ідэальнае месца для пачатку шляху, калі вы пачатковец у WordPress!


Тэмы WordPress

Сардэчна запрашаем у першы ўрок, па стварэнні тэмы для WordPress. Тэмы - адна з лепшых рэчаў у WordPress і прастата пошуку, ўстаноўкі і мадыфікацыі з'яўляецца адным з тых фактараў, якія дапамаглі WordPress стаць гігантам сярод CMS, якім ён з'яўляецца сёння - толькі больш за 20 мільёнаў блогаў размешчаны на WordPress.com.

Мільёны людзей, якія выкарыстоўваюць WordPress, верагодна не ведаюць, як ствараць шаблон сайта, не кажучы ўжо аб стварэнні тэмы WordPress. Таксама цалкам верагодна, што многія карыстальнікі WordPress не знаёмыя з такімі тэрмінамі, як «FTP» або «Uploading». Дзякуючы ўбудаванай праграме пошуку тым, карыстальнікам не трэба ведаць тэхнічныя дэталі або аспекты таго, як яны працуюць, або як загрузіць іх на уліковы запіс хостынгу.

Прастата выкарыстання - гэта той аспект, які робіць WordPress надзейнай платформай для вядзення не толькі асабістага блога, але і дзённікаў, а таксама найбуйнейшых блогаў аб тэхналогіях і навінах у Інтэрнэце. Існуюць таксама цэлыя рынкі, якія працуюць над стварэннем тым на WordPress, такія як ThemeForest, аўтары якіх зарабляюць мільёны даляраў кожны год.

Таму мы думаем, што стварэнне тэмы вельмі важны аспект, але вы гэта, напэўна, ужо зразумелі. Калі вы цяпер чытаеце гэты артыкул, то відавочна, што вы хочаце далучыцца да нас і пачаць ствараць свае ўласныя тэмы для асабістага выкарыстання, дзяліцца з іншымі або прадаваць на рынку. Каб ваша тэма была добрай і стала папулярнай, важна вывучыць яе структуру.


Што робіць тэму добрай?

Тэму для WordPress лёгка сабраць, але добрая тэма патрабуе планавання, падрыхтоўкі і вялікіх намаганняў. Многія людзі добра зарабляюць на продажы тым, створаных на WordPress, т.к яны ведаюць, што зробіць тэму якаснай, і яны ведаюць, як укараніць гэтыя веды ў практыку - той талент, які вы хочаце цяпер набыць.

Гэты ўрок арыентаваны на стварэнне з існага HTML / CSS-дызайну і пераўтварэнне яго ў жывую, «дыхаць» тэму WordPress. Хутчэй за ўсё, вам патрэбен будзе дызайн, які вы зможаце пераўтварыць, калі ў вас яго няма, мы дамо просты ўзор, над якім будзем працаваць у другой частцы.

Паколькі вы будзеце распрацоўваць свае тэмы без нашай дапамогі, давайце разгледзім некаторыя рэчы, якія адрозніваюць самыя прадаваныя тэмы ад стандартнай "халявы", якая не праіснуе доўгі час.

Агульны дызайн

Гэты момант трохі складана апісаць, але тэма павінна выглядаць добра распрацаванай і адпавядаць сучасным стандартам дызайну. Я маю на ўвазе, што важна ведаць тэндэнцыі і патрабаванні сучаснага вэб-дызайну. Сёння замена шрыфтоў, градыенты CSS3, празрыстыя блокі і «якія крычаць фоны» - гэта онлайн-мода, але 10 гадоў таму звычайнай з'явай было мець эфект курсора мышкі, аніміраваныя gifs і палымяны тэкст ...

Многія з вас цяпер здрыгануліся?  Вядома, усе гэтыя трукі і тэндэнцыі выходзяць за рамкі нашага ўрока, і вам вырашаць, які дызайн больш прывабнай. Заўсёды будзе добрай ідэяй атрымаць водгукі супольнасці з такіх сайтаў, як Dribbble або Forrst, паколькі яны з'яўляюцца радзімай многіх аўтарытэтных дызайнераў і распрацоўнікаў.

Падтрымка віджэтаў

Агульнае для ўсіх найбольш папулярных тэм - гэта падтрымка віджэтаў Для тых, хто жыў «за печкай» ўсе гэтыя гады; фішкі - гэта невялікія наладжвальныя убудовы, якія часта адлюстроўваюцца на бакавы панэлі або ніжні калантытула тэмы. Віджаты - яшчэ адзін выдатны варыянт паляпшэння на WordPress, якое дапамагае зрабіць яго гэтак папулярным.

Ў многія тэмы ўваходзяць прыстасаваныя віджаты, створаныя адмыслова для кожнай тэмы, WordPress таксама пастаўляецца з наборам ўбудаваных стандартных віджэтаў, такіх як каляндар, акно пошуку або архівы З дапамогай панэлі кіравання можна наладзіць, у якім парадку адлюстровываюцца фішкі, і нават у нейкай вобласці (бакавы панэлі, ніжні калантытула або ў іншым месцы) яны адлюстроўваюцца.

Віджаты- гэта выдатна, таму што яны прапануюць карыстальнікам выдатны спосаб дадаць функцыянальнасць да тэмы без змены радкі кода. Віджаты (у асноўным) выкарыстоўваюць стандартныя класы CSS, то ёсць вам не трэба падрыхтоўваць кожны асобны віджэт, проста неабходна прытрымлівацца некаторых простым правілах агульным для ўсіх іх.

Каментары і падтрымка зваротнай сувязі

Адна з самых распаўсюджаных памылак, якія я бачу ў многіх пачаткоўцаў распрацоўнікаў тэм для WordPress, заключаецца ў тым, што яны забываюць пра зваротную сувязь і сістэму каментароў. Хоць не кожны блог выкарыстоўвае зваротную сувязь, важна разумець, што гэта можа быць перашкодай для многіх блогаў, якія адлюстроўваюць спасылкі зваротнай сувязі.

Для тых, хто не знаёмы ці не зусім ведае, што такое трекбэки, тлумачу, гэта - выдатны спосаб стварыць ўзаемаабмен спасылкамі і пачаць зносіны з іншымі блогерамі. Але яны адрозніваюцца ад каментароў.

Новая ідэя распрацоўшчыкаў падтрымкі трекбэков можа ўключаць проста дэманстрацыю трекбэков, змешаных з каментарамі, аднак гэтага варта пазбягаць, каб не было перагружанасці каментарамі. Карыстальнік, які чытае каментары да паведамлення, павінен пракручваць спіс пинов, трекбэков і каментароў, каб знайсці, што ім трэба, калі гэта лёгка прадухіліць такія паводзіны.

З тых часоў, як з'явілася WordPress 2.7, укладзеныя каментары сталі асноўнай функцыяй. Яны дазваляюць карыстальнікам не толькі пакідаць каментары на паведамленне або старонкі, але таксама адказваць на каментар іншых карыстальнікаў, як на сайтах Tuts + (як паказана вышэй). Укладзеныя каментары трохі складаныя для рэалізацыі, чым большасць іншых функцый, але гэта выдатная функцыя, асабліва, калі яны працуюць правільна і могуць значна павялічыць каштоўнасць тэмы, яны спрыяюць актыўнасці каментароў - што вельмі падабацца блогерам.

Gravatars

Выкарыстанне граватаров - выдатная магчымасць, каб дадаць яе ў любую тэму, я ўпэўнены, што вы, верагодна, знаёмыя з імі, але для тых, хто не знаёмы, я растлумачу; a gravatar - аватар, звязаны з вашым электроннай поштай, - таму кожны раз, калі вы каментуеце блог, ён паказвае аватар, які ў вас усталяваны.

Граватары вельмі простыя ў рэалізацыі, калі яны адразу правільна размешчаны ў вашым дызайне (а не ў апошні момант). Нягледзячы на ​​тое, што некаторыя тэмы працуюць лепш без падтрымкі граватаров, нягледзячы на ​​гэта карыстальнікам мае больш цесную сувязь з блогам, паколькі ён дадае крыху індывідуальнасці да каментароў.

Выбраныя паведамленні і аватары

Калі вы выходзіце на папулярны рынак, такі як ThemeForest, і праглядаеце самыя папулярныя тэмы тыдня, вы заўважыце, што амаль ва ўсіх з іх ёсць нейкая форма для размяшчэння аватара. Давайце паглядзім на адну з самых папулярных тэм, даступных на ThemeForest - Striking:

Кожнае паведамленне мае малюнак з усталяванай шырынёй і вышынёй, якое дзейнічае як аватар. Уключаючы аватар для паведамлення, малюнкі дапамагаюць разбіць тэкст і стаць старонцы больш чытэльным. Вядома, аватары не абавязкова павінны быць такімі, тут прадстаўлены і іншы стыль адлюстравання аватараў для паведамлення, якія выкарыстоўваюцца на нашым сайце-партнёра Nettuts +:

Яшчэ адзін выдатны спосаб адлюстравання паведамленняў - выкарыстоўваць раздзел з выбранымі паведамленнямі. Як правіла, яны часцей сустракаюцца ў тэмах часопіснага стылю (мы не будзем выкарыстоўваць іх у сваёй тэме), але яны надаюць тэме дадатковую функцыянальнасць. Вось прыклад адной з такіх папулярных тэм:

Як вы бачыце, у верхняй частцы тэмы ў нас ёсць вялікае выява з назвай і апісаннем артыкула. Выбраныя артыкулы могуць быць самымі папулярнымі або апошнімі паведамленнямі за пэўны перыяд. Яны часта перагружаюць асабістыя блогі, таму выдатна мець іх як варыянт, а не як абавязковую частку дызайну. Чым больш налад мае тэма, тым вышэй верагоднасць яе папулярнасці.

Прыстасаваныя паведамлення

Вядома, не ўсе, што публікуецца ў блогу, гэта проста паведамленні. Блогеры могуць таксама размяшчаць мультымедыйныя файлы, такія як відэа і аўдыё з Vimeo, YouTube. Выдатным прыкладам такога роду інтэграцыі з'яўляецца адна з апошніх тым пад назвай Gridlocked:

Gridlocked выкарыстоўвае персаналізаванай тып зносінаў (у гэтым выпадку пост-тып - гэта паведамленне Vimeo), які прыгожа ўбудоўвае відэа з vimeo в тему. Некаторыя іншыя параметры падтрымліваюць відэа з YouTube, аўдыяплэер і пост-аватары. Усе яны (з выкарыстаннем адпаведнага карыстацкага тыпу паведамленняў) выдатна глядзяцца па ўсёй шырыні без палёў або дапаўненняў у верхняй частцы макета

Прыстасаваныя тыпы паведамленняў эфектыўныя і лёгка наладжваюцца, блогер проста паказвае тып дадзеных, а тэма прымае гэтую інфармацыю і вырашае, які код яна павінна адлюстроўваць.


Кампаненты тэмы

Я ўпэўнены, што вы, верагодна, ведаеце, што тэмы складаюцца з мноства розных файлаў, кожны з якіх гуляе сваю ролю ў адлюстраванні або функцыянальнасці тэмы. Давайце разгледзім некаторыя з найбольш распаўсюджаных файлаў, якія WordPress распазнае па змаўчанні і з якімі мы будзем мець справу.  Большасць файлаў зразумелыя самі па сабе:

header.php

Звычайна гэты файл ўтрымлівае нашу тэму да, ён таксама гуляе галоўную ролю з функцыяй wp_head (), якая з'яўляецца адным з самых важных прыёмаў у WordPress.

sidebar.php

Неабавязковы файл, які выклікаецца з дапамогай get_sidebar (), вы можаце выкарыстаць гэты файл для стварэння бакавой панэлі, навігацыі або чагосьці яшчэ. Гэта таксама азначае, што вы звычайна ўстаўляеце код, які дазваляе запускаць фішкі, калі ваша тэма гэта дазваляе.

footer.php

Лёгка здагадацца, што гэта яшчэ адно месца, дзе можна ўставіць код або стварыць дадатковую вобласць для віджэтаў. Вядома, вы можаце размясціць фішкі ўсюды, дзе вам зручна, але часцей за ўсё выкарыстоўваюць бакавыя і ніжнія калантытула.

page.php

Выкарыстоўваецца для адлюстравання адной старонкі - не блытаць з паведамленнем.

single.php

Паштовы файл, які выкарыстоўваецца для адлюстравання аднаго паведамленні ў блогу, але вельмі падобна на старонку page.php па кодзе.

index.php

Як вы здагадаліся, гэты файл прарабляе кавалак працы па блогу: адлюстраванне паведамленняў, вынікаў пошуку, паведамленняў пра памылкі і т. д.

functions.php

Файл functions можа быць новым для вас.  Тут захоўваюцца спецыяльныя функцыі тэмы - часцей за ўсё гэта функцыі рэгістрацыі абласцей для віджэтаў

comments.php

Адлюстроўвае цыкл, падобны index.php, які выконвае ітэрацыю каментароў. Гэта таксама ставіцца і да трекбэкам, укладзеным каментарыям і іншых звязаных функцый.

Тэма можа выкарыстоўваць больш ці менш файлаў, пералічаныя намі файлы з'яўляюцца найбольш распаўсюджанымі амаль для кожнай тэмы. Якія файлы выкарыстоўваць - гэта, па сутнасці, рашэнне распрацоўніка - напрыклад, могуць быць vimeo.php, youtube.php і audio.php, якія адлюстроўваюць адпаведныя тыпы паведамленняў, а не ўвесь код, звязаны толькі з page.php або single .php.


Налада тэмы на старонцы параметраў

Панэль кіравання старонкай, якая дазваляе лёгка наладжваць тэму, можа быць выдатным інструментам продажаў. У пераважнай большасці папулярных тым ёсць панэль параметраў, якая рэалізуе любую патрэбнасць блогера ў неабходнасці мадыфікаваць любыя файлы кода або графікі. Гэта выдатны момант для продажу, паколькі не кожны блогер, які выкарыстоўвае новую тэму, будзе ведаць, што # 000000 азначае чорны.

Старонкі з параметрамі могуць быць простым адным макетам старонкі з некалькімі «птушачкамі», тэкставымі абласцямі і слайдэр, або яны могуць быць суцэльнай панэллю адміністратара ўнутры панэлі кіравання, якая змяшчае некалькі старонак для кіравання мноствам розных элементаў тэмы. Як правіла, старонкі параметраў дазваляюць наладжваць такія элементы, як:

  • Колеравая схема
  • Лагатып (тэкст ці малюнак)
  • Iконка
  • Падрабязная інфармацыя аб навінах у сацыяльных сетках (напрыклад, імя карыстальніка Twitter)
  • Розныя варыянты стылю
  • Многае іншае

Немагчыма пералічыць усе параметры, так як кожная тэма адрозніваецца ад папярэдняй і патрабуе розных дадатковых налад. Хоць для невялікай тэмы можа не спатрэбіцца поўнафункцыянальная старонка параметраў, не забывайце, што большасць блогераў не з'яўляюцца тэхнічна падкаванымі спецыялістамі.


На наступным тыдні

На наступным тыдні мы пяройдзем да рэдактара кода і пачнем працу над асновай персанальнай тэмай WordPress. Больш чым вітаецца - нават рэкамендуецца выкарыстоўваць свой уласны макет, які вы хочаце пераўтварыць у тэму WordPress, але не хвалюйцеся, калі ў вас яго няма, паколькі вам будзе дадзены просты макет.

На наступным тыдні мы разгледзім асновы HTML, асновы PHP і, у ідэале, асновы CSS. Вам не трэба нічога ведаць пра тэмы для WordPress, паколькі мы будзем пачынаць з нуля!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.