Slik lager du en koblingsmall med rullegardinmenyen

Hvordan vil du gjerne benytte WordPress 'Links Manager? Du finner det er ganske nyttig, hvis brukt av de riktige grunnene.

Jeg vil gjerne vise deg en måte å legge til linker til WordPress-nettstedet ditt, som ikke bare gjør bruk av Links Manager, men også skape mer innhold for nettstedet ditt med en rask og enkel arbeidsflyt.


Hva du skal bygge

La meg starte med en rask gjennomgang av Links Manager for WordPress. Links Manager lar deg lagre et sett med eksterne lenker, også kjent som blogrollen din. Disse koblingene kan settes inn i kategorier, importeres, eksporteres, legges til, slettes og redigeres. Koblingskategoriene kan også legges til, slettes og redigeres. Du kan finne Links Manager i koblingsdelen av WordPress administrasjonspanelet.

Fra versjon 3.5 er Links Manager og blogroll skjult for nye installasjoner og eksisterende WordPress-installasjoner som ikke har noen koblinger. Hvis du oppgraderer fra en tidligere versjon av WordPress med aktive koblinger, fortsetter lenkesjefen til å fungere som normalt.

Hvis du vil gjenopprette Linker-panelet til installasjonen, kan du laste ned og installere Plugin for koblingsbehandling.

En nyttig måte å benytte seg av WordPress 'Links Manager er å vise en daglig kompilert liste over eksterne koblinger, for eksempel favorittwebsteder, tilknyttede partnere, sanger, morsomme videoer osv..

Alternativene er ubegrensede, men husk strategien bak nettstedet ditt. Så for eksempel skal jeg kompilere en liste over lenker til min favoritt sanger, hvilken hyperkobling til sangen i iTunes, hvor de kan høre og / eller laste ned sangen.


1. Opprette Link-kategoriene

Før vi begynner å utvikle linkesidenmalen, må vi avgjøre hva koblingskategoriene vil være. Dette kan bestemmes på flere måter. Noen eksempler er etter sjanger - som reggae, rap, land, metall - med 5 stjerner eller i alfabetisk rekkefølge. Siden jeg lager en liste over favoritt sanger, organiserer jeg linkekategoriene i alfabetisk rekkefølge.

Start med å logge inn i WordPress, sveve over koblinger og klikke "Link Categories". For å legge til en koblingskategori må du sørge for at du har et navn og slug. Beskrivelsen er ikke nødvendig. Navnet er hvordan det vises på nettstedet ditt. Sluggen er den nettadressevennlige versjonen av navnet. Det er vanligvis alle små bokstaver og inneholder bare bokstaver, tall og bindestreker. Hvis en slug ikke er oppgitt når du oppretter en koblingskategori, oppretter Linker Manager automatisk en basert på navnet.

Siden vi organiserer sangene i alfabetisk rekkefølge, oppgi navnet på den første linkkategorien "#", den andre koblingskategorien "A", den tredje kategorien "B" og så videre til du når "Z". Ikke legg til noen ekstra koblingskategorier eller ellers vil de dukke opp i navigasjonen din på sideskjemaet for koblinger. Så vær sikker på å slette eksisterende koblingskategorier.


2. Bygg lenkeskjemaet og rullegardinmenyen

Nå som alle koblingskategoriene er laget, kan vi begynne å bygge linkesiden mal. Så la oss starte med å kopiere og lime inn en allerede bygget sidemal i WordPress-temaet, omdøpe det til links-side-template.php, og åpne den i din favoritt tekstredigerer.

Begrunnelsen for å kopiere og lime inn en allerede bygget sidemaler er fordi du vil at sidemalen for koblinger skal ha samme design som resten av nettstedet ditt.

Hvis du har problemer med å finne en allerede bygget sidemal i WordPress-temaet, ser du etter et sett med filer som heter konsekvent som side-contact.php, side-portfolio.php, side-full width.php, etc.

Det er vanlig for WordPress-temaer å ha flere sidemaler som heter konsekvent, slik at de holder orden. Du kan også åpne en fil for å se om filen starter med sidemalenidentifikatoren, som eksempelet nedenfor:

 

Første ting du vil gjøre er å endre malnavnet (se koden ovenfor) til "Links". Ovenstående kode lar WordPress vite at det er en mal, så det vil være tilgjengelig i rullegardinmenyen via sideditoren av malnavnet som du gir det, i dette tilfellet kalt "Links".


