Tilpas WordPress’ søgeresultatside med GeneratePress og GenerateBlocks

 

WordPress’ søgemaskine er elendig

Jeg kender ikke nogen, der bruger WordPress, som taler godt om søgemaskinen, og jeg forstår stadig ikke, at den næsten ikke har udviklet sig siden de første versioner.

Ikke alene er den primitiv i sin måde at fungere på, den tilbyder heller ingen konfiguration overhovedet. Selv udseendet på resultatsiden lader meget tilbage at ønske. Afhængigt af den skabelon, du bruger, kan den have et lidt bedre design, men generelt er den stadig forhistorisk

Udseendet af resultaterne kan forbedres en smule med CSS og responsivitet med et gratis plugin (med en betalt version) som Relevanssi (selvom det vil tredoble vægten af din database) eller denne anden, der forbinder med den eksterne tjeneste Algolia (gratis op til 10.000 søgeforespørgsler om måneden).

Men jeg vil lade spørgsmålet om ydeevne ligge til en anden dag, da jeg stadig kæmper med det, og jeg vil beskæftige mig med de rent æstetiske reformer ved hjælp af GeneratePress (GP) og GenerateBlocks (GB).

GeneratePress og GenerateBlocks

GP og GB er stadig to værktøjer fra et ungt projekt med en masse brugervenlighed at forbedre, GB tilbyder ikke den samme indlæringskurve, som du måske forventer, hvis du kommer fra at bruge buildere som Elementor eller lignende.

Som vi vil se i dette eksempel, er nogle processer til at bygge bestemte ting med GenerateBlocks meget længere og mere besværlige og kan være en smule desperate i de første forsøg. Efterhånden som du tilføjer flere og flere blokke, bliver tingene mere komplicerede.

På den anden side har du meget mere kontrol over, hvordan hvert element ser ud, når du forstår, hvordan de fungerer, og får styr på dem.

Vanskelighederne opvejes af dokumentationen og en upåklagelig support, hvor skaberne endda hjælper med specifikke designproblemer, der ikke er deres kompetence, så det er stadig et godt alternativ at tage i betragtning, da de forbliver tro mod deres filosofi; fair, ren og let kode.

Blokelementer

Blocks Elements, herefter Elements, blev tilføjet i juli 2020 i GeneratePress Premium version 1.11.0. Det kan bruges som en normal hook til at indsætte indhold næsten hvor som helst på din blog uden at skulle rode med kode.

Når det kombineres med GenerateBlocks, kan du bruge WordPress-blokeditoren til at oprette hooks, overskrifter, sidefødder, sidebjælker, en “Hero”-side, indholdsskabeloner osv.

Lad os komme til sagen.

Skabelon til struktur

Det første, vi skal gøre, er at oprette det, vi kalder en “strukturskabelon”. Dette trin er valgfrit, men det skader ikke at oprette en, hvis vi en dag ønsker at ændre noget med et par klik.

Jeg giver den dette navn, fordi den kun definerer strukturelle aspekter og ikke dens indhold. Det vil sige, hvis vi ønsker at vise eller ikke vise headeren, footeren eller dens widgets, en sidebar eller definere bredden osv., og så vi ikke bliver forvirrede med navnene på blokkene i resten af trinene.

Fra hovedmenuen Udseende/Elementer eller fra toppen kan vi få adgang til oprettelse og administration af elementerne.

Elements de GeneratePress- Layout o diseño

Til den specifikke brug, der vedrører os, vælger vi Design, når vi tilføjer et nyt element, og trykker på Opret.

Derefter fortæller vi elementet, på hvilken side vi ønsker, at det skal anvendes. Det gør vi ved at gå til fanen “Regler for visning” og vælge “Søgeresultater” i rullemenuen.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Elementer giver en masse tilpasningsmuligheder. Som du kan se, kan du i denne dropdown vælge de fleste positioner på din blog for at anvende disse indstillinger der.

Vi kan også beslutte, hvilke elementer vi vil skjule. I mit tilfælde vil jeg kun bruge én mulighed for at undvære sidebaren, så jeg vælger“Content (No sidebars)“.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Der er andre måder at skjule sidepanelet på, men ud over at være den nemmeste og hurtigste, giver denne os mulighed for at vende tilbage til eventuelle ændringer ved blot at vende tilbage hertil eller direkte “afpublicere” dette element/skabelon til “Kladde”-status, hvorved siden vender tilbage til sit oprindelige udseende.

