Share
Hoy vamos a ver cómo usar códigos cortos en conjunto con una variedad de servicios populares, incluidos sitios como YouTube y Flickr, recapitulando primero cómo crear un código corto y luego cómo convertir ese código de terceros en algo que se puede repetir y manipular.
Ya hemos cubierto los códigos cortos aquí en WPTuts +, discutiendo las ventajas de usarlos y cómo, de hecho, usarlos. Los códigos cortos son efectivamente accesos directos (como los definen WordPress) que permiten lograr un resultado repetidamente con el menor trabajo posible. En su forma más simple, un código abreviado incluye algún código que hayas conectado a WordPress en otro archivo, a veces el producto de un tercero, como un video de YouTube o un flujo de Flickr.
Si no está familiarizado con los códigos cortos, entonces probablemente debería dejar de leer este artículo y consultar uno de los otros artículos que tenemos aquí en Tuts + sobre códigos cortos en WordPress.
Se crea un shortcode agregando una función a su funciones.php archivo, y luego vincularlo como un shortcode. El siguiente ejemplo crea un enlace al centro de AppStorm.
Accentsconagua
function link_to_appstorm ($ atts, $ content = null) return 'AppStorm'; add_shortcode ('appstorm', 'link_to_appstorm'); Para usarlo, usamos la forma más simple de un shortcode sin atributos.
[appstorm]
Podemos profundizar esta idea introduciendo un atributo, en el que especificar un sitio de AppStorm específico para vincular.
function link_to_appstorm ($ atts, $ content = null) extract (shortcode_atts (array ('site' => 'www'), $ atts)); devuelve 'AppStorm'; add_shortcode ('appstorm', 'link_to_appstorm'); La hora, el código abreviado está enlazando a un subdominio de AppStorm. Especificamos que subdominio agregando el sitio atributo. Si no hay ningún atributo definido en el código abreviado, el código abreviado lo establece de manera predeterminada www que simplemente enlaza de nuevo a la página principal. El siguiente ejemplo de uso se vincularía a iPad.AppStorm.
[appstorm site = "ipad"]
Como puedes ver, los códigos cortos son bastante autoexplicativos. Sin embargo, lo que queremos hacer es utilizar el mismo principio básico de un enlace generado por un shortcode con un atributo para usar junto con un servicio de terceros como YouTube o Flickr..
Convertir un fragmento de código estático de terceros en un shortcode es bastante similar al método utilizado para crear un enlace. Simplemente, vamos a crear una función que devuelva el código como un código corto y luego agregaremos algunos atributos para personalizarlo..
El primer paso que debemos tomar es tomar el código de inserción regular y crear una función de retorno simple a partir de él..
función youtube_video ($ atts, $ content = null) return ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
De la misma manera que creamos ese primer enlace no variable en el primer ejemplo, el fragmento de código anterior incorpora un video de YouTube que no cambiará en absoluto. Y cómo lo hace es bastante autoexplicativo también.
Esencialmente, el fragmento de código en el paso anterior producirá un resultado idéntico a si el código devuelto se pegó en el propio editor. A menos que vaya a incrustar el mismo video una y otra vez, este código abreviado es probablemente inútil. Por lo tanto, queremos introducir algunos atributos para traducir en parámetros para el iframe.
Para lograr esto, una vez más usamos el extraer() Función para extraer atributos desde el shortcode. En el código a continuación, lo hacemos de forma básica al crear solo un atributo para reemplazar la ID de video.
function youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => "), $ atts)); return ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
Y, al igual que sustituir la identificación de video, podemos hacer lo mismo para el ancho y la altura. Este es el momento en el que querrá asegurarse de que está proporcionando valores predeterminados, sin embargo, en caso de que el usuario no proporcione un valor de ancho o alto.
function youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => ", 'width' => '640', 'height' => '360'), $ atts)); return ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
YouTube tiene parámetros adicionales que se pueden agregar a la URL, como la reproducción automática. Obviamente, estos también pueden aplicarse al código devuelto, con su propio atributo si es necesario. En general, esto se explica por sí mismo y se muestra a continuación (las partes agregadas están en negrita).
function youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => ", 'width' => '640', 'height' => '360', 'autoplay' => '0 '), $ atts)); return''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
Realmente es así de simple y, como verá en el siguiente resumen, se puede usar el mismo método básico para crear códigos cortos para otros servicios de terceros..
Todas estas incrustaciones de terceros han sido creadas usando los mismos pasos que arriba. Por supuesto, como en el paso 2b, se pueden agregar parámetros adicionales a voluntad.
Un video de Vimeo está incrustado en casi la misma forma que un video de YouTube, a través de un iframe Con variables de ancho y alto. La única adición es la variable de color para personalizar el jugador..
function vimeo_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => ", 'width' => '640', 'height' => '360', 'color' => '59a5d1 '), $ atts)); return''; add_shortcode ('vimeo', 'vimeo_video'); [vimeo]
El widget de perfil de Twitter es una pieza de JavaScript, con una tonelada de atributos diferentes, todos sustituidos por atributos de código abreviado en el código a continuación. Debido a que hay muchos, es posible que desee eliminar algunos y reemplazarlos con valores constantes (como el estilo) en el JavaScript real, o simplemente cambiar los atributos predeterminados en la matriz y olvidarse de usarlos en el código corto.
function twitter_widget ($ atts, $ content = null) extract (shortcode_atts (array ('username' => ", 'width' => '300', 'height' => '200', 'tweetnum' => '4 ',' shellbgcolor '=>' cccccc ',' listbgcolor '=>' eeeeee ',' textcolor '=>' 333333 ',' linkcolor '=>' 639ee3 ',' hashtags '=>' true ',' scrollbar ' => 'true', 'loop' => 'false', 'stream' => 'false', 'avatars' => 'false', 'timestamp' => 'false'), $ atts)); return ' '; add_shortcode ('twitter', 'twitter_widget'); Todos estos atributos de código abreviado tienen valores predeterminados, excepto el nombre de usuario que se requiere. En cuanto a qué poner realmente en el atributo, todos se explican por sí mismos hasta hashtags en el que el resto son verdaderos / falsos.
[gorjeo]
El botón de Tweet es un popular botón para compartir redes sociales en Twitter..
función tweet_button ($ atts, $ content = null) extract (shortcode_atts (array ('username' => ", 'url' =>", 'style' => 'none'), $ atts)); volver 'Tweet'; add_shortcode ('tweetbutton', 'tweet_button'); Los dos primeros atributos del botón de tweet no son realmente ambiguos. El último establece el estilo para el botón de tweet, ya sea horizontal, vertical o ninguna.
[tweetbutton]
Al igual que el botón Tweet, los botones Me gusta y Enviar son los botones de compartir en redes sociales para Facebook. Tenga en cuenta que estos botones también necesitan que se haga referencia al SDK de JavaScript en algún lugar de la página actual.
function facebook_buttons ($ atts, $ content = null) extract (shortcode_atts (array ('width' => '450', 'showfaces' => 'false', 'colorscheme' => 'light', 'font' => 'arial'), $ atts)); regreso ' Los diferentes atributos para el uso se explican en la página asociada de Facebook, pero esencialmente, el ancho está escrito en el mismo formato que antes., Mostrar caras es un valor verdadero / falso de si se muestran caras de los "like-ees", esquema de colores es oscuro o claro y la fuente es, bueno, una fuente.
Dado que XFBML apuntará automáticamente a la página actual, no es necesario tener ningún atributo en uso, lo que significa que el código abreviado puede ser tan simple como el ejemplo a continuación..
[me gusta]
La insignia de Flickr es una forma de mostrar tus fotos recientes de Flickr. Desafortunadamente, el widget de Flickr viene con su propio CSS (aunque puede moverlo fácilmente a su hoja de estilo) y usa tablas para el diseño. Una vez que haya terminado de sentirse muy frustrado por esta práctica, aquí está el código corto.
function flickr_widget ($ atts, $ content = null) extract (shortcode_atts (array ('userid' => ", 'num' => '3', 'sort' => 'random', 'size' =>), $ atts)); return ' | www.películar.com |
El widget de Flickr tiene cuatro variables básicas, la ID de usuario es el id del usuario (en el formato de 12345678 @ N01), el num es la cantidad de fotos mostradas, la ordenar es reciente o aleatoria y se relaciona con la forma en que se determinan las fotos mostradas y la tamaño es s (un cuadrado pequeño), t (una miniatura) o m (medio).
[flickr]
Esperemos que haya explicado cómo crear un shortcode en el contexto de un servicio de terceros. Es bastante simple, solo tenemos que descubrir cómo funciona el código original y cambiar las variables estáticas por los atributos. Esto ahorra tiempo, pero, quizás más importante, significa que el código puede modificarse en una fecha posterior, al tiempo que mantiene los parámetros que le permiten cambiar, por ejemplo, el ancho en una fecha posterior en todos los usos del código corto en particular..
