Morton 15 de enero de 2011 a las 08.35
   Imprimir artículo
elWebmaster.com

C贸mo usar shortcodes en WordPress para crear cajas de texto


wordpress-wideSi utilizamos WordPress para desarrollar nuestro sitio web, los shortcodes pueden resultarnos muy 煤tiles. En esta nota veremos qu茅 son, c贸mo sacarles provecho y en tan s贸lo unos pocos pasos, los utilizaremos para crear unas atractivas cajas de texto.

Fuente original del art铆culo: Our Tuts
Traducci贸n realizada por
elWebmaster.com

驴Pero qu茅 es un shortcode? Como el nombre lo indica, un shortcode es una manera simple y elegante de mostrar complicados c贸digos utilizando s贸lo una palabra. Por ejemplo, imagina que quieres insertar un info-box dentro de un post. Tendr铆as que crear div-classes tras div-classes para finalmente lograrlo. Pero un shortcode te da la posibilidad de hacerlo, s贸lo a帽adiendo, por ejemplo:

  1. [information]lorem ipsum[/information]

隆Es genial!聽

Los shortcodes de WordPress son una serie de funciones creadas dentro de functions.php (que puedes encontrar en el directorio de tu theme de WordPress) para crear c贸digos macro utilizables en el contenido del post. Vamos a ver, en esta ocasi贸n, c贸mo crear algunas encantadoras cajas de texto con un poco de CSS3.

Empecemos con la caja de texto. Haremos un gran caja verde de 茅xito, que se ver谩 as铆:

success

La caja ser谩 un simple div que tendr谩 una class asignada, y puedes nombrarla como quieras. La clase tendr谩 asignado un estilo. Para el primer paso, abre en un editor el archivo functions.php (si no tienes un archivo llamado as铆 dentro del directorio de tu theme de WordPress, crea uno)聽 y agrega el siguiente c贸digo PHP:

  1. function successbox($atts, $content=null, $code="") {
  2.  
  3.     $return = '<div class="success">';
  4.  
  5.     $return .= $content;
  6.  
  7.     $return .= '</div>';
  8.  
  9.     return $return;
  10.  
  11. }
  12.  
  13. add_shortcode('success' , 'successbox' );

Como puedes ver aqu铆 arriba, la funci贸n llamada 鈥successbox鈥 crea un class de div llamado 鈥success鈥 . La 煤ltima linea, 鈥add_shortcode(鈥榮uccess鈥 , 鈥榮uccessbox鈥 );鈥 est谩 definiendo la llamada de la funci贸n. Cuando lo uses, deber谩s agregarlo a tus posts dentro de corchetes, con la palabra success. El nombre de la funci贸n es successbox.

Ahora crearemos el estilo. Primero deber谩s descargar esta imagen >> . Luego abres el archivo style.css y agregas el siguiente c贸digo:

  1. .success    {
  2.     background:url(images/success.png) no-repeat scroll 15px 15px #EEF4D4;
  3.     border: 1px solid #8FAD3D;
  4.     color: #596C26;
  5.     -moz-border-radius: 6px 6px 6px 6px;
  6.     -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  7.     font-size: 13px;
  8.     line-height: 24px;
  9.     font-weight: normal;
  10.     font-family:Arial;
  11.     margin-bottom: 30px;
  12.     padding: 15px 15px 15px 80px;
  13.     position: relative;
  14.     width: 465px;   }

Ahora, para llamar al c贸digo desde tus posts, debes agregar las siguientes lineas (reemplazando el texto lorem ipsum con el verdadero contenido):

  1. [success]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [/success]

Usando el mismo principio, puedes crear m煤ltiples cajas de texto con m煤ltiples usos:

boxes

Eso fue todo, esperamos que te sea de utilidad. 隆Hasta la pr贸xima!

Fuente original del art铆culo: Our Tuts
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (14)

  1. Juan Carlos Mora dice:

    隆Excelente apunte! Muy f谩cil de implementar y con muchas posibilidades. Ya lo he usado en un blog y ha salido perfecto. Gracias

  2. Victor dice:

    Excelente, me ha funcionado. Gracias!

  3. Akuseru dice:

    Genial, me ha funcionado de maravilla…!

    Adem谩s me gustar铆a agregar que no sabia en que parte del archivo functions.php deb铆a poner el c贸digo, lo he puesto antes del “?>” del final del archivo.

    Lo puse al inicio primero y me da帽贸 la plantilla… 馃槈

    Todo bien, gracias de nuevo.

  4. JUANITO dice:

    MUY BIEN EL ARTICULO DE LA SEMANA ESPERO QUE SIGAN PUBLICANDO MAS INFORMACION SOBRE ESTOS TEMAS Y HOJALA ME MANDE UN TUTORIAL COMPLETO DE PHP NIVEL MEDIO

  5. Lara dice:

    Muchas gracias!!! La verdad es que lo hab茅is esxplicado como para dummies como yo, jeje… Trastear en WordPress se hace mucho m谩s facil con tips como este!

  6. angel matias orozco dice:

    Muy bueno pq estoy por crear plugins y voy a usar shortcodes para activarlos en los post de mi sitio 馃槈

  7. Orlando Gonzales dice:

    Hola y gracias por el tuto, bueno tengo una duda, en tu codigo
    function successbox($atts, $content=null, $code=””)

    usas $code=””, podrias decirme que funcion cumple o pa que sirve??

    Todo me quedo claro y gracias por tu aporte…

  8. Alvaro dice:

    Hola, a mi el codigo que va en el functions me da un error t_string en el p谩rrafo:

    聽 聽 $return = ”;
    He probado cambiando las comillas pero nada, 驴que puede ser?

  9. adrian dice:

    Muy bueno, el codigo funciona perfectamente aunque no interpreten todos los navegadores correctamente la hojas de estilos CSS. ahora habria que mirar si admiten el fuction un script para acoplarle una scrollbar para poder desplazarte en la caja cuando existen contenidos muy extensos… si podeis copiar el codigo perfecto por aqui guay porque ya he probado con algunos pero no me quedan como a mi me gusta! Saludos..

  10. ewebs - posicionamiento web dice:

    Muy buen aporte. Me funciona perfectamente en wordpress en la versi贸n 3.4.1. y con unos pocos retoques en el css para que me quede a mi gusto.
    Gracias por compartir tus conocimientos.

  11. dmaje dice:

    Instal茅 el plugin, cuando fui a utilizarlo me sale este mensaje

    Fatal error: Call to a member function get() on a non-object in /home/hostvit/public_html/confianzasocial.tk/wp-content/themes/iribbon/core/core-functions.php on line 26

    y no se que hacer

  12. ju dice:

    hola ya se que este post es antiguo pero no entiendo una cosa si quiere hacer una caja de cada como lo hago???? tengo que hacer esto 4 veces seguida y como diferencio entre ellas las cajas si en cada una quiero un icono distinto???

  13. ju dice:

    otra pregunta quiero hacer estoy intentando hacer en una pagina diferentes gallerias con el nextgen gallery view pero no hay forma de poder poner al lado derecho el texto que corresponde a cada galeria no es un titulo es un texto de 4 lineas
    como puedo hacerlo???

  14. Andres Salazar dice:

    tengo un problema necesito crear, tres cajas de texto con un boton para redireccionar la que corresponda, necesito crear estas 3 cajas de texto en la pagina principal centradas como el tema boldy… alguien podr铆a ayudarme ?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder