Incloure un cercador en Ghost

El CMS de Ghost en la seua versió 3.9.0 no inclou l’opció de cercador d’articles, ni tampoc comentaris, etc. Però es poden integrar amb aplicacions externes prou útils que no queden gens malament i que funcionalment són quasi excel·lents.

No m’agrada haver de fer crides a fitxers externs ni que estes funcionalitats tan bàsiques per a un blog no vinguen de sèrie, i inserir-les pot arribar a ser un autèntic maldecap.

Per això he decidit crear este article, on explique com inserir un cercador per a aquells que no poden accedir al core del cms perquè el tenen allotjat en ghost.org.

Abans de començar

Per a fer això hauràs de retocar el teu tema actual i crear-te un compte en https://www.sitesearch360.com/, és gratuït, encara que si la teua web té moltes visites i cerques hauràs de pagar per a usar l’eina.

Per a poder treballar amb el teu tema de Ghost, hauràs de descarregar-lo des de Settings -> Design i en la part inferior trobaràs el teu tema actiu. El descarregues fent clic en Download.

Creant el compte en SiteSearch360

Quan crees el teu compte en SiteSearch360, has de seguir els passos. Són prou senzills i pots configurar la pàgina perquè t’aparega en espanyol.

En el penúltim pas, ens donarà el codi que mostra el formulari. L’hem de copiar i apegar dins del nostre tema descarregat. Dependrà del lloc on vulgues mostrar el cercador, ja que el que fa este codi és precisament això, mostrar-lo.

En el meu cas el vaig apegar en el fitxer default.hbs, just en el footer.

Després de guardar estos canvis, has d’afegir l’script de l’últim pas.

En el meu cas l’eina va detectar que tenia Google Tag Manager, per la qual cosa el vaig implementar amb esta eina, encara que es pot inserir perfectament en el codi de la web.

Una cosa important és que este últim script canvia si edites el disseny amb el configurador visual.

Configurador visual

SiteSearch360 també inclou una funcionalitat per a editar estils. És possible que algunes opcions necessites configurar-les des del teu css, però així i tot t’estalviarà prou faena, a més de poder canviar el funcionament de com es mostraran els resultats de cerca.

Per a accedir-hi, ves a Instal·lació en Configuració Visual.

Des de la nova finestra a què accedixes tens prou opcions per a configurar. Des d’ací podràs canviar colors, marges, grandària de fonts, vores i fins i tot algunes opcions més avançades com el seguiment amb Google Analytics, Tag Manager o l’activació de Voice Search.

Mentres edites el cercador es generarà una vista prèvia a l’esquerra de la pantalla, i podràs alternar entre la vista de mòbil o d’escriptori per a veure com queda en els dos casos.

Una vegada ho hages editat tot, en la part inferior trobaràs l’script resultant, que has de substituir pel del pas anterior i que ja t’he comentat abans d’entrar en esta secció de l’article.

Pujada del disseny i proves

Una vegada apliques tots estos canvis, guarda-ho tot.

Per a pujar el tema amb les modificacions fetes, has d’anar on vas descarregar el tema actiu dins de la teua plataforma de Ghost, i al final de tot voràs un botó que posa Upload a Theme.

Hi has de pujar el teu tema comprimit en zip. Com que és el mateix tema que vas descarregar, t’apareixerà un avís per a sobreescriure el tema. Acceptes i guardes els canvis.

Ara toca anar a la teua web, buscar el formulari i fer algunes proves per a comprovar que tot funciona correctament.

És possible que apareguen alguns problemes relacionats amb el disseny o les fonts, per la qual cosa potser caldrà que edites el teu fitxer de css.

Et recomane que tingues paciència i que vages amb compte amb la cache, ja que pot jugar males passades quan fas un canvi i la web et mostra una versió emmagatzemada en cache.

Entendre algunes funcionalitats extra

A continuació explicaré dues funcionalitats que em pareixen prou útils i fins i tot necessàries en els temps actuals. Una és l’opció de poder fer seguiment de les cerques amb Google Analytics i l’altra és poder fer cerques per veu.

Com fer el seguiment de Google Analytics amb SiteSearch360

Com acabes de veure en la imatge anterior, per a fer el seguiment del que es busca en la teua eina d’analítica, només has de col·locar el codi següent:

    tracking: {
        providers: [
            "GTM"
        ]
    },

El valor GTM fa referència al tracking de Google Tag Manager. Es pot canviar per GA si es vol enviar la informació directament a Google Analytics, però no envia les dades correctament, per la qual cosa recomane usar Tag Manager.

El que fa el codi  és afegir el paràmetre de cerca ss360Query a la url, de manera que es poden filtrar els resultats, i finalment queda així:

https://www.queseo.es/?ss360Query=google%20analytcs

Afegint l’opció ss360Query com a paràmetre de cerca en la teua vista de Google Analytics ja estarà llest el seguiment.

Amb Google Tag Manager cal crear un activador amb l’esdeveniment personalitzat VirtualPageview per a fer el seguiment de la url juntament amb una etiqueta de tracking de Google Analytics.

Com incloure cerques per veu en el cercador

En este cas el codi necessari és el següent:

    voiceSearch: {
        enabled: true,
        lang: "es"
    },

Amb esta opció tindrem habilitada la possibilitat de fer cerques per veu en el teu blog de Ghost.

Conclusions

És prou senzill incloure un cercador en Ghost encara que no vinga per defecte, però segurament siga un dels motius, entre altres, pels quals molta gent no acaba de llançar-se a este nou cms.

La funcionalitat per a editar el disseny, la funcionalitat i la possibilitat de fer cerques per veu són simplement genials.

En canvi, té molt poques cerques i, si tens moltes visites, la teua web haurà de pagar perquè els usuaris puguen continuar usant l’eina.

Si l’article t’ha resultat útil, pots ajudar-me difonent-lo 👍🏻