Share
Hoe zou u gebruik willen maken van de Links Manager van WordPress? Je zult merken dat het best handig is, als het om de juiste redenen wordt gebruikt.
Ik wil u een manier tonen om links naar uw WordPress-website toe te voegen die niet alleen gebruik maken van Links Manager, maar ook meer inhoud voor uw website creëren met een snelle en eenvoudige workflow.
Laat ik beginnen met een kort overzicht van Links Manager voor WordPress. Met Links Manager kun je een set externe links opslaan, ook wel je blogroll genoemd. Deze links kunnen in categorieën worden geplaatst, geïmporteerd, geëxporteerd, toegevoegd, verwijderd en bewerkt. De koppelingscategorieën kunnen ook worden toegevoegd, verwijderd en bewerkt. U vindt de koppelingenmanager in de koppelingssectie van het WordPress-beheerpaneel.
Vanaf versie 3.5 zijn de Links Manager en blogroll verborgen voor nieuwe installaties en eventuele bestaande WordPress-installaties die geen koppelingen hebben. Als u een upgrade uitvoert van een vorige versie van WordPress met actieve koppelingen, blijft de koppelingenmanager normaal werken.
Als u het deelvenster Koppelingen naar uw installatie wilt herstellen, kunt u de koppelingen van Links Manager downloaden en installeren.
Een handige manier om gebruik te maken van WordPress 'Links Manager is om een dagelijks samengestelde lijst met externe links weer te geven, zoals favoriete websites, gelieerde partners, liedjes, grappige video's, enz..
De opties zijn onbeperkt, maar houd rekening met de strategie achter uw website. Dus ga ik bijvoorbeeld een lijst met links van mijn favoriete nummers samenstellen, die een hyperlink naar het nummer in iTunes bevatten, waar ze het nummer kunnen horen en / of downloaden.
Voordat we beginnen met het ontwikkelen van de paginasjabloon voor links, moeten we bepalen wat de linkcategorieën zullen zijn. Dit kan op een aantal manieren worden bepaald. Sommige voorbeelden zijn op genre - zoals reggae, rap, country, metal - op 5 sterren of op alfabetische volgorde. Aangezien ik een lijst met favoriete nummers samenstel, organiseer ik de linkcategorieën in alfabetische volgorde.
Begin door u aan te melden bij WordPress, over de links te blijven en op 'Link Categories' te klikken. Als u een linkcategorie correct wilt toevoegen, moet u ervoor zorgen dat u een naam en een slak hebt. De beschrijving is niet noodzakelijk. De naam is hoe deze op uw site wordt weergegeven. De slug is de URL-vriendelijke versie van de naam. Het is meestal allemaal in kleine letters en bevat alleen letters, cijfers en koppeltekens. Als er geen slug wordt ingevoerd bij het maken van een linkcategorie, maakt Links Manager er automatisch een op basis van de naam.
Aangezien we de nummers in alfabetische volgorde organiseren, maakt u de naam van de eerste linkcategorie "#", tweede linkcategorie "A", derde categorie "B", enzovoort totdat u "Z" bereikt. Maak geen extra linkcategorieën, anders verschijnen ze in uw navigatie op uw paginasjabloon met links. Zorg er dus voor dat u bestaande linkcategorieën verwijdert.
Nu alle linkcategorieën zijn gemaakt, kunnen we beginnen met het maken van de paginasjabloon met links. Laten we daarom beginnen met het kopiëren en plakken van een al opgebouwde paginasjabloon in uw WordPress-thema, waarvan u de naam moet wijzigen linkspagina-template.php, en open het in je favoriete teksteditor.
De redenering voor het kopiëren en plakken van een reeds opgebouwde paginasjabloon is omdat u wilt dat de paginasjabloon van de links hetzelfde ontwerp heeft als de rest van uw site.
Als u problemen ondervindt bij het vinden van een reeds opgebouwde paginasjabloon in uw WordPress-thema, zoekt u naar een reeks bestanden met de naam consistent page-contact.php, page-portfolio.php, page-full-width.php, enz.
Het is gebruikelijk dat WordPress-thema's sjablonen met meerdere pagina's bevatten die consistent worden genoemd, zodat ze georganiseerd blijven. U kunt ook een bestand openen om te zien of het bestand begint met de paginasjabloon-ID, zoals het onderstaande voorbeeld:
Het eerste dat u wilt doen, is de sjabloonnaam (zie bovenstaande code) wijzigen in 'Links'. De bovenstaande code laat WordPress weten dat het een sjabloon is, dus het zal beschikbaar zijn in het vervolgkeuzemenu via de pagina-editor door de sjabloonnaam waarvan je het gebruikt, in dit geval met de naam "Links".
Zoek nu naar de code de inhoud(). Deze code haalt de pagina-inhoud op, de inhoud die is toegevoegd aan de WYSIWYG-editor voor de pagina.
Dit is een geweldige plek om je schuifbare menu te plaatsen en een geweldige plek om je links te tonen, die niet verschijnt totdat u een nieuwe link toevoegt aan een van de linkcategorieën die u zojuist hebt gemaakt. We komen hier later op terug. beneden de inhoud() code in je sjabloon toevoegen:
'. $ cat-> cat_name. ''; ?>
De code $ cats = get_categories ("taxonomy = link_category & hierarchical = 0") retourneert alle gemaakte linkcategorieën en geeft de categorienaam weer met behulp van de waarde '. $ cat-> cat_name. '. Ga naar als je meer wilt leren get_categories in de WordPress Codex.
De id = "scrollablemenu" is verbonden met JavaScript (waarover ik het later zal hebben) om het menu naar behoren te laten werken en de class = "scrollablemenubutton" is een CSS die je knoppen een heel eenvoudige stijl geeft. Ik moedig je aan om creatiever te zijn met de CSS, maar de basisstijl werkt nu wel.
Download de bestanden voor deze zelfstudie om de standaard CSS te zien. Binnenkort laat ik u zien hoe u de stylesheet (en JavaScript) toevoegt aan uw paginasjabloon, zodat deze alleen wordt geladen wanneer uw paginasjabloon is geladen met behulp van wp_enqueue_ *.
Voor jouw id = "scrollablemenu" je wilt de eigenschappen toevoegen:
positie: vast; top: 10px; / * Zorg ervoor dat de eigenschap top dezelfde waarde heeft als het javascript-bestand * / opvulling: 20px; breedte: 90 px; marge links: 500 px;
De positie: vast; en top: 10px; houdt het menu op de door jou gekozen locatie. De top: 10px; stijl kan en moet worden gewijzigd om de resultaten te krijgen waarnaar u op zoek bent.
Als je zou zetten top: 100px; het zou je menu een topvulling geven van 100px vanaf de top van uw website, dus als u het gaf 0px uw menu zou de top van uw website moeten raken. Houd er rekening mee dat wanneer je de topstijl wijzigt, je ook de JavaScript-code moet aanpassen om overeen te komen.
Maak je geen zorgen - we zullen de JavaScript-code in een klein beetje bereiken.
Ik heb het menu ingepakt in a div met een -Marge stijl om het schuifbare menu aan de rechterkant te positioneren. Dit komt omdat het menu boven op de inhoud zweeft, dus als het menu niet naar rechts werd gedrukt, zouden de links verloren gaan achter het schuifbare menu. De marge links: 500 px; zal hoogstwaarschijnlijk moeten worden aangepast aan de breedte van uw website.
Ik heb ook het schuifbare menu gemaakt als een verticaal menu in plaats van horizontaal door er een breedte van te maken 90px. U kunt het menu eenvoudig veranderen in een horizontaal menu door het te verwijderen breedte: 90 px; marge links: 500 px;, maar weet dat uw inhoud achter het menu verloren kan raken.
Laten we het hebben over het JavaScript-bestand dat ervoor zorgt dat het schuifbare menu werkt. Download de bestanden voor deze zelfstudie en open het JavaScript-bestand met de naam scrollablemenu.js.
Accentsconagua
$ (window) .scroll (function () $ ("# scrollablemenu"). css ("top", Math.max (0, 10 - $ (this) .scrollTop ()));); De twee belangrijke delen in de code zijn #scrollablemenu en 10.
#scrollablemenu moet overeenkomen met uw id = "scrollablemenu" of het zal niet werken.
Eerder hadden we het over hoe als u de top: 10px; stijl moet je deze dienovereenkomstig in het JavaScript-bestand wijzigen. U kunt dit doen door gewoon de 10 bedrag tot welk bedrag je je topstijl hebt veranderd.
Nu u begrijpt hoe de JavaScript-code werkt, laten we deze en de stylesheet toevoegen aan de paginasjabloon, zodat het menu zal scrollen en de knoppen wat stijl zullen hebben.
Een gemakkelijke en georganiseerde manier om dit te doen is gebruik wp_enqueue_script en wp_enqueue_style; het maakt het zo dat je geen CSS aan een andere stylesheet of JavaScript aan je hoeft toe te voegen header.php het dossier. Het laadt de bestanden alleen wanneer uw paginasjabloon is geladen, waardoor uw website sneller blijft werken.
Laten we eerst het JavaScript-bestand toevoegen. Neem de onderstaande code en voeg deze toe aan het begin van uw paginasjabloon (onder de sjabloonnaam).
FTP nu het scrollablemenu.js bestand naar uw website hosting. Zorg ervoor dat u de /js/scrollablemenu.js locatie naar de map waarnaar u het JavaScript-bestand hebt geüpload. Laten we nu het stylesheetbestand toevoegen net onder de code die u zojuist hebt toegevoegd.
FTP de scrollablemenu.css bestand naar uw website hosting. Zorg ervoor dat u de /css/scrollablemenu.css locatie naar de map waarnaar u het stylesheetbestand hebt geüpload. Nu worden de JavaScript- en stijlbladbestanden geladen wanneer de paginasjabloon met links wordt geladen.
Het belangrijkste verschil tussen de twee codes zijn de functies wp_enqueue_script en wp_enqueue_style. Als je meer wilt weten over wp_enqueue_ * bekijk de tutorial Hoe JavaScript en CSS opnemen in uw WordPress-thema's en plug-ins.
Laten we nu het belangrijkste deel aan uw paginasjabloon voor links toevoegen ... de linkcategorieën.
Voeg deze code toe onder de schuifbare menucode.
'. $ cat-> cat_name. '
'; echo ''; $ books = get_bookmarks ("category = $ cat-> cat_ID"); foreach ($ books as $ book) echo '
'; // einde kattenlus; ?>- '; echo 'link_url. ''> '. $ book-> link_name.' '; echo'
'; // einde boeken loop echo '
Nogmaals gebruiken we $ cats = get_categories ("taxonomy = link_category & hierarchical = 0"), de code retourneert alle gemaakte linkcategorieën en geeft de categorienaam weer met behulp van de waarde '. $ cat-> cat_name. '.
Het belangrijkste deel van de code is hoe '. $ cat-> cat_name. ' retourneert de categorienaam als de ankernaam (een naam = "'. $ cat-> cat_name.'"). Dit maakt het dus het schuifbare menu werkt, dus wanneer een bezoeker op het schuifbare menu klikt, zal het linken naar het juiste gedeelte op je paginasjabloon.
De rest van de code geeft de link-URL weer met behulp van de waarde '. $ book-> link_url. ' en geeft de linknaam weer met behulp van de waarde '. $ book-> link_name. '. Dit wordt allemaal bereikt door de functie te gebruiken get_bookmarks ("category = $ cat-> cat_ID").
Je kunt meer leren door naar te gaan get_bookmarks in de WordPress Codex.
Elke regel code bevindt zich in een div met de class = "linkcategories" (die is toegevoegd aan de scrollablemenu.css bestand) en elke regel code geeft de titel (naam van de categorie) weer met een h3 tag, de titel is ook de ankernaam en de links die in Links Manager zijn gemaakt, worden ingepakt li tags, hypergelinkt met de link-URL.
Dus je weet dat de code is ingepakt in een div met een breedte van 490px, op die manier gaat er geen tekst verloren achter het schuifbare (verticale) menu. De breedte: 490 px; zal waarschijnlijk moeten worden aangepast aan de breedte van uw website.
Als u de breedte wel wijzigt, vergeet dan niet om het schuifbare menu te wijzigen div stijl marge links: 500 px;. Het is rechtover geduwd 10px meer het schuifbare menu div overlapt de linkcategorieën niet div.
Uw paginasjabloon met links is klaar! Zorg ervoor dat u FTP linkspagina-template.php bestand naar de hoofdmap van uw WordPress-thema.
Nu de linkcategorieën zijn gemaakt en de paginasjabloon voor links is gemaakt en geüpload, laten we een nieuwe pagina toevoegen met behulp van de sjabloon.
Klik in uw WordPress-beheeronderdeel onder pagina's op nieuw toevoegen. Voeg eerst uw paginanaam toe, en selecteer vervolgens de koppelingssjabloon in het vervolgkeuzemenu onder Paginakenmerken (rechterzijde). Publiceren en laten we verdergaan naar de laatste stap.
Als je al een voorbeeld hebt bekeken van de pagina die je net hebt gemaakt en hebt gemerkt dat alleen het verticale schuifbare menu werd weergegeven, is dat omdat je links moet toevoegen aan de linkcategorieën die je eerder hebt gemaakt. Als de linkcategorie geen links bevat, wordt er niets weergegeven.
Laten we dus een link toevoegen door op toevoegen onder Links te klikken in uw WordPress-beheerdersgedeelte. Voer de naam in, zoals Daniel Lee Kendall - Lost In The Moment, webadres en selecteer de categorie. Klik aan de rechterkant op Koppeling toevoegen en nu kunt u uw pagina bekijken om de resultaten te bekijken. Je bent helemaal klaar!
Als u niet de resultaten krijgt die u had gehoopt, speel dan rond met de breedte van elk div, en / of maak een betere stylesheet voor het schuifbare menu.
