De ce ai nevoie de teme WordPress? Cum să adaugi setări în WordPress? Personalizare teme - Setări încorporate
Am lansat o nouă carte, Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make them to Love with Your Brand.
Funcționarea temelor copiilor („fiice”) se bazează pe relația lor cu temele lor parentale („părinții”). Este important să țineți cont de faptul că temele gratuite și plătite sunt inițial părinți, prin urmare, fiica le copiază parametrii și proprietățile și primește, de asemenea, un set standard al funcțiilor sale. În viitor, ținând cont de nevoile unei anumite resurse de internet, setul acestor opțiuni poate fi extins.
Dacă atingem terminologia, atunci vorbim de un subiect aparte care capătă semnificația altuia, care acționează ca părinte. De ce sunt create? Pentru a modifica temele WordPress existente și astfel crește numărul acestora.
Care este diferența dintre „fiică”
O temă copil WordPress vă permite să faceți modificările și ajustările necesare. În continuare ne vom uita la cum să-l creăm, dar înainte de asta ne vom uita la diferențele cheie:
- Modificările aduse modificării părinte nu afectează modificarea copilului. De aici rezultă că, după dezvoltare, acestea sunt independente unele de altele.
- Derivatul funcționează numai dacă părintele este instalat, iar activarea lui are loc mai târziu.
- Filialele sunt legate doar de baza lor și nu sunt interconectate nici cu una, nici cu alta.
Este convenabil să lucrezi?
O temă pentru copii WordPress este o idee grozavă, cu o gamă largă de beneficii. Personal, l-am recomanda ca standard cu produse premium. Să enumeram doar câteva dintre avantaje:
- Ele salvează automat ajustările efectuate. Datorită acestui lucru, puteți face ajustări direct la cod, fără riscul ca setările să se piardă sau să se piardă în timpul actualizării.
- Lucrul cu ei este o pregătire excelentă pentru a trece la scrierea codului principal pentru variantele părinte.
- Flux de lucru îmbunătățit. Cu un singur cadru tematic la dispoziția dumneavoastră, puteți crea site-uri web de diferite complexități și funcționalități.
Deoarece aceasta este o continuare a celei părinte, setul de caracteristici și funcții este identic aici. Componentele principale:
- Director (dosarul/locația componentelor fișierului).
- „style.css”, unde sunt specificate proprietățile principale și suplimentare.
- „functions.php”, unde este scrisă definiția funcțiilor.
Nu există restricții privind adăugarea de șabloane, dar componentele enumerate trebuie să fie prezente în oricare.
Operațiune
„Fiicele” sunt localizate în propriul folder și au „functions.php” și „style.css” separate. Puteți scrie oricând fișiere auxiliare, dar această pereche este responsabilă pentru funcționarea corectă - fără blocări sau probleme.
Dacă aceste formate sunt utilizate corect, puteți edita aproape orice parametri inițiali, inclusiv stilul, elementele de aspect individuale, scripturile etc.
Dispozitivul tematic este similar cu straturile editoriale ale editorilor foto. Dacă un utilizator vă vizitează resursa de internet, o „fiică” se deschide în fața lui, iar apoi opțiunile și stilurile lipsă sunt încărcate de la părinte. În cele din urmă, cea mai mare parte a codului este transmisă de la părinte, dar trebuie modificat pentru a se potrivi cu setările copilului înainte de a putea fi utilizat.
Cum se creează
În primul rând, verificați dacă aveți tot ce aveți nevoie la dispoziție. Și anume, acces la FTP sau un manager de fișiere, acces deschis la panoul de control WordPress în sine. Asadar, haideti sa începem.
Pasul nr 1. Crearea unei teme pentru copii WordPress
Acesta este un proces destul de simplu. Dacă urmați instrucțiunile în detaliu, orice utilizator îl poate stăpâni.
În primul rând, creăm un folder pentru fiica noastră în directorul standard. Pentru ca directorul să aibă ordine și conținutul să fie sistematizat, este mai bine să denumești folderul după exemplul „Numele părintelui + copilul final”. Pentru comoditate, puteți adăuga numele unui anumit proiect pentru care creăm o temă. Principalul lucru este că numele directorului nu are spații, altfel acest lucru poate duce la erori. Un manager de fișiere sau un client FTP vă va ajuta să creați un folder nou. Astăzi, un astfel de client FTP precum FileZilla s-a dovedit bine.
De exemplu, să luăm drept bază „Twenty Seventeen”, care este familiar pentru mulți. Prefer să lucrez cu Managerul de fișiere, așa că calea mea către folderul creat arată astfel:
Facem următoarele:
Cu siguranță, ești convins că crearea este un proces ușor. Trebuie doar să urmați cu strictețe instrucțiunile și să lucrați cu abordarea corectă.
Pasul nr 2. Setări
Pentru a începe, modifica, completa, adapta „fiica” la solicitările și cerințele site-ului tău, trebuie să faci setările corect. Ne vom ocupa de asta în ordine.
- Mai întâi trebuie să personalizați aspectul.
Pentru a face acest lucru, vom face ajustări la „custom.css”, care se află în director. Acest lucru se poate face printr-un client FTP, un editor de text obișnuit, un manager de fișiere sau un editor WordPress special ( îl puteți găsi deschizând „Aspect”, apoi „Editor”). Aici veți avea nevoie de cunoștințe minime despre regulile de utilizare a CSS, precum și de priceperea de a verifica elementele site-ului printr-un browser. De exemplu, pentru a schimba culoarea de fundal în „style.css”, scriem următoarea regulă CSS:
Următoarea imagine arată cum se va schimba designul site-ului după ce au fost făcute ajustările. Fundalul a devenit verde deschis:
În acest fel puteți edita orice elemente existente pe site.
2. Lucrul cu funcții.
Utilizarea și lucrul cu „fiice” oferă, de asemenea, avantajul de a putea menține două „functions.php” independente. Să vă reamintim că aceste fișiere sunt folosite pentru a elimina funcții vechi și pentru a adăuga funcții noi. Dacă sunt disponibile, nu trebuie să vă faceți griji cu privire la siguranța sau problemele în funcționarea documentului. Chiar dacă baza este actualizată, aceasta va rămâne neschimbată.
Pentru a adăuga o nouă opțiune, în fișier este scris și un nou cod PHP. De exemplu, codul de mai jos va elimina opțiunea de căutare WordPress.
Servicii speciale pentru a ușura munca dezvoltatorului
Puteți face procesul de creare mai ușor folosind o serie de plugin-uri speciale. Biblioteca WordPress oferă o selecție largă de plugin-uri, dintre care majoritatea sunt gratuite. Utilizarea pluginurilor simplifică foarte mult procesul de dezvoltare. Să ne uităm la cele mai populare plugin-uri.
- Copil Themify.
Acesta este cel mai simplu și mai ușor de utilizat plugin cu o interfață intuitivă. Multe setări aici pot fi făcute cu un clic pe un buton.
2. Configurarea temei pentru copii.
Aici puteți crea și o „fiică”, iar acest lucru va dura doar câteva clicuri. Editorul CSS de aici este destul de puternic, ceea ce vă permite să configurați funcționalități avansate. Pluginul identifică automat regulile cheie CSS și nu le afectează la editare.
3. _copil Tematica Boilerplate.
Iată șabloane gata făcute pentru formarea „fiicelor”. Șablonul este numit simplu - „_child” - și este conceput special pentru a simplifica munca. Șablonul oferă o temă intuitivă și necesită doar să furnizați un link către „părinte”. Acest tip de șablon vă permite să creați opțiuni profesionale - 2 fișiere gata făcute au fost deja create aici, standard „functions.php” și „style.css”.
Primul are o funcție specială numită „aa_enqueue_styles()”. Opțiunea vă permite să creați o coadă de foi de stil, unde merg mai întâi cele părinte, iar apoi copiii. Ca urmare, stilul celui din urmă este întotdeauna determinat de primul.
Majoritatea dezvoltatorilor leagă aceste tabele împreună în CSS, dar acest lucru face mai mult rău decât bine. Browserul durează mult timp pentru a încărca site-ul, deoarece trebuie să încărcați mai întâi stilurile din „părinte”, apoi din derivat. Dacă puneți foile de stil separat, sarcina browserului va fi mai ușoară și viteza de încărcare va crește.
Iată codul cu care puteți adăuga această opțiune:
Al doilea fișier are un antet de bază care conține informații speciale. Aceste informații îi permit WordPress să o recunoască ca foaie de stil „copil”. Prin urmare, este deosebit de important să scrieți codul pentru „style.css”:
Să rezumam
Nu contează nivelul tău de competență în programare sau experiența cu WordPress. Crearea unei teme copii WordPress este ușoară și nu există niciun risc ca setările să fie șterse după ieșire. Scriind un mic cod sau modificând ceea ce ați scris deja și făcând lucruri simple cu directorul, vă puteți schimba site-ul. Principalul lucru este să urmați instrucțiunile, trecând treptat de la un punct la altul. Nu uitați următoarele: dacă există actualizări pentru „părinte”, „fiica” nu se modifică, această regulă se aplică modificărilor aduse conținutului, setărilor și așa mai departe.
Experimentează, încearcă diferite opțiuni și caută-o pe cea mai bună pentru tine.
Astăzi, vom arunca o privire detaliată asupra procesului de creare a unei pagini de setări pentru o temă WordPress, folosind minunatul WooFramework ca exemplu.
Apoi, vom complica puțin sarcina, folosind puterea jQuery, vom îmbunătăți ușor funcționalitatea paginii.
WordPress este de departe cel mai popular sistem de management al conținutului (CMS). Mulți dezvoltatori aleg WordPress ca CMS, indiferent de tipul de proiect.
Acest sistem este foarte ușor de utilizat, dar îl puteți face și mai ușor activând panouri de control suplimentare pentru utilizatori. În loc să deschidă fișierele șablon PHP și să manipuleze codul, utilizatorii pot folosi pagina obișnuită de setări din panoul de control pentru a vă gestiona tema WordPress.
De exemplu, dacă tema dvs. are o schemă de culori roșu, albastru și verde, fiecare cu un anumit fișier CSS, ar fi mult mai ușor dacă utilizatorul ar putea selecta culoarea dorită dintr-o listă derulantă. Așadar, astăzi, veți parcurge procesul de creare și îmbunătățire a unei pagini de setări suplimentare pentru panoul dvs. de administrare WordPress.
Pasul 1
Înainte de a începe să creăm tabloul de bord, vom avea nevoie de o temă. Prin urmare, descărcați , cu fișierele sursă. Veți vedea o temă clasică WordPress ușor modificată. Copiați folderul „nettuts” (așa se va numi tema noastră) în folderul wp-content/themes. Dosarul ar trebui să conțină următoarele fișiere:
- functions.php (gol)
- index.php
- comentarii.php
- footer.php
- header.php
- rtl.php
- sidebar.php
- stil.css
- screenshot.png
- folder cu imagini care conțin două fișiere
Majoritatea codului nostru va fi localizat în fișierul functions.php.
Tema poate folosi opțional un fișier de funcții situat în folderul temei, numit functions.php. Acest fișier acționează ca un plugin și, dacă este inclus cu tema dvs., este încărcat automat în timpul inițializării WordPress (atât paginile externe, cât și panoul de administrare).
Acest fișier ar trebui să fie folosit pentru:
- descrieri ale funcțiilor utilizate în diferitele fișiere șablon ale temei dvs
- Instalarea panourilor de control suplimentare care permit utilizatorilor să personalizeze culorile, stilurile și alte aspecte ale temei dvs.
Pasul 2
Acum, după ce ați descărcat și instalat tema propusă, accesați pagina „Aspect” - „Teme” și activați tema noastră nettuts.
Acum, trebuie să ne gândim la marcajul html pentru panoul nostru de control. Vom folosi această structură:
Lasă-mă să-ți explic totul aici. Grupurile de setări vor fi împachetate într-un bloc cu clasa „rm_wrap”, apoi într-un bloc cu clasa „rp_opts”. Apoi, în interiorul acestor blocuri, deschidem eticheta de formular, în interiorul căreia vor fi plasate toate intrările necesare. Fiecare secțiune de setări (Setări de bază, Setări pagina de pornire, Setări blog etc.) va fi amplasată într-un bloc separat cu numele clasei „rm_section”. Acest bloc va conține numele (pentru secțiunea de setări) și câteva blocuri cu intrări. Folosind clase speciale pentru blocuri, cum ar fi
Cea mai importantă parte din toate acestea este că nu va trebui să creăm tot acest cod manual - vom folosi puterea PHP ori de câte ori este posibil. Nu are rost să scriem codul manual atunci când avem bucle la dispoziție.
Pasul 3
Deschideți fișierul functions.php cu editorul de cod preferat (eu folosesc NotePad++) și lipiți următorul cod:
Acestea sunt două variabile PHP care conțin numele temei dvs. (în cazul nostru, Nettuts) și aliasul pe care îl specificați (în exemplul nostru, nt). Aliasul este folosit ca prefix la numele tuturor setărilor temei și este de obicei unic pentru fiecare temă.
În continuare, vom crea câteva rânduri de cod pentru a genera automat o listă de categorii WordPress, în loc să forțăm utilizatorul să introducă manual ID-ul. Lipiți următorul cod imediat după cel anterior:
$categorii = get_categories("hide_empty=0&order_by=name"); $wp_cats = array(); foreach ($categorii ca $category_list)( $wp_cats[$category_list -> cat_ID] = $category_list -> cat_name; ) array_unshift($wp_cats, "Selectate categorie");
Acest fragment de cod folosește funcția încorporată wordpress get_categories pentru a obține toate categoriile și apoi folosește o buclă foreach pentru a le stoca în variabila $wp_cats. Apoi opțiunea „selectate categorie” este adăugată la matrice.
Pasul 4
Acum este timpul să creăm o listă de setări pentru tema noastră. Lipiți următorul cod în fișierul functions.php:
$opțiuni = array(array("nume" => "Setări", "tip" => "titlu"), matrice ("nume" => "Setări de bază", "tip" => "secțiune"), matrice ( "type" => "deschide"), matrice ("name" => "Schema de culori", "desc" => "Selectați schema de culori a temei", "id" => $shortname . "_color_scheme", "type" = > „select”, „opțiuni” => matrice („albastru”, „roșu”, „verde”), „std” => „albastru”), matrice („nume” => „Adresa URL a siglei”, „desc” => "Introduceți un link către imaginea siglei", "id" => $shortname . "_logo", "type" => "text", "std" => ""), array ("name" => " CSS personalizat ", "desc" => "Doriți să utilizați propriul cod CSS? Lipiți-l în acest câmp", "id" => $shortname . "_custom_css", "type" => "textarea", "std " => "" ), array ("type" => "close"), array ("name" => "Home page", "type" => "section"), array ("type" => "deschidere "), array ( "name" => "Imagine în antet, pe pagina principală", "desc" => "Introduceți adresa URL a imaginii care va fi folosită în antet", "id" => $shortname ."_header_img", "type" => " text", "std" => ""), array ("name" => "Categoria paginii de pornire", "desc" => "Selectați categoria în care vor fi postările publicat", "id" => $shortname ." _feat_cat", "type" => "selectare", "options" => $wp_cats, "std" => "Selectare categorie"), array ("type" => „închidere”), matrice („nume” => „Soclu”, „tip” => „secțiune”), matrice („tip” => „deschis”), matrice (“nume” => „Text cu drepturi de autor”, "desc" => "Introduceți textul care va fi postat în partea dreaptă a subsolului. Puteți utiliza HTML", "id" => $shortname."_footer_text", "type" => "text", "std" => ""), array("name" => "Cod Google Analytics", " desc " => "Aici puteți plasa codul Google Analytics, sau orice alt contor", "id" => $shortname."_ga_code", "type" => "textarea", "std" => ""), array( "name" => "Favicon", "desc" => "Favicon este o pictogramă pixel care reprezintă site-ul dvs.. Introduceți adresa URL a imaginii cu extensia .ico", "id" => $shortname."_favicon ", "type " => "text", "std" => get_bloginfo("url") ."/favicon.ico"), array("name" => "Adresa URL Feedburner", "desc" => "Feedburner este un serviciu Google , care controlează fluxurile RSS. Inserați adresa URL a Feedburner aici pentru a permite cititorilor să-l vadă pe site-ul dvs. web”, „id” => $shortname.”_feedburner”, „type” => „text”, „std” = > get_bloginfo("rss2_url"), array("type" => "close"));
Aceasta a fost o bucată de cod destul de mare care merită o mică clarificare. Asa de:
- Variabila $options PHP stochează întreaga listă de setări pentru tema noastră.
- Lista de setări constă din mai multe matrice, fiecare dintre ele conținând o cheie „tip” pentru a determina tipul de setare și modul în care este afișată.
- Lista noastră de setări începe cu matricea „type” => „title” - care va fi folosită pentru a afișa numele și titlul temei în titlul paginii.
- Fiecare secțiune (Setări de bază, Pagina de pornire, Subsol) are o listă separată de setări.
- Începem o nouă secțiune prin închiderea oricăreia dintre secțiunile anterioare și declarând noua secțiune folosind array(„name” => „Footer”, „type” => „section”).
- Fiecare opțiune poate conține următoarele setări:
Nume: Numele câmpului de text.
desc: O scurtă descriere a câmpului pentru utilizator.
id: ID câmp, prefixat cu alias. Acesta va fi folosit atât pentru a înregistra setarea, cât și pentru a o accesa.
tip: tip de intrare - text, select sau textzona
Opțiuni: folosit pentru a declara o serie de setări pentru un câmp din lista derulantă.
std: Valoarea implicită a câmpului, utilizată dacă nu sunt specificate alte valori.
Pasul 5
Încercați să vă conectați la tabloul de bord WordPress. Nu veți găsi nicăieri setările pe care le-am specificat, așa că cum le putem afișa? Adăugați următorul cod în fișierul functions.php:
Funcția mytheme_add_admin())( global $themename, $shortname, $opțiuni; if($_GET["pagină"] == nume de bază(__FILE__))( if("salvat" == $_REQUEST["acțiune"])( pentru fiecare ( $options ca $value)( update_option($value["id"], $_REQUEST[$value["id"]]); ) foreach ($options ca $value)( if(isset ($_REQUEST[$value) [ "id"]]))( update_option($value["id"], $_REQUEST[$value["id"]]); )else( delete_option($value["id"]); ) ) antet( " Locație: admin.php?page=functions.php&saved=true"); die; ) ) else if("resetare" == $_REQUEST["acțiune"])( foreach($opțiuni ca $valoare)( ștergere_opțiune($ valoare ["id"]); ) header("Locație: admin.php&page=functions.php&reset=true"); die; ) add_menu_page($themename, $themename, "administrator", basename(__FILE__), "mytheme_admin") ; ) funcția mytheme_add_init() ( )
Această funcție este folosită atât pentru a actualiza setările în sine, cât și pentru a adăuga o pagină în panoul de control. Dacă setările au fost salvate (determinate de salvarea variabilei ascunse), atunci toate setările sunt actualizate cu valorile specificate. Dacă, totuși, setările au fost resetate (determinate folosind o altă resetare variabilă ascunsă), atunci toate setările sunt șterse.
Ultima linie a funcției adaugă o pagină de meniu - parametrii în ordine: nume și titlu, nivelul drepturilor utilizatorului pentru vizualizarea paginii, salvarea paginii și funcția folosită pentru afișarea/salvarea setărilor (în exemplul nostru numit mytheme_admin).
Observați că funcția mytheme_add_init este goală? Lasă-l să rămână așa cum este deocamdată, vom reveni la el mai târziu.
Pasul 6
Pagina de setări din panoul de control tot nu apare? Dar, încă nu am finalizat funcția mytheme_admim, care a fost menționată mai sus. Pentru a crea această funcție vom avea nevoie de codul de la pașii 6,7 și 8. Să începem.
Funcția mytheme_admin())( global $themename, $shortname, $opțiuni; $i = 0; if($_REQUEST["action"] == "salvare") echo "
setările temei ". $themename ." au fost salvati
setările temei ". $themename ." au fost resetate
Setări
Pentru o gestionare mai convenabilă a temei, puteți folosi meniul de mai jos
Aici este folosită bucla PHP foreach, fiecare tip de setări este determinat individual pentru fiecare caz. Pentru a face acest lucru, vom folosi o instrucțiune switch. Variabila din instrucțiunea switch este tipul curent al parametrului, case este tipul așteptat al parametrului. Probabil ați observat expresia „pauză” după fiecare caz? Această expresie este folosită pentru a preveni procesarea incorect a condiției. Când valoarea unui caz se potrivește cu o variabilă, toate cazurile ulterioare vor fi, de asemenea, executate. Adică dacă am definit case3, atunci pe lângă el se vor executa și case4, case5 etc. Dar nu avem nevoie de asta, așa că folosim break pentru a termina declarația switch.
Dacă valoarea curentă a parametrului este „deschisă”, nu se întâmplă nimic. Dacă valoarea curentă este „închis”, sunt plasate două blocuri de închidere. Valoarea parametrului „titlu” este folosită o singură dată - în textul introductiv înainte de setările temei. Pentru fiecare tip „text” (tip de intrare = „text”), „select” (listă derulantă) și „textarea” (numele vorbește de la sine), este afișată intrarea corespunzătoare. Atenție la blocaj
Pasul 8
Ne apropiem de sfârșitul acestei caracteristici destul de mari. Lipiți următorul cod:
Cazul „selectați” : ?>
/functions/images/trans.gif" class="inactive" alt=""/>
!}
Pentru tipul de configurare „secțiune”, folosim variabila contor $i. Acest lucru vă permite să urmăriți numărul secțiunii și să îl combinați cu numele butonului de trimitere, dând astfel fiecărui buton un nume unic. În plus, la sfârșitul secțiunii este adăugat un formular pentru a reseta toate setările. Imaginea va fi folosită pentru modificarea ulterioară a jQuery. Aceasta este ultima bucată de cod care va pune funcțiile noastre în acțiune:
Add_action("admin_init", "mytheme_add_init"); add_action("admin_meniu", "mytheme_add_admin");
Acest cod adaugă o pagină suplimentară în tabloul de bord WordPress.
Pasul 9
Grozav, acum avem propria noastră pagină de gestionare, cu un element de meniu separat. Cu toate acestea, după ce am vizitat această pagină, vedem că nu totul este atât de bun pe cât ne-am dori. Dar nu contează, avem un mare ajutor - CSS! Creați un nou folder „funcții”, în folderul nettuts. În acest folder, creați un fișier nou - functions.css și inserați următorul cod în el:
Rm_wrap( lățime:740px; ) .rm_section( chenar:1px solid #ddd; border-bottom:0; background:#f9f9f9; ) .rm_opts label( font-size:12px; font-weight:700; width:200px; display :block; float:left; ) .rm_input ( padding:30px 10px; border-bottom:1px solid #ddd; border-top:1px solid #fff; ) .rm_opts small( display:block; float:right; width:200px ; color:#999; ) .rm_opts input, .rm_opts select( width:280px; font-size:12px; padding:4px; color:#333; line-height:1em; background:#f3f3f3; ) .rm_input input: focus, .rm_input textarea:focus( background:#fff; ) .rm_input textarea( lățime:280px; înălțime:175px; font-size:12px; padding:4px; color:#333; line-height:1.5em; fundal: #f3f3f3; ) .rm_title h3 (cursor:pointer; dimensiunea fontului:1em; transformarea textului: majuscule; margine:0; greutatea fontului:bold; culoare:#232323; float:left; lățime:80%; umplutură: 14px 4px; ) .rm_title( cursor:pointer; border-bottom:1px solid #ddd; background:#eee; padding:0; ) .rm_title h3 img.inactive( margin:-8px 10px 0 2px; lățime: 32px; înălțime: 32px; background:url("images/pointer.png") no-repeat 0 0; plutește la stânga; -moz-border-radius:6px; chenar:1px solid #ccc; ) .rm_title h3 img.active( margin:-8px 10px 0 2px; width:32px; height:32px; background:url("images/pointer.png") no-repeat 0 -32px; float:left; -moz- border-radius:6px; -webkit-border-radius:6px; border:1px solid #ccc; ) .rm_title h3:hover img( border:1px solid #999; ) .rm_title span.submit( display:block; float: dreapta; margine: 0; umplutură: 0; lățime: 15%; umplutură: 14px 0; ) .clearfix( clear:both; ) .rm_table th, .rm_table td( border:1px solid #bbb; padding:10px; text- align:center; ) .rm_table th, .rm_table td.feature (border-color:#888; )
Cred că acest cod nu necesită nicio explicație, totul este extrem de simplu și clar. Bineînțeles că îl poți schimba după bunul plac.
Pasul 10
Acum că avem fișierul CSS gata, cum îl conectăm la pagină dacă nu avem acces direct la secțiunea document?
? Vă amintiți că am creat o funcție goală mytheme_add_init()? Ea este cea care ne va ajuta. Schimbați-l după cum urmează:Funcția mytheme_add_init() ( $file_dir = get_bloginfo ("director_șabloane"); wp_enqueue_style ("funcții", $file_dir."/functions/functions.css", false, "1.0", "toate"); )
Acest cod va include fișierul functions.css în secțiunea document
. Locația fișierului este determinată de folderul șablon.
Pasul 11
Aruncă o privire pe pagina noastră. Arată destul de bine, tot ce rămâne este să adăugați funcționalitate pictogramelor plus din anteturile secțiunilor. Pentru aceasta vom folosi jQuery. Creați un fișier nou rm_script.js în folderul nettuts/functions/folder. Lipiți următorul cod:
JQuery(document).ready(function())( jQuery(".rm_options").slideUp(); jQuery(".rm_section h3").click(function())( if(jQuery(this).parent() .next ("".rm_options").css("display")==="none") ( jQuery(this).removeClass("inactive").addClass("active").children("img").removeClass (" inactiv").addClass("activ"); ) else ( jQuery(this).removeClass("activ").addClass("inactiv").children("img").removeClass("activ").addClass (" inactiv"); ) jQuery(this).parent().next(".rm_options").slideToggle("lent"); )); ));
Ce face acest cod? Odată ce DOM-ul este încărcat, toate blocurile cu clasa „rm_options” sunt restrânse. Apoi, când dați clic pe pictograma plus, clasa „inactivă” este eliminată și se adaugă clasa „activă”, care înlocuiește pictograma cu semnul minus. Când faceți clic din nou pe această pictogramă, are loc procesul invers. Pentru a restrânge/extinde blocuri, este folosită o funcție jQuery slideToggle destul de simplă. Pentru a conecta acest script la pagină, vom folosi funcția mytheme_add_init() cu care suntem deja familiarizați, modificați-o după cum urmează:
Funcția mytheme_add_init() ( $file_dir = get_bloginfo("template_directory"); wp_enqueue_style("functions", $file_dir."/functions/style.css", false, "1.0", "all"); wp_enqueue_script("rm_script", $file_dir."/functions/script.js", false, "1.0"); )
După aceasta, scriptul ar trebui să funcționeze. Vezi cum arată pe pagină:
Pasul 12
Acum că pagina noastră de setări este complet gata, rămâne să vorbim puțin despre utilizarea setărilor în sine. Codul de utilizare a parametrilor arată astfel:
$var = get_option("nt_colur_scheme");
Cu ajutorul acestuia, vom putea schimba schema de culori a site-ului. Este destul de simplu:
/* Schimbați fișierul CSS în funcție de culoarea selectată */ /.css" /> /*Text de ieșire în subsol, puteți folosi etichete HTML */
Domeniul de aplicare este limitat doar de imaginația ta.
Dacă doriți ca site-ul dvs. WordPress să devină promițător, atunci mai întâi ar trebui să vă gândiți să creați o temă unică pentru el. Acest proces necesită multă muncă, deoarece este direct legat de diverse codificări și scripturi. Să ne uităm la asta de la zero.
Aproape fiecare temă WordPress este instalată în directorul wp-content/themes și constă din 3 categorii de fișiere:
- fisiere de foi de stil;
- fișiere de funcționalități suplimentare;
- fișiere șablon.
Fișierele foilor de stil sunt style.css. Ei sunt responsabili pentru culoarea, dimensiunea, fontul și alți parametri ai elementelor site-ului. Fiecare site are doar 1 fișier style.css. Dacă deschideți acest fișier, în partea de sus puteți vedea informații despre titlu, autor și o scurtă descriere a subiectului. Când vă creați propria temă, puteți introduce informații despre dvs. în style.css.
Următoarea categorie este fișierele cu funcționalități suplimentare. Acestea includ functions.php, al cărui principiu îl face să arate ca un plugin. Datorită acestui fișier, puteți personaliza vizual tema direct în panoul de administrare. De obicei, lista de setări nu este foarte largă (numele site-ului, culoarea navigației și panourile laterale ale site-ului etc.). Dacă tema este multifuncțională, atunci lista de setări va fi mult mai largă.
Acum să trecem la fișierele șablon. Funcția lor principală este de a genera pagini care sunt solicitate de vizitatorii site-ului. Fișierele șablon au extensia „.php”. Cele mai multe teme simple pot conține un singur fișier șablon numit index.php. În acest caz, toate paginile site-ului vor fi identice. Acest design este cel mai adesea folosit pentru a crea resurse Internet cu baze de date, atunci când designul nu joacă un rol cheie.
Dacă nu ați creat niciodată un design, atunci ar trebui să încercați mai întâi să creați o temă simplă. Pentru ca acesta să funcționeze corect, veți avea nevoie de cel puțin 2 dintre următoarele fișiere: style.css și index.php.
Fișierele cu funcționalități suplimentare nu pot fi utilizate în acest caz, după cum înțelegeți. Dintre fișierele șablon, index.php este unul dintre cele mai flexibile. Poate genera independent anteturi, diverse blocuri, partea de jos (subsol), conținut și alte elemente ale site-ului.
Este de remarcat faptul că acei parametri care nu sunt generați de fișierul index.php vor fi generați de fișiere standard. De exemplu, dacă tema dvs. este formată din doar 2 dintre fișierele de mai sus, dar utilizatorul trebuie să genereze un formular pentru adăugarea de comentarii, atunci standardul comments.php va îndeplini această funcție. Prin urmare, dacă doriți ca tema dvs. să fie mai unică, merită să faceți fișiere șablon suplimentare. Să ne uităm la cele principale.
- Pentru a adăuga comentarii, după cum probabil ați ghicit, este folosit șablonul comments.php.
- Dacă doriți să faceți o fereastră pop-up cu comentarii, atunci în astfel de scopuri veți avea nevoie de comments-popup.php.
- Pentru a genera pagina de pornire, se folosește home.php.
- Fișierul single.php este responsabil pentru afișarea articolelor site-ului. Dacă nu aveți un astfel de fișier, atunci index.php își va îndeplini funcția.
- Fișierul page.php generează pagini individuale ale site-ului.
- Pentru a afișa informații despre autor, veți avea nevoie de author.php.
- Category.php este responsabil pentru categorii.
- Afișarea arhivelor, datei și căutarea se realizează prin fișierele archive.php, date.php și respectiv search.php.
- Pentru ca site-ul dvs. să afișeze o pagină unică de eroare 404, va trebui să adăugați 404.php.
- Părțile de sus și de jos ale site-ului sunt generate de fișierele header.php și, respectiv, footer.php.
Crearea manuală a unei teme unice de la zero
Mai întâi trebuie să instalați un șablon potrivit. Poate fi găsit atât pe site-ul oficial wordpress.org, cât și pe oricare altul. Se recomandă utilizarea site-ului oficial, deoarece orice site terță parte poate conține fișiere rău intenționate și link-uri rupte.
După ce ați făcut alegerea, puteți începe să descărcați arhiva. La sfârșitul procesului, va trebui să îl despachetați și să încărcați fișierele în anumite foldere de pe site (arhiva conține de obicei mici instrucțiuni). Descărcarea se poate face folosind programul FileZilla sau direct din hosting, dacă acceptă o astfel de opțiune. Acum tot ce trebuie să faci este să mergi la secțiunea „Teme”, să o selectezi pe cea pe care ai descărcat-o și să dai clic pe butonul „Activare”.
De asemenea, îl puteți selecta direct în panoul de administrare WordPress. Cu toate acestea, nu trebuie să-l descărcați. Va trebui doar să faceți clic pe butonul „Instalare” și apoi pe „Activare”. Se recomandă să previzualizați înainte de instalare.
Acum că tema este activată, puteți trece la unicizarea acesteia. Primul lucru la care ar trebui să vă gândiți este partea de sus a site-ului (header). Acesta este primul lucru care va atrage atenția vizitatorilor tăi, așa că ar trebui să o faci în mod responsabil. De obicei, antetul constă din numele site-ului, sigla și informații scurte despre conținut. Antetul poate fi creat în orice editor grafic. Chiar și în Paint standard. Designerii mai avansați folosesc Adobe Photoshop.
Numele site-ului ar trebui să fie mic și ușor de reținut. În Adobe Photoshop puteți alege multe stiluri diferite pentru acesta. Când creați un logo, este posibil să aveți nevoie de forme diferite. Acestea pot fi descărcate de pe site-ul oficial Adobe Photoshop.
După ce faceți un desen de antet într-un editor grafic, va trebui să îl încărcați pe site-ul dvs. web. Odată ce descărcarea este completă, va apărea o adresă URL în dreapta imaginii, pe care va trebui să o copiați. Apoi va trebui să mergeți la secțiunea „Editor” și să selectați fișierul care este responsabil pentru generarea antetului (header.php). În ea, va trebui să găsiți adresa URL a imaginii curente și să o înlocuiți cu cea pe care ați primit-o când ați încărcat imaginea antet. După aceasta, va trebui să actualizați fișierul. Acum puteți trece la verificarea afișajului antetului.
Dacă antetul dvs. are parametri diferiți decât cel standard, atunci îi puteți ajusta în header.php. Lățimea este controlată de atributul lățime, iar înălțimea este controlată de atributul înălțime. Setarea se poate face în pixeli și procente. Deci, dacă doriți doar să întindeți capacul, atunci setați-l la 100%.
Dacă doriți, puteți adăuga link-uri active către paginile site-ului WordPress la antet. Acest lucru se poate face folosind diverse servicii. Sunt destul de multe pe internet. Majoritatea lucrează pe același principiu. Încercuiți zona dorită a antetului, care va fi alocată pentru link, iar serviciul vă va oferi codul necesar. Va trebui apoi să adăugați acest cod în fișierul header.php. Aveți grijă când îl adăugați. Fiecare punct contează. Dacă adăugați codul în locul greșit, linkurile active nu vor apărea în antet.
După înlocuirea antetului standard, puteți începe să înlocuiți fundalul standard al site-ului WordPress, widget-urile, navigarea, partea de jos (footer) și alte componente ale site-ului WordPress. De asemenea, pot fi desenate în orice editor grafic și încărcate pe site-ul web sub forma unui desen.
Ar trebui să țineți cont de faptul că nu ar trebui să fie luminos. Majoritatea webmasterilor preferă să folosească un fundal alb. Nu rănește ochii și nu distrage atenția de la conținutul principal.
Pentru a crea o navigare de calitate de la zero, veți avea nevoie de puține cunoștințe despre etichete precum
