Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla

 

WordPressin hakukone on surkea

En tunne ketään WordPressiä käyttävää, joka puhuisi hyvää sen hakukoneesta, enkä vieläkään ymmärrä, että se ei ole juuri kehittynyt ensimmäisten versioiden jälkeen.

Sen lisäksi, että se on alkeellinen toimintatavoiltaan, se ei tarjoa minkäänlaista konfigurointia. Jopa sen tulossivun ulkonäkö jättää paljon toivomisen varaa. Käyttämästäsi mallineesta riippuen sen ulkoasu voi olla hieman parempi, mutta yleisesti ottaen se on edelleen esihistoriallinen

Tulosten ulkoasua voi parantaa hieman CSS:llä ja responsiivisuutta ilmaisella lisäosalla (maksullisella versiolla), kuten Relevanssi (tosin se kolminkertaistaa tietokantasi painon) tai tällä toisella lisäosalla, joka muodostaa yhteyden ulkoiseen Algolia-palveluun (ilmainen 10 000 hakupyyntöön asti kuukaudessa).

Mutta jätän suorituskykyongelman toiselle päivälle, koska kamppailen yhä sen kanssa, ja hoidan puhtaasti esteettiset uudistukset GeneratePressin (GP) ja GenerateBlocksin (GB) avulla.

GeneratePress ja GenerateBlocks

GP ja GB ovat edelleen kaksi työkalua nuoresta projektista, ja niiden käytettävyyttä on vielä paljon parannettavaa, ja GB ei tarjoa samaa oppimiskäyrää, jota saatat odottaa, jos tulet käyttämään Elementorin tai vastaavien kaltaisia rakentajia.

Kuten näemme tässä esimerkissä, jotkin prosessit tiettyjen asioiden rakentamiseksi GenerateBlocksilla ovat paljon pidempiä ja työläämpiä ja voivat olla hieman epätoivoisia ensimmäisillä yrityksillä. Kun lisäät yhä enemmän ja enemmän lohkoja, asiat monimutkaistuvat.

Toisaalta, kun ymmärrät, miten ne toimivat ja pääset niihin käsiksi, voit hallita paljon paremmin sitä, miltä kukin elementti näyttää.

Vaikeutta tasapainottavat dokumentaatio ja moitteeton tuki, jossa sen tekijät jopa auttavat tietyissä suunnittelukysymyksissä, jotka eivät kuulu heidän toimivaltaansa, joten se on silti loistava vaihtoehto, joka kannattaa ottaa huomioon, koska he pysyvät uskollisina filosofialleen: reilu, puhdas ja kevyt koodi.

Lohkoelementit

YouTube video

Blocks Elements, jäljempänä Elements, lisättiin heinäkuussa 2020 GeneratePress Premiumin versioon 1.11.0. Sitä voidaan käyttää normaalina koukkuna lisäämään sisältöä lähes mihin tahansa blogissasi ilman koodin kanssa näpyttelyä.

Yhdessä GenerateBlocksin kanssa sen avulla voit käyttää WordPressin lohkoeditoria koukkujen, otsikoiden, alatunnisteiden, sivupalkkien, "Hero"-sivun, sisältömallien jne. luomiseen.

Mennäänpä asiaan.

Rakennemalli

Ensimmäiseksi luomme niin sanotun "rakennemallin". Tämä vaihe on valinnainen, mutta sen luominen ei ole pahitteeksi siltä varalta, että jonain päivänä haluamme muuttaa jotain muutamalla klikkauksella.

Annan sille tämän nimen, koska se määrittelee vain rakenteelliset seikat eikä sen sisältöä. Toisin sanoen, haluammeko näyttää tai olla näyttämättä otsikkoa, alatunnisteen tai sen widgetit, sivupalkin tai määritellä leveyden jne., emmekä siis mene sekaisin muiden vaiheiden lohkojen nimien kanssa.

Päävalikosta Ulkoasu/Elementit tai ylhäältä pääsemme elementtien luomiseen ja hallintaan.

Elements de GeneratePress- Layout o diseño

Meitä koskevaa erityiskäyttöä varten uutta elementtiä lisätessämme valitsemme Design ja painamme create.

Sitten kerromme elementille, mille sivulle haluamme sen sovellettavan. Siirrymme tätä varten välilehdelle "Näytettävät säännöt" ja valitsemme asennossa pudotusvalikosta "hakutulokset".

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

Elementit tarjoavat paljon muokkausmahdollisuuksia. Kuten huomaat, voit valita tuosta pudotusvalikosta useimmat blogisi sijainnit, jotta voit soveltaa näitä asetuksia siellä.

Voimme myös päättää, mitkä elementit haluamme piilottaa. Omassa tapauksessani aion käyttää vain yhtä vaihtoehtoa ilman sivupalkkia, joten valitsen"Sisältö (Ei sivupalkkeja)".

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla

