Cum să faci un șablon de link-uri cu meniu scrollabil

Cum doriți să utilizați Managerul de linkuri WordPress? Veți găsi că este destul de util, dacă este folosit din motive corecte.

Aș dori să vă arăt o modalitate de a adăuga linkuri către site-ul dvs. WordPress, care nu numai că utilizează link-ul Manager, ci și să creeze mai mult conținut pentru site-ul dvs. Web cu un flux de lucru rapid și ușor.


Ce vei construi

Permiteți-mi să încep cu o revizuire rapidă a Links Manager pentru WordPress. Managerul de linkuri vă permite să stocați un set de linkuri externe, cunoscute și sub numele de blogroll. Aceste link-uri pot fi introduse în categorii, importate, exportate, adăugate, șterse și editate. Categoriile de link-uri pot fi de asemenea adăugate, șterse și editate. Puteți găsi link-ul Manager în secțiunea link-uri din panoul de administrare WordPress.

Începând cu versiunea 3.5, link-ul Manager și blogroll sunt ascunse pentru instalări noi și orice instalări WordPress existente care nu au link-uri. Dacă faceți upgrade de la o versiune anterioară a WordPress cu orice link activ, Managerul de Linturi va continua să funcționeze normal.

Dacă doriți să restaurați panoul Links (link-uri) la instalare, puteți descărca și instala pluginul Links Manager.

O modalitate folositoare de a utiliza WordPress 'Links Manager este de a afișa o listă zilnică de linkuri externe, cum ar fi site-urile preferate, partenerii afiliați, melodiile, videoclipurile amuzante etc..

Opțiunile sunt nelimitate, dar țineți cont de strategia din spatele site-ului dvs. web. De exemplu, voi compila o listă de linkuri ale cântecelor mele preferate, care sunt hiperlink la melodia din iTunes, unde pot auzi și / sau descarca melodia.


1. Crearea categoriilor Link

Înainte de a începe să dezvoltăm șablonul de pagină de linkuri, trebuie să determinăm ce vor fi categoriile de link-uri. Acest lucru poate fi determinat în mai multe moduri. Câteva exemple sunt după gen - cum ar fi reggae, rap, country, metal - cu 5 stele sau ordine alfabetică. Din moment ce compilarea unei liste de cântece preferate voi organiza categoriile de link-uri în ordine alfabetică.

Începeți prin conectarea la WordPress, plasând cursorul peste link-uri și făcând clic pe "Categorii de link". Pentru a adăuga corect o categorie de link-uri, asigurați-vă că aveți un nume și un slug. Descrierea nu este necesară. Numele este modul în care apare pe site-ul dvs. Slug este versiunea prietenoasă a adresei URL a numelui. Este, de obicei, toate literele mici și conține numai litere, numere și cratime. Dacă nu este introdus un blitz atunci când creați o categorie de link-uri, Managerul de Linkuri va crea automat unul bazat pe nume.

Deoarece organizăm melodiile în ordine alfabetică, faceți numele primei categorii de link-uri "#", a doua categorie de link-uri "A", a treia categorie "B" și așa mai departe până când ajungeți la "Z". Nu faceți niciun fel de categorii de link-uri suplimentare sau altfel acestea vor apărea în navigația dvs. pe șablonul de pagină de link-uri. Deci, asigurați-vă că ștergeți toate categoriile de link-uri existente.


2. Crearea șablonului de link-uri și a meniului derulant

Acum, că toate categoriile de link-uri sunt făcute, putem începe să construim șablonul de pagină de link-uri. Deci, haideți să începem prin copierea și lipirea unui șablon de pagină deja construit în tema WordPress, redenumind-o Link-uri-page-template.php, și deschiderea acestuia în editorul dvs. de text preferat.

Motivarea pentru copierea și inserarea unui șablon de pagină deja construit este motivul pentru care doriți ca șablonul de pagină de link-uri să aibă același design ca și restul site-ului dvs..

Dacă întâmpinați dificultăți în găsirea unui șablon de pagină deja construit în tema WordPress, căutați un set de fișiere numite în mod consistent Pagina-contact.php, Pagina-portfolio.php, pagină full-width.php, etc.

Este obișnuit ca temele WordPress să aibă mai multe șabloane de pagini care sunt denumite în mod consecvent, astfel încât să rămână organizate. De asemenea, puteți deschide un fișier pentru a vedea dacă fișierul începe cu identificatorul șablonului de pagină, cum ar fi exemplul de mai jos:

 

Primul lucru pe care doriți să-l faceți este să modificați numele șablonului (vedeți codul de mai sus) la "Link-uri". Codul de mai sus permite WordPress să știe că este un șablon, astfel încât acesta va fi disponibil în meniul derulant prin intermediul editorului de pagini cu numele șablonului pe care îl dați, în acest caz numit "Legături".


3. Adăugarea meniului derulant

