Creați o pagină de setări pentru tema WordPress

Crearea propriei tematici pentru WordPress este o modalitate excelentă de a vă da blogului sau altei site-uri Web propulsate de WordPress o notă originală. Dar nici macar cea mai frumoasa tema nu este atat de placuta daca trebuie sa iesiti sub capota si sa editati codul HTML sau PHP al temei ori de cate ori este timpul sa schimbe anumite aspecte ale acesteia. Mai ales atunci când nu ești doar un client plătitor care folosește tema ta. Din fericire, crearea unui setări pentru că tema dvs. în WordPress nu este foarte greu, iar după ce ați citit acest tutorial, veți putea crea unul în cel mai scurt timp!

---

Pasul 1 Decideți ce setări sunt necesare

Totul pornește de la necesitate: pentru a crea o pagină de setări clară și utilă, trebuie să dați seama de lucrurile care vor trebui schimbate și să renunțați la orice altceva. Orice nouă setare pe care o adăugați la meniurile de administrare adaugă complexitatea interfeței cu utilizatorul și riscă să fie mai greu de utilizat. De aceea este mai bine să fiți atenți și să selectați opțiunile care urmează să fie schimbate adesea și să lăsați o singură dată personalizări care se pot face cu ușurință schimbând un fișier în interiorul temei.

O altă întrebare care trebuie luată în considerare este: "Cine va schimba aceste setări?" Dacă utilizatorul este familiarizat cu PHP și WordPress, ar putea fi rezonabil să se aștepte ca ea să fie în regulă cu încorporarea codului său Google Analytics în codul însăși, dar nu ar trebui să solicitați acest lucru de la un designer grafic, să nu mai vorbim de un scriitor care nu nici măcar nu trebuie să știi nimic despre HTML și CSS.

Ideile comune pentru lucrurile care trebuie definite în setările temelor includ:

• Codul de urmărire al site-ului Google Analytics
• Numărul de bare laterale și poziționarea lor (stânga, dreapta, poate chiar în sus și în jos)
• Lățimea paginii
• Conținutul subsolului tău
• Opțiuni pentru caracteristici specifice temei, cum ar fi formatele de teaser personalizate.

Odată ce ați colectat lista de elemente tematice pe care doriți să le controlați prin intermediul unei pagini de setări, sunteți aproape gata să începeți implementarea. Înainte de a vă deplasa și de a vă crea pagina de setări, puteți economisi timp, asigurându-vă că nu există deja o caracteristică WordPress disponibilă pentru personalizarea pe care o aveți în vedere. Widgeturile, meniurile personalizate, fundalul personalizat și imaginile antetului sunt instrumente utile pentru a face tema personalizabilă cu mult mai puțină muncă decât este necesară pentru crearea propriilor setări. Ele sunt totuși subiecte pentru un tutorial diferit.

Setările create în acest tutorial

Pentru acest tutorial, am visat o pagină principală temă, care constă dintr-o rețea cu un număr diferit de postări recomandate care pot fi selectate, editate și reordonate de admin folosind o pagină de setări personalizate.

În editor, elementele din prima pagină vor fi prezentate ca o listă a elementelor la care se pot adăuga altele noi folosind JavaScript și jQuery.

Îmi place să fiu capabil să previzualizez pagina de administrare în administratorul WordPress când proiectez codul HTML, așa că, de obicei, încep prin a conecta o pagină de setări la WordPress și numai apoi mută la proiectarea conținutului paginii. De aceea, următorul nostru pas este să creați o pagină de setări pentru înlocuitori și să o conectați la WordPress.

---

Pasul 2 Atingerea paginii cu setări în WordPress

Crearea unei pagini de setări începe prin crearea unei funcții care să stabilească meniul și să o cupleze la acțiunea WordPress admin_menu. Acest lucru îi spune WordPress să vă apeleze funcția atunci când este timpul să creeze meniurile, astfel încât totul să se facă la momentul potrivit. Adăugați acest cod la temele dvs. functions.php fişier:

 funcția setup_theme_admin_menus () // Vom scrie conținutul funcției foarte curând.  // Aceasta îi spune lui WordPress să apeleze funcția numită "setup_theme_admin_menus" // când este momentul să creezi paginile de meniu. add_action ("admin_menu", "setup_theme_admin_menus");

Acum vom pune codul pentru crearea paginilor de setări în interiorul funcției pe care tocmai am creat-o.

Când creați pagina de setări, puteți alege să adăugați pagina sub formă de submeniu la unul dintre grupurile de setări existente sau să creați propriul meniu de nivel superior.

Adăugarea unui submeniu se face cu ajutorul funcției add_submenu_page:

