V tomto článku sa dozviete, ako pridať vlastné nastavenie témy pomocou vstavaných funkcií WordPress, konkrétne Theme Customizer. Výkonný nástroj zabudovaný do jadra WP na prispôsobenie tém.

Predhovor

Nedávno som dokončil vytváranie layoutu pre zákazníka a bolo treba ho nainštalovať na WP. Urobil som predbežné práce, vytvoril som základnú kostru témy a rozhodol som sa ju otestovať na lokálnom serveri. A potom som si všimol zaujímavú položku v administrátorskej ponuke „Konfigurovať“. Áno, tento bod som si všimol už skôr a dokonca som videl, ako sa uplatňuje v iných témach, ale sám som bol k nemu skeptický. Potom sa však vkradla myšlienka, čo urobiť nastavenia natívnymi, t.j. zabudovaný do jadra WordPress nie je taký zlý nápad. A potom som začal chápať problém.

Vlastne všetko, čo som sa dozvedel k téme, ktorú som popísal v článku. Kto má záujem prečítať si hneď o výhodách / nevýhodách a mojom názore, choďte prosím na koniec článku resp.

Akcia!

Pokiaľ teda pri aktivácii témy nemáte položku ponuky „Vzhľad - Prispôsobiť“, musíte ju pridať. Toto sa deje takto:

Za týmto účelom vytvorte a otvorte súbor functions.php v koreňovom adresári témy a pridajte tam nasledujúci kód:

Add_action ("admin_menu", function () (add_theme_page ("Customize", "Customize", "edit_theme_options", "customize.php");));

Dôležité! Celý kód musí byť medzi... To ukáže serveru, že pracujeme s PHP.

Vytvorte sekciu

Teraz musíme pridať naše nastavenia. To sa deje v 2 priechodoch. Napínali si mozog. Napínajme ešte raz: pridajte sekciu nastavení.

Súbor PHP, ktorý sme vytvorili skôr, pridajte nasledujúci kód:

Add_action ("customize_register", function ($ customizer) ($ customizer-\u003e add_section ("example_section_one", array ("title" \u003d\u003e "Moje nastavenia", "description" \u003d\u003e "Vzorová časť", "priorita" \u003d\u003e 11 ;));));

Vytvorili sme háčik a pripevnili sme k nemu funkciu. Metóda add_section () iba pridá sekciu nastavení. Trvá to 2 parametre:

$ args - pole argumentov

názov - ako bude sekcia pomenovaná

description - popis sekcie (voliteľné)

Pridanie nastavenia do sekcie

Pridávanie prebieha v 2 etapách. Najskôr vytvoríme samotné nastavenia a potom ovládací prvok, ktorý sa zobrazí v tejto časti.

Ak chcete pridať nastavenia Poďme tento kód napísať do functions.php hneď za metódou add_section (), ale do háku customize_register:

$ customizer-\u003e add_setting ("example_textbox", array ("default" \u003d\u003e "Web stránky"));

Metóda add_setting () má dva parametre:

$ id - jedinečný identifikátor

$ args - pole argumentov

V poli $ args môže byť niekoľko pozícií, a to:

default - predvolená hodnota nastavenia

typ - typ nastavenia

schopnosť - na zmenu tohto parametra sú potrebné používateľské práva. Tých. rôzne skupiny používateľov môžu vidieť rôzne parametre. Super! (nie je potrebné)

theme_supports - označuje, že aktuálna téma by mala podporovať funkciu popísanú v parametri (voliteľné)

transport - ako sa zmena nastavenia zobrazí v náhľadovom okne. Obnovenie stránky alebo AJAX. V predvolenom nastavení sa stránka obnovuje zakaždým, keď sa aktualizuje nastavenie, ale ak máte záujem, môžem vám povedať, ako to implementovať v AJAX bez opätovného načítania stránky. Vaše želania napíšte do komentárov.

sanitize_callback - názov funkcie na filtrovanie vstupných údajov v databáze

sanitize_js_callback - názov funkcie na filtrovanie výstupu z databázy

Teraz pridať kontrolu k nastaveniam... Ďalej pridávame nasledujúci kód:

$ customizer-\u003e add_control ("example_textbox", array ("label" \u003d\u003e "Prispôsobenie textu", "oddiel" \u003d\u003e "example_section_one", "type" \u003d\u003e "text",));

Teraz môžeme vidieť naše nastavenie.

// obrázok

Metóda add_control () má dva parametre:

$ id - jedinečný identifikátor

$ args - pole argumentov

V poli $ args môže byť niekoľko pozícií, a to:

štítok - názov nastavenia

popis - popis

sekcia - sekcia, kde bude umiestnené ovládanie a nastavenie

typ - typ kontroly (predvolené: text)

možnosti - pre typ so začiarkavacími políčkami určuje zoznam hodnôt na výber

priorita - aký účet bude sekcia umiestnená alebo jeho priorita (štandardne 10)

Ale nepriniesli sme nastavenie témy. Poďme na to.

Zobrazujú sa nastavenia v téme

Ak chcete zobraziť nastavenia v téme, musíte pridať jej identifikátor na správne miesto. Je to ľahké, stačí pridať konštrukciu:

Get_theme_mod () má dva argumenty ^

$ name - názov nastavenia, ktoré sa má získať

$ default je predvolená hodnota. Zobrazí sa, ak nastavenie neexistuje

Iné typy ovládacích prvkov

CheackBox (začiarkavacie políčko)

Umožňuje povoliť alebo zakázať čokoľvek.

$ customizer-\u003e add_control ("hide_text", array ("type" \u003d\u003e "checkbox", "label" \u003d\u003e "Skryť text", "oddiel" \u003d\u003e "example_section_one",));

Téma sa zobrazuje nasledovne:

Ak ste teraz nezačiarkli toto políčko, tento text sa nezobrazí. Užitočné, ak sa potrebujete skryť. čokoľvek.

Rádio (prepínacia skupina)

Umožňuje vám vybrať ľubovoľný 1 parameter zo zoznamu.

