Zogenaamde “Breadcrumbs” dienen om de sitenavigatie te verbeteren en de bezoeker van de site te helpen bepalen waar hij nu is. Een bezoeker op elke pagina van de site begrijpt zijn locatie in de blogstructuur met behulp van broodkruimels.
Broodkruimels zijn een ander element interne koppeling plaats. De navigatie op de site is vereenvoudigd, wat handig is voor de bezoeker van de site, en in dit opzicht zijn de gedragsfactoren toegenomen.
De term ‘Broodkruimels’ zelf is ontleend aan het sprookje ‘Hans en Grietje’ van de gebroeders Grimm, waarin kinderen het bos in werden genomen. De eerste keer, wanneer de vader, in opdracht van de boze stiefmoeder, zijn broer en zus meeneemt naar het bos, vinden ze de weg terug, dankzij het feit dat ze onderweg steentjes hebben achtergelaten. De tweede keer hadden de kinderen geen steentjes bij zich, dus lieten ze die onderweg liggen in plaats van steentjes. broodkruimels, die werden opgepikt door bosvogels en kinderen verdwaalden in het bos. Na diverse avonturen slaagden de kinderen er toch in om naar huis terug te keren.
Meestal is de Breadcrumbs-navigatie een balk bovenaan de pagina die er ongeveer zo uitziet:
Alle secties van de site, behalve de laatste, zijn links. Laatste sectie navigatie is de exacte pagina waarop u zich momenteel bevindt. Het is niet nodig om een hyperlink naar deze pagina te maken.
Dit laatste element is mogelijk niet vereist aparte pagina, en bijvoorbeeld de naam van de categorie, als u in een categorie bent opgenomen. In dit geval is de titel van de categorie niet langer een hyperlink.
Breadcrumbs kunnen op een website worden geïnstalleerd met behulp van een plug-in, of zonder dat je hiervoor een speciale plug-in gebruikt. Laten we eerst kijken naar het installeren van broodkruimels met behulp van een plug-in Broodkruimel NavXT.
Breadcrumb NavXT-plug-in
Om de Breadcrumb NavXT-plug-in te installeren, moet u inloggen op het “WordPress Admin Panel” => “Plugins” => “Nieuwe toevoegen”. In het veld "Zoeken" moet u de uitdrukking "Breadcrumb NavXT" invoeren en daarna op de knop "Zoeken naar plug-ins" klikken.
In het venster “Plug-in installeren” klikt u onder de naam van de plug-in “Breadcrumb NavXT” op de link “Installeren”.
In het geopende venster “Plug-in installatie: Breadcrumb NavXT” klikt u op de link “Activeer plug-in”. Daarna, in de zijbalk " WordPress-beheerderspanelen"verscheen nieuw artikel"Broodkruimel NavXT". Als u op dit item klikt, kunt u de instellingen van de broodkruimels-plug-in invoeren.
Het venster Breadcrumb NavXT-instellingen bevat een flink aantal instellingen voor deze plug-in. Breadcrumb NavXT-instellingen kunnen op hun standaardinstellingen blijven staan. Op het tabblad ‘Basis’ kunt u, als u dat wilt, het item ‘Link naar Home’ wijzigen.
Nu moet je de volgende code in je themabestanden invoegen, op de plaatsen waar broodkruimels worden weergegeven:
Het is raadzaam om deze code in de volgende bestanden van uw thema in te voegen: “Single entry (single.php)”, “Paginasjabloon (page.php)”, “Archieven (arhvie.php)”, “Zoekresultaten (search. php)”.
Om deze code in te voeren, moet u het “WordPress Admin Panel” => “Uiterlijk” => “Editor” => “Sjablonen” openen.
In de sjabloon “Single Post (single.php)”, die verantwoordelijk is voor pagina’s met artikelen, wordt de code ingevoegd zoals weergegeven in deze afbeelding.
Nadat u de code heeft ingevoerd, klikt u op de knop “Bestand bijwerken”.
De code is ingevoegd en vervolgens moet u op de knop "Bestand bijwerken" klikken.
U moet deze code ook invoegen in het bestand “Archives (arhvie.php)”, dat verantwoordelijk is voor de categorieën.
Nadat de code is ingevoegd, klikt u op de knop “Bestand bijwerken”.
En nadat de code in de WordPress-themabestanden is geïnstalleerd, wordt de code ingevoegd in het bestand "Zoekresultaten (search.php)", dat verantwoordelijk is voor het doorzoeken van de site. Plak de code op de plaats zoals weergegeven in de afbeelding.
Deze afbeelding laat zien hoe broodkruimelnavigatie eruit ziet. De naam van de startpagina is niet gewijzigd in de sitenaam.
U kunt ook de volgende code in het bestand “Style Sheet (style.ccs)” invoegen (dit is optioneel):
Breadcrumb ( lettertype: bolder 12px "Trebuchet MS", Verdana, Arial; opvulling onderaan: 10px; ) .breadcrumb a( kleur: #1B7499; ) .breadcrumb a:hover ( kleur: #EF0E0E; )
In deze code kunt u de grootte en het lettertype wijzigen (lettertype: bolder 12px “Trebuchet MS”, Verdana, Arial), opvulling (padding-bottom: 10px), evenals de kleur van broodkruimellinks in een statische staat en bij het zweven van de muiscursor eroverheen (u kunt digitale waarden wijzigen).
De waarden in deze code kunnen naar eigen goeddunken worden gewijzigd, of u kunt een andere soortgelijke code op internet vinden. U kunt het ook doen zonder deze code in het bestand "Style Sheet (style.ccs)" te installeren. In het thema dat ik installeerde, veranderde het lettertype na het installeren van de code een beetje.
In dit artikel werd gekeken naar het installeren van broodkruimels op een website met behulp van de Breadcrumb NavXT-plug-in. In het volgende artikel wordt deze vraag besproken: hoe te installeren zonder een plug-in te gebruiken.
Conclusies van het artikel
Met behulp van de Breadcrumb NavXT-plug-in wordt navigatie, zogenaamde "breadcrumbs", op de site geïnstalleerd, waardoor de gebruiker kan begrijpen in welk gedeelte van de site hij zich op een bepaald moment bevindt.
Hallo, lieve lezers! Vandaag zullen we het hebben over wat broodkruimels zijn, welke functies ze uitvoeren op een blog, en vooral, hoe je de Breadcrumb NavXT-plug-in installeert en configureert, waarmee je WordPress-broodkruimels.
Wat zijn broodkruimels
“Broodkruimels” tonen het pad op de blog dat je moet volgen van de hoofdpagina naar de huidige pagina. Dit is een soort navigatieketen, waarbij elke link een link is naar een pagina op een hoger niveau. Het hoogste niveau is de hoofdblog. Idealiter duurt het pad naar een blogpagina vanaf de hoofdpagina maximaal drie muisklikken. In feite dit thuis - categorie - bericht of home - categorie - categorie - bericht, maar niet langer. Dit is nodig voor het gemak van niet alleen gebruikers, maar ook zoekmachines. Zoekmachines kunnen berichten met een diepere inhoud met enige vertraging indexeren. Bovendien neemt hun belang in de ogen van zoekmachines af naarmate het nestniveau toeneemt. Probeer daarom links naar de belangrijkste en interessantste artikelen op de blog op de hoofdpagina te plaatsen.
Zo'n functie op de site wordt anders genoemd: navigator, broodkruimels, pad op de site, maar de meest populaire naam is "broodkruimels". Deze naam komt uit het sprookje over Hans en Greta, waarin de helden broodkruimels strooiden om de weg terug te vinden.
Naast gemak en navigatie vervullen ze nog een belangrijke functie: ze verbeteren de interne koppeling van blogpagina's. Eerder had ik het al over drie belangrijke en interessante plug-ins voor intern linken, die ik iedereen ten zeerste aanbeveel om op hun blog te installeren. Breadcrumb NavXT kan eenvoudig aan deze lijst worden toegevoegd.
Wanneer zoekmachines een blogartikel indexeren, zien ze onmiddellijk tot welke categorie het behoort en het volledige pad naar het hoofdartikel, waardoor ze de structuur van de blog kunnen bepalen. Vergeet niet om het aan uw blog toe te voegen voor zowel zoekmachines als gebruikers.
De Breadcrumb NavXT-plug-in installeren en configureren
Het installeren van Breadcrumb NavXT verschilt enigszins van, dus laten we het in detail bekijken:
2. Pak het archief uit en upload de map met de plug-inbestanden naar de server in de map wp-content/plugins. Gebruik hiervoor FileZilla.
3. Activeer de plug-in via het gedeelte “Plug-ins” van het WordPress-beheerderspaneel.
4. Nu moet je de volgende code invoegen:
De tweede meest populaire plaats is de sitekop. Om dit te doen, hoeft de code in slechts één sjabloon te worden ingevoegd: header.php. De exacte plaats kan ik niet zeggen, het hangt allemaal af van het onderwerp. De methode van wetenschappelijk porren is hier geschikt: plak de code, sla op, bekijk het resultaat, als je het niet leuk vindt, verander dan de locatie van de code in de sjabloon.
Sommige geavanceerde thema's geven standaard broodkruimels weer op de blog, maar ik zou toch aanraden om de Breadcrumb NavXT-plug-in te gebruiken, omdat deze flexibelere instellingen heeft. In dergelijke gevallen moet u de standaardcode in de themasjablonen die verantwoordelijk zijn voor het weergeven van broodkruimels vervangen door de hierboven gespecificeerde plug-incode. De standaardcode zou in veel opzichten vergelijkbaar moeten zijn met de gegeven plug-incode, dus het zal niet moeilijk zijn om deze te vinden (meestal is deze ingesloten in een div-, ID- of class-tag, die ook dezelfde naam heeft: breadcrumb).
Nadat u de code heeft toegevoegd, kunt u het uiterlijk van WordPress-broodkruimels wijzigen. Om dit te doen, voegt u stijlen toe aan de breadcrumb-klasse in het style.css-bestand van het thema dat u gebruikt. Hiervoor moet je natuurlijk de basisprincipes van CSS kennen, daarom raad ik je aan de gratis CSS-tutorial van Vlad Merzhevich te lezen, die je kunt downloaden van mijn blog.
De plug-in-instellingen bevinden zich in het gedeelte “Opties” - “Breadcrumb NavXT”. Je kunt er een lokalisatie voor vinden op internet, maar helaas werkt het erg scheef met de nieuwste versies van de plug-in - de meeste instellingen blijven in het Engels. Daarom zal ik de instellingen in het Engels bekijken, vertalingen geven en mijn commentaar geven op de belangrijkste punten.
Het eerste tabblad heet “Algemeen”.
Broodkruimelscheidingsteken - een symbool dat wordt gebruikt als scheidingsteken tussen schakels in de broodkruimelketen.
Breadcrumb Max Titellengte - de paginatitel wordt gebruikt als link in de navigatieketen, deze optie stelt de maximale lengte van de titel in, 0 - de volledige titel wordt gebruikt zonder deze af te snijden.
Home Breadcrumb - of de hoofdblog wel of niet in breadcrumbs moet worden aangegeven. Ik raad je aan om het in te schakelen en het een naam te geven volgens de naam van je blog.
- tekst die zichtbaar zal zijn op de hoofdblog als het geen link is.
Ga naar het tabblad Huidig item, wat 'Huidig item' of 'Huidige locatie' betekent.
Huidig item koppelen - geef de naam van de huidige pagina weer als een link ernaar, of niet.
Paged Breadcrumb - ondersteuning voor paginanavigatie. Eenmaal ingeschakeld, worden getallen weergegeven in broodkruimels.
— een sjabloon die de naam van de huidige positie definieert wanneer ondersteuning voor paginanavigatie is ingeschakeld.
Het volgende gedeelte heet 'Berichten en pagina's' - Berichten en pagina's.
Berichttaxonomieweergave - toon alle mogelijke paden die naar een bericht leiden.
Berichttaxonomie - kan worden weergegeven in berichtpadopties. Voor mijn blog heb ik gekozen voor de standaardoptie: Headings.
Paginasjabloon en Paginasjabloon (niet gekoppeld)— vergelijkbaar met de berichtsjabloon en berichtsjabloon (niet-gelinkt) die hierboven zijn besproken, maar deze worden alleen weergegeven voor gepubliceerde artikelen.
Het volgende is het gedeelte 'Categorieën en tags'.
In deze sectie worden sjablonen gespecificeerd voor het vormen van broodkruimels voor categorieën en tags. Volg gewoon dezelfde stappen als de berichtsjablonen die hierboven zijn besproken.
In de sectie kunt u sjablonen instellen voor de auteurspagina (Auteur), datum/archief (Datum), zoekresultaten (Zoeken) en 404-fouten.
Ik gebruik de andere opties niet, dus ik zal niet slim worden over hun doel.
Nou, we hebben het allemaal ontdekt! Gefeliciteerd! Hier beëindig ik mijn verhaal en neem ik afscheid van je, maar niet voor lang, want binnenkort verschijnt er weer een interessant artikel op mijn blog!
Gegroet, beste lezers van de blogsite. In dit artikel laat ik je zien hoe je de navigatiebalk maakt die je bovenaan vóór de artikelkoppen ziet. Deze navigatieketen maakt het voor mij eenvoudig plug-in voorWordPress— BroodkruimelNavXT, wat zich vertaalt naar ‘broodkruimels’.
De plug-in kreeg deze naam omdat de auteur, John Havlik, het sprookje over de gebroeders Grimm leuk vond, waarin de jongen Hans broodkruimels strooide om de weg terug te vinden. Toegegeven, het zou logischer zijn om de plug-in "kiezelstenen" te noemen, aangezien Hans en Grietje volgens het verhaal van het sprookje de weg terug niet konden vinden, omdat de broodkruimels door vogels werden opgegeten. Nou, oké, dat is niet het punt, het belangrijkste is dat deze plug-in ervoor zorgt dat bezoekers niet verdwalen op uw site en u precies laat weten waar en in welke categorie (gedeelte van de site) ze zich momenteel bevinden.
Bovendien helpt de Breadcrumb NavXT-plug-in om het statisch gewicht gelijkmatig over alle pagina's van de site te verdelen, wat erg belangrijk is voor de promotie ervan in zoekmachines. Voor het geval dat u denkt dat interne links (optimalisatie) van een site niet zo belangrijk zijn, dan raad ik u aan deze te lezen, van waaruit u uw standpunt zult veranderen.
Daarom laat ik u in dit artikel zien hoe u deze navigatie op uw website of blog kunt implementeren met behulp van de Breadcrumb NavXT-plug-in , evenals eenvoudige code.
De Breadcrumb NavXT breadcrumb-plug-in installeren.
1 ) Download zoals gewoonlijk de plug-in, upload deze naar de blog en activeer deze.
2 ) Nu moeten we speciale code plaatsen op de plaats waar u de lijn met broodkruimels wilt zien. Ga hiervoor naar “uiterlijk” “editor” en selecteer het bestand waarin u de code gaat plakken. Meestal wordt de plug-incode ingevoegd in het “single entry”-bestand (single.php) onmiddellijk voor of na de titel van het artikel. Als je codes helemaal niet begrijpt, zoek dan naar twee tags helemaal aan het begin van de code
En , die verantwoordelijk zijn voor het weergeven van de namen van publicaties. Mijn code ziet er als volgt uit:
" title="!}">
Als u iets soortgelijks vindt, plak dan onmiddellijk deze broodkruimelcode ervoor en werk het bestand bij.
(bcn_display();)
?>
Trouwens, als je niet van horizontale navigatie houdt en deze verticaal wilt weergeven, dan moet je deze code invoegen in plaats van de vorige.
{
bcn_display_list();
}?>
Goed, zoals je kunt zien, heb je nu een navigatiebalk, maar zonder de publicatiedatum helemaal aan het einde weer te geven, zoals de mijne. Als je het aan je navigatiebalk wilt toevoegen, hoef je alleen maar de code in je thema te vinden die verantwoordelijk is voor het weergeven van de publicatiedatum, en deze toe te voegen na de broodkruimelcode.
als (function_exists("bcn_display"))
(bcn_display();)
?>> Gepubliceerd
" title="!}">
Als u iets soortgelijks vindt, plak dan onmiddellijk deze broodkruimelcode ervoor en werk het bestand bij.
(bcn_display();)
?>
Trouwens, als je niet van horizontale navigatie houdt en deze verticaal wilt weergeven, dan moet je deze code invoegen in plaats van de vorige.
{
bcn_display_list();
}?>
Goed, zoals je kunt zien, heb je nu een navigatiebalk, maar zonder de publicatiedatum helemaal aan het einde weer te geven, zoals de mijne. Als je het aan je navigatiebalk wilt toevoegen, hoef je alleen maar de code in je thema te vinden die verantwoordelijk is voor het weergeven van de publicatiedatum, en deze toe te voegen na de broodkruimelcode.
als (function_exists("bcn_display"))
(bcn_display();)
?>> Gepubliceerd