Derudover kan du i fanen“Deaktiver elementer” efterlade siden praktisk talt ren. Man kan sige, at det svarer til Elementors sideskabelon “Canvas“, endda lidt forbedret og enklere at bruge.

Desactivar Elementos en GeneratePress

En god praksis, som også anbefales i en af konfigurationsfanerne, er at dokumentere, hvad hvert element gør med interne noter, hvis titlen ikke er beskrivende nok, eller hvis vi ikke ønsker, at den skal være for lang.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Jeg har vænnet mig til at tilføje noter og kommentarer til alt, for når man laver mange ændringer, er det uundgåeligt, at man ender med at glemme, hvor og/eller hvordan de blev lavet. Så i interne noter vil du altid have alle de oplysninger, du har brug for til at spore dine trin, hvis noget går galt, eller hvis du vil foretage nye ændringer.

Ved at udgive denne skabelon ville vi allerede have konfigureret resultatsiden efter vores smag, men nu ville den selvfølgelig være tom, når vi foretager en søgning, fordi vi er nødt til at oprette og udgive et nyt element, der vil bestemme udseendet af disse søgninger.

Du kan lade denne skabelon være i kladde i øjeblikket, mens vi gør dette, og udgive den, når alt er klar.

Udseende-skabelon

Selvom dette blot er endnu et element, kalder jeg det en “udseende-skabelon” i denne lille guide, fordi jeg på det tidspunkt var lidt forvirret over nomenklaturen og de forskellige anvendelsesmuligheder.

Det er her, det egentlige tilpasningsarbejde begynder.

Vi opretter et nyt element, denne gang en Block, og giver det et beskrivende navn.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Vi tilføjer en GenerateBlocks-container, og inde i den container placerer vi en Query Loop-blok.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Og dette er, hvad vi vil se.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Jeg har valgt“Start blank” for at replikere den oprindelige struktur af resultaterne, men du kan vælge en hvilken som helst af de skabeloner, som denne blok tilbyder.

Det bedste er at prøve dem, før du beslutter dig, for når du først er begyndt at arbejde med en af dem, kan du ikke anvende en anden, og du bliver nødt til at starte hele processen fra bunden, hvis du vil ændre den (noget, der burde løse GB).

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Når du har valgt skabelonen, skal du vælge blokken query loop (1), og du vil se fanen “Block” til højre (2). Klik på den, og marker indstillingen“Inherit query from template(3) under “Query parameters”. Til sidst, nederst, under “Display Rules”/”Position” (4) søger vi og indstiller “Search Results” og gemmer som en kladde.

Når vi folder forespørgselssløjfen ud, vil vi se dette:

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Vi tilføjer endnu en gitterblok inde i “Query Template” og vælger den struktur, vi ønsker.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

I eksemplet vil vi bruge en af to containere , der vil fungere som kolonner. Den venstre kolonne vil være stedet for det fremhævede billede, og den højre kolonne vil vise uddraget af posten.

Du kan også lege med tre containere og konfigurere den midterste som et rum. Jeg insisterer, mulighederne er mange, og det bedste, du kan gøre, er at lege med dem.

Som du måske har bemærket, bygger vi næsten fra bunden en container med alle de dele, der vil udgøre det endelige aspekt af det, vi ønsker at vise. I dette tilfælde søgeresultaterne, men du kan gøre det med ethvert andet indhold.

Nu angriber vi de to containere.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Vi vælger den første container og indstiller dens bredde til 33 (som faktisk er indstillet til 33,33), som du kan se, hvis du scroller ned til størrelsesindstillingerne.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Vi gør det samme med den anden container og vælger 66 (som automatisk bliver sat til 66,66). Pointen er naturligvis, at alle de containere, du bruger, skal summere til 100, så de ikke går ud over sidens horisontale rum og vises på samme linje.

