Dans ce didacticiel, nous allons utiliser l'API de widget WordPress et l'API Flickr pour créer un widget Flickr de base. Le widget sera un widget à usages multiples; il demande à l'utilisateur un nom d'utilisateur et le nombre de photos à afficher et utilise ces informations pour afficher des photos Flickr. Il existe de nombreux plug-ins préconfigurés qui fonctionnent avec Flickr, mais rien ne vaut de le fabriquer vous-même si vous souhaitez faire un pas de plus dans votre formation WordPress.!
introduction
Flickr est l'un des sites de partage de photos les plus populaires au monde. Il héberge plus de 5 milliards d'images. En créant un widget Flickr, vous apprendrez à utiliser l'API de Flickr et à créer des widgets WordPress faciles à utiliser. adapté à votre propre thème ou site web. Avant de commencer à écrire du code, vous devez vous préparer au projet. Pour créer un widget dans un thème, vous devez d'abord disposer d'un fichier contenant le code du widget. J'utiliserai le paramètre par défaut. Vingt onze thème fourni avec WordPress, vous pouvez bien entendu utiliser n’importe quel thème de votre choix. Suivez ces étapes:
Créez un nouveau dossier dans le thème appelé widgets.
Faire un blanc php fichier nommé widget.php et enregistrez-le dans le dossier.
Téléchargez l'excellente bibliothèque phpFlickr à partir d'ici et collez les fichiers dans widgets / phpFlickr
Inscrivez-vous pour une clé API de Flickr. Vous devriez avoir besoin d'une clé non commerciale, sauf si vous créez un produit commercial..
Étape 1 Préparer votre code de widget
Depuis WordPress 2.8, il existe une API de widget pratique que vous pouvez utiliser pour créer vos widgets. Copiez et collez ce code squelette dans votre widgets.php fichier:
'flickr_widget', 'description' => 'Affichez vos photos Flickr préférées!' ) $ this-> WP_Widget ('flickr_widget', 'Messages Flickr', $ widget_ops); formulaire de fonction ($ instance) mise à jour de la fonction ($ new_instance, $ old_instance) widget de fonction ($ args, $ instance) add_action ('widgets_init', 'rm_load_widgets'); fonction rm_load_widgets () register_widget ('RM_Flickr'); ?>
Chacune de ces fonctions ci-dessus a un but spécifique:
RM_FLickr est à la fois le nom de la classe, ainsi que le nom de la première fonction (le constructeur). Le constructeur contient le code pour configurer le widget - cela s'appelle des messages Flickr.
forme() génère le formulaire que vous voyez dans la page de gestion des widgets dans WordPress.
mettre à jour() met à jour les options que vous avez entrées dans le formulaire lorsque la configuration du widget est enregistrée.
widget () affiche la sortie réelle du widget dans le site principal.
La dernière partie du code s'accroche à l'initialisation du widget de WordPress et lui demande d'enregistrer votre widget.
Une seule chose reste: votre fichier de widget existe, mais pour l'instant, il ne fait rien. Pour que WordPress l’utilise, vous devez inclure le fichier de votre functions.php fichier. Alors ouvre-toi functions.php coller dans cette ligne: (je le mets dans TwentyEleven vingteleven_setup () méthode)
Si vous lancez WordPress, le widget devrait apparaître dans la page de gestion des widgets:
Bien sûr, n'ayant ajouté aucun autre code, le widget ne propose aucune option ni aucun résultat. Maintenant, nous allons nous assurer que le widget a des entrées de formulaire
Étape 2 Créer le formulaire
Avant de créer le formulaire pour un widget, vous devez déterminer le type de saisie dont vous avez besoin. Pour ce widget particulier, il faut que l'utilisateur fournisse trois entrées: un titre pour le widget, le nom d'utilisateur FLickr et le nombre de photos à afficher. Si vous regardez le code squelette ci-dessus, vous remarquerez qu’il existe un paramètre $ instance dans le forme() une fonction. Cela contient essentiellement les valeurs actuelles de toutes les entrées du formulaire (par exemple, lorsque vous enregistrez le formulaire avec certaines valeurs). Nous devons donc extraire les valeurs actuelles du widget et y renseigner les champs de saisie du widget. Collez ce morceau de code dans la fonction:
Tout d'abord, nous utilisons le wp_parse_args () fonction pour vous assurer qu'il y a certaines valeurs par défaut dans le widget, puis nous extrayons les valeurs dans des variables comme $ title. Maintenant que nous avons les valeurs, nous devons construire le code HTML de la fonction:
?>
Cela ressemble à un gros morceau de code, mais c'est vraiment assez simple. Il ne s'agit que de créer un formulaire HTML standard, avec quelques modifications. Tout d'abord, au lieu d'utiliser votre les identifiants et des noms, vous devez utiliser get_field_id (). En effet, s'il existe plusieurs instances d'un widget et un seul ID, il y aura évidemment des erreurs. WordPress s'en charge pour vous si vous utilisez cette fonction. L'autre chose est que le valeur des champs d’entrée est généré avec PHP. Enregistrez le fichier et jetez un coup d'oeil dans WordPress:
Vous remarquerez que si vous essayez de modifier les valeurs et cliquez sur Enregistrer, elles ne sont pas enregistrées. C'est parce que nous n'avons pas encore écrit le mettre à jour() une fonction. Faisons ça ensuite
Étape 3: assurez-vous que vos formulaires sont mis à jour
Pour vous assurer que vos formulaires sont mis à jour, vous devez configurer votre mettre à jour() une fonction. C'est en fait assez simple. Par défaut, WordPress vous envoie deux paramètres: l’ancienne instance et la nouvelle instance. En principe, nous n'avons pas vraiment besoin de l'ancienne instance, car elle n'est utilisée que s'il existe des valeurs que vous ne souhaitez peut-être pas modifier. Collez ce code dans le mettre à jour() une fonction:
Assez simple - copier la nouvelle instance dans une variable $ instance, apporter les modifications souhaitées (par exemple, supprimer les balises HTML) et revenir la variable pour assurer la mise à jour des modifications. Maintenant, si vous allez sur WordPress, vos modifications vous feront économiser!
Étape 4: activation du widget HTML
Il s’agit de la dernière étape et permet de s’assurer que le widget affiche le code HTML au début. Maintenant que les entrées utilisateur sont configurées, nous pouvons simplement les utiliser pour interagir avec l'API Flickr et afficher des images. La première étape de la widget () La fonction consiste à récupérer les valeurs des entrées utilisateur. Coller dans ce code:
extrait ($ args); $ title = apply_filters ('widget_title', $ instance ['title']); if (vide ($ title)) $ title = false; $ flickr_id = $ instance ['flickr_id']; $ number = absint ($ instance ['number']);
Auto-explicatif - les entrées sont extraites et stockées dans des variables. Ensuite, vous devez exiger la bibliothèque phpFlickr et configurez-le avec votre clé API:
require_once (TEMPLATEPATH. "/widgets/phpFlickr/phpFlickr.php"); $ f = new phpFlickr ("[CLÉ API]");
Une fois que cela est configuré, collez ce code:
if (! empty ($ flickr_id)) echo $ before_widget; if ($ title) echo $ before_title; echo $ title; echo $ after_title; $ person = $ f-> people_findByUsername ($ flickr_id); $ photos_url = $ f-> urls_getUserPhotos ($ person ['id']); $ photos = $ f-> people_getPublicPhotos ($ person ['id'], NULL, NULL, $ number); foreach ((tableau) $ photos ['photos'] ['photo'] en tant que $ photo) echo " \ n "; echo" "; echo""; écho ""; écho " \ n "; echo $ after_widget;
Passons en revue étape par étape. Tout d'abord, nous devons voir si le nom d'utilisateur Flickr a été spécifié. Si ce n'est pas le cas, nous ne pouvons pas vraiment afficher les images. Les variables $ before_widget, $ before_title & $ after_title, qui nous sont automatiquement donnés par WordPress, doivent ensuite être affichés. Ensuite, nous utilisons la bibliothèque phpFlickr pour obtenir les photos de l'utilisateur spécifié. Le nombre de photos est défini par la variable numéro $. Enfin, nous parcourons les images à l'aide d'une boucle foreach et construisons le code HTML permettant d'afficher la photo, puis le contenu du widget postérieur. Maintenant, en fonction du thème sur lequel vous travaillez et de l'apparence souhaitée des images, vous pouvez modifier le code HTML. La seule partie qui doit rester constante est le lien vers l'image, qui peut être de plusieurs tailles, comme Carré, Petit, Moyen, Grand, etc. Maintenant que cela est fait, vous pouvez essayer de configurer le widget et d'afficher le résultat. J'ai utilisé un utilisateur populaire de Flickr, Oublie-moi Knott Photography comme nom d'utilisateur. Regarde:
Conclusion
Pour tous ceux qui aiment la photographie, un widget Flickr est un excellent ajout à un site Web WordPress. Avec ce tutoriel, il est facile de créer un widget Flickr personnalisable. Vous pouvez ajouter ou supprimer des options, modifier la taille des images, modifier l'apparence du widget, et bien plus encore. Vous savez maintenant comment créer facilement des widgets WordPress!
Un widget Flickr personnalisé pourrait ressembler à ceci!
Share
Accentsconagua
