Cum de a crea o pagină de întrebări frecvente cu WordPress și personalizate tipuri de mesaje

În lumea web, o pagină de Întrebări Frecvente este creată special pentru spectatori / clienți și conține întrebări generale și răspunsurile lor despre un anumit produs sau serviciu. Acest tutorial detaliază procesul de creare a unei secțiuni dedicate de întrebări frecvente în backend-ul WordPress cu tipuri personalizate de posturi, precum și modul de îmbogățire a paginii reale cu ajutorul jQuery și CSS.

Pentru a ne atinge scopul, avem nevoie de un tip dedicat personalizat pentru mesaje personalizate WordPress. În acest fel, putem folosi titlul și conținutul acestor postări pentru a afișa întrebările frecvente într-un mod inovator și ușor de utilizat.

---

Pasul 1: Instalarea programului WordPress

Pentru a începe crearea paginii cu întrebări frecvente, trebuie, bineînțeles, să instalați mai întâi WordPress pe site-ul nostru local. Instalarea WordPress este o bucată de tort; cu toate acestea, dacă sunteți nou la acest lucru, aici este un ghid care detaliază procesul.

Șablonul TwentyTen este tema implicită care se livrează cu WordPress.

Odată ce WordPress este gata să plece, ar trebui să creăm în continuare tema personalizată, care va implementa funcționalitatea FAQ. Există diferite metode de creare a unei teme personalizate. Unii preferă să creeze un nou șablon alb alb, în ​​timp ce alții preferă să creeze teme copil ale noului șablon TwentyTen. Am folosit tema lui Starker de către Elliot Jay Stocks de multă vreme; o vom folosi pentru a crea noua temă pentru sistemul nostru de întrebări frecvente.

Descărcați cea mai recentă versiune a temei goale a lui Starker și mutați folderul în "wp-content / themes", localizat în dosarul de instalare WordPress. De asemenea, asigurați-vă că ați redenumit-o la întrebări frecvente. Apoi, conectați-vă la panoul de administrare backend al WordPress, faceți clic pe "aspect / teme". Veți găsi că tema implicită "TwentyTen" este activată, în timp ce noua temă "Starkers" este afișată sub ea. Activați tema Starkers.

La activare, previzualizați site-ul pentru a verifica dacă totul funcționează corect. Dacă totul merge conform planului, site-ul ar trebui să arate cumva imaginea următoare:

---

Pasul 2: Implementarea Mesajului personalizat pentru întrebări frecvente

Pentru a implementa sistemul de întrebări frecvente, vom crea un tip de post personalizat numai în acest scop. Acest lucru ne va permite să gestionăm toate întrebările frecvente într-un singur loc, mai ales dacă baza de întrebări cu întrebări frecvente crește cu timpul.

Pentru a implementa un post personalizat, modificați functions.php fișier situat în dosarul tematică Întrebări frecvente. Acesta va conține un bun cod de cod, așa că nu fi speriat sau confuz. Derulați în jos în partea de jos și adăugați următoarele pentru a adăuga o nouă postare personalizată. Începem prin crearea unei funcții personalizate la inițializare (init) acțiune.

 // ADAUGAREA TIPULUI POST CUSTOM FAQ add_action ('init', 'my_custom_init');

