Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks

Publicado: 24/04/2023 : 16:28 | Actualizado: 30/07/2024 : 23:42 |

 

De WordPress zoekmachine is waardeloos

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 (GP) en GenerateBlocks (GB).

GeneratePress en GenerateBlocks

GP en GB zijn nog steeds twee tools van een jong project en met veel bruikbaarheid om te verbeteren, biedt GB niet dezelfde leercurve als u zou verwachten als u bouwers zoals Elementor of iets dergelijks gebruikt.

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.

De moeilijkheidsgraad wordt gecompenseerd door de documentatie en een onberispelijke ondersteuning, waarbij de makers zelfs helpen met specifieke ontwerpkwesties die niet tot hun competentie behoren, dus het is nog steeds een geweldig alternatief om rekening mee te houden, omdat ze trouw blijven aan hun filosofie: eerlijke, schone en lichte code.

Blok Elementen

YouTube video

Blocks Elements, hierna Elements genoemd, werd in juli 2020 toegevoegd in GeneratePress Premium versie 1.11.0. Het kan worden gebruikt als een normale haak om bijna overal op uw blog inhoud in te voegen zonder met code te hoeven knoeien.

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.

Structuursjabloon

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.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks

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.

Personalizar la página de resultados de búsqueda de WordPress con GeneratePress y GenerateBlocks

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)".

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 2

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.

Desactivar Elementos en GeneratePress

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.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 4

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.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 5

We voegen een GenerateBlocks container toe en binnen die container plaatsen we een Query Loop blok.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 6

En dit is wat we te zien krijgen.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 7

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).

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 8

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:

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 9

We voegen nog een rasterblok toe binnen "Query Template" en selecteren de structuur die we willen.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 10

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.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 11

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.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 12

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.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 13

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.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 14

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.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 15

Nu gaan we naar de tweede container, selecteren deze en voegen een "Headline" blok toe van GenerateBlocks.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 16

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)

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 17

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.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 18

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).

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 19

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).

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 20

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.

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 21

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 hebben genoemd en dat we in concept hadden laten staan, u het zult moeten publiceren.

Dit zou het startpunt zijn om het uiterlijk van de resultatenpagina verder aan te passen, afhankelijk van uw esthetische voorkeuren.

Veel aanpassingsmogelijkheden

Pas de zoekresultatenpagina van WordPress aan met GeneratePress en GenerateBlocks 22

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: ( gezochtwoord )" aan de resultaten moet toevoegen, kunt u hier de benodigde code en instructies vinden om dit te laten werken met uw Query Loop-blok, dankzij David van GB support


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Verwante artikelen

Este blog se aloja en LucusHost

Lucushot, el mejor hosting