On muitakin tapoja piilottaa sivupalkki, mutta tämä on helpoin ja nopein tapa, ja sen lisäksi, että se on helpoin ja nopein, se antaa meille mahdollisuuden peruuttaa muutokset palaamalla yksinkertaisesti tänne tai suoraan "poistamalla" tämän elementin/mallikappaleen "Luonnos"-tilaan, jolloin sivu palautuu alkuperäiseen ulkoasuunsa.

Lisäksi"Deactivate Elements" -välilehdellä voit jättää sivun käytännössä puhtaaksi. Voisi sanoa, että kyseessä on Elementorin "Canvas" -sivumallin vastine, jopa hieman parannettuna ja yksinkertaisempana käyttää.

Desactivar Elementos en GeneratePress

Hyvä käytäntö, jota suositellaan myös yhdellä määritysvälilehdistä, on dokumentoida, mitä kukin Elementti tekee sisäisillä muistiinpanoilla siltä varalta, että otsikko ei ole tarpeeksi kuvaava tai emme halua, että siitä tulee liian pitkä.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 4

Olen tottunut lisäämään muistiinpanoja ja kommentteja kaikkeen, koska kun tekee paljon muutoksia ja ajan mittaan on väistämätöntä, että päätyy unohtamaan, missä ja/tai miten ne on tehty. Sisäisissä muistiinpanoissa on siis aina kaikki tiedot, joita tarvitset jäljittääksesi vaiheesi, jos jokin menee pieleen tai jos haluat tehdä uusia muutoksia.

Julkaisemalla tämän mallin meillä olisi jo tulossivu määritettynä mieleiseksemme, mutta nyt se olisi tietysti tyhjä hakua tehdessä, koska meidän on luotava ja julkaistava uusi elementti, joka määrittää näiden hakujen ulkoasun.

Voit jättää tämän mallin luonnosvaiheeseen sillä aikaa, kun teemme tämän, ja julkaista sen, kun kaikki on valmista.

Ulkoasumalli

Vaikka tämä on vain toinen Elementti, kutsun sitä tässä pienessä oppaassa "ulkonäkömallineeksi", koska olin aikanaan hieman hämmentynyt asioiden nimikkeistöstä ja niiden erilaisista käyttömahdollisuuksista.

Tästä alkaa varsinainen muokkaustyö.

Luomme uuden elementin, tällä kertaa Blockin, ja annamme sille kuvaavan nimen.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 5

Lisäämme GenerateBlocks-säiliön ja sen sisälle sijoitamme Query Loop -lohkon.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 6

Ja tämä on se, mitä tulemme näkemään.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 7

Olen valinnut vaihtoehdon"Start blank" jäljitelläkseni tulosten natiivirakennetta, mutta voit valita minkä tahansa tämän lohkon tarjoamista malleista.

Parasta on kokeilla niitä, ennen kuin päätät, koska kun aloitat työskentelyn yhdellä niistä, et voi soveltaa toista ja sinun on aloitettava koko prosessi alusta, jos haluat muuttaa sitä (asia, joka pitäisi ratkaista GB).

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 8

Kun olet valinnut mallin, valitse kyselysilmukan lohko (1) ja näet "Lohko"-välilehden oikealla (2). Napsauta sitä ja merkitse"Inherit query from template" ( 3 ) -vaihtoehto "Query parameters" -kohdassa. Lopuksi alareunassa, kohdassa "Display Rules"/"Position" (4 ) haetaan ja asetetaan "Search Results" ja tallennetaan luonnoksena.

Kun avaamme kyselysilmukan, näemme tämän:

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 9

Lisäämme toisen ruudukkolohkon "Query Template" -lohkon sisälle ja valitsemme haluamamme rakenteen.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 10

Esimerkissä käytämme yhtä kahdesta säiliöstä , jotka toimivat sarakkeina. Vasemmassa sarakkeessa on paikka esillä olevalle kuvalle ja oikeassa sarakkeessa näkyy merkinnän ote.

Voit myös leikkiä kolmella säiliöllä ja määrittää keskimmäisen säiliön tilaksi. Vaadin, mahdollisuuksia on monia, ja parasta on leikkiä niillä.

Kuten olet ehkä huomannut, rakennamme lähes tyhjästä kontin, jossa on kaikki palat, jotka muodostavat lopullisen osan siitä, mitä haluamme näyttää. Tässä tapauksessa hakutulokset, mutta voit tehdä sen minkä tahansa muun sisällön kanssa.

Nyt hyökkäämme näiden kahden kontin kimppuun.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 11

Valitsemme ensimmäisen säiliön ja asetamme sen leveydeksi 33 (joka on itse asiassa asetettu 33,33), kuten näet, kun selaat alaspäin koonmuutosvaihtoehtoihin.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 12

Teemme saman toiselle säiliölle ja valitsemme 66 (joka asetetaan automaattisesti arvoon 66,66). Tärkeintä on tietenkin se, että kaikki käyttämäsi säiliöt ovat yhteensä 100, jotta ne eivät mene sivun vaakasuoran tilan ulkopuolelle ja näkyvät samalla rivillä.

Nyt kun ensimmäinen kontti on valittu, lisäämme sen sisään GenerateBlocks-kuvalohkon.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 13