Nu, hvor den første container er valgt, tilføjer vi en GenerateBlocks-billedblok indeni.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Det, der så vil ske, er, at der vises forskellige billedrum. Gå ikke i panik, det er fordi blokken registrerer løkken og genskaber dens opførsel. Hvis din søgemaskine viser ti resultater, er det de mellemrum, der vises. Bare fortsæt med at arbejde på billedcontaineren og forbigå meget af resten, som ikke er andet end forhåndsvisningen af resultatsiden.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Vi vælger igen den container, der indeholder billedet (1). I menuen i blokken til højre går vi ned til “Enable dynamic data” og aktiverer den (2). Vælg “Featured image” i Background image source (3), og billederne vises i editoren.

I link source vælger vi “Individual link” (4), så hvert billede linker til det tilsvarende indlæg, og vi gemmer igen som en kladde.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Nu går vi til den anden container, vælger den og tilføjer en “Headline”-blok fra GenerateBlocks.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Vælg blokken “Headline” (1) med de dynamiske data aktiveret (2 ), og gentag den tidligere proces (3), men denne gang vælger du “Title” som kilde til indholdet (4) og individuel post i kilden til linket (5)

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Endelig tilføjer vi endnu en “Title”-blok nedenfor, som vil blive brugt til at vise uddraget af posten efter disse trin.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Når den er tilføjet, gentager vi den samme proces igen. Med denne nye blok valgt (1) aktiverer vi de dynamiske data (2) og som kilde til dataene (3) den aktuelle post og kilden til indholdet “Uddrag” (4). Nu kan du også indstille længden af uddraget i ord (5).

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Endelig vil vi tilføje pagineringen, som vises under resultaterne. For at gøre dette skal du vælge blokken “query loop” (1) og klikke på det lille +-symbol med prikkerne, som du finder i redigeringslinjen (2).

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Pagineringen er opbygget med en blok af knapper, som du skal give det format, den farve og den form, der passer til det look, du ønsker. Alle dens mulige konfigurationer, som ikke er få, findes i blokkens menu, hvor du altid har mulighed for at finjustere hver blok til mobil, tablet og desktop.

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Jeg vil lade det ligge her for ikke at udvide dette indlæg for meget.

Jeg råder dig til at gøre alt dette først i et testmiljø for at se, hvordan det virkelig fungerer ud over den forhåndsvisning, der tilbydes af editoren, og udgive det, når du er sikker på, at det vises, som det skal.

Husk også, at hvis du lavede den designblok, der blev foreslået i begyndelsen, og som vi kalder Strukturskabelon som vi havde efterladt i kladden, skal du udgive den.

Det vil være udgangspunktet for yderligere at tilpasse udseendet af resultatsiden afhængigt af dine æstetiske præferencer.

Masser af muligheder for tilpasning

Tilpas WordPress' søgeresultatside med GeneratePress og GenerateBlocks

Du kan fortsætte med at tilføje eller redigere, hvad du vil, f.eks. en gitterblok med to containere mellem titlen og uddraget, og tilføje udgivelsesdatoen, navnet på forfatteren af indlægget, eller hvad du nu har lyst til.

Hvis du har mod på det, kan du endda oprette en anden skabelon til den kedelige standardside, når WordPress ikke finder resultater, når du søger, og tilføje informationsbokse eller andre elementer, der hjælper den besøgende med at finde det, de måske leder efter.

Du kan ændre skrifttype og -størrelse, rette den til den ene eller den anden side, justere elementernes afstand og dimensioner, lege med baggrundsfarven ved at tilføje billeder og former, tilføje ikoner, kanter, hover-effekter på links, skygger på containere osv.

Alt dette uden at forlade editoren og uden at skulle rode med CSS eller røre ved dine skabelonfiler.

Her kan du prøve det grundlæggende layout af mine søgeresultater, som jeg stadig mangler at finpudse, f.eks. tilføje læsetid og antal besøg, skrive de tomme uddrag og tilføje de manglende fremhævede billeder.

Ekstra bold: Hvis du har brug for at tilføje den typiske“Viser (antal) resultater for: ( søgtord )” til resultaterne, kan du her finde den nødvendige kode kode og instruktioner til at få det til at fungere med din Query Loop-blok, takket være David fra GB support


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

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting

Grandes personan que patrocinan.

Patreon

Recibe contenido extra y adelantos desde sólo un dolarcito al mes como ya hacen estos amables lectores:

César D. Rodas - Jorge Zamuz - David Jubete Rafa Morata - Sasha Pardo - Ángel Mentor  - Vlad SabouPedro - Álvaro RGV - Araq