Share
Hur skulle du vilja använda WordPress 'Links Manager? Du hittar det är ganska användbart, om det används av de rätta orsakerna.
Jag skulle vilja visa dig ett sätt att lägga till länkar till din WordPress-webbplats som inte bara använder Links Manager, utan också skapa mer innehåll för din webbplats med ett snabbt och enkelt arbetsflöde.
Låt mig börja med en snabb översyn av Links Manager för WordPress. Länkshanteraren låter dig lagra en uppsättning externa länkar, även känd som din bloggroll. Dessa länkar kan sättas in i kategorier, importeras, exporteras, läggs till, raderas och redigeras. Länkkategorierna kan också läggas till, raderas och redigeras. Du hittar länkhanteraren i länkavsnittet på administrationspanelen på WordPress.
Från version 3.5 är länkarhanteraren och bloggrollen gömda för nya installationer och eventuella befintliga WordPress-installationer som inte har några länkar. Om du uppgraderar från en tidigare version av WordPress med några aktiva länkar, fortsätter Länkshanteraren att fungera som vanligt.
Om du vill återställa panelen Länkar till din installation kan du hämta och installera pluginprogrammet Länkshanterare.
Ett användbart sätt att använda WordPress 'Links Manager är att visa en dagligen sammanställd lista över externa länkar, till exempel favoritwebbplatser, affiliate-partners, låtar, roliga videor etc..
Alternativen är obegränsade, men kom ihåg strategin bakom din webbplats. Så till exempel kommer jag att sammanställa en lista med länkar till mina favoritsångar, vilken hyperlänk till låten i iTunes, där de kan höra och / eller ladda ner låten.
Innan vi börjar utveckla länkens sidmall måste vi bestämma vad länkkategorierna kommer att vara. Detta kan bestämmas på ett antal sätt. Några exempel är av genre - som reggae, rap, land, metall - med 5 stjärnor eller i alfabetisk ordning. Eftersom jag sammanställer en lista med favoritlåtar organiserar jag länk kategorierna i alfabetisk ordning.
Börja med att logga in i WordPress, sväva över länkar och klicka på "Länka kategorier". För att korrekt lägga till en länkskategori, se till att du har ett namn och slug. Beskrivningen är inte nödvändig. Namnet är hur det visas på din webbplats. Sluggen är den URL-vänliga versionen av namnet. Det är vanligtvis alla små bokstäver och innehåller bara bokstäver, siffror och bindestreck. Om en slug inte anges när du skapar en länkskategori skapar Länkshanteraren automatiskt en baserat på namnet.
Eftersom vi organiserar låtarna i alfabetisk ordning, gör namnet på den första länkkategorin "#", den andra länkkategorin "A", den tredje kategorin "B" och så vidare tills du når "Z". Gör inga extra länk kategorier eller annars kommer de att dyka upp i din navigering på din sidans sidmall. Så var noga med att ta bort några befintliga länk kategorier.
Nu när alla länk kategorier är gjorda, kan vi börja bygga sidans sidmall. Så låt oss börja med att kopiera och klistra in en redan byggd sidmall i ditt WordPress-tema, byta namn på det links-page-template.php, och öppna den i din favorit textredigerare.
Anledningen till att kopiera och klistra in en redan byggd sidmall är att du vill att sidans sidmall ska ha samma design som resten av din webbplats.
Om du har problem med att hitta en redan inbyggd sidmall i ditt WordPress-tema, leta efter en uppsättning filer som namnges konsekvent som page-contact.php, page-portfolio.php, page-full width.php, etc.
Det är vanligt att WordPress-teman har flera sidmallar som heter konsekvent så att de hålls organiserade. Du kan också öppna en fil för att se om filen börjar med sidmallidentifieraren, som exemplet nedan:
Första sak du vill göra är att ändra mallnamnet (se ovanstående kod) till "Länkar". Ovanstående kod låter WordPress veta att det är en mall, så det kommer att finnas tillgängligt på rullgardinsmenyn via sidredigeraren med det mallnamn som du ger det, i det här fallet heter "Links".
Leta nu efter koden innehållet(). Den här koden hämtar sidinnehållet, innehållet som läggs till i WYSIWYG-redigeraren för sidan.
Det här är en bra plats att lägga din rullbara meny och en bra plats för att visa dina länkar, som inte kommer att visas tills du lägger till en ny länk till en av de länkkategorier du just skapat. Vi kommer att komma till det här senare. Nedan innehållet() kod i din mall lägg till:
'. $ cat-> cat_name. ''; ?>
Koden $ cats = get_categories ("taxonomy = link_category & hierarchical = 0") returnerar alla länk kategorier skapade och visar kategorin namn med hjälp av värdet '. $ cat-> cat_name. '. Om du vill lära dig mer gå till get_categories i WordPress Codex.
De id = "scrollablemenu" är ansluten till vissa JavaScript (som jag talar om nästa) för att göra menyfunktionen korrekt och class = "scrollablemenubutton" är några CSS som ger dina knappar en mycket grundläggande stil. Jag uppmuntrar dig att vara mer kreativ med CSS, men den grundläggande stilen kommer att fungera för nu.
För att se grundläggande CSS ladda ner filerna för denna handledning. Snart ska jag visa dig hur du lägger till stilarket (och JavaScript) till din sidmall så att den bara laddas när din sidmall laddas med hjälp av wp_enqueue_ *.
För din id = "scrollablemenu" du vill lägga till egenskaperna:
position: fast; topp: 10px; / * Se till att den översta egenskapen har samma värde som javascript filen * / vaddering: 20px; bredd: 90px; marginal-vänster: 500px;
De position: fast; och topp: 10px; håller menyn fast i den plats du väljer. De topp: 10px; stil kan och kan behöva ändras för att få de resultat du letar efter.
Om du skulle sätta topp: 100px; det skulle ge din meny en toppad fyllning av 100px från toppen av din webbplats, så om du gav den 0px Din meny bör röra högst upp på din webbplats. Tänk på när du ändrar toppstilen, du behöver också ändra JavaScript-koden för att matcha.
Oroa dig inte - vi kommer till JavaScript-koden på bara lite.
Jag förpackade menyn i en div med en margin-vänster stil för att placera den rullbara menyn på höger sida. Detta beror på att menyn flyter ovanför innehållet, så om menyn inte skjuts till höger kommer länkarna att gå vilse bakom den rullande menyn. De marginal-vänster: 500px; kommer sannolikt att behöva ändras för att passa din webbplats bredd.
Jag gjorde också den rullande menyn som en vertikal meny istället för horisontell genom att göra en bredd på 90px. Du kan enkelt ändra menyn till en horisontell meny genom att radera bredd: 90px; marginal-vänster: 500px;, men vet att ditt innehåll kan gå vilse bakom menyn.
Låt oss prata om JavaScript-filen som gör att den rullbara menyn fungerar. Ladda ner filerna för den här handledningen och öppna den JavaScript-fil som heter scrollablemenu.js.
Accentsconagua
$ (fönster) .scroll (funktion () $ ("# scrollablemenu"). css ("top", Math.max (0, 10 - $ (detta) .scrollTop ());); De två viktiga delarna i koden är #scrollablemenu och 10.
#scrollablemenu måste matcha din id = "scrollablemenu" eller det kommer inte fungera.
Tidigare pratade vi om hur om du byter topp: 10px; stil måste du ändra det i JavaScript-filen i enlighet med detta. Du kan göra det här helt enkelt ändra 10 belopp till vilket belopp du ändrade din toppstil.
Nu när du har en förståelse för hur JavaScript-koden fungerar, låt oss lägga till den och stilarket till sidmallen så menyn rullar och knapparna kommer att ha lite stil.
Ett enkelt och organiserat sätt att göra detta är användning wp_enqueue_script och wp_enqueue_style; det gör det så att du inte behöver lägga till CSS i ett annat stilark eller JavaScript till din header.php fil. Det laddar bara filerna när din sidmall laddas, vilket gör att din webbplats körs snabbare.
Låt oss först lägga till JavaScript-filen. Ta underkoden och lägg till i början av din sidmall (nedanför mallnamnet).
Nu FTP scrollablemenu.js filen till din webbplats värd. Var noga med att ändra /js/scrollablemenu.js plats till mappen du laddade upp JavaScript-filen till. Låt oss nu lägga till stilarkfilen nedanför koden du just lagt till.
FTP den scrollablemenu.css filen till din webbplats värd. Var noga med att ändra /css/scrollablemenu.css plats till mappen du laddade upp stilarkfilen till. Nu laddas JavaScript- och stylesheet-filerna när sidmallen för länkar laddas.
Huvudskillnaden mellan de två koderna är funktionerna wp_enqueue_script och wp_enqueue_style. Om du vill lära dig mer om wp_enqueue_ * ta en titt på handledningen Hur man inkluderar JavaScript och CSS i dina WordPress-teman och plugins.
Låt oss nu lägga till den viktigaste delen till din sidmall för länkar ... länkkategorierna.
Lägg till den här koden under den rullande menykoden.
'. $ cat-> cat_name. '
'; eko "'; $ books = get_bookmarks ("category = $ cat-> cat_ID"); foreach ($ böcker som $ bok) echo '
'; // slutkattslingan; ?>- '; echo "link_url. ''> '. $ bok-> länknamn.' '; echo'
'; // slutet böcker loop echo "
Återigen använder vi $ cats = get_categories ("taxonomy = link_category & hierarchical = 0"), koden returnerar alla länk kategorier skapade och visar kategorin namn med hjälp av värdet '. $ cat-> cat_name. '.
Den viktiga delen av koden är hur '. $ cat-> cat_name. ' returnerar kategorinamn som ankarnamn (ett namn = "'. $ cat-> cat_name.'"). Detta gör det så att den rullande menyn fungerar, så när en besökare klickar på den rullande menyn kommer den att länka till den korrekta sektionen på din sidmall.
Resten av koden visar länkadressen med hjälp av värdet '. $ book-> link_url. ' och visar länkens namn genom att använda värdet '. $ bok-> länknamn. '. Allt detta uppnås genom att använda funktionen get_bookmarks ("category = $ cat-> cat_ID").
Du kan lära dig mer genom att gå till get_bookmarks i WordPress Codex.
Varje kodlinje är inuti a div med class = "linkcategories" (som läggs till i scrollablemenu.css fil) och varje kodlinje kommer att visa titeln (namn på kategori) med a h3 taggen kommer titeln också att vara ankarnamnet och länkarna som skapas i Links Manager kommer att vara inslagna i li taggar, hyperlänkade med länken URL.
Så du vet att koden är insvept i en div med en bredd av 490px, På så sätt kommer ingen text att gå vilse bakom rullningsbar (vertikal) meny. De bredd: 490px; kommer sannolikt att behöva ändras för att passa din webbplats bredd.
Om du ändrar bredden, kom ihåg att ändra den rullbara menyn div stil marginal-vänster: 500px;. Det skjuts över rätt 10px mer så den rullbara menyn div Överlappar inte länkkategorierna div.
Din sidans sidmall är klar! Var noga med att FTP links-page-template.php filen till ditt WordPress-tema rotkatalog.
Nu när länkkategorierna har skapats och sidans sidmall är uppbyggd och uppladdad, låt oss lägga till en ny sida med mallen.
I ditt WordPress-administrativ avsnitt under sidorna klickar du på lägg till nytt. Lägg först till ditt sidnamn, annars välj Länksmallen i rullgardinsmenyn under Sidattribut (höger sida). Publicera och låt oss gå vidare till sista steget.
Om du redan förhandsgranskade den sida du just skapade och märkte visade bara den vertikala rullbara menyn som beror på att du måste lägga till länkar till länkkategorierna du tidigare gjorda. Om länkkategorin inte har några länkar kommer ingenting att dyka upp.
Så, låt oss lägga till en länk genom att klicka på Lägg till nytt under Länkar i din WordPress-administrativ sektion. Ange namnet, till exempel Daniel Lee Kendall - förlorad i ögonblicket, webbadress och välj kategorin. Höger sida, klicka på länken Lägg till, och nu kan du kolla din sida för att se resultaten. Du är helt klar!
Om du inte får de resultat som du hoppats spelar du med bredden på varje div, och / eller skapa ett bättre stilark för den rullande menyn.