Acum căutați codul continutul(). Acest cod preia conținutul paginii, conținutul adăugat la editorul WYSIWYG pentru pagină.

Acesta este un loc minunat pentru a vă pune meniul derulant și pentru a vă arăta legăturile, care nu va apărea până când nu adăugați un nou link la una dintre categoriile de linkuri pe care tocmai le-ați creat. Vom ajunge la asta mai târziu. De mai jos continutul() cod în șablonul dvs. adăugați:

  
". $ cat-> cat_name. ''; ?>

Codul $ cats = get_categories ("taxonomie = link_category & hierarchical = 0") returnează toate categoriile de link-uri create și afișează numele categoriei utilizând valoarea ". $ cat-> cat_name. '. Dacă doriți să aflați mai multe get_categories în Codul WordPress.

id = "scrollablemenu" este conectat la un JavaScript (despre care voi vorbi mai departe) pentru a face meniul să funcționeze corect și class = "scrollablemenubutton" este un CSS care vă va oferi butoanelor un stil foarte simplu. Vă încurajez să fiti mai creativi cu CSS, dar stilul de bază va funcționa pentru moment.

Pentru a vedea CSS-ul de bază, descărcați fișierele pentru acest tutorial. În curând vă voi arăta cum să adăugați foaia de stil (și JavaScript) în șablonul de pagină, astfel încât să se încarce numai când șablonul de pagină este încărcat utilizând wp_enqueue_ *.

Pentru tine id = "scrollablemenu" veți dori să adăugați proprietățile:

 poziție: fixă; top: 10px; / * Asigurați-vă că proprietatea de sus are aceeași valoare ca fișierul javascript * / padding: 20px; lățime: 90px; margin-stânga: 500px;

poziție: fixă; și top: 10px; păstrează meniul fix în locația pe care o alegeți. top: 10px; stilul poate și poate fi necesar să fie modificat pentru a obține rezultatele pe care le căutați.

Dacă ar fi trebuit să puneți top: 100px; ar da meniului dvs. un top padding de 100px din partea de sus a site-ului dvs., deci dacă l-ați dat 0px meniul dvs. ar trebui să atingă partea superioară a site-ului dvs. web. Rețineți că oricând schimbați stilul de sus trebuie de asemenea să schimbați codul JavaScript pentru a se potrivi.

Nu vă faceți griji - vom ajunge la codul JavaScript în doar puțin.

Am înfășurat meniul într-un div cu -Marginea din stânga stil pentru a poziționa meniul derulant din partea dreaptă. Acest lucru se datorează faptului că meniul plutește în partea superioară a conținutului, astfel încât, dacă meniul nu a fost împins în dreapta, legăturile se vor pierde în spatele meniului derulant. margin-stânga: 500px; va trebui cel mai probabil să fie modificat pentru a se potrivi lățimii site-ului dvs..

De asemenea, am făcut meniul derulant ca meniu vertical în loc de orizontal, făcând o lățime de 90px. Puteți schimba cu ușurință meniul într-un meniu orizontal, ștergând lățime: 90px; margin-stânga: 500px;, dar știți că conținutul dvs. se poate pierde în spatele meniului.

