Share
Aujourd’hui, nous allons examiner comment utiliser des codes abrégés avec divers services populaires, notamment des sites tels que YouTube et Flickr, en récapitulant d’abord la création d’un code abrégé, puis la conversion de ce code tiers en quelque chose qui peut être répété et manipulé.
Nous avons déjà couvert les codes courts ici sur WPTuts +, en discutant des avantages de leur utilisation et de la manière de les utiliser. Les codes courts sont en réalité des raccourcis (définis par WordPress eux-mêmes) qui permettent d’atteindre un résultat de manière répétée avec le moins de travail possible. Dans sa forme la plus simple, un shortcode inclut du code que vous avez lié à WordPress dans un autre fichier, parfois le produit d'un tiers, tel qu'une vidéo YouTube ou un flux Flickr..
Si vous n'êtes pas familier avec les codes courts, alors vous devriez probablement arrêter de lire cet article et consulter l'un des autres articles que nous avons ici à Tuts + à propos des codes courts dans WordPress..
Un shortcode est créé en ajoutant une fonction à votre functions.php fichier, puis en le liant comme un shortcode. L'exemple ci-dessous crée un lien vers le hub AppStorm..
Accentsconagua
function link_to_appstorm ($ atts, $ content = null) return 'AppStorm'; add_shortcode ('appstorm', 'link_to_appstorm'); Pour l'utiliser, nous utilisons la forme la plus simple d'un shortcode sans attributs.
[appstorm]
Nous pouvons approfondir cette idée en introduisant un attribut, dans lequel spécifier un site AppStorm spécifique vers lequel effectuer le lien..
fonction link_to_appstorm ($ atts, $ content = null) extract (shortcode_atts (array ('site' => 'www'), $ '), $ atts)); retourne 'AppStorm'; add_shortcode ('appstorm', 'link_to_appstorm'); L'heure, le shortcode est un lien vers un sous-domaine d'AppStorm. Nous spécifions quel sous-domaine en ajoutant le site attribut. S'il n'y a pas d'attribut défini dans le shortcode, le shortcode le mettra par défaut à www qui renvoie simplement à la page d'accueil principale. L'exemple d'utilisation ci-dessous renvoie à iPad.AppStorm..
[appstorm site = "ipad"]
Comme vous pouvez le constater, les codes courts s’expliquent assez bien. Ce que nous voulons, cependant, est d'utiliser le même principe de base qu'un lien généré par un shortcode avec un attribut à utiliser conjointement avec un service tiers comme YouTube ou Flickr..
La conversion d'un morceau de code tiers statique en un shortcode est assez similaire à la méthode utilisée pour créer un lien. Simplement, nous allons créer une fonction qui renvoie le code sous forme de code abrégé, puis ajoutons quelques attributs pour le personnaliser..
La première étape que nous devrions prendre est de prendre le code d'intégration habituel et de créer une fonction de retour simple à partir de celui-ci..
fonction youtube_video ($ atts, $ content = null) return ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
De la même manière, nous avons créé ce premier lien, non variable, dans le premier exemple: le code ci-dessus incorpore une vidéo YouTube qui ne changera pas du tout. Et comment cela se passe-t-il.
Essentiellement, le morceau de code de l'étape précédente produira un résultat identique à si le code renvoyé était collé dans l'éditeur même. À moins que vous n'incorporiez régulièrement la même vidéo plusieurs fois, ce shortcode est probablement inutile. Par conséquent, nous voulons introduire quelques attributs à traduire en paramètres pour la iframe.
Pour ce faire, nous utilisons encore une fois le extrait() fonction pour extraire les attributs du shortcode. Dans le code ci-dessous, nous le faisons sous une forme de base en ne créant qu'un attribut pour remplacer l'identifiant vidéo..
fonction youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => "), $ atts))); return ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
Et, tout comme en remplaçant l'identifiant vidéo, nous pouvons faire la même chose pour la largeur et la hauteur. C’est le moment pour vous de vous assurer que vous fournissez des valeurs par défaut, cependant, au cas où l’utilisateur ne fournisse pas de valeur de largeur ou de hauteur.
fonction youtube_video ($ atts, $ content = null) extraire (shortcode_atts (tableau ('id' => ", 'width' => '640', 'height' => '360'), $ atts)); return ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
YouTube propose des paramètres supplémentaires pouvant être ajoutés à l'URL, tels que la lecture automatique. Bien entendu, ceux-ci peuvent également être appliqués au code renvoyé, avec leur propre attribut si nécessaire. Généralement, cela s'explique de lui-même et est démontré ci-dessous (les parties ajoutées sont en gras).
fonction youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' = => ", 'width' => '640', 'height' => '360', 'autoplay' => '0 '), $ atts)); return''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
C’est aussi simple que cela et, comme vous le verrez dans le résumé qui suit, la même méthode de base peut être utilisée pour créer des codes abrégés pour d’autres services tiers..
Toutes ces intégrations tierces ont été créées en suivant les mêmes étapes que ci-dessus. Bien entendu, comme à l'étape 2b, des paramètres supplémentaires peuvent être ajoutés à volonté.
Une vidéo Vimeo est intégrée de la même manière qu’une vidéo YouTube, via un iframe avec des variables de largeur et de hauteur. Le seul ajout est la variable de couleur pour personnaliser le lecteur.
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]
Le widget de profil Twitter est un morceau de JavaScript, avec une tonne d'attributs différents, tous substitués aux attributs de shortcode dans le code ci-dessous. Comme il y en a tellement, vous pouvez en supprimer et les remplacer par des valeurs constantes (telles que le style) dans le code JavaScript actuel, ou simplement modifier les attributs par défaut dans le tableau et oublier de les utiliser dans le shortcode..
function twitter_widget ($ atts, $ content = null) extract (shortcode_atts (array ('nomutilisateur' => ", 'width' => '300', 'height' => '200', 'tweetnum' => '4 ',' shellbgcolor '=>' cccccc ',' listbgcolor '=>' eeeeee ',' textcolor '=>' 333333 ',' linkcolor '=>' 639ee3 ',' hashtags '=>' true ',' true ',' scrollbar ' => 'true', 'loop' => 'false', 'stream' => 'false', 'avatars' => 'false', 'timestamp' => 'false'), $ atts)); return ' '; add_shortcode ('twitter', 'twitter_widget'); Tous ces attributs de code court ont des valeurs par défaut, à l'exception du nom d'utilisateur qui est requis. Pour ce qui est de mettre réellement dans l'attribut, ils sont tous explicites jusqu'à hashtags dans lequel les autres ne sont que vrais / faux.
[gazouillement]
Le bouton Tweet est un bouton de partage social populaire pour Twitter..
fonction tweet_button ($ atts, $ content = null) extract (shortcode_atts (array ('nomutilisateur' =>, 'url' =>, 'style' => 'none'), $ atts)); retour 'Tweet'; add_shortcode ('tweetbutton', 'tweet_button'); Les deux premiers attributs du bouton tweet ne sont pas vraiment ambigus. Le dernier définit le style du bouton tweet, soit horizontal, verticale ou aucun.
[tweetbutton]
Comme le bouton Tweet, les boutons J'aime et Envoyer sont les boutons de partage social de Facebook. Veuillez noter que ces boutons nécessitent également le SDK JavaScript référencé quelque part sur la page en cours..
function facebook_buttons ($ atts, $ content = null) extract (shortcode_atts (array ('width' = = '') '>> 450', 'showfaces' => 'false', 'colorscheme' => 'light', 'font' => «arial»), $ atts)); revenir ' Les différents attributs à utiliser sont expliqués sur la page associée à Facebook, mais la largeur est essentiellement écrite dans le même format qu'auparavant, vitrines est une valeur true / false indiquant si les faces des "like-ees" doivent être affichées, Schéma de couleur est sombre ou clair et la police est, eh bien, une police.
Étant donné que le XFBML ciblera automatiquement la page en cours, il n'est pas nécessaire de disposer d'attributs en cours d'utilisation, ce qui signifie que le code court peut être aussi simple que l'exemple ci-dessous.
[comme]
Le badge Flickr est un moyen d’afficher vos photos récentes depuis Flickr. Malheureusement, le widget Flickr est livré avec son propre CSS (bien que vous puissiez facilement le déplacer dans votre feuille de style) et utilise des tableaux pour la mise en page. Une fois que vous avez fini d'être très frustré par cette pratique, voici le shortcode.
function flickr_widget ($ atts, $ content = null) extract (shortcode_atts (array ('userid' => ", 'num' => '3', 'sort' => 'aléatoire', 'taille' =>), $ atts)); return ' | www.feuilleterr.com |
Le widget de Flickr a quatre variables de base, le identifiant d'utilisateur est l'identifiant de l'utilisateur (au format 12345678 @ N01), le num est le nombre de photos affichées, le Trier est la dernière ou aléatoire et concerne la façon dont les photos affichées sont déterminées et la Taille est soit s (un petit carré), t (une vignette) ou m (moyen).
[flickr]
J'espère avoir expliqué comment créer un shortcode dans le contexte d'un service tiers. C'est assez simple, nous devons juste comprendre le fonctionnement du code d'origine et échanger les variables statiques pour les attributs. Cela fait gagner du temps, mais peut-être plus important encore, cela signifie que le code peut être modifié ultérieurement tout en maintenant les paramètres vous permettant de modifier, par exemple, la largeur à une date ultérieure pour toutes les utilisations du code court spécifique..