Silloin tapahtuu, että eri kuvatilat tulevat näkyviin. Älä hätäänny, se johtuu siitä, että lohko havaitsee silmukan ja luo sen käyttäytymisen uudelleen. Jos hakukoneesi näyttää kymmenen tulosta, nämä tilat tulevat näkyviin. Jatka vain työskentelyä kuvasäiliön parissa ja ohita suuri osa muusta, joka ei ole muuta kuin tulossivun esikatselu.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 14

Valitaan jälleen kuvan sisältävä kontti (1). Oikealla olevan lohkon valikossa menemme alas kohtaan "Enable dynamic data ja aktivoimme sen (2). Valitsemme "Featured image" kohdasta Background image source (3) ja kuvat ilmestyvät editoriin.

Linkkilähteessä valitsemme "Yksittäinen linkki" ( 4 ), jotta jokainen kuva linkittyy vastaavaan viestiin ja tallennamme taas luonnoksena.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 15

Nyt siirrymme toiseen konttiin, valitsemme sen ja lisäämme "Headline"-lohkon GenerateBlocksista.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 16

Valitsemme "Headline"-lohkon (1) , jossa dynaamiset tiedot on aktivoitu (2 ), ja toistamme edellisen prosessin (3), mutta tällä kertaa valitsemme sisällön lähteeksi "Title" ( 4) ja linkin lähteeksi "Individual entry" (5)

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 17

Lopuksi lisäämme vielä toisen "Otsikko"-lohkon alle, jota käytetään näyttämään näiden vaiheiden mukaisen merkinnän ote.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 18

Kun se on lisätty, toistamme saman prosessin uudelleen. Kun tämä uusi lohko on valittu (1), aktivoimme dynaamisen datan (2) ja datan lähteenä (3) nykyisen merkinnän ja sisällön lähteen "Ote" (4). Nyt voit myös asettaa otteen pituuden sanoina (5).

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 19

Lopuksi lisäämme sivunumeron, joka näkyy tulosten alapuolella. Valitse tätä varten kyselysilmukan lohko (1) ja napsauta muokkauspalkissa olevaa pientä pistemäistä symbolia (2).

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 20

Sivukuvaus rakennetaan painikkeista koostuvalla lohkolla, jolle sinun on annettava haluamasi ulkoasun mukainen muoto, väri ja muoto. Kaikki sen mahdolliset kokoonpanot, joita ei ole vähän, ovat lohkon valikossa, jossa sinulla on aina mahdollisuus hienosäätää kukin lohko mobiili-, tabletti- ja työpöytäversiota varten.

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 21

Jätän sen tähän, jotta en pidentäisi tätä viestiä liikaa.

Neuvon sinua tekemään kaiken tämän ensin testiympäristössä, jotta näet, miten se todella toimii muussa kuin editorin tarjoamassa esikatselussa, ja julkaisemaan sen, kun olet varma, että se näkyy niin kuin sen pitäisi.

Muista myös, että jos teit sen suunnittelulohkon, jota ehdotettiin alussa ja jota kutsuimme nimellä Structure Template, jonka olimme jättäneet luonnokseen, sinun on julkaistava se.

Tämä olisi lähtökohta, jonka pohjalta voit muokata tulossivun ulkoasua edelleen esteettisten mieltymystesi mukaan.

Paljon muokkausmahdollisuuksia

Mukauta WordPressin hakutulossivua GeneratePressin ja GenerateBlocksin avulla 22

Voit jatkaa lisäämällä tai muokkaamalla mitä tahansa haluat, kuten esimerkiksi ruudukkolohkon, jossa on kaksi säiliötä otsikon ja otteen välissä, ja lisätä sinne julkaisupäivän, postauksen kirjoittajan nimen tai mitä tahansa haluat.

Jos jaksat, voit jopa luoda toisen mallin sille tylsälle oletussivulle, kun WordPress ei löydä tuloksia haun yhteydessä, ja lisätä tietolaatikoita tai mitä tahansa muuta elementtiä, joka auttaa kävijää löytämään etsimänsä.

Voit vaihtaa kirjasintyyppiä ja -kokoa, tarkentaa sitä puolin tai toisin, säätää elementtien välejä ja mittoja, leikkiä taustavärillä lisäämällä kuvia ja muotoja, lisätä kuvakkeita, reunuksia, linkkien hover-efektejä, varjoja säiliöihin jne.

Kaikki tämä poistumatta editorista ja ilman, että sinun tarvitsee näpelöidä CSS:ää tai koskea mallitiedostoihin.

Tässä voit kokeilla hakutulosteni perusasettelua, jota minun on vielä hiottava, kuten lukuaika ja käyntien määrä, tyhjien otteiden kirjoittaminen ja puuttuvien esillä olevien kuvien lisääminen.

Bonuspallo: Jos sinun on lisättävä tuloksiin tyypillinen"Showing (number) results for: ( searchedword )", täältä löydät tarvittavan koodin ja ohjeet, joilla saat sen toimimaan Query Loop -lohkosi kanssa, kiitos Davidin GB-tuesta


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

Aiheeseen liittyvät artikkelit