Arxiu d'etiquetes: shortcode

Formularis de contacte (amb WordPress.com)

Si volem que els lectors del nostre blog entrin en contacte directe amb nosaltres sense haver-los de donar la nostra adreça de correu electrònic, podem utilitzar un formulari de contacte que inserirem en una pàgina del lloc. Les dades introduïdes en aquest formulari ens arribaran al compte de correu electrònic indicat i, a més, les podrem trobar a l’apartat Feedbacks del tauler de l’administrador.

Per afegir un formulari a la pàgina fem clic al botó “Afegir formulari de contacte” ( Add Contact Form ) que trobem per sobre de l’editor de text.

Botó afegir formulari

Aquest botó dóna accés al generador de formualris on podrem personalitzar els camps que es creen per defecte. Aquest generador té dues pestanyes: la primera amb les eines d’edició i addició de nous camps ( Form Builder ) i la segona ( Email notifications ) amb dos camps que ens permetran indicar un correu electrònic on rebre el missatge i l’assumpte del missatge enviat; només omplirem la informació d’aquesta segona pestanya si volem rebre els missatges en una adreça de correu diferent a l’especificada en el nostre perfil de WordPress.

En situar el cursor a sobre dels camps existents podrem editar-los i també moure’ls per ordenar-los.

En fer clic a editar podrem canviar:

Edició de camps de formulari

  • El nom de l’ etiqueta de camp.
  • El tipus de camp.
  • I la condició de camp d’ompliment obligatori.

WordPress ens permet la utilització de diversos tipus de camp ( Field type ):

  • text : crea un control d’entrada de text d’una línia.
  • textarea : crea un control d’entrada de text en diverses línies.
  • radio : crea un conjunt de botons. L’usuari podrà seleccionar només una de les opcions disponibles.
  • checkbox : crea una casella de verificació que l’usuari podrà marcar o desmarcar.
  • select (drop down) : crea un desplegable amb diverses opcions. L’usuari podrà seleccionar només una de les opcions disponibles.
  • email : crea un control d’entrada de text d’una línia per a adreces de correu electrònic.
  • name : crea un control d’entrada de text d’una línia.
  • url : crea un control d’entrada de text d’una línia per a adreces web.

Si volem afegir un camp, fem clic a l’enllaç “Afegir un nou camp” ( Add a new field). A la dreta s’obrirà la finestra d’edició per tal que especfiquem l’etiqueta del camp, el seu tipus i si serà o no obligatori. En cas que el tipus de camp sigui “select” o “radio” podrem indicar, a més, les diverses opcions fent clic a l’enllaç “Afegir una nova opció” ( Add another option ).

Per esborrar un camp, fem clic a la ratlla que apareix al seu costat. Procedirem de la mateixa manera quan calgui esborrar alguna de les opcions dels camps de tipus “drop down” o “radio”.

Eliminar camps de formulari

Per afegir el formulari a la pàgina, fem clic al botó “Afegir aquest formulari a l’entrada” ( Add this form to my post ).

En inserir el formulari es genera un shortcode (codi abreujat) que apareix en el formulari d’edició:

Per exemple, aquest shortcode indica que hem creat un formulari de tres camps: nom, correu electrònic i comentaris; tots tres camps són obligatoris (required=’1′) i són del tipus text, email i textarea respectivament:
[ contact-form ]
[ contact-field label='Nom' type='text' required='1'/ ]
[ contact-field label='Correu electrònic' type='email' required='1'/ ]
[ contact-field label='Comentaris' type='textarea' required='1'/ ]
[ /contact-form]

Podem editar el formulari fent canvis en aquest shortcode o bé, fent clic al botó “Afegir formulari de contacte” ( Add Contact Form ), que és el mateix que utilitzem quan volem afegir el formulari.

Aquí us deixem un video amb el resum visual del que us hem explicat en aquesta entrada.

Incrustrar videos de Youtube en les entrades del blog (amb WorPress.com)

Actualment, WordPress.com permet incrustar vídeos des del següents serveis: Youtube , Vimeo , Hulu , Flickr , DailyMotion , Viddler , Blip.tv , TEDTalks , Educreations i Videolog .

