{"id":2005,"date":"2011-07-29T00:23:53","date_gmt":"2011-07-28T23:23:53","guid":{"rendered":"http:\/\/flaven.fr\/?p=2005"},"modified":"2013-09-24T06:10:00","modified_gmt":"2013-09-24T04:10:00","slug":"wordpress-widget-plugin-creer-un-widget-a-laide-dun-plugin-pour-votre-theme-dans-wordpress","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2011\/07\/wordpress-widget-plugin-creer-un-widget-a-laide-dun-plugin-pour-votre-theme-dans-wordpress\/","title":{"rendered":"WordPress, Widget, Plugin &#8211; Cr\u00e9er un widget \u00e0 l&#8217;aide d&#8217;un plugin pour votre th\u00e8me dans WordPress"},"content":{"rendered":"\n<p><!--  WordPress, Widget, Plugin - Cr\u00e9er un widget \u00e0 l'aide d'un plugin pour votre th\u00e8me dans WordPress --><br \/>\n<!--  WordPress, Widget, Th\u00e8me, PHP, MySQL, Plugin --><br \/>\nLorsque on est responsable \u00e9ditorial d&#8217;un site sous WordPress, on en vient vite \u00e0 se demander pourquoi ne pas g\u00e9rer l&#8217;int\u00e9gralit\u00e9 du contenu sous la forme de widgets.<!--more--> En effet, cela pr\u00e9sente l&#8217;avantage ind\u00e9niable de pouvoir ajouter ou retirer \u00e0 l&#8217;envie ces modules \u00e9ditoriaux sans \u00eatre dans l&#8217;obligation d&#8217;effectuer des acrobaties en terme de d\u00e9veloppement et\/ou une gestion \u00e0 la hache de publication\/d\u00e9publication&#8230; Bref de se prendre la t\u00eate.<\/p>\n<p>Il est \u00e9vident que si en tant que chef de projet ou responsable \u00e9ditorial, vous \u00eates amen\u00e9(e) \u00e0 briefer une \u00e9quipe de d\u00e9veloppement autant annoncer la couleur en demandant de ne faire que des widgets et bien \u00e9videment un th\u00e8me widgetisable pour WordPress. Cela vous \u00e9vitera bien des d\u00e9boires ult\u00e9rieurement quand il s&#8217;agira de faire \u00e9voluer votre site ou simplement de l&#8217;administrer. Pourquoi ? Parce que sans m\u00eame vous connaitre l&#8217;\u00e9quipe de d\u00e9veloppement vous d\u00e9teste d\u00e9j\u00e0 et une fois que vous serez vraiment ha\u00ef(e), vous pourrez de toutes les fa\u00e7ons all\u00e8grement couper le cordon avec l&#8217;\u00e9quipe de d\u00e9veloppement.<\/p>\n<p>On va donc voir comment sans trop se fatiguer faire un widget purement \u00e9ditorial, un vrai truc de limace \u00e9ditorial. Notre widget consistera \u00e0 faire circuler au maximum le peu d&#8217;articles publi\u00e9s. A chaque rechargement de page, via un syst\u00e8me de tirage al\u00e9atoire, on affichera un article de WordPress toutes cat\u00e9gories confondues.<\/p>\n<p>Dans le m\u00eame temps, on va faire de ce widget, un plugin pour pouvoir assouplir au maximum la gestion \u00e9ditoriale. Deux avantages \u00e0 cela :<\/p>\n<ul>\n<li>Ne pas interf\u00e9rer avec le fichier <code>functions.php<\/code> du th\u00e8me.<\/li>\n<li>Installer et retirer \u00e0 loisir cette fonction \u00e9ditorial sans endommager le site.<\/li>\n<\/ul>\n<p><i>Notre plugin\/widget a \u00e9t\u00e9 install\u00e9 et con\u00e7u sous WordPress FR Version 3.2.1.<\/i><\/p>\n<h4>Comment cr\u00e9er un widget et un plugin WordPress<\/h4>\n<p>La premi\u00e8re chose \u00e0 faire est de mettre ce commentaire qui vous permet d&#8217;initier la cr\u00e9ation de votre plugin. C&#8217;est la d\u00e9claration n\u00e9cessaire \u00e0 tout d\u00e9marrage de plugin WordPress. <\/p>\n<p><b>L&#8217;en-t\u00eate du plugin<\/b><\/p>\n<pre lang=\"php\">\r\n\/*\r\nPlugin Name: Exemple Plugin Widget \r\nPlugin URI: http:\/\/social.hecube.net\/\r\nDescription: Un plugin pour cr\u00e9er un widget dans WordPress\r\nVersion: 1.0\r\nAuthor: Hecube\r\nAuthor URI: http:\/\/social.hecube.net\/\r\nLicense: GPLv2\r\n*\/\r\n<\/pre>\n<p>Notre plugin va s&#8217;appuyer sur la classe de WordPress pour faire des widgets.  On doit donc \u00e9tendre la classe native de WordPress <code>WP_Widget<\/code> avec notre porpre class <code>he3_widgetexample_widget_my_info<\/code>. C&#8217;est le sens de la ligne ci-dessous.<\/p>\n<pre lang=\"php\">class he3_widgetexample_widget_my_info extends WP_Widget<\/pre>\n<p>Pour peu que vous connaissiez un peu le php, vous retrouverez facilement parmi ce code du plugin. Notre plugin \/ widget a pour but d&#8217;afficher un profil compos\u00e9 des valeurs suivantes :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/07\/wp_create_a_widget_1.jpg\" alt=\"Wordpress, Widget, Th\u00e8me - Cr\u00e9er un widget pour votre th\u00e8me dans WordPress\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/07\/wp_create_a_widget_2.jpg\" alt=\"Wordpress, Widget, Th\u00e8me - Cr\u00e9er un widget pour votre th\u00e8me dans WordPress\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/07\/wp_create_a_widget_3.jpg\" alt=\"Wordpress, Widget, Th\u00e8me - Cr\u00e9er un widget pour votre th\u00e8me dans WordPress\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/07\/wp_create_a_widget_1.jpg\" alt=\"Wordpress, Widget, Th\u00e8me - Cr\u00e9er un widget pour votre th\u00e8me dans WordPress\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Le code complet de notre plugin <code>he3widgetplugin.php<\/code><\/b>\t<\/p>\n<pre lang=\"php\" escaped=\"true\">\r\n\t\/*\r\n\tPlugin Name: he3widgetplugin\r\n\tPlugin URI: http:\/\/social.hecube.net\/\r\n\tDescription: Un plugin pour cr\u00e9er un widget dans WordPress\r\n\tVersion: 1.0\r\n\tAuthor: Hecube\r\n\tAuthor URI: http:\/\/social.hecube.net\/\r\n\tLicense: GPLv2\r\n\t*\/\r\n\r\n\t\/\/ use widgets_init action hook to execute custom function\r\n\tadd_action( 'widgets_init', 'he3_widgetexample_register_widgets' );\r\n\r\n\t \/\/register our widget\r\n\tfunction he3_widgetexample_register_widgets() {\r\n\t    register_widget( 'he3_widgetexample_widget_my_info' );\r\n\t}\r\n\r\n\t\/\/he3_widgetexample_widget_my_info class\r\n\tclass he3_widgetexample_widget_my_info extends WP_Widget {\r\n\r\n\t    \/\/process the new widget\r\n\t    function he3_widgetexample_widget_my_info() {\r\n\t        $widget_ops = array( \r\n\t\t\t\t'classname' =&gt; 'he3_widgetexample_widget_class', \r\n\t\t\t\t'description' =&gt; 'Mon profil.' \r\n\t\t\t\t); \r\n\t        $this-&gt;WP_Widget( 'he3_widgetexample_widget_my_info', 'Mon Widget', $widget_ops );\r\n\t    }\r\n\r\n\t     \/\/build the widget settings form\r\n\t    function form($instance) {\r\n\t        $defaults = array( 'title' =&gt; 'Mes infos', 'name' =&gt; '', 'firstname' =&gt; '', 'age' =&gt; '' ); \r\n\t        $instance = wp_parse_args( (array) $instance, $defaults );\r\n\t        $title = $instance['title'];\r\n\t        $name = $instance['name'];\r\n\t        $firstname = $instance['firstname'];\r\n\t\t\t$age = $instance['age'];\r\n\t        ?&gt;\r\n\t            <p>Titre : &lt;input class=\"widefat\" name=\"get_field_name( 'title' ); ?&gt;\"  type=\"text\" value=\"\" \/&gt;<\/p>\r\n\t            <p>Nom : &lt;input class=\"widefat\" name=\"get_field_name( 'name' ); ?&gt;\"  type=\"text\" value=\"\" \/&gt;<\/p>\r\n\t            <p>Pr\u00e9nom : &lt;input class=\"widefat\" name=\"get_field_name( 'firstname' ); ?&gt;\"  type=\"text\" value=\"\" \/&gt;<\/p>\r\n\t\t\t\t<p>Age : &lt;input class=\"widefat\" name=\"get_field_name( 'age' ); ?&gt;\"  type=\"text\" value=\"\" \/&gt;<\/p>\r\n\r\n\t        &lt;?php\r\n\t    }\r\n\r\n\t    \/\/save the widget settings\r\n\t    function update($new_instance, $old_instance) {\r\n\t        $instance = $old_instance;\r\n\t        $instance['title'] = strip_tags( $new_instance['title'] );\r\n\t        $instance['name'] = strip_tags( $new_instance['name'] );\r\n\t        $instance['firstname'] = strip_tags( $new_instance['firstname'] );\r\n\t\t\t$instance['age'] = strip_tags( $new_instance['age'] );\r\n\r\n\t        return $instance;\r\n\t    }\r\n\r\n\t    \/\/display the widget\r\n\t    function widget($args, $instance) {\r\n\t        extract($args);\r\n\r\n\t        echo $before_widget;\r\n\t        $title = apply_filters( 'widget_title', $instance['title'] );\r\n\t        $name = empty( $instance['name'] ) ? '&nbsp;' : $instance['name'];\r\n\t        $firstname = empty( $instance['firstname'] ) ? '&nbsp;' : $instance['firstname']; \r\n\t\t\t$age = empty( $instance['age'] ) ? '&nbsp;' : $instance['age']; \r\n\r\n\t        if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };\r\n\t        echo '<p>Name : ' . $name . '<\/p>';\r\n\t        echo '<p>Firstname : ' . $firstname . '<\/p>';\r\n\t\t\techo '<p>Age : ' . $age . '<\/p>';\r\n\t        echo $after_widget;\r\n\t    }\r\n\t}\r\n<\/pre>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>Codex &#8211; Template Tags\/get posts<br \/>\n\t\t<a href=\"http:\/\/codex.wordpress.org\/Template_Tags\/get_posts\" target=\"_blank\">http:\/\/codex.wordpress.org\/Template_Tags\/get_posts<\/a><\/li>\n<li>Create a WordPress Recent-Posts Widget<br \/>\n\t\t<a href=\"http:\/\/blue-anvil.com\/archives\/create-a-wordpress-recent-posts-widget\/\" target=\"_blank\">http:\/\/blue-anvil.com\/archives\/create-a-wordpress-recent-posts-widget\/<\/a><\/li>\n<li>Codex &#8211; Function Reference\/wp register sidebar widget<br \/>\n\t\t<a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/wp_register_sidebar_widget\" target=\"_blank\">http:\/\/codex.wordpress.org\/Function_Reference\/wp_register_sidebar_widget<\/a><\/li>\n<li>Codex &#8211; Function Reference\/wp register widget control<br \/>\n\t\t<a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/wp_register_widget_control\" target=\"_blank\">http:\/\/codex.wordpress.org\/Function_Reference\/wp_register_widget_control<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Lorsque on est responsable \u00e9ditorial d&#8217;un site sous WordPress, on en vient vite \u00e0 se demander pourquoi ne pas g\u00e9rer l&#8217;int\u00e9gralit\u00e9 du contenu sous la&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2011\/07\/wordpress-widget-plugin-creer-un-widget-a-laide-dun-plugin-pour-votre-theme-dans-wordpress\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">WordPress, Widget, Plugin &#8211; Cr\u00e9er un widget \u00e0 l&#8217;aide d&#8217;un plugin pour votre th\u00e8me dans WordPress<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9417,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Cr\u00e9er un widget avec un plugin pour votre th\u00e8me WordPress simplifie la gestion du contenu. Utilisez des outils sp\u00e9cifiques pour des r\u00e9sultats optimaux.","bf_ai_og_title":"Cr\u00e9er un widget WordPress","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3444,3448,3449,3451,3435,3452],"tags":[2211,20,106,126,189,2223],"class_list":["post-2005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-databases","category-tools-productivity","category-tutorials-how-to","category-web-design-front-end","category-web-development","category-wordpress-cms","tag-mysql","tag-php","tag-plugin","tag-theme","tag-widget","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-wl","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/07\/wp_logo_generic4_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=2005"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2005\/revisions"}],"predecessor-version":[{"id":9418,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2005\/revisions\/9418"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9417"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=2005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=2005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=2005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}