• $ parent_slug este un identificator unic pentru pagina de meniu de sus în care acest submeniu este adăugat ca copil.
• $ PAGE_TITLE este titlul paginii care urmează să fie adăugată
• $ menu_title este titlul afișat în meniu (adesea o versiune mai scurtă de $ PAGE_TITLE
• capacitatea de $ este capacitatea minimă necesară unui utilizator pentru a avea acces la acest meniu.
• $ menu_slug este un identificator unic pentru meniul care este creat
• funcţia $ este numele unei funcții care este chemată să manipuleze (și să redea) această pagină de meniu

Dacă alegeți să adăugați pagina de meniu ca submeniu la unul dintre grupurile WordPress, puteți utiliza următoarele valori ca $ parent_slug parametru:

• Tablou de bord: index.php
• Mesaje: edit.php
• Mass-media: upload.php
• Link-uri: link-manager.php
• Pagini: edit.php? post_type = pagina
• Comentarii: edit-comments.php
• Aspect: themes.php
• Plugin-uri: plugins.php
• Utilizatori: users.php
• Instrumente: tools.php
• Setări: Opțiuni de-general.php

Grupul Aspect arată ca un bun candidat pentru plasarea paginii noastre de setări. Să încercăm asta și să creăm prima noastră pagină de setări. Iată o versiune actualizată a funcției de configurare a meniului:

 funcția setup_theme_admin_menus () add_submenu_page ('themes.php', 'Front Page Elements', 'Front Page', 'manage_options', 'front-page-elements', 'theme_front_page_settings'); 

Mai trebuie să creăm funcția theme_front_page_settings pentru ca aceasta să funcționeze. Aici este în cea mai simplă formă:

 funcția theme_front_page_settings () echo "Bună ziua, lumea!"; 

Și așa arată în acțiune:

De asemenea, trebuie să verificăm dacă utilizatorul are drepturile necesare pentru editarea paginii cu setări. Pentru aceasta, adăugați următorul cod la începutul funcției paginii de setări:

 // Verificați dacă utilizatorul are dreptul să actualizeze opțiunile dacă (! Current_user_can ('manage_options')) wp_die ('Nu aveți permisiuni suficiente pentru a accesa această pagină.'); 

Acum, dacă un utilizator care nu are permisiunea de a gestiona opțiunile ajunge la pagina cu setări, nu va vedea decât mesajul "Nu aveți permisiuni suficiente pentru a accesa această pagină".

Dacă tema dvs. are nevoie de mai multe pagini de setări, poate fi confuză pentru ca utilizatorul să le caute în jurul structurii de meniu. În acest caz, crearea unui grup propriu de setări facilitează utilizatorului temei să găsească toate paginile de meniu pentru temă.

Pentru a adăuga propriul grup de setări, trebuie să creați o pagină de meniu de nivel superior și să le conectați la paginile submeniului. Iată o nouă versiune a funcției de configurare a meniului. add_menu_page funcția utilizată pentru a crea meniul de nivel superior este similară cu add_submenu_page cu excepția faptului că nu ia $ parent_slug parametru.

 funcția setup_theme_admin_menus () add_menu_page ("Setările temei", "Tema exemplu", "manager_options", "tut_theme_settings", "theme_settings_page"); add_submenu_page ('tut_theme_settings', 'Front Page Elements', 'Front Page', 'manage_options', 'front-page-elements', 'theme_front_page_settings');  // De asemenea, trebuie să adăugăm funcția handler pentru funcția de meniu de nivel superior theme_settings_page () echo "pagina de setări"; 

Dacă testați codul și actualizați administratorul WordPress, veți vedea că noul grup de meniuri apare în partea de jos a listei de meniuri:

Dar ceva nu pare destul de corect încă. Dacă faceți clic pe elementul de meniu superior, nu vă duceți la meniul "Pagina frontală", ci la o pagină de meniu numită "Exemplu temă". Acest lucru nu este în concordanță cu modul în care funcționează celelalte meniuri WordPress, așa că hai să facem încă un lucru: schimbând $ menu_slug atribut în add_submenu_page apelați la aceeași valoare ca în meniul de nivel superior, putem conecta cele două meniuri astfel încât selectarea meniului de sus să selecteze meniul de pe prima pagină:

 funcția setup_theme_admin_menus () add_menu_page ("Setările temei", "Tema exemplu", "manager_options", "tut_theme_settings", "theme_settings_page"); add_submenu_page ('tut_theme_settings', 'Front Page Elements', 'Front Page', 'manage_options', 'tut_theme_settings', 'theme_front_page_settings');  funcție theme_settings_page () 

Arata mai bine. Dacă doriți să îmbunătățiți în continuare aspectul grupului dvs. de meniu, există două câmpuri opționale în add_menu_page funcția pe care o veți găsi utilă. Doar adăugați valorile după numele funcției în apelul metodei:

• $ icon_url specifică adresa URL a unei pictograme pentru meniul de nivel superior.
• poziţia $ specifică poziția grupului dvs. de meniuri din lista de meniuri. Cu cât este mai mare valoarea, cu atât este mai mică poziția din meniu.

---

Pasul 3 Crearea formularului HTML pentru paginile de setări

Acum, că am creat pagina de setări și se arată bine în meniul lateral, este timpul să începeți să adăugați conținut. Deci, să revenim la lista de setări pe care am avut în minte și să redactăm o pagină pentru editarea acestora.

În acest tutorial, avem nevoie de un câmp pentru a defini cât de multe elemente ar trebui să fie listate pe un rând și o listă pentru definirea elementelor reale. Pentru a începe de la mai ușor, să creăm un câmp de text pentru numărul de elemente de pe un rând. Modificați funcția paginii de setări:

 funcția theme_front_page_settings () ?>  Numărul de elemente dintr-un rând:    
 Când reîncărcați pagina de setări, veți vedea primul câmp de setări:
  
 Pentru a face pagina de setări să se potrivească perfect în experiența WordPress și pentru a oferi plugin-ului dvs. o experiență profesională, este o practică optimă să utilizați clasele și stilurile CSS pe care WordPress le folosește în propriile pagini de setări. O modalitate buna de a invata trucurile este sa mergeti mai departe si sa analizati codul sursa WordPress.
 
 Cel mai important lucru este să vă împachetați pagina de setare cu un div cu clasa "Wrap". Înăuntru div puteți utiliza mai multe stiluri predefinite, cum ar fi rubricile, butoanele și câmpurile de formular. Să începem prin stilizarea titlului paginii noastre de setări:
 
 
Vom crea un h2 poziția pentru pagină (Puteți utiliza etichetele de titlu din h2 la h6 pentru a crea titluri cu dimensiuni diferite.)
 
Vom afișa pictograma paginii cu setările temelor înaintea titlului. (Puteți utiliza pictogramele predefinite WordPress cu screen_icon funcţie. Funcția poate lua unul dintre următorii parametri: index, Editați | ×, încărcați, link-manager, pagini, comentarii, tematică, Plugin-uri, utilizatori, unelte sau opțiuni generale.)
 
Vom pune intrare element în interiorul unei forme și un tabel cu clasa formular-tabel.
 
 
 funcția theme_front_page_settings () ?> 
  
Elemente de pe prima pagină
 
 
 
 
  Numărul de elemente dintr-un rând:  
 
  
 
 
 
 
   
 Apoi, este timpul să începeți adăugarea elementelor.
 
 Pentru a face acest lucru, vom folosi jQuery deoarece face lucrurile mult mai ușor decât scrierea JavaScript de la zero și vine împreună cu WordPress. Dacă ați folosit jQuery înainte, există doar un singur lucru de reținut: $ notația pe care o utilizați în mod normal cu jQuery nu funcționează în WordPress - trebuie să tastați întregul cuvânt, jQuery in schimb.
 
 Mai întâi, vom crea elementul pentru editarea setărilor pentru un bloc de pagină principală pentru a servi drept șablon pentru elementele adăugate de utilizator. Adăugați acest cod chiar între eticheta tabelului de închidere și eticheta formularului de închidere imediat după aceasta.
 
  
 Mesaj recomandat:    
 Acum, când avem șablonul nostru, este timpul să-l ascundem și să creați JavaScript pentru a-l utiliza pentru a crea noi rânduri postate recomandate în pagina de setări. Setați stilul pentru Li element de mai sus la display: none;
 
 
 
 Apoi, vom crea o listă pentru menținerea elementelor din prima pagină în momentul în care acestea sunt adăugate și un link pe care utilizatorul îl va da clic pentru a adăuga elementele noi. Repet întregul cod HTML astfel încât să puteți vedea în mod clar unde se schimbă schimbările:
 
 
  
Elemente de pe prima pagină
 
 
 
 
  Numărul de elemente dintr-un rând:  
 
  
 
 
 
Posturi recomandate
 
 
  Adăugați postare recomandată  
 Mesaj recomandat:    POST_TITLE; ?>    Elimina 
 

 funcția removeElement (element) jQuery (element) .remove (); 

 var removeLink = jQuery ("a", elementRow) .click (funcția () removeElement (elementRow); return false;);

 dacă (is_admin ()) wp_enqueue_script ('jquery-ui-a se potrivi'); 

 jQuery ("li", aceasta). fiecare (functie () setElementId (aceasta, i) ;; elementCounter = i; jQuery ("input [name = element-max-id]");

 funcția setElementId (element, id) var newId = "front-page-element-" + id; jQuery (element) .attr ("id", newId); var inputField = jQuery ("selectează", element); inputField.attr ("nume", "element-page-id-" + id); var labelField = jQuery ("etichetă", element); labelField.attr ("pentru", "element-page-id-" + id); 

 dacă (isset ($ _ POST ["update_settings"])) // Salvează

 $ num_elements = esc_attr ($ _ POST ["num_elements"]); update_option ("name_name_name_name", $ num_elements);

 $ num_elements = get_option ("element_name_name_elemente");

 ?> 
Setari Salvate
   
 Apoi, să salvăm elementele de pe prima pagină. Valoarea cea mai mare a id-ului din elementele primei pagini este transmisă ca Element-max-id, astfel încât putem lua acea valoare și bucla prin elemente până la acel id, salvând datele lor într-un tablou în ordinea corectă:
 
 $ front_page_elements = array (); $ max_id = esc_attr ($ _ POST ["element-max-id"]); pentru ($ i = 0; $ i < $max_id; $i ++)  $field_name = "element-page-id-" . $i; if (isset($_POST[$field_name]))  $front_page_elements[] = esc_attr($_POST[$field_name]);   update_option("theme_name_front_page_elements", $front_page_elements);
 
 Aceasta salvează datele, însă trebuie să prezentăm valorile din pagina de setări. Deci, să facem același lucru ca și cu num_elements câmp și încărcați opțiunile implicite la începutul funcției:
 
 $ front_page_elements = get_option ("topic_name_front_page_elements");
 
 Apoi, redați elementele existente atunci când faceți formularul:
 
  
  Mesaj recomandat:   
 Și partea JavaScript:
 
 var elementCounter = jQuery ("intrare [nume = element-max-id]") val ();
 
 
 Pasul 5 Utilizarea setărilor din interiorul temei
 
 Salvarea și afișarea valorilor setărilor în zona de administrare este minunată, dar ceea ce contează este modul în care le folosiți pentru a vă personaliza tema, deci acum am ajuns la momentul în care trebuie să luăm setările noastre și să facem ceva rău cu ei.
 
 De aici, schimbările merg index.php in loc de functions.php. În primul rând, vom citi opțiunile la variabile:
 
 
 
 Hai să trecem prin elemente de $ listă, grupându-le în rânduri cu $ num_elements blochează pe fiecare.
 
 
 
   
 
    
 
 
 Apoi, utilizând datele salvate pentru fiecare element, vom completa elementul de redare a elementelor de mai sus:
 
  
 
    „>POST_TITLE;?> 
 
 
 Cu câteva elemente, seamănă cu aceasta:
  
 Încă destul de plictisitor. Postările nu au imagini miniatură și nu există stil pentru ele. Pentru a le face să arate mai bine, să adăugăm mai întâi suport pentru imaginile miniatură postare. Acest lucru se face prin cuplarea unei noi funcții care stabilește funcții tematice care urmează să fie apelate imediat după ce tema a fost încărcată
 
 funcția setup_theme_features () if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails');  dacă (funcția_există ("add_image_size")) add_image_size ('tutorial-thumb-size', 200, 200, true);  add_action ('after_setup_theme', 'setup_theme_features');
 
 Functia, setup_theme_features porneste miniaturile post folosind functia WordPress add_theme_support astfel încât WordPress adaugă această funcție la pagina de salvare post. În pagina postului, acum putem adăuga o imagine ca miniatură făcând clic pe "Utilizați ca imaginea recomandată" pe pagina de încărcare a imaginii după încărcarea fotografiei.
  
 De asemenea, funcția definește un nou tip de dimensiune a imaginii, tutorial-thumb-size care este folosit atunci când obțineți miniatură post în codul de redare.
 
 După selectarea imaginii recomandate, salvați modificările și reîncărcați pagina principală. Arată mai interesant deja:
  
 În cele din urmă, vom adăuga câteva stiluri style.css, și acolo mergem, tema are un afișaj configurabil afișat posturi:
 
 .front-page-element-row preaplin: auto;  .front-page-element float: left; margine: 10px 10px 10px 10px; padding: 0px; lățime: 200px; înălțime: 200px;  .imaginea-imagine width: 200px; înălțime: 200px; fundal: #eee; poziție: relativă;  .imaginea-imagine .title poziție: absolută; fund: 20px; afișare: bloc; fundal: # 000; culoare: #fff; padding: 10px; font-familie: Arial; font-size: 12pt; text-decoration: nici unul; 
  
 
 Concluzie 
 
 Acum, am creat o pagină de setări pentru o temă personalizată. Tema este departe de a fi completă, dar sper că această introducere te-a început să adaugi setări și elemente personalizabile pentru următoarea temă WordPress.



		
			
	   
	




Cod


		











	

        
		
Creați un anunț de șampon în Photoshop
			
			
	
			
        				
	
		
	

        
		
Creați un set de ochi strălucitori de caractere
			
			

					
        
	






	

	

			

							×