WordPress sökmotor suger
Jag känner ingen som använder WordPress som talar väl om dess sökmotor och jag förstår fortfarande inte att den knappt har utvecklats sedan de första versionerna.
Den är inte bara primitiv när det gäller hur den fungerar, den erbjuder ingen konfiguration alls. Till och med utseendet på dess resultatsida lämnar mycket att önska. Beroende på vilken mall du använder kan den ha en något bättre utformning, men i allmänhet är den fortfarande förhistorisk
Resultatens utseende kan förbättras lite med CSS och responsiviteten med ett gratis plugin (med en betalversion) som Relevanssi (även om det kommer att tredubbla vikten på din databas) eller det här andra som ansluter till den externa tjänsten Algolia (gratis upp till 10 000 sökförfrågningar per månad).
Men jag lämnar frågan om prestanda till en annan dag eftersom jag fortfarande brottas med den och jag tar itu med de rent estetiska reformerna med hjälp av GeneratePress (GP) och GenerateBlocks (GB).
GeneratePress och GenerateBlocks
GP och GB är fortfarande två verktyg från ett ungt projekt med mycket användbarhet att förbättra, GB erbjuder inte samma inlärningskurva som du kan förvänta dig om du kommer från att använda byggare som Elementor eller liknande.
Som vi kommer att se i det här exemplet är vissa processer för att bygga vissa saker med GenerateBlocks mycket längre och mer mödosamma och kan vara lite desperata i de första försöken. När du lägger till fler och fler block blir saker och ting mer komplicerade.
Å andra sidan, när du väl förstår hur de fungerar och får grepp om dem, har du mycket mer kontroll över utseendet och känslan hos varje element.
svårigheten balanseras av dess dokumentation och en oklanderlig support där dess skapare till och med hjälper till med specifika designfrågor som inte ligger inom deras kompetens, så det är fortfarande ett bra alternativ att ta i beaktande eftersom de förblir trogna sin filosofi; rättvis, ren och lätt kod.
Blockelement
Blocks Elements, hädanefter Elements, lades till i juli 2020 i GeneratePress Premium version 1.11.0. Det kan användas som en vanlig krok för att infoga innehåll nästan var som helst på din blogg utan att behöva pilla med kod.
När den kombineras med GenerateBlocks kan du använda WordPress blockredigerare för att skapa krokar, rubriker, fotfötter, sidofält, en "Hero"-sida, innehållsmallar osv.
Låt oss komma till saken.
Strukturmall
Det första vi ska göra är att skapa vad vi kallar en "strukturmall". Det här steget är valfritt, men det skadar inte att skapa en om vi en dag vill ändra något med ett par klick.
Jag ger den det här namnet eftersom den bara kommer att definiera strukturella aspekter och inte dess innehåll. Det vill säga om vi vill visa eller inte visa rubriken, sidfoten eller dess widgets, en sidebar eller definiera bredden, etc. och så att vi inte blir förvirrade med namnen på blocken i resten av stegen.
Från huvudmenyn Appearance/Elements eller från toppen kan vi komma åt skapandet och hanteringen av elementen.
För det specifika användningsområde som berör oss, när vi lägger till ett nytt element väljer vi Design och trycker på skapa.
Därefter talar vi om för elementet på vilken sida vi vill att det ska tillämpas. För att göra detta går vi till fliken "Rules to display" och i position väljer vi "search results" från rullgardinsmenyn.
Elementen erbjuder många möjligheter till anpassning. Som du kommer att se kan du i den rullgardinsmenyn välja de flesta positioner på din blogg för att tillämpa dessa inställningar där.
Vi kan också bestämma vilka element vi vill dölja. I mitt fall kommer jag bara att använda ett alternativ för att slippa sidofältet, så jag väljer"Content (No sidebars)".
Det finns andra sätt att dölja sidofältet, men det här sättet är inte bara det enklaste och snabbaste, utan gör det också möjligt för oss att återkalla eventuella ändringar genom att helt enkelt återvända hit eller direkt "avpublicera" det här elementet/mallen till statusen "Utkast", och på så sätt återge sidan sitt ursprungliga utseende.
I fliken"Deactivate Elements" kan du dessutom lämna sidan praktiskt taget ren. Man kan säga att det är motsvarigheten till Elementors sidmall "Canvas", även om den är något förbättrad och enklare att använda.
En bra metod, som också rekommenderas i en av konfigurationsflikarna, är att dokumentera vad varje Element gör med interna anteckningar om titeln inte är tillräckligt beskrivande eller om vi inte vill att den ska bli för lång.
Jag har vant mig vid att lägga till anteckningar och kommentarer till allt eftersom när man gör många ändringar och med tiden är det oundvikligt att man till slut glömmer var och/eller hur de gjordes. Så i interna anteckningar kommer du alltid att ha all information du behöver för att spåra dina steg om något går fel eller om du vill göra nya ändringar.
Genom att publicera den här mallen skulle vi redan ha resultatsidan konfigurerad enligt våra önskemål, men nu skulle den naturligtvis vara tom när man gör en sökning eftersom vi måste skapa och publicera ett nytt element som kommer att bestämma utseendet på dessa sökningar.
Du kan lämna den här mallen i utkast för tillfället medan vi gör detta och publicera den när allt är klart.
Mall för utseende
Även om det här bara är ett annat element kallar jag det för en "utseende-mall" i den här lilla guiden eftersom jag vid tillfället var lite förvirrad av nomenklaturen för saker och deras olika möjliga användningsområden.
Det är här det verkliga anpassningsarbetet börjar.
Vi skapar ett nytt element, den här gången ett Block och ger det ett beskrivande namn.
Vi lägger till en behållare GenerateBlocks och inuti den behållaren lägger vi in ett Query Loop-block.
Och det här är vad vi kommer att se.
Jag har valt"Start blank" för att replikera resultatens ursprungliga struktur, men du kan välja någon av de mallar som det här blocket erbjuder.
Det bästa är att prova dem innan du bestämmer dig, för när du väl börjar arbeta med en av dem kan du inte tillämpa en annan och du måste börja hela processen från början om du vill ändra den (något som borde lösa GB).
När du har valt mallen väljer du blocket Query Loop (1) och du ser fliken "Block" till höger (2). Klicka på den och markera alternativet"Inherit query from template" ( 3 ) under "Query parameters". Slutligen, längst ner, under "Display Rules"/"Position" (4 ) söker vi och ställer in "Search Results" och sparar som utkast.
När vi vecklar ut frågeslingan ser vi detta:
Vi lägger till ytterligare ett rutnätblock i "Query Template" och väljer den struktur vi vill ha.
I exemplet kommer vi att använda en av två behållare som kommer att fungera som kolumner. Den vänstra kolumnen kommer att vara platsen för den presenterade bilden och den högra kolumnen kommer att visa utdraget ur posten.
Du kan också leka med tre behållare och konfigurera den centrala behållaren som ett utrymme. Jag insisterar, möjligheterna är många och det bästa är att leka med dem.
Som ni kanske har märkt bygger vi nästan från grunden en container med alla delar som kommer att utgöra den slutliga aspekten av det vi vill visa. I det här fallet sökresultaten, men du kan göra det med vilket annat innehåll som helst.
Låt oss nu tömma dessa två behållare.
Vi väljer den första behållaren och ställer in dess bredd till 33 (som faktiskt är inställd på 33,33) som du ser om du scrollar ner till alternativen för storleksändring.
Vi gör samma sak med den andra behållaren och väljer 66 (som automatiskt ställs in på 66,66). Poängen är naturligtvis att alla behållare du använder summerar till 100 så att de inte går utanför sidans horisontella utrymme och visas på samma rad.
När den första behållaren är vald lägger vi nu till ett GenerateBlocks-bildblock inuti.
Vad som kommer att hända då är att olika bildutrymmen kommer att visas. Ingen panik, det beror på att blocket upptäcker Loop och återskapar dess beteende. Om din sökmotor visar tio resultat är det dessa utrymmen som kommer att visas. Fortsätt bara att arbeta med bildbehållaren, och passera mycket av resten, som inte är något annat än en förhandsvisning av resultatsidan.
Vi väljer återigen den behållare som innehåller bilden (1). I menyn i blocket till höger går vi ner till "Enable dynamic data" och aktiverar den ( 2). Välj "Featured image" i Background image source (3 ) och bilderna visas i redigeraren.
I länkkälla väljer vi "Individuell länk" (4 ) så att varje bild länkar till sitt motsvarande inlägg och vi sparar återigen som utkast.
Nu går vi till den andra behållaren, väljer den och lägger till ett block "Headline" från GenerateBlocks.
Välj blocket "Headline" (1 ) med dynamiska data aktiverade (2 ) och upprepa föregående process (3), men den här gången väljer vi "Title" som innehållskälla (4 ) och individuell post som länkens källa (5)
Slutligen lägger vi till ytterligare ett "Title"-block nedan, som kommer att användas för att visa utdraget av posten efter dessa steg.
När den har lagts till upprepar vi samma process igen. Med detta nya block valt (1) aktiverar vi de dynamiska uppgifterna (2) och som källa för uppgifterna (3) den aktuella posten och källan för innehållet "Extract" (4). Nu kan du också ställa in längden på utdraget i ord (5).
Slutligen lägger vi till paginering, som kommer att visas under resultaten. För att göra detta markerar du blocket för sökslingan (1) och klickar på den lilla +-symbolen med prickarna som du hittar i redigeringsfältet (2).
Pagineringen byggs upp med ett block av knappar som du måste ge det format, den färg och den form som passar det utseende du vill ha. Alla möjliga konfigurationer, som inte är få, finns i blockets meny där du alltid har möjlighet att finjustera varje block för mobil, surfplatta och dator.
Jag lämnar det här för att inte förlänga det här inlägget för mycket.
Jag råder dig att göra allt detta först i en testmiljö för att se hur det verkligen fungerar bortom den förhandsvisning som editorn erbjuder och publicera det när du är säker på att det visas som det ska.
Kom också ihåg att om du gjorde det designblock som föreslogs i början och som vi kallar för Strukturmall och som vi hade lämnat i utkast, måste du publicera den.
Detta skulle vara utgångspunkten för att ytterligare anpassa resultatsidans utseende beroende på dina estetiska preferenser.
Många möjligheter till anpassning
Du kan fortsätta att redigera eller lägga till vad du vill, t.ex. ett rutnätsblock med två behållare mellan titeln och utdraget och där lägga till publiceringsdatum, numret på författaren till posten eller vad du vill.
Om du känner för det kan du till och med skapa en annan mall för den intetsägande standardsidan när WordPress inte hittar resultat vid sökning och lägga till hjälpknappar eller något annat element som hjälper besökaren.
Du kan ändra typsnittstyp och -storlek, rättfärdiga den åt ena eller andra hållet, justera elementens avstånd och dimensioner, leka med bakgrundsfärgen genom att lägga till bilder och former, lägga till ikoner, ramar, hover-effekter på länkarna, skuggor på behållarna osv.
Allt detta utan att lämna redigeringsverktyget och utan att behöva pilla med CSS eller röra dina mallfiler.
Här kan du prova den grundläggande layouten för mina sökresultat som jag fortfarande måste finslipa en del saker som att lägga till lästid och antal besök, skriva de tomma utdragen och lägga till de saknade presenterade bilderna.
Bonusboll: Om du behöver lägga till den typiska "Visar (antal) resultat för: ( söktord )" till resultaten, här hittar du den nödvändiga koden kod och instruktioner för att få det att fungera med ditt Query Loop-block, tack vare David från GB-supporten