3. Legge til rullegardinmenyen

Se nå koden innholdet(). Denne koden henter sidens innhold, innholdet som er lagt til i WYSIWYG-editoren for siden.

Dette er et flott sted å sette din rullerbare meny og et flott sted å vise linkene dine, som ikke vises før du legger til en ny lenke til en av koblingskategoriene du nettopp har opprettet. Vi kommer til dette senere. Under innholdet() kode i malen din legg til:

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

Koden $ cats = get_categories ("taxonomy = link_category & hierarchical = 0") returnerer alle koblingskategoriene som er opprettet og viser kategorinavnet ved å bruke verdien '. $ cat-> cat_name. '. Hvis du vil lære mer, gå til get_categories i WordPress Codex.

De id = "scrollablemenu" er koblet til noen JavaScript (som jeg snakker om neste) for å gjøre menyfunksjonen riktig og class = "scrollablemenubutton" er noe CSS som vil gi knappene dine en veldig grunnleggende stil. Jeg oppfordrer deg til å være mer kreativ med CSS, men den grunnleggende stilen vil fungere for nå.

For å se grunnleggende CSS, last ned filene for denne opplæringen. Snart vil jeg vise deg hvordan du legger til stilarket (og JavaScript) til sidemalen, slik at den bare lastes når sidemalen er lastet inn ved å bruke wp_enqueue_ *.

For din id = "scrollablemenu" du vil legge til egenskapene:

 posisjon: fast; topp: 10px; / * Kontroller at toppegenskapen har samme verdi som javascriptfilen * / polstring: 20px; bredde: 90px; margin-left: 500px;

De posisjon: fast; og topp: 10px; holder menyen fast i stedet du velger. De topp: 10px; stil kan og må kanskje endres for å få resultatene du leter etter.

Hvis du skulle sette topp: 100px; det ville gi menyen en topppolstring av 100px fra toppen av nettstedet ditt, så hvis du ga det 0px menyen din bør røre toppen av nettstedet ditt. Husk når du endrer topp stil, må du også endre JavaScript-koden for å matche.

Ikke bekymre deg - vi kommer til JavaScript-koden på litt.

Jeg pakket menyen i en div med en margin-left stil for å plassere den rullbare menyen på høyre side. Dette skyldes at menyen flyter på toppen av innholdet, så hvis menyen ikke ble presset til høyre, vil koblingene gå seg vill bak den rullbare menyen. De margin-left: 500px; vil sannsynligvis måtte endres for å passe til nettsidens bredde.

Jeg lagde også den rullbare menyen som en vertikal meny i stedet for horisontal ved å lage en bredde på 90px. Du kan enkelt bytte menyen til en horisontal meny ved å slette bredde: 90px; margin-left: 500px;, men vet at innholdet ditt kan gå seg vill bak bakmenyen.