Expliquem com introduir un vídeo allotjat a Youtube en una entrada del blog.

La manera més ràpida d’integrar el video consisteix a copiar la URL del vídeo que és la que es mostra en la barra d’adreces del navegador mentre estem visualitzant el video, en la posició de l’entrada on volem que es visualitzi (des de l’editor de text), WordPress.com s’encarrega de fer que es visualitzi el vídeo.

Una altra manera de fer aquesta inserció consisteix a utilitzar el que WordPress anomena shortcode (codi abreujat). Aquest shortcode és un codi específic de WordPress que permet personalitzar algunes opcions d’una manera no gaire complicada.

El format d’aquest shortcode és el següent:

[ youtube=http://www.youtube.com/watch?v=2dsWquBkXbQ ]

On el que apareix darrere del signe d’igual és la referència al vídeo que apareix en la URL.

A partir d’aquest codi base podem personalitzar diverses opcions:

  • Canviar l’amplada i l’alçada del vídeo:
    [ youtube=http://www.youtube.com/watch?v=2dsWquBkXbQ&w=640&h=385 ]
  • Deshabilitar els vídeos relacionats que apareixen quan el vídeo s’ha reproduït completament:
    [ youtube=http://www.youtube.com/watch?v=2dsWquBkXbQ&w=640&h=385&rel=0 ]
  • Per començar en vídeo en un moment concret, especificant, en segons, el punt concret on cal que comenci:
    [ youtube=http://www.youtube.com/watch?v=2dsWquBkXbQ&w=640&h=385&rel=0&start=70 ]
  • Per especificar on ha d’acabar-se la visualització del vídeo:
    [ youtube=http://www.youtube.com/watch?v=2dsWquBkXbQ&w=640&h=385&rel=0&start=70&end=90 ]

Què són Shortcodes de WordPress.com?

Un shortcode és un codi específic de WordPress que permet inserir codi complex seguint unes directrius marcades per l’aplicació de tal manera que, escrivint molt poc codi, aconseguim que es realitzin accions que d’altra manera exigirien molts línies de codi.

Aquests shortcodes ens permeten inscrustar i personalitzar diversos objectes:

Vídeo

  • [ blip.tv] inscrusta vídeos de Blip.tv
  • [ cnnmoney-video] inscrusta vídeos de CNNMoney
  • [ dailymotion] inscrusta vídeos de DailyMotion
  • [ flickr] inscrusta vídeos de Flickr
  • [ ted] inscrusta vídeos de TED Talks
  • [ vimeo] inscrusta vídeos de Vimeo
  • [ wpvideo] inscrusta vídeos de VideoPress
  • [ youtube] inscrusta vídeos de YouTube
  • [ hulu] inscrusta vídeos de Hulu

Àudio

  • [ audio] mostra els arxius d’àudio penjats al servidor com a reproductors d’àudio
  • [ playlist] mostra una llista de reproducció dels àudios penjats
  • [ soundcloud] incrusta àudio de SoundCloud
  • [ rdio] incrusta música de Rdio
  • [ spotify] incrusta música de Spotify
  • [ bandcamp] incrusta música de Bandcamp
  • [ 8tracks] incrusta música de 8tracks

Imatges i documents

  • [ gallery] insereix una galeria d’imatges en una entrada o en una pàgina
  • [ instagram] insereix una imatges d’Instagram
  • [ scribd] incrusta un document/arxiu d’Scribd
  • [ slideshare] incrusta una presentació de Slideshare.net
  • [ slideshow] incrusta una presentació de fotos penjades en el servidor
  • [ googleapps] incrusta un document de Google Docs
  • [ office] incrusta un document d’Excel document de Microsoft Office Live

En l’entrada “ Incrustrar videos de Youtube en les entrades del blog (amb WorPress) ” expliquem la manera d’utilitzar els shortcodes relacionats amb aquest servei. Tota la informació sobre la manera d’aplicar els shortcodes la trobem a la pàgina d’ajudes de WordPress:
http://en.support.wordpress.com/shortcode (en anglès).