Ik ken niemand die WordPress gebruikt die goed spreekt over de zoekmachine en ik begrijp nog steeds niet dat deze nauwelijks geëvolueerd is sinds de eerste versies.
Het is niet alleen primitief in termen van hoe het werkt, het biedt ook geen enkele configuratie. Zelfs het uiterlijk van de resultatenpagina laat veel te wensen over. Afhankelijk van de sjabloon die u gebruikt, kan het ontwerp iets beter zijn, maar over het algemeen is het nog steeds prehistorisch
Het uiterlijk van de resultaten kan een beetje verbeterd worden met CSS en responsiviteit met een gratis plugin (met een betaalde versie) zoals Relevanssi (hoewel het de zwaarte van uw database zal verdrievoudigen) of deze andere plugin die verbinding maakt met de externe service Algolia (gratis tot 10.000 zoekopdrachten per maand).
Maar ik laat de prestatiekwestie voor een andere dag, omdat ik daar nog steeds mee worstel, en ik zal me bezighouden met de puur esthetische revisies met behulp van GeneratePress GenerateBlocks
Zoals we in dit voorbeeld zullen zien, zijn sommige processen om bepaalde dingen te bouwen met GenerateBlocks veel langer en bewerkelijker en kunnen ze een beetje wanhopig zijn bij de eerste pogingen. Naarmate u meer en meer blokken toevoegt, worden de dingen ingewikkelder.
Aan de andere kant, als u eenmaal begrijpt hoe ze werken en ze onder de knie krijgt, hebt u veel meer controle over hoe elk element eruit ziet.
In combinatie met GenerateBlocks kunt u de WordPress block editor gebruiken om hooks, headers, footers, sidebars, een "Hero" pagina, contentsjablonen, enz. te maken.
Laten we aan de slag gaan.
Het eerste wat we gaan doen is een "structuursjabloon" maken. Deze stap is optioneel, maar het kan geen kwaad om er één aan te maken voor het geval we op een dag met een paar klikken iets willen veranderen.
Ik geef het deze naam omdat het alleen structurele aspecten zal definiëren en niet de inhoud. Dat wil zeggen, of we de header wel of niet willen laten zien, de footer of widgets, een sidebar of de breedte willen definiëren, enzovoort, zodat we niet in de war raken met de namen van de blokken van de rest van de stappen.
Vanuit het hoofdmenu Uiterlijk/Elementen of van bovenaf hebben we toegang tot het aanmaken en beheren van de elementen.
Voor het specifieke gebruik dat ons aangaat, kiezen we bij het toevoegen van een nieuw element Design en drukken we op create.
Vervolgens geven we aan op welke pagina we het element willen toepassen. Hiervoor gaan we naar het tabblad "Weer te geven regels" en bij positie selecteren we "zoekresultaten" in de vervolgkeuzelijst.
Elementen bieden veel aanpassingsmogelijkheden. Zoals u zult zien, kunt u in die vervolgkeuzelijst de meeste posities van uw blog selecteren om deze instellingen daar toe te passen.
We kunnen ook beslissen welke elementen we willen verbergen. In mijn geval ga ik slechts één optie gebruiken om de zijbalk te verbergen, dus selecteer ik"Inhoud (Geen zijbalken) ".
Er zijn andere manieren om de zijbalk te verbergen, maar deze optie is niet alleen de gemakkelijkste en snelste, maar stelt ons ook in staat om eventuele wijzigingen terug te draaien door eenvoudigweg hier terug te keren of dit element/deze sjabloon direct te "unpubliceren" naar de status "Concept", waardoor de pagina er weer als vanouds uitziet.
Bovendien kunt u in het tabblad"Elementen deactiveren " de pagina praktisch schoon achterlaten. U zou kunnen zeggen dat dit het equivalent is van de "Canvas " paginasjabloon van Elementor, zelfs iets verbeterd en eenvoudiger in gebruik.
Een goede gewoonte, die ook wordt aanbevolen in een van de configuratietabbladen, is om te documenteren wat elk element doet met interne notities voor het geval de titel niet beschrijvend genoeg is of we niet willen dat het te lang wordt.
Ik ben eraan gewend geraakt om overal notities en opmerkingen aan toe te voegen, want als u veel wijzigingen aanbrengt, is het onvermijdelijk dat u uiteindelijk vergeet waar en/of hoe ze zijn gemaakt. In interne notities hebt u dus altijd alle informatie die u nodig hebt om uw stappen te herleiden als er iets fout gaat of als u nieuwe wijzigingen wilt aanbrengen.
Door deze sjabloon te publiceren zouden we de resultatenpagina al naar wens geconfigureerd hebben, maar nu zou deze natuurlijk leeg zijn als we een zoekopdracht uitvoeren, omdat we een nieuw element moeten maken en publiceren dat het uiterlijk van die zoekopdrachten zal bepalen.
U kunt deze sjabloon voorlopig in concept laten staan terwijl wij dit doen en hem publiceren als alles klaar is.
Sjabloon uiterlijk Hoewel dit gewoon een ander Element is, noem ik het een "verschijningssjabloon" voor deze kleine gids, omdat ik destijds een beetje in de war was door de nomenclatuur van dingen en hun verschillende mogelijke toepassingen.
Hier begint het echte aanpassingswerk.
We maken een nieuw element, dit keer een Block en geven het een beschrijvende naam.
We voegen een GenerateBlocks container toe en binnen die container plaatsen we een Query Loop blok.
En dit is wat we te zien krijgen.
Ik heb"Start blank " gekozen om de oorspronkelijke structuur van de resultaten na te bootsen, maar u kunt elke sjabloon kiezen die dit blok biedt.
Het beste is om ze eerst uit te proberen voordat u beslist, want als u eenmaal met een van de sjablonen aan de slag gaat, kunt u geen andere meer toepassen en moet u het hele proces weer van voren af aan beginnen als u het wilt veranderen (iets dat GB zou moeten oplossen).
Nadat u de sjabloon hebt gekozen, selecteert u het query loop-blok (1) en ziet u rechts het tabblad "Blok" (2) . Klik erop en vink de optie"Query overnemen van sjabloon " (3) aan onder "Query parameters". Tot slot zoeken we onderaan onder "Weergaveregels"/"Positie" (4) en stellen we "Zoekresultaten" in en slaan we op als concept.
Wanneer we de query-lus uitvouwen, zien we dit:
We voegen nog een rasterblok toe binnen "Query Template" en selecteren de structuur die we willen.
In dit voorbeeld gaan we een van de twee containers gebruiken die als kolommen zullen fungeren. De linkerkolom wordt de plaats voor de uitgelichte afbeelding en de rechterkolom toont het uittreksel van het item.
U kunt ook met drie containers spelen en de middelste als ruimte configureren. Ik blijf erbij, de mogelijkheden zijn legio en het beste is om ermee te spelen.
Zoals u misschien hebt gemerkt, bouwen we bijna vanaf nul een container op met alle onderdelen die het uiteindelijke aspect vormen van wat we willen laten zien. In dit geval de zoekresultaten, maar u kunt het met elke andere inhoud doen.
Nu vallen we die twee containers aan.
We selecteren de eerste container en stellen de breedte in op 33 (die eigenlijk is ingesteld op 33,33), zoals u kunt zien als u naar beneden scrollt naar de opties voor het aanpassen van de grootte.
We doen hetzelfde met de tweede container en selecteren 66 (die automatisch wordt ingesteld op 66,66). Het punt is natuurlijk dat alle containers die u gebruikt bij elkaar opgeteld 100 zijn, zodat ze niet buiten de horizontale ruimte van de pagina vallen en op dezelfde regel worden weergegeven.
Nu, met de eerste container geselecteerd, voegen we er een GenerateBlocks afbeeldingsblok aan toe.
Wat er dan gebeurt, is dat er verschillende afbeeldingsruimten verschijnen. Geen paniek, dat komt omdat het blok de lus detecteert en het gedrag opnieuw creëert. Als uw zoekmachine tien resultaten laat zien, zijn dat de ruimtes die zullen verschijnen. Blijf gewoon werken aan de afbeeldingscontainer en laat de rest, die niets meer is dan de preview van de resultatenpagina, grotendeels links liggen.
We selecteren opnieuw de container met de afbeelding (1) . In het menu van het blok aan de rechterkant gaan we naar beneden naar "Dynamische gegevens inschakelen" en activeren het (2) . Selecteer "Uitgelichte afbeelding" in Achtergrond afbeeldingsbron (3) en de afbeeldingen verschijnen in de editor.
Bij Linkbron kiezen we "Individuele link" (4) zodat elke afbeelding naar het bijbehorende bericht linkt en we slaan weer op als concept.
Nu gaan we naar de tweede container, selecteren deze en voegen een "Headline" blok toe van GenerateBlocks.
We selecteren het blok "Headline" (1) met de dynamische gegevens geactiveerd (2) en herhalen het vorige proces (3) , maar deze keer selecteren we "Title" als bron van de inhoud (4) en individuele invoer in de bron van de link (5)
Tot slot voegen we hieronder nog een "Titel"-blok toe, dat zal worden gebruikt om het uittreksel van de invoer na deze stappen weer te geven.
Eenmaal toegevoegd, herhalen we hetzelfde proces. Met dit nieuwe blok geselecteerd (1) activeren we de dynamische gegevens (2) en als bron van de gegevens (3) de huidige invoer en de bron van de inhoud "Extract" (4) . Nu kunt u ook de lengte van het uittreksel in woorden instellen (5) .
Tot slot voegen we de paginering toe, die onder de resultaten zal verschijnen. Selecteer hiervoor het blok met de query-lus (1) en klik op het kleine gestippelde symbool in de bewerkingsbalk (2).
De paginering wordt opgebouwd met een blok knoppen waaraan u het formaat, de kleur en de vorm moet geven die past bij het uiterlijk dat u zoekt. Alle mogelijke configuraties, en dat zijn er niet weinig, staan in het menu van het blok waar u altijd de opties hebt om elk blok fijn af te stellen voor mobiel, tablet en desktop.
Ik laat het hierbij om deze post niet te lang te maken.
Ik raad u aan om dit alles eerst in een testomgeving te doen om te zien hoe het echt werkt buiten het voorbeeld dat de editor biedt, en het te publiceren als u zeker weet dat het wordt weergegeven zoals het hoort.
Onthoud ook dat als u dat ontwerpblok hebt gemaakt dat aan het begin werd voorgesteld en dat we Structuursjabloon
Dit zou het startpunt zijn om het uiterlijk van de resultatenpagina verder aan te passen, afhankelijk van uw esthetische voorkeuren.
Veel aanpassingsmogelijkheden
U kunt blijven toevoegen of bewerken wat u maar wilt, zoals een rasterblok met twee containers tussen de titel en het uittreksel en daar de publicatiedatum, de naam van de auteur van het bericht of wat u maar wilt aan toevoegen.
Als u er klaar voor bent, kunt u zelfs een andere sjabloon maken voor die saaie standaardpagina wanneer WordPress geen resultaten vindt bij het zoeken en informatievakken of andere elementen toevoegen die de bezoeker helpen om te vinden wat hij zoekt.
U kunt het lettertype en de lettergrootte wijzigen, het naar de ene of de andere kant verschuiven, de spatiëring en afmetingen van de elementen aanpassen, spelen met de achtergrondkleur door afbeeldingen en vormen toe te voegen, pictogrammen, randen, hover-effecten op links, schaduwen op containers, enz. toevoegen.
Dit alles zonder de editor te verlaten en zonder te hoeven rommelen met CSS of uw sjabloonbestanden aan te raken.
Hier kunt u de basislay-out van mijn zoekresultaten proberen . Ik moet nog een paar dingen bijschaven, zoals de leestijd en het aantal bezoeken toevoegen, de lege uittreksels schrijven en de ontbrekende uitgelichte afbeeldingen toevoegen.
Bonusbal : Als u de typische"Toont (aantal) resultaten voor: ( gezocht woord ) " aan de resultaten moet toevoegen, kunt u hier de code