La oss snakke om JavaScript-filen som gjør at den rullbare menyen fungerer. Last ned filene for denne opplæringen og åpne JavaScript-filen som heter scrollablemenu.js.

 $ (vindu) .scroll (funksjon () $ ("# scrollablemenu"). css ("topp", Math.max (0, 10 - $ (dette) .scrollTop ()););

De to viktige delene i koden er #scrollablemenu og 10.

#scrollablemenu trenger å matche din id = "scrollablemenu" eller det vil ikke fungere.

Tidligere snakket vi om hvordan om du endrer topp: 10px; stil må du endre den i JavaScript-filen tilsvarende. Du kan gjøre dette, bare å endre 10 Beløp til hvilket beløp du endret din topp stil.


4. Legge til filene

Nå som du har en forståelse av hvordan JavaScript-koden fungerer, la oss legge den til og stilarket til sidemalen slik at menyen vil rulle og knappene vil ha litt stil.

En enkel og organisert måte å gjøre dette på er bruk wp_enqueue_script og wp_enqueue_style; det gjør det slik at du ikke trenger å legge til CSS i et annet stilark eller JavaScript til din header.php fil. Det laster bare filene når sidemalen er lastet, noe som gjør at nettstedet ditt kjører raskere.

La oss først legge til JavaScript-filen. Ta under koden og legg til i begynnelsen av sidemalen din (under malnavnet).

 

Nå FTP den scrollablemenu.js fil til nettstedet ditt hosting. Pass på at du endrer /js/scrollablemenu.js plassering i mappen du lastet opp JavaScript-filen til. La oss nå legge til stilarkfilen rett under koden du nettopp har lagt til.

 

FTP the scrollablemenu.css fil til nettstedet ditt hosting. Pass på at du endrer /css/scrollablemenu.css plassering i mappen du lastet opp stilarkfilen til. Nå vil JavaScript- og stilarkfilene lastes inn når sidemalen for koblinger lastes.

Hovedforskjellen mellom de to kodene er funksjonene wp_enqueue_script og wp_enqueue_style. Hvis du vil lære mer om wp_enqueue_ * ta en titt på veiledningen Slik inkluderer du JavaScript og CSS i WordPress-temaene og pluginene.


5. Legge til Link-kategoriene

La oss nå legge til den viktigste delen til din linkesidemal ... lenekategoriene.

Legg til denne koden under den rullbare menykoden.

  

'. $ cat-> cat_name. '

'; ekko '
    '; $ books = get_bookmarks ("category = $ cat-> cat_ID"); foreach ($ bøker som $ bok) echo '
  • '; ekko 'link_url. ''> '. $ book-> link_name.' '; echo'
  • '; // end bøker loop echo '
'; / / slutten katter loop; ?>

Igjen bruker vi $ cats = get_categories ("taxonomy = link_category & hierarchical = 0"), koden returnerer alle koblingskategorier opprettet og viser kategorinavnet ved å bruke verdien '. $ cat-> cat_name. '.

Den viktige delen av koden er hvordan '. $ cat-> cat_name. ' Returnerer kategorinavnet som ankernavn (et navn = "'. $ cat-> cat_name.'"). Dette gjør det slik at den rullbare menyen fungerer, så når en besøkende klikker på den rullbare menyen, vil den lenke til den riktige delen på sidemal.
Resten av koden viser linkadressen ved å bruke verdien '. $ bok-> link_url. ' og viser koblingsnavnet ved å bruke verdien '. $ book-> link_name. '. Dette er alt oppnådd ved å bruke funksjonen get_bookmarks ("category = $ cat-> cat_ID").

Du kan lære mer ved å gå til get_bookmarks i WordPress Codex.

Hver linje med kode er inne i a div med class = "linkcategories" (som legges til i scrollablemenu.css fil) og hver linje av kode vil vise tittelen (navn på kategori) med a h3 tag, vil tittelen også være ankernavnet og linkene som er opprettet i Links Manager vil bli pakket inn i li koder, hyperkoblet med linkadressen.

Så du vet at koden er pakket inn i en div med en bredde på 490px, På den måten vil ingen tekst gå seg vill bak den rullbare (vertikale) menyen. De bredde: 490px; vil sannsynligvis måtte endres for å passe til bredden på nettstedet ditt.

Hvis du endrer bredden, husk å endre den rullbare menyen div stil margin-left: 500px;. Den skyves over til høyre 10px mer så den rullbare menyen div vil ikke overlappe koblingskategoriene div.

Lenkesiden din er ferdig! Pass på å FTP links-side-template.php fil til WordPress-tema root-katalogen.


6. Opprett en side med siden med linker side

Nå som koblingskategoriene er opprettet og siden for sidesiden er bygget og lastet opp, la vi legge til en ny side ved hjelp av malen.

I din WordPress admin-seksjon under sider klikker du Legg til ny. Først legg til sidenavnet ditt, velg linkemalen i rullegardinmenyen under Sideattributter (høyre side). Publiser og la oss gå videre til det siste trinnet.


7. Legg til ny lenke til koblingskategori

Hvis du allerede forhåndsvisning av siden du nettopp har opprettet og lagt merke til, vises bare den vertikale, rullbare menyen som skyldes at du må legge til linker til koblingskategoriene du tidligere har laget. Hvis koblingskategorien ikke har noen koblinger, vises ingenting.

Så la oss legge til en lenke ved å klikke på Legg til ny under Lenker i WordPress admin-delen din. Skriv inn navnet, for eksempel Daniel Lee Kendall - Tapt i øyeblikket, web-adresse og velg kategorien. Høyre side, klikk på Legg til kobling, og nå kan du sjekke siden din for å se resultatene. Du er ferdig!


Konklusjon

Hvis du ikke får de resultatene du håpet, lek med bredden på hver div, og / eller opprett et bedre stilark for den rullbare menyen.