$ customizer-\u003e add_setting (" rádio", pole (" predvolené "\u003d\u003e" item_1 ")); $ customizer-\u003e add_control (" rádio", array (" type "\u003d\u003e" radio "," label "\u003d\u003e" Príklad prepínačov "," section "\u003d\u003e" example_section_one "," choices "\u003d\u003e array (" item_1 "\u003d\u003e" item_1 "," item_2 " "\u003d\u003e" item_2 "," item_3 "\u003d\u003e" item_3 ",),));

Vyberte (Zoznam)

Rozbaľovací zoznam.

$ customizer-\u003e add_setting ("select", array ("default" \u003d\u003e "WordPress")); $ customizer-\u003e add_control ("select", array ("type" \u003d\u003e "select", "label" \u003d\u003e "Kto sme?", "section" \u003d\u003e "example_section_one", "choices" \u003d\u003e pole ("Ľudia" "\u003d\u003e" Ľudia "," Stachanovčania "\u003d\u003e" Stachanovčania "," Tvrdí chlapi "\u003d\u003e" Tvrdí chlapi "," UFO "\u003d\u003e" UFO ",),));

Rozbaľovací zoznam stránok

Vytvorí rozbaľovací zoznam všetkých stránok na webe. Stránky generuje samotný WordPress.

$ customizer-\u003e add_setting ("page-setting", array ("sanitize_callback" \u003d\u003e "example_sanitize_integer")); $ customizer-\u003e add_control ("page-setting", array ("type" \u003d\u003e "dropdown-pages", "label" \u003d\u003e "Select a page:", "section" \u003d\u003e "example_section_one",));

Paleta

Pridá výber farieb. Napríklad pre pozadie.

$ customizer-\u003e add_setting ("color-setting", array ("default" \u003d\u003e "# 000000", "sanitize_callback" \u003d\u003e "sanitize_hex_color",)); $ customizer-\u003e add_control (new WP_Customize_Color_Control ($ customizer, "color-setting", array ("label" \u003d\u003e "Color setting", "section" \u003d\u003e "example_section_one", "settings" \u003d\u003e "color-setting", )));

Umožňuje vám nahrávať súbory pomocou štandardného nahrávača WP. Funguje prostredníctvom triedy WP_Customize_Upload_Control. Buď opatrný.

$ customizer-\u003e add_setting ("file-upload"); $ customizer-\u003e add_control (new WP_Customize_Upload_Control ($ customizer, "file-upload", array ("label" \u003d\u003e "File upload", "section" \u003d\u003e "example_section_one", "settings" \u003d\u003e "file-upload") ));

Rovnako ako pri sťahovaní súborov sa na povolenia súborov kladú iba obmedzenia. Akceptované sú iba obrázky. Pohodlne. ak je potrebné načítať iba obrázky. Napríklad pre pozadie. Funguje to rovnako ako v príklade vyššie, používa sa iba trieda WP_Customize_Image_Control.

$ wp_customize-\u003e add_setting ("img-upload"); $ wp_customize-\u003e add_control (new WP_Customize_Image_Control ($ wp_customize, "img-upload", array ("label" \u003d\u003e "Image upload", "section" \u003d\u003e "example_section_one", "settings" \u003d\u003e "img-upload") ));

To nie je všetko

Ak si myslíte, že tu je obmedzený počet zabudovaných nastavení, mýlite sa. Je v nich veľa zaujímavých vecí: pridanie vlastných nastavení, aktualizácia stránky cez AJAX. Môžete kopať sami alebo napísať do komentárov, ak chcete pokračovať.

Klady a zápory

Teraz si zhrňme a zvážme úskalia a výhody tejto metódy.

Klady:

• Nastavenia sú zabudované do jadra WordPressu. To znamená, že keď prenesiete web alebo ho aktualizujete na novú verziu, okamžite budeme mať nastavenia bez sťahovania aktualizácií rámca a nekompatibilít
• Veľmi ľahko sa pridáva. Na doplnenie témy sú potrebné základné znalosti WP a PHP. Oveľa jednoduchšie ako pripojenie riešení tretích strán
• Pridávanie vlastných typov nastavení. Môžete rozšíriť funkčnosť. Existuje takáto možnosť, ktorá je veľmi povzbudivá.
• Zmeny sa okamžite zobrazia v okne ukážky.

Minusy:

• Žiadna podpora vizuálneho editora pre text. Toto je vážna nevýhoda pre zložité projekty.
• Nedostatok typov nastavení. Veľa vecí chýba, ale rád by som. Napríklad ten istý posúvač s neobmedzeným počtom snímok. Čiastočne vyriešené možnosťou pridať si vlastnú kontrolu. Ale to sú zbytočné pohyby tela.
• Žiadny import / export. Ak chcete tému preinštalovať. potom budú musieť byť všetky nastavenia znova zadané ručne! Čo je mimoriadne nepohodlné.
• Máte obmedzenú slobodu umiestňovať bloky. Jednoduchosť má svoju cenu. Blok s varovaním alebo informáciou nemôžete umiestniť kamkoľvek, všetko je v stanovenom formáte. Pre niekoho to nie je dôležité, pre iného kritické. Každý dosiahne sám seba.

Záver

Pokiaľ ide o môj názor, myslím si, že Theme Customizer je zatiaľ trochu vlhký. Áno. má veľký potenciál a som si istý, že sa v budúcnosti dočkáme mnohých rozšírení a vylepšení. Teraz však nebude pracovať na tom, aby sa na ňom vyvíjali zložité projekty.

Ak robíte jednoduchú tému alebo cvičíte, venujte pozornosť tomuto „čipovému“ WP. Ak už s niečím vážne pracujete a myslíte si, že to stojí za to, hýbe sa to alebo nie, potom je lepšie nie. Ešte nie. Ale určite stojí za to vidieť, čo je to za „beštiu“. Koniec koncov, má veľký potenciál.

Ale ako sa hovorí, každý sa rozhoduje sám podľa svojich vlastných skúseností a zložitosti projektov. Na tomto sa s vami lúčim až do nasledujúceho článku. Všetko najlepšie. A možno bude trpezlivosť s tebou pri tvrdom učení WordPressu.

Toto je domáci sprievodca pre WordPress Themes (Templates). Základné informácie sú prevzaté z oficiálneho manuálu a z vlastnej skúsenosti.

Čo je to téma?

Téma WordPress je sada súborov css, js, php, ktoré v spojení s WordPress a zásuvnými modulmi zobrazujú informácie z databázy na obrazovke v krásnej a pohodlnej podobe (dizajn). No, alebo v škaredom a nepohodlnom, záleží na tom, ktorú tému si vyberiete ... V iných enginoch sa téme hovorí aj „šablóna“, vo WordPresse je však zvykom povedať presne tému - tému, a nie šablónu - šablónu. Aj keď sú obe v podstate rovnaké ...

Ak teda zmeníte tému, stránka zmení svoj vzhľad, vyzerá inak. Na WordPress.org nájdete tisíce bezplatných tém. Napriek širokej škále tém sa mnoho ľudí rozhodlo vytvoriť svoje vlastné témy. Je to primárne kvôli tomu, že nie je ťažké vytvoriť jednoduchú tému.

Povinné súbory

Na vytvorenie motívu sú potrebné iba dva súbory:

1. index.php - hlavný súbor témy, zodpovedný za zobrazovanie obsahu
2. style.css - hlavný súbor štýlov zodpovedný za štýly css

Žiadna téma však v skutočnosti pozostáva iba z dvoch súborov. Je ich viac: PHP, jazykové súbory, CSS a JS súbory, textové súbory. Téma sa začína dvoma súbormi, ktoré sa potom pohodlnejšie rozšíria pridaním súborov, ako napríklad:

• header.php - zodpovedný za zobrazenie hlavičky
• footer.php - zodpovedný za zobrazenie päty
• sidebar.php - zodpovedný za zobrazenie bočného panela
• page.php - zodpovedný za zobrazenie samostatnej stránky (príspevku)
• atď. pozri kompletný zoznam.

Funkcie témy

Možnosti témy sú v podstate nekonečné, pretože tam môžete plnohodnotne využívať PHP. ALE! Táto téma je určená na to, aby zobrazovala obsah stránky určitým spôsobom, a nie na pridávaní funkcií stránky. Preto je zvykom obmedziť možnosti témy na tých, ktorí zodpovedajú za vzhľad a všetky ďalšie funkcie: hlasovanie, hodnotenie, presmerovanie, SEO atď. je zvykom vyberať doplnky ...

Téma teda môže:

• Zodpovedá za zobrazovanie obsahu stránok pre rôzne typy zariadení: monitory a smartphony. Hovorí sa im responzívne témy. Tiež je možné opraviť témy, jedno stĺpcové, dvojstĺpcové atď .;
• Téma môže zobraziť akýkoľvek obsah;
• Môže určiť, aký obsah sa bude zobrazovať rôznym používateľom;
• Môže použiť akékoľvek dizajnové prvky (obrázky, videá).

Rovnako ako u iných webových stránok, ani pri tejto téme nejde iba o farebnú schému, rozloženie a pekný obrázok. Skutočne kvalitné témy sú tiež veľmi funkčné. Funkčnosť témy spočíva v jej flexibilnej konfigurácii. Tých. nepridáva na web nič nové, ale je dokonale prispôsobiteľné vkusu majiteľa. Napríklad: nastaví sa obrázok na pozadí, zmenia sa farby prvkov, nakonfigurujú sa ponuky a bloky obsahu (widgety).

V čom sa líši téma od doplnku?

Z pohľadu kódu nemôžete povedať nič - v téme si môžete vytvoriť plnohodnotný plugin. Ale z pohľadu logiky - všetci! Úlohou pluginu je pridať na web niečo nové, napríklad pridať prieskum. Úlohou témy je zobraziť obsah vrátane tohto prieskumu ...

Téma je teda zodpovedná za zobrazovanie obsahu na stránke a doplnok je potrebný na implementáciu funkcií stránky.

Samotnej téme nikdy nepridávajte funkčnosť, pokiaľ na to nie je závažný dôvod. Ak to urobíte, pri zmene témy sa s ňou stratí funkčnosť. Napríklad váš motív obsahuje skvelú fotogalériu. A ak zmeníte tému, potom sa táto skvelá fotogaléria stratí ...

Vydali sme novú knihu „Content Marketing on Social Media: How to get up to the heads of the Subscribers and Fall in love with your Brand“.

Prihlásiť sa na odber

Fungovanie detských tém („dcér“) je založené na ich vzťahu k rodičom („rodičom“). Je dôležité vziať do úvahy, že bezplatné a platené témy sú pôvodne rodičmi, preto dcéra kopíruje ich parametre a vlastnosti a tiež dostáva štandardnú sadu svojich funkcií. V budúcnosti bude možné súbor týchto možností rozšíriť, berúc do úvahy potreby konkrétneho internetového zdroja.

Ak sa dotkneme terminológie, hovoríme o špeciálnej téme, ktorá nadobúda význam iného, \u200b\u200bktorý vystupuje ako rodič. Prečo sú vytvorené? Upraviť existujúce témy WordPress a tým zvýšiť ich počet.

Aký je rozdiel medzi „dcérou“

Podradená téma Wordpressu otvára možnosť vykonať potrebné zmeny a úpravy. Ďalej sa pozrieme na to, ako ho vytvoriť, ale predtým si zanalyzujeme jeho kľúčové rozdiely:

1. Zmeny vykonané rodičom sa nedotknú dieťaťa. Z toho vyplýva, že po vývoji sú na sebe nezávislí.
2. Derivát funguje, iba ak je nainštalovaný nadradený modul a k jeho aktivácii dôjde neskôr.
3. Dcérske spoločnosti sú viazané iba na svoju vlastnú základňu a nie sú navzájom prepojené.

Je pohodlné pracovať?

Podradená téma WordPress je vynikajúci nápad s mnohými výhodami. Osobne by sme ho odporúčali ako štandardné balenie s prémiovými produktmi. Vymenujme len niektoré z výhod:

1. Automaticky uložia vaše úpravy. Vďaka tomu môžete vykonávať úpravy priamo v kóde bez rizika straty alebo straty nastavení počas aktualizácie.
2. Spolupráca s nimi je vynikajúcou prípravou na prechod na písanie hlavného kódu pre nadradené varianty.
3. Pracovný postup je vylepšený. Vďaka jedinému tematickému rámci, ktorý máte k dispozícii, môžete vytvárať stránky s rôznou zložitosťou a funkčnosťou.

Pretože toto je pokračovanie rodiča, množina funkcií a funkcií je tu rovnaká. Hlavné komponenty:

1. Adresár (priečinok / umiestnenie súborových komponentov).
2. „Style.css“, ktorý obsahuje hlavné a ďalšie vlastnosti.
3. „Functions.php“, kde sú definované funkcie.

Pri pridávaní šablón neexistujú žiadne obmedzenia, ale vymenované komponenty sú v každom povinné.

Fungovanie

„Dcéry“ sú lokalizované v samostatnom priečinku a môžu sa pochváliť samostatnými súbormi „functions.php“ a „style.css“. Vždy je možné zapísať pomocné súbory, ale táto dvojica je zodpovedná za správne fungovanie - bez problémov a problémov.

Pri správnom použití týchto formátov môžete upravovať takmer všetky počiatočné parametre vrátane štýlu, jednotlivých položiek rozložení, skriptov a ďalších.

Tematické zariadenie je podobné editorským vrstvám editorov fotografií. Ak používateľ navštívi váš internetový zdroj, otvorí sa pred ním „dcéra“ a potom sa z rodiča načítajú už chýbajúce možnosti a štýly. Väčšina kódu je nakoniec odovzdaná rodičovi, ale pred použitím ho treba upraviť tak, aby odrážal nastavenie dieťaťa.

Ako tvoriť

Najskôr skontrolujte, či máte všetko, čo potrebujete. Menovite prístup k FTP alebo správcovi súborov, otvorený prístup k samotnému ovládaciemu panelu Wordpress. Tak poďme na to.

Krok 1. Vytváranie podradenej témy WordPress

Toto je dosť priamy proces. Ak budete postupovať podľa pokynov podrobne, každý používateľ si ich osvojí.

Najskôr vytvorte priečinok pre dcéru v štandardnom adresári. Ak chcete mať adresár v poriadku a usporiadať obsah, je lepšie priečinok pomenovať ako „Názov rodiča + podradený koniec“. Pre pohodlie môžete pridať názov projektu, pre ktorý vytvárame tému. Hlavná vec je, že názov adresára nemá medzery, inak by to mohlo viesť k chybám. Správca súborov alebo klient FTP vám pomôžu vytvoriť nový priečinok. FTP klient ako FileZilla sa dnes osvedčil.

Vezmime si napríklad „Dvadsať sedemnásť“, ktoré je známe mnohým. Najradšej pracujem so správcom súborov, takže moja cesta k vytvorenému priečinku vyzerá takto:

Robíme nasledovné:

Iste ste presvedčení, že tvorba je ľahký proces. Je len nevyhnutné dôsledne dodržiavať pokyny a pracovať so správnym prístupom.

Krok 2. Nastavenie

Ak chcete začať, upravovať, dopĺňať, prispôsobovať sa požiadavkám a požiadavkám vášho „dcérskeho“ webu, musíte správne nakonfigurovať nastavenia. Pozrime sa na to v poriadku.

1. Najprv musíte prispôsobiť vzhľad.

Za týmto účelom vykonáme úpravy súboru „custom.css“, ktorý sa nachádza v adresári. To je možné vykonať prostredníctvom klienta FTP, bežného textového editora, správcu súborov alebo špeciálneho editora Wordpress (nájdete ho otvorením „Vzhľadu“, potom „Editora“). Tu budete potrebovať aspoň minimálne znalosti o pravidlách používania CSS, ako aj zručnosť v kontrole prvkov webu pomocou prehľadávača. Napríklad na zmenu farby pozadia v súbore „style.css“ napíšeme nasledujúce pravidlo CSS:

Nasledujúci obrázok ukazuje, ako sa po vykonaní úprav zmení vzhľad webu. Pozadie sa zmenilo na svetlo zelené:

Takto môžete upravovať akékoľvek existujúce prvky na webe.

2. Práca s funkciami.

Používanie a práca s „dcérami“ tiež poskytuje takú výhodu, ako je schopnosť udržiavať dva nezávislé „functions.php“. Pripomeňme, že tieto súbory sa používajú na odstránenie starých a pridanie nových funkcií. Ak tam sú, nemusíte sa obávať bezpečnosti alebo problémov pri práci s dokumentom. Aj keď je základňa obnovená, zostane nezmenená.

Pre pridanie novej možnosti je do súboru pridaný nový PHP kód. Napríklad nižšie uvedený kód odstráni možnosť vyhľadávania WordPress.

Špeciálne služby na uľahčenie práce vývojára

Na uľahčenie procesu vytvárania môžete použiť množstvo špeciálnych doplnkov. Knižnica WordPress poskytuje širokú škálu doplnkov, z ktorých väčšina je zadarmo. Používanie doplnkov výrazne zjednodušuje proces vývoja. Pozrime sa na najobľúbenejšie doplnky.

1. Dieťa Themify.

Je to najjednoduchší a najľahšie použiteľný doplnok s intuitívnym rozhraním. Mnoho nastavení je možné vykonať kliknutím na tlačidlo.

2. Konfigurácia detskej témy.

Tu môžete tiež vytvoriť „dcéru“ a trvá to iba pár kliknutí. Editor CSS je dostatočne výkonný na to, aby umožňoval pokročilé prispôsobenie. Plugin automaticky identifikuje kľúčové pravidlá CSS a pri úprave ich neovplyvňuje.

3._štítek s témou dieťaťa.

Tu sú pripravené šablóny na formovanie „dcér“. Šablóna má jednoduchý názov „_child“ - a je navrhnutá špeciálne na uľahčenie práce. Šablóna ponúka intuitívnu tému, všetko, čo musíte urobiť, je poskytnúť odkaz na „rodiča“. Šablóna tohto typu vám umožňuje vytvárať profesionálne možnosti - už boli vytvorené 2 pripravené súbory, štandardné „functions.php“ a „style.css“.

Prvý z nich má špeciálnu funkciu s názvom „aa_enqueue_styles ()“. Táto možnosť vám umožňuje vytvoriť rad šablón štýlov s rodičmi a potomkami detí. Výsledkom je, že najskôr sa určuje štýl druhého.

Väčšina vývojárov zhromažďuje tieto tabuľky v CSS, ale to viac škodí ako pomáha. Prehliadač začne načítavať web dlho, pretože je potrebné načítať štýly najskôr z „rodiča“, až potom z derivácie. Ak šablóny štýlov vložíte osobitne, úloha prehliadača bude ľahšia a rýchlosť načítania sa zvýši.

Tu je kód na pridanie tejto možnosti:

Druhý súbor má základnú hlavičku obsahujúcu konkrétne informácie. Tieto informácie umožňujú aplikácii WordPress rozpoznať ju ako šablónu štýlov „dcéra“. Preto je obzvlášť dôležité napísať kód pre „style.css“:

Zhrňme si to

Nezáleží na úrovni programovacích schopností, ako ani na skúsenostiach s Wordpressom. Vytvorenie detskej témy WordPress je ľahké a nehrozí riziko odstránenia nastavení po ukončení. Napísaním malého kódu alebo vykonaním zmien v už napísanom a vykonaním jednoduchých akcií s adresárom môžete zmeniť svoj web. Hlavná vec je postupovať podľa pokynov, postupne prechádzať z jedného bodu do druhého. Nezabudnite na toto: ak existujú aktualizácie pre „rodiča“, „dcéra“ sa nezmení, toto pravidlo platí pre zmeny v obsahu, nastaveniach atď.

Experimentujte, vyskúšajte rôzne možnosti a hľadajte pre seba tú najlepšiu.

Vzhľadom na to, že väčšina stránok, ktoré vyvíjam, je vytváraná pomocou CMS Wordpress a musí neustále čeliť netriviálnym úlohám, rozhodol som sa s vami podeliť o skúsenosti s používaním rôznych doplnkov. Bezplatné aj platené a pokúsim sa držať tohto formátu: jeden článok - jeden doplnok. Pokúsim sa zvážiť iba skutočne pozoruhodný vývoj a vo svojom prvom príbehu vám poviem o OptionTree - vynikajúcom, podľa môjho názoru, riešení pre vytvorenie stránky s vlastným nastavením stránok.

Čo sú to vlastné nastavenia?

Šablóny (témy) Wordpress, ktoré môžeme použiť na našom webe, nám veľmi často umožňujú konfigurovať niektoré ďalšie parametre, napríklad farbu nadpisov. Všetky platené témy, ktoré som musel použiť, výrazne rozširujú funkčnosť administračného panelu vďaka samostatnému rozhraniu. Ďalej uvádzam príklad takého rozšírenia, viď.

Keď sa vytvorí jedinečný web (jedinečnosťou, myslím tým web, ktorý používa šablónu s jedinečným dizajnom a funkčnosťou vyvinutou špeciálne pre klienta), potom sa často vyžaduje, aby sa vytvorila príležitosť pre správcov zmeniť určité parametre. Takmer vždy je potrebné dať možnosť zmeniť súbor s logom, niektoré prvky na domovskej stránke, ikony sociálnych médií, farbu pozadia v päte stránky atď. Toto je presne príležitosť pre vývojárov, ktorú poskytuje doplnok OptionTree, ktorý je možné bezplatne stiahnuť z oficiálneho webu Wordpress.

Po inštalácii ...

Inštaláciou a aktiváciou doplnku získame podmienečne dve časti: jednu pre vývojárov webov a druhú pre používateľov. Prvá časť je dostupná z položky ponuky „OptionTree“ - „Nastavenia“, ktorá sa objaví po aktivácii pluginu vľavo v administratívnej časti Wordpressu. Pokojne tam kliknite a získate jedinečné rozhranie pre formovanie sady vlastných polí, ktoré budú používateľom k dispozícii v druhej časti pluginu - „Vzhľad“ - „Možnosti témy“.

Možnosti témy Tvorca používateľského rozhrania

Ako teda vytvoriť prispôsobenia? Samostatným nastavením budem mať na mysli určité pole, ktoré bude mať používateľ, správca stránky k dispozícii na úpravy. UI Builder umožňuje vytvárať sekcie alebo sekcie, nazvime to lepšie, v rámci ktorých sa budú nachádzať určité nastavenia. Na vyššie uvedenom obrázku som uviedol príklad nastavení, ktorý sa skladá z dvoch častí: „Všeobecné“ a „Služby“. Tých. rozumie sa, že v sekcii „Všeobecné“ budú umiestnené niektoré všeobecné nastavenia stránok a v sekcii „Služby“ - konkrétne pre stránku služieb. Pozrime sa, ako sa jednotlivé sekcie pozerajú na používateľa. Prejdite na časti „Vzhľad“ - „Možnosti témy“ a - hurá! Tu je stránka nastavení!

Vľavo vidíme sekcie, ktoré sa dajú prepínať, vpravo - súbor nastavení vo vnútri sekcie. Sekcie sa vytvárajú pomocou nástroja Theme Options UI Builder kliknutím na tlačidlo „Pridať sekciu“ a pre sekciu musíte zadať jej názov a jedinečný identifikátor. Vytvorme sekciu „Rozšírené“ a pridáme do nej nejaké nastavenia.

Všetky zmeny sa samozrejme vykonajú kliknutím na tlačidlo „Uložiť zmeny“. Teraz pridajme prispôsobenie, napríklad farbu nadpisov. Kliknite na možnosť „Pridať nastavenie“ a pozrite sa, ktorá sada polí je k dispozícii na výber. Môžeme povedať obrovský! Vyberte možnosť „Colorpicker“ a zadajte názov a jedinečný identifikátor. Pri identifikátoroch buďte opatrní, vďaka jedinečnému identifikátoru potom môžeme v kóde šablóny získať prístup k hodnote tohto poľa.

Pozrime sa, čo má teraz používateľ k dispozícii na úpravy: je tu nová sekcia a nové nastavenie, pole „Farba hlavičiek“, ktoré môže používateľ teraz pohodlne upravovať. Pozrite sa, nebudem sa venovať úplnému zoznamu polí, ktoré sú k dispozícii na vytvorenie. Je to samozrejme v dokumentácii k doplnkom a na oficiálnych webových stránkach vývojárov. Ak aj napriek tomu niektoré polia vzbudia váš záujem - napíšte, aktualizujem túto publikáciu popisom jedného alebo druhého typu navrhovaných polí. V zásade je jeho význam zrejmý z názvu poľa, ale opakujem, ak vám niečo robí ťažkosti - kľudne ma kontaktujte, určite vysvetlím.

Úprava šablóny

Teraz musíte ako vývojári vykonať zmeny v šablóne webu, aby ste získali hodnotu jedného alebo druhého poľa, ktoré používateľ zadal alebo vybral. Je za to zodpovedná určitá funkcia, príklad použitia, ktorý pre našu voľbu farieb nadpisov uvádzam nižšie. Okrem toho poznamenávam, že v tomto príklade môže byť obrovská paleta možností použitia tohto doplnku, v príklade, ktorý uvádzam, sa v hlavičkovej časti dokumentu zobrazí štýl hlavičiek, teraz sa zobrazí štýl hlavičiek, konkrétne ich farba, v závislosti od hodnoty poľa h_color.

Tých. za zobrazenie hodnoty poľa je zodpovedná funkcia ot_get_option ($ option_id, $ default), ktorej parametrami sú identifikátor poľa, ktorý sme si ako vývojári sami nastavili, v našom prípade zobrazíme hodnotu poľa h_color. Druhým parametrom funkcie je výstupný formát, dovoľte mi venovať sa tomu trochu podrobnejšie. Napríklad musíme urobiť voľbu, ktorá umožní používateľovi vytvoriť si vlastnú sadu ikon pre sociálne siete. Použijeme na to pole Položka zoznamu (zobrazené nižšie).

Toto pole umožňuje vytvoriť množinu opakujúcich sa polí, keď môže užívateľ pridať rovnaké parametre v rámci jedného nastavenia. Je to trochu nepochopiteľné, pokúsim sa vysvetliť a potom v kóde ukázať, ako to funguje. V našom prípade priradíme identifikátor social_icons k poli Položka zoznamu a do tohto poľa (všimnite si, že je tu ešte jedno tlačidlo „Pridať nastavenie“) pridať dve polia: súbor s ikonami a odkaz. Typ prvého poľa bude Nahrať, typ druhého - Text. Identifikátor prvého poľa bude icon_image, identifikátor druhého poľa je icon_link.

Čo získa používateľ? Teraz bude môcť pridať niekoľko ikon na sociálnych sieťach kliknutím na tlačidlo „Pridať nové“ na stránke nastavení. Ďalej upozorňujeme, že počet takýchto nastavení je teraz neobmedzený a závisí iba od používateľa.

Ak chcete teraz v šablóne zobraziť také zložité pole, musíte použiť mierne odlišný výstupný formát, nižšie je v takom prípade časť kódu PHP. Pokúsim sa vysvetliť, čo sa deje v komentároch.

"; // zobraziť polia v šablóne)))?\u003e

Vo väzbe

Existuje naozaj veľa typov polí, ktoré môžete použiť, vývojári doplnkov sa snažili čo najlepšie: jedná sa o výber dátumu, výber farieb, môžete vytvárať galérie obrázkov, prepínače atď. Kombináciou takýchto polí a ich správnym zobrazením v šablóne poskytne vývojár webu používateľovi pohodlné rozhranie na zmenu určitých nastavení. Podotýkam, že na jednom z posledných webov som musel vytvoriť viac ako 50 rôznych polí, aby klienti mohli meniť farby hlavičiek, textov na hlavnej stránke webu, meniť počet noviniek zobrazovaných na stránke, upravovať kontakty a mapu cesty a mnoho ďalších.

Vytvorenie vlastnej témy WordPress je skvelý spôsob, ako dať svojmu blogu alebo inej stránke založenej na WordPress osobný kontakt. Ani najatraktívnejšia a najkrajšia téma však nebude ideálna, ak budete musieť ísť pod kapotu a upravovať jej PHP a HTML kód, kedykoľvek budete potrebovať mierne upraviť jeho aspekty. Najmä ak to nemusíte urobiť vy, ale váš klient. Našťastie vytvorenie stránky s nastaveniami pre vašu tému WordPress nie je také ťažké a po prečítaní tejto príručky by ste mali byť schopní bez problémov vytvoriť vlastnú stránku s nastaveniami.

Krok 1. Zistite, aké nastavenia potrebujeme.

Všetko začína potrebami: ak chcete vytvoriť prehľadnú a užitočnú stránku s nastaveniami, musíte definovať, čo je potrebné zmeniť, a ponechať všetky ostatné rovnaké. Každé nové nastavenie, ktoré pridáte do ponuky správcu, zvyšuje zložitosť používateľského rozhrania - riskujete, že sa téma bude ťažko používať. To je dôvod, prečo je najlepšie byť opatrný a starostlivo vyberať možnosti, ktoré sa budú často meniť, a zahodiť nastavenia, ktoré sa raz zmenia, čo sa dá ľahko urobiť úpravou vhodných súborov tém.

Nezabudnite ani na ďalšiu otázku: „Kto zmení tieto nastavenia?“ Ak používateľ ovláda WordPress a PHP, bolo by rozumné očakávať, že bude môcť do témy vložiť nezávisle kód Google Analytics, ale nemali by ste to vyžadovať od grafického dizajnéra, nieto od autorov, ktorí nepotrebujú znalosť HTML alebo CSS. ...

Medzi všeobecné nápady na presun komponentov do nastavení témy patria:

• Sledovací kód Google Analytics
• Počet bočných panelov a ich umiestnenie (vľavo, vpravo, možno dokonca hore a dole)
• Šírka stránky
• Obsah päty
• Možnosti funkcií, ktoré sú špecifické pre danú tému, napríklad formáty upútaviek.

Po zostavení zoznamu funkcií motívov, ktoré chcete ovládať prostredníctvom stránky s nastaveniami, ste takmer pripravení začať ich implementovať. Než pôjdete ďalej a vytvoríte stránku s nastaveniami, môžete ušetriť čas a ubezpečiť sa, že WordPress ešte nemá túto funkciu k dispozícii na zmenu. Widgety, vlastné ponuky, vlastné pozadia a obrázky hlavičiek sú všetko užitočné nástroje na prispôsobenie vašej témy. Na vytvorenie vlastných prispôsobení je zvyčajne potrebné menšie úsilie. Je pravda, že všetky tieto komponenty sú témou pre ďalší tutoriál.

Nastavenia vytvorené v tejto príručke

Pre tento tutoriál som zobral hlavnú stránku, ktorá sa skladá z mriežky s rôznym počtom populárnych príspevkov, ktoré môže administrátor pomocou stránky s vlastnými nastaveniami vybrať, upraviť a zmeniť ich poradie.

V editore sa položky domovskej stránky zobrazia ako zoznam, do ktorého je možné pomocou Javascript a Jquery pridať nové položky.

Páči sa mi, keď mám pri písaní kódu HTML ukážku stránky správcu na paneli nástrojov WordPress, takže zvyčajne začnem prepojením stránky s nastaveniami s WordPress a potom už len pokračujem k vývoju obsahu stránky. Z tohto dôvodu bude našim ďalším krokom vytvorenie prázdnej stránky s nastaveniami a jej prepojenie s WordPress.

Krok 2. Prepojenie stránky nastavení s WordPress.

Vytvorenie stránky s nastaveniami sa začína napísaním funkcie, ktorá nastaví ponuku a pripojí ju k akcii admin_menu. Toto dáva WordPressu pokyn, aby túto funkciu zavolal pri vytvorení ponuky, aby bolo všetko hotové v príslušnom čase. Pridajte nasledujúci kód do súboru functions.php svojej témy:

Funkcia setup_theme_admin_menus () (// Obsah funkcie napíšeme veľmi skoro.) // Hovorí WP, aby zavolala funkciu „setup_theme_admin_menus“ //, keď je potrebné vytvoriť stránky ponuky. add_action ("admin_menu", "setup_theme_admin_menus");

Teraz vložíme kód na vytvorenie stránky nastavení do funkcie, ktorú sme práve napísali:

Pri vytváraní stránky s nastaveniami máte na výber - buď stránku pridáte ako podponuku do jednej z existujúcich skupín nastavení, alebo si vytvoríte vlastnú ponuku najvyššej úrovne.

Podponuky sa pridávajú pomocou funkcie add_submenu_page:

• $ parent_slug je jedinečný identifikátor ponuky najvyššej úrovne, do ktorej bude pridaná podponuka.
• $ page_title názov pridanej stránky.
• $ menu_title názov zobrazený v ponuke (často krátka verzia $ page_title)
• $ capability sú minimálne prístupové práva požadované používateľom pre prístup do tohto menu.
• $ menu_slug je jedinečný identifikátor vytváranej ponuky.
• $ function je názov funkcie, ktorá je volaná na spracovanie (a prezentáciu) tejto stránky ponuky.

Ak chcete pridať stránku ponuky ako podponuku do existujúcej skupiny WordPress, môžete ako parameter $ parent_slug použiť nasledujúce hodnoty:

• Panel: index.php
• Príspevky: edit.php
• Médiá: upload.php
• Odkazy: link-manager.php
• Stránky: edit.php? Post_type \u003d stránka
• Komentáre: edit-comments.php
• Vzhľad: themes.php
• Pluginy: plugins.php
• Používatelia: users.php
• Nástroje: toolss.php
• Nastavenia: options-general.php

Skupina Vzhľad je dobrým kandidátom na hosťovanie našej stránky s nastaveniami. Zamerajme sa na to a skúsme vytvoriť našu prvú stránku s nastaveniami. Tu je aktualizovaná verzia našej funkcie nastavenia ponuky:

Funkcia setup_theme_admin_menus () (add_submenu_page ("themes.php", "Prvky titulnej stránky", "Titulná stránka", "manage_options", "prvky titulnej stránky", "theme_front_page_settings");)

Na to, aby sme s nastaveniami mohli pracovať, musíme ešte vytvoriť funkciu theme_front_page_settings. Tu je jeho najjednoduchšia forma:

Funkcia theme_front_page_settings () (echo "Hello, world!";)

Takto to bude vyzerať v akcii:

Musíme tiež skontrolovať, či má používateľ potrebné práva na úpravu stránky nastavení. Za týmto účelom pridajte nasledujúci kód na úplný začiatok funkcie na stránke nastavení:

// uistite sa, že používateľ môže aktualizovať nastavenia if (! current_user_can ("manage_options")) (wp_die ("Nemáte dostatočné oprávnenie na prístup na túto stránku.");)

Ak teraz používateľ, ktorý nemôže spravovať stránku s nastaveniami, vstúpi na stránku s nastaveniami, zobrazí sa mu obvyklá správa: „Na prístup na túto stránku nemáte dostatočné práva.“

Ak váš motív vyžaduje viac stránok s nastaveniami, môže to byť pre používateľa mätúce, pretože ho musí vyhľadať v ponuke. V takom prípade vám vytvorenie vlastnej skupiny nastavení uľahčí vyhľadanie stránok v ponuke.

Ak chcete pridať vlastnú skupinu vlastných nastavení, musíte vytvoriť stránku ponuky na najvyššej úrovni a prepojiť s ňou stránky podponuky. Toto je nová verzia našej funkcie na vytváranie ponúk. Funkcia add_menu_page vytvorí ponuku najvyššej úrovne podobnú add_submenu_page, až na to, že nepotrebuje parameter $ parent_slug.

Funkcia setup_theme_admin_menus () (add_menu_page ("Nastavenia témy", "Príklad témy", "manage_options", "tut_theme_settings", "theme_settings_page"); add_submenu_page ("tut_theme_settings", "Prvky titulnej stránky", "Titulná stránka", "manage_options" , "front-page-elements", "theme_front_page_settings");) // musíme pridať funkciu pre prácu s funkciou ponuky na najvyššej úrovni theme_settings_page () (echo "Stránka nastavení";)

Ak otestujete kód a obnovíte hlavný panel WordPress, v spodnej časti zoznamu sa zobrazí nová skupina ponúk.

Zatiaľ sa to však nezdá úplne správne. Kliknutím na položku hornej ponuky sa nedostanete na stránku ponuky Predná strana, ale na stránku s ukážkou témy. Toto nie je to isté ako fungovanie zvyšných ponúk WordPress, urobme teda ešte jednu vec: zmenou atribútu $ menu_slug vo výzve add_submenu_page na rovnakú hodnotu ako v ponuke najvyššej úrovne môžeme tieto dve ponuky spojiť tak, aby výber najvyššej položky viedli do ponuky Titulná stránka.

Funkcia setup_theme_admin_menus () (add_menu_page ("Nastavenia témy", "Príklad témy", "manage_options", "tut_theme_settings", "theme_settings_page"); add_submenu_page ("tut_theme_settings", "Prvky titulnej stránky", "Titulná stránka", "manage_options" , "tut_theme_settings", "theme_front_page_settings");) funkcia theme_settings_page () ()

Už to vyzerá lepšie. Ak stále chcete vylepšiť prezentáciu svojej skupiny ponúk, môžete vo funkcii add_menu_page použiť dve ďalšie polia. Stačí pridať hodnoty za názov funkcie do volania metódy:

• $ icon_url - určuje adresu URL ikony pre ponuku najvyššej úrovne.
• $ position - definuje pozíciu vašej skupiny ponúk v zozname ponúk. Čím vyššia je hodnota, tým nižšia je pozícia v ponuke.

Krok 3. Vytvorte formulár HTML pre stránky s nastaveniami.

Teraz, keď sme vytvorili stránku s nastaveniami a zobrazuje sa na bočnom paneli, je čas začať na ňu pridávať určitý obsah. Vráťme sa k zoznamu nastavení a navrhneme stránku, ktorá ich bude upravovať.

V tejto príručke potrebujeme pole na určenie počtu položiek, ktoré sa majú zobraziť v jednom riadku, a zoznam na identifikáciu existujúcich položiek. Začnime jednoduchším: vytvorme textové pole pre počet položiek v jednom riadku. Upravme funkciu pre stránku nastavení:

Funkcia theme_front_page_settings () (?\u003e

Po opätovnom načítaní stránky s nastaveniami sa zobrazí prvé pole:

Aby stránka nastavení zodpovedala vášmu existujúcemu prostrediu WordPress a aby váš doplnok vyzeral profesionálne, musíte na vytváranie stránok základných nastavení používať triedy a štýly CSS, ktoré WordPress používa. Skvelým spôsobom, ako to urobiť, je prejsť na stránku nastavení a analyzovať jej zdroj.

Najdôležitejšou súčasťou našej práce je zabaliť stránku nastavení do divu s triedou zalomenia. V rámci tohto prvku div môžete použiť množstvo preddefinovaných štýlov pre nadpisy, tlačidlá a prvky formulára. Vytvorme štýl názvu našej stránky s nastaveniami:

• Vytvoríme pre stránku h2 (môžete použiť hlavičky od h2 do h6).
• Pred nadpisom zobrazíme ikonu stránky s nastaveniami (preddefinované ikony WordPress môžete použiť s funkciou screen_icon. Táto funkcia má jeden z nasledujúcich parametrov: index, úpravy, nahrávanie, správca odkazov, stránky, komentáre, témy, doplnky, používatelia, nástroje alebo možnosti - všeobecne).
• Vložíme vstupný prvok do formulára a tabuľky s triedou form-table.

funkcia theme_front_page_settings () (?\u003e

Prvky prednej strany

Počet prvkov v rade:

K tomu používame jQuery, pretože jQuery je pri vytváraní niečoho od nuly mnohokrát jednoduchšie ako Javascript a dodáva sa s WordPress. Ak ste už predtým používali jQuery, musíte vziať do úvahy nasledujúce skutočnosti: $ notácia, ktorú zvyčajne používate v jQuery, nefunguje vo WordPresse - musíte namiesto toho použiť celé slovo jQuery.

Najskôr vytvoríme prvok na úpravu nastavení jedného bloku hlavnej stránky, ktorý bude slúžiť ako šablóna pre prvky pridané používateľom. Pridajte tento kód medzi značku záverečnej tabuľky a značku záverečného formulára.

Odporúčaný príspevok: post_title; ?\u003e Odstrániť

Teraz uvidíme nasledovné:

Teraz, keď máme šablónu, je čas ju skryť a vytvoriť Javascript, ktorý bude šablónu používať pri vytváraní nových riadkov populárnych príspevkov. Nastavte štýl zobrazenia prvku li: none;

Ďalej vytvoríme zoznam na zachytenie položiek domovskej stránky pri ich pridávaní a odkaz, na ktorý používateľ klikne pri pridávaní nových položiek. Poskytol som celý kód HTML, aby ste videli, kde došlo k zmenám:

Prvky prednej strany

Počet prvkov v rade:

Najlepšie príspevky

Pridať odporúčaný príspevok

Odporúčaný príspevok: !}post_title; ?\u003e Odstrániť