Această funcție personalizată va conține toate metadatele pentru postul personalizat și va înregistra, de asemenea, postul personalizat din baza de date WordPress. Acum, în cadrul funcției, vom defini mai întâi etichetele care vor fi utilizate în panourile de administrare backend. Prin etichete, vreau să spun textul care se va afișa în interfața cu utilizatorul pentru adăugarea, editarea și căutarea întrebărilor frecvente din panoul de administrare.

 $ labels = array ('name' => _x ('FAQs', 'post type general name'), 'singular_name' => 'Add_new_item' => __ ('Add New FAQ'), 'edit_item' => __ (' 'not_found' => __ ('Nu găsiți întrebări frecvente'), 'not_found_in_trash' => __ ('Nu există întrebări frecvente găsit în coșul de gunoi "), 'parent_item_colon' =>");

După ce am definit etichetele, definim în continuare argumentele mulțime pentru register_post_type metodă. Aceste argumente conțin toate informațiile importante care vor defini componentele postării FAQ. De exemplu, va avea o casetă de etichete; o cutie de extras? Transmitem și matricea etichetelor definite mai sus ca și argument.

 $ args = array ('etichete' => etichete $, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'query_var' => true, 'rewrite' => true, '=>' post ',' hierarchical '=> false,' menu_position '=> 5,' supports '=> array (' title ',' editor ',' thumbnail ',' custom-fields '));

Acum, că argumentele sunt definite, putem înregistra tipul postului personalizat folosind register_post_type metodă. Puteți afla mai multe despre această metodă prin trimiterea la documentația sa din Codul WordPress.

 funcția my_custom_init () $ labels = array ('name' => _x ('FAQs', 'post type general name'), 'singular_name' => '=> _x (' Add New ',' FAQ '),' add_new_item '=> __ (' ("Întrebări frecvente la întrebări frecvente"), "not_found" => __ ("Nu au fost găsite întrebări frecvente"), "not_found_in_trash" => __ ("Nu există întrebări frecvente găsite în coșul de gunoi"), "parent_item_colon" => "); $ args = array ('etichete' => etichete $, public '=> true,' publicly_queryable '=> true,' show_ui '= > true, 'rewrite' => true, 'capability_type' => 'post', 'hierarchical' => false, 'menu_position' => , "editor", "miniatură", "câmpuri personalizate")); register_post_type ('faq', $ args);

Verificați panoul de administrare pentru a determina dacă postul de tip FAQ a fost, de fapt, adăugat cu succes. Sperăm că veți vedea fila Întrebări frecvente în bara laterală.

Mesajele Dummy FAQ

Acum mergeți mai departe și adăugați câteva întrebări frecvente demo, deoarece avem nevoie de date pentru crearea și testarea șablonului. Titlul fiecărei postări de Întrebări frecvente ar trebui să fie întrebarea, iar conținutul va fi răspunsul.

---

Pasul 3: Codarea șablonului

Până acum, am creat postări personalizate cu întrebări frecvente, precum și am inserat un set de date de probă. Acum, vom codifica șablonul pentru a afișa întrebările frecvente, în consecință. Principala logică pe care am folosit-o pentru organizarea șablonului este: utilizați ID-ul unic al întrebării frecvente pentru a conecta întrebarea la răspunsurile. Prin urmare, avem două părți în șablon: secțiunea întrebări, care enumeră toate titlurile frecvente; și secțiunea de răspuns, care afișează conținutul fiecăreia dintre întrebările frecvente.

Găsi header.php fișier, deschideți-l, ștergeți div cu un id de "acces" în partea de jos, precum și paragraful care conține descrierea blogului. Acum adăugați următorul cod.

După ce vom prelua datele postărilor noastre de întrebări frecvente, trebuie să încadrați arhitectura modului în care vor fi afișate întrebările. O vom face în felul următor. Tot conținutul este înfășurat într-un div cu un id de "conținut".

 
  
Întrebări frecvente
 
 
  
„>
  
 
  
Nu a fost gasit
 
Ne pare rău, nicio întrebare nouă nu a fost creată încă.
 

Partea cea mai importantă aici este aceea în care atribuim hyperlink-ul cu valoarea "#answer" și adăugăm postarea id la el. Putem folosi acest lucru pentru a sari la raspunsuri, atunci cand faceti click.

După ce ne-am afișat toate întrebările, vom "relua" postările noastre pentru a reveni la început.

Acum vom structura modul în care vor apărea răspunsurile, chiar sub întrebările.

 corp background-color: #bcbcbc; . clar clar: ambele;  h1, h2, h3, h4, h5, h6 culoare: # 424242; font-family: Georgia, Arial, Helvetica, sans-serif; text-shadow: #fff 1px 1px 0px;  h1 a culoare: # 424242; font-size: 50px; Poziția: relativă; top: 11px; font-weight: normal; z-index: 100;  h3 font-size: 20px; font-weight: bold; margin-bottom: 20px;  h4 font-size: 14px; font-weight: bold; margin-bottom: 10px;  a culoare: # 3299bb; text-decoration: nici unul; -moz-tranziție: toate în 0,2 secunde; -webkit-transition: toate 0.2s ease-in-out; -o-tranziție: toate în 0,2 secunde; tranziție: toate în 0,2 secunde;  # wrap-up width: 750px; poziție: relativă; margine: 0px auto 20px auto; padding-top: 50px;  #content background-color: # e9e9e9; umplutura: 64px 35px 22px; font-size: 14px; font-familie: Arial, Helvetica, sans-serif; -webkit-box-shadow: rgba (0,0,0,1) 0px 0px 4px; -moz-box-shadow: rgba (0,0,0,1) 0px 0px 4px; box-shadow: rgba (0,0,0,1) 0px 0px 4px;  #contentul p text-align: justify; font-size: 12px; linia-înălțime: 18px; margin-bottom: 10px;  #questions margin-bottom: 50px;  #questions li marginea-jos: 20px; culoare: # 3299bb; listă-tip-tip: disc; listă-stil-poziție: interior;  #questions ul li a font-weight: bold;  #questions ul li a: hover culoare: # 00befd;  #questions ul li a: activ culoare: # e78c03;  #answers adresa ul li margin-bottom: 30px; clar: ambele;  #footer padding-top: 5px; text-align: center;  #footer p (culoare: # 424242;  #footer a culoare: # 424242; font-weight: bold; 

 .curent-faq background-color: # 424242; culoare: # e9e9e9; padding: 30px 30px 23px;  .current-faq h4 culoare: # e9e9e9; font-weight: bold; font-size: 22px; text-shadow: # 000 1px 1px 0px;  .butonul top frontieră-sus: 1px solid # 96d1f8; fundal: # 2289a8; fundal: -webkit-gradient (liniar, partea stângă sus, partea stângă jos, de la (# 3299bb), la (# 2289a8)); fundal: -moz-linear-gradient (top, # 3299bb, # 2289a8); padding: 4px 8px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; raza de pe raza de sus-stanga: 6 pixeli; -webkit-box-shadow: rgba (0,0,0,1) -1px -1px 0; -moz-box-shadow: rgba (0,0,0,1) -1px -1px 0; box-shadow: rgba (0,0,0,1) -1px -1px 0; text-shadow: rgba (0,0,0, .4) -1px -1px 0; culoare: #ffffff; font-size: 11px; font-familie: Georgia, serif; text-decoration: nici unul; vertical-aliniere: mijloc; font-weight: bold; float: dreapta; dreapta: -30px; poziție: relativă; . butonul top: hover border-top-color: # 0b93bd; fundal: # 0b93bd; culoare: #ffffff; . butonul top: activ border-top-color: # e78c03; fundal: # e78c03; 

 $ (document) .ready (functie () $ ("div # intrebari ul a"). selectat + '' '; / * - Eliminarea clasei curente și a butonului top de la întrebările frecvente anterioare --- * / $ ('. top-button '). removeClass (), $ .scrollTo (selectat, 400, functie () $ (selectat) .addClass ('curent-faq', 400); ); return false;);

 $ (''. curent-faq '). removeClass (' curent-faq ', 400, functie () $ .scrollTo ('0px', 800);); return false;);