Veurem una manera d’afegir codi html, css i javascript al nostre WordPress amb un mòdul gratuït. Cadascú dels codis es fa d’una manera, i nosaltres en aquest article posarem l’exemple d’afegir codi html.

Es pot de dues maneres, modificant el fitxer functions.php de la nostra plantilla (tema) o mitjançant un plugin (mòdul). Nosaltres ho farem de la segona manera. Si, segur que esteu bufant i dient: Un altre plugin a WordPress… Doncs si, en aquest cas ho haurem de fer així.

Pas 1. Instal·lem Code Snippets

Cerquem Code Snippets als plugins, l’instal·lem i l’activem per poder-lo configurar.

Pas 2. Snipets d’exemple

Una vegada l’activem, veurem al menú de l’esquerra l’opció Snippets, que variarà segons l’idioma que tingueu activat al WordPress. En català us hsuria de sortir Snippets.

Si premeu, veureu un llistat d’snippets creats. Editeu i mireu “Example HTML Shortcode”. D’aquesta manera veure un exemple clar de com crear un Shortcode per afegir codi HTML en qualsevol part de la web.

3. Crear ShortCode a CodeSnippets

Anem a crear un nou codi snippet amb el codi que a continuació us deixem a la captura. On posa “shorcode_name”, ho canvieu per un nou nom del shortcode. Per exemple Hello Kity.

Dintre de la variable $out, posareu el codi HTML que es vulgui que mostri. Per exemple:

$out= "<p>Hello Kitty</p>";

Aquí teniu un exemple genèric:

4. Afegim el ShortCode

Ara, anem a qualsevol part de la web, ja sigui pàgina o entrada del blog, i afegim el sortcode. Mireu que el que hem de posar entre els claudàtors és el nom del shortcode. En el nostre exemple:

[Hello_kitty]

Que era el nom amb el que hem creat el shortcode.

5. Comprovar que funciona

Una vegada afegit el shortcode, anem a la web i visitem la pàgina o entrada del blog on l’hem col·locat i comprovem que funciona.

Amb el CSS i el JavaScript no funciona amb ShortCodes. Veieu els exemples que el propi plugin us deixa per veure com es fa. Si tenim temps, escriurem més articles d’exemple.

Amb aquest article ja sabem com podem afegir codi HTML al nostre WordPress.


Més informació