Să vorbim despre fișierul JavaScript care face ca meniul scrollabil să funcționeze. Descărcați fișierele pentru acest tutorial și deschideți fișierul JavaScript numit scrollablemenu.js.

 $ ((fereastra) .scroll (functie () $ ("# scrollablemenu")) css ("top", Math.max (0, 10 - $ (this).

Cele două părți importante din cod sunt #scrollablemenu și 10.

#scrollablemenu trebuie să se potrivească cu dvs. id = "scrollablemenu" sau nu va funcționa.

Anterior am vorbit despre cum ai schimba top: 10px; stil va trebui să îl modificați în fișierul JavaScript în consecință. Puteți face acest lucru pur și simplu schimbați 10 se ridica la suma pe care ai schimbat stilul de top.


4. Adăugarea fișierelor

Acum, că aveți o înțelegere a modului în care funcționează codul JavaScript, să adăugăm aceasta și foaia de stil șablonului de pagină, astfel încât meniul să se deruleze și butoanele să aibă un anumit stil.

O modalitate ușoară și organizată de a face acest lucru este utilizarea wp_enqueue_script și wp_enqueue_style; o face, astfel încât să nu trebuie să adăugați CSS la o altă foaie de stil sau JavaScript la dvs. header.php fişier. Se încarcă fișierele numai atunci când șablonul de pagină este încărcat, ceea ce face ca site-ul dvs. să ruleze mai repede.

Să adăugăm mai întâi fișierul JavaScript. Luați codul de mai jos și adăugați la începutul șablonului de pagină (sub numele șablonului).

 

Acum FTP scrollablemenu.js fișier pentru site-ul dvs. de găzduire. Asigurați-vă că schimbați /js/scrollablemenu.js locația în directorul în care ați încărcat fișierul JavaScript. Acum, să adăugăm fișierul stilistic chiar sub codul pe care tocmai l-ați adăugat.

 

FTP scrollablemenu.css fișier pentru site-ul dvs. de găzduire. Asigurați-vă că schimbați /css/scrollablemenu.css locație în dosarul pe care l-ați încărcat fișierul cu foi de stil. Acum, fișierele JavaScript și fișierele de stil se vor încărca atunci când se încarcă șablonul paginii de linkuri.

Principala diferență dintre cele două coduri sunt funcțiile wp_enqueue_script și wp_enqueue_style. Dacă doriți să aflați mai multe despre wp_enqueue_ * aruncați o privire la tutorialul Cum să includeți JavaScript și CSS în temele și pluginurile WordPress.


5. Adăugarea categoriilor Link

Acum, să adăugăm cea mai importantă parte a șablonului de pagină de link-uri ... categoriile de link-uri.

Adăugați acest cod sub codul de meniu derulant.

  

". $ cat-> cat_name. '

„; echo "
    „; $ cărți = get_bookmarks ("category = $ cat-> cat_ID"); foreach ($ cărți ca $ carte) echo '
  • „; echo 'link_url. ''> '. $ book-> link_name.' '; echo'
  • „; // end books loop echo '
„; // bucla de pisici end; ?>

Din nou, folosim $ cats = get_categories ("taxonomie = link_category & hierarchical = 0"), codul returnează toate categoriile de link-uri create și afișează numele categoriei utilizând valoarea ". $ cat-> cat_name. '.

Partea importantă a codului este cum ". $ cat-> cat_name. ' returnează numele categoriei ca nume de ancoră (un nume = "'. $ cat-> cat_name."). Acest lucru face ca meniul derulant să funcționeze, astfel încât atunci când un vizitator dă clic pe meniul derulant, acesta va face legătura cu secțiunea corectă din șablonul de pagină.
Restul codului afișează adresa URL a linkului utilizând valoarea ". $ book-> link_url. ' și afișează numele legăturii utilizând valoarea ". $ book-> link_name. '. Acest lucru este realizat prin utilizarea funcției get_bookmarks ("category = $ cat-> cat_ID").

Puteți afla mai multe, mergând la get_bookmarks în Codul WordPress.

Fiecare linie de cod se află în interiorul a div cu class = "linkcategories" (care se adaugă la scrollablemenu.css fișier) și fiecare rând de cod va afișa titlul (numele categoriei) cu a h3 tag-ul, titlul va fi, de asemenea, numele ancorei și link-urile create în Links Manager vor fi înfășurate Li tag-uri, hyperlinked cu URL-ul link-ului.

Deci știi că codul este înfășurat într-un div cu o lățime de 490px, în acest fel, niciun text nu se va pierde în spatele meniului scrollabil (vertical). lățime: 490px; va trebui cel mai probabil să fie modificat pentru a se potrivi lățimii site-ului dvs..

Dacă modificați lățimea, rețineți că modificați meniul derulant div stil margin-stânga: 500px;. Este împins corect 10px mai mult meniul derulant div nu va suprapune categoriile de link-uri div.

Șablonul de pagină de link-uri este terminat! Asigurați-vă că FTP Link-uri-page-template.php fișier în directorul rădăcină temă WordPress.


6. Creați o pagină cu șablonul Pagină de legături

Acum, dacă au fost create categoriile de link-uri și șablonul de pagină de legături este construit și încărcat, să adăugăm o pagină nouă utilizând șablonul.

În secțiunea de administrare WordPress de sub pagini, faceți clic pe adăugați un nou. Mai întâi, adăugați numele paginii dvs., în al doilea rând selectați șablonul Linkuri din meniul drop-down din dreptul Atribute pagină (partea dreaptă). Publicați și treceți la ultimul pas.


7. Adăugați o nouă legătură la categoria Link

Dacă ați previzualizat deja pagina pe care tocmai ați creat-o și ați observat că se afișa numai meniul derulant vertical care se datorează faptului că trebuie să adăugați linkuri către categoriile de linkuri pe care le-ați făcut mai devreme. Dacă categoria de link-uri nu are link-uri, atunci nimic nu va apărea.

Deci, să adăugăm o legătură făcând clic pe adăugați un nou link în secțiunea de administrare WordPress. Introduceți numele, cum ar fi Daniel Lee Kendall - pierdut în momentul, web și selectați categoria. Partea dreaptă, dați clic pe adăugați linkul și acum puteți verifica pagina pentru a vedea rezultatele. Ești terminat!


Concluzie

Dacă nu obțineți rezultatele pe care le-ați sperat, jucați cu lățimea fiecăruia div, și / sau pentru a crea o foaie de stil mai bună pentru meniul derulant.

Cod