{"id":3646,"date":"2013-06-07T15:43:15","date_gmt":"2013-06-07T14:43:15","guid":{"rendered":"http:\/\/flaven.fr\/?p=3646"},"modified":"2026-05-13T08:25:01","modified_gmt":"2026-05-13T06:25:01","slug":"post-json-ajax-wordpress-api-faire-un-modele-de-page-pour-obtenir-un-flux-json-depuis-votre-theme-wordpress-afin-de-se-connecter-ulterieurement-a-des-api-type-amazon-ou-mapbox","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2013\/06\/post-json-ajax-wordpress-api-faire-un-modele-de-page-pour-obtenir-un-flux-json-depuis-votre-theme-wordpress-afin-de-se-connecter-ulterieurement-a-des-api-type-amazon-ou-mapbox\/","title":{"rendered":"Post, JSON, AJAX, WordPress, API &#8211; Faire un mod\u00e8le de page pour obtenir un flux JSON depuis votre th\u00e8me WordPress afin de se connecter ult\u00e9rieurement \u00e0 des API type Amazon ou MapBox"},"content":{"rendered":"<p><!--  Post, JSON, AJAX, WordPress, API - Faire un mod\u00e8le de page pour obtenir un flux JSON depuis votre th\u00e8me WordPress afin de se connecter ult\u00e9rieurement \u00e0 des API type Amazon ou MapBox  --><br \/>\n\t<!--  MySQL, WordPress, API, Ajax, JSON, Theme, plugin, feed, rss, d\u00e9veloppement, PHP, Plugin, Taxonomy, Post Type, CMS, cartographie, MapBox, Amazon, JSON, JavaScript Object Notation, JavaScript, Donn\u00e9es, Big Data --><\/p>\n<p>Il est souvent n\u00e9cessaire d&#8217;extraire des donn\u00e9es sous la forme d&#8217;un flux depuis un CMS, Drupal, Joomla ou WordPress pour ne citer que les CMS les plus populaire afin notamment d&#8217;injecter du contenu dans une API quelconque genre Amazon que l&#8217;on ne pr\u00e9sente plus ou bien l&#8217;excellent service de cartographie MapBox.<\/p>\n<p><b>On per\u00e7oit assez vite le b\u00e9n\u00e9fice imm\u00e9diat d&#8217;une telle d\u00e9marche. En effet au lieu d&#8217;installer une palanquet des plugins WordPress ou de modules sur Drupal pour \u00e9tendre avec plus ou moins de succ\u00e8s les fonctionnalit\u00e9s de votre CMS. Avec l&#8217;integration d&#8217;une API, vous \u00e9tendez les fonctionnalit\u00e9s de votre site avec un vrai webservice, fiable robuste, document\u00e9&#8230; Bref mieux que tout ce que vous pourrez trouver dans la vaste web.<\/b><\/p>\n<p><i>Dans cet article, on va simplement pr\u00e9senter la cr\u00e9ation d&#8217;un mod\u00e8le de page pour g\u00e9n\u00e9rer un flux <code>json<\/code> \u00e0 partir d&#8217;un <code>custom post types<\/code>. Toutefois, cela suppose au pr\u00e9alable que vous savez ce que sont les <code>custom post types<\/code>, les <code>custom values<\/code> attach\u00e9s \u00e0 un <code>custom post type<\/code> ainsi que les <code>taxonomies<\/code> elles-m\u00eames attach\u00e9es \u00e0 un <code>custom post type<\/code><\/i><\/p>\n<p>Si toutes les notions cit\u00e9es plus hauts vous sont totalement \u00e9trang\u00e8res alors on vous recommande ce tr\u00e8s bon article en anglais de Justin Tadlock sur la question.<\/p>\n<p><i>Source : <a href=\"http:\/\/justintadlock.com\/archives\/2010\/04\/29\/custom-post-types-in-wordpress\" target=\"_blank\">http:\/\/justintadlock.com\/archives\/2010\/04\/29\/custom-post-types-in-wordpress<\/a><\/i><\/p>\n<h4>Un mod\u00e8le de page plut\u00f4t qu&#8217;une extension fonctionnelle<\/h4>\n<p>Cr\u00e9er une nouvelle page (mod\u00e8le, template, gabarit&#8230;) quelque soit le CMS (drupal, WordPress, Joomla, Textpattern, CMSimple&#8230; etc.), est souvent beaucoup plus simple \u00e0 manipuler et \u00e0 concevoir. En effet, mettre un simple mod\u00e8le de page en ligne en lieu et  place d&#8217;un d\u00e9veloppement complexe afin de tester sur un site web en production (les DNS sont publiques), la possibilit\u00e9 de rapatrier des donn\u00e9es depuis une API (publique elle aussi)* est nettement plus <code>AGILE<\/code>. En effet, vous pouvez tester in situ et en temps r\u00e9el la mont\u00e9e en charge avec de v\u00e9ritables donn\u00e9es, affiner les requ\u00eates dans un vrai contexte de production, amender votre d\u00e9veloppement en fonction du retour client&#8230; Bref agile encore une fois agile ! <\/p>\n<p>* Le probl\u00e8me souvent est que les d\u00e9veloppeurs, administrateurs, consultants, informaticiens peuvent \u00eatre de grands parano\u00efaques alors mettre tout en clair et en public, les fait un peu flipper. La solution : 3 LEXOMILs dans un verre de bi\u00e8re de pr\u00e9f\u00e9rence belge c&#8217;est \u00e0 dire fortement alcoolis\u00e9, un vendredi soir, suffira \u00e0 taire les inqui\u00e9tudes, il vous faut n\u00e9anmoins pr\u00e9parer une <code>TODOLIST<\/code> parce quand Polyph\u00e8me aka le cyclope est endormi, c&#8217;est le moment pour le rus\u00e9 Ulysse (vous), de ne pas lambiner ! Vous ne devez pas vous rater dans l&#8217;obtention d&#8217;un r\u00e9sultat effectif et probant, histoire de faire taire lundi matin toutes les critiques \u00e9ventuelles une fois la preuve de concept obtenue !<\/p>\n<h4>Ne pas oublier de cr\u00e9er la page avec le mod\u00e8le <\/h4>\n<p>N&#8217;oublier de rajouter donc votre mod\u00e8le de page dans votre th\u00e8me Worpdress puis de publier une nouvelle page utilisant ce mod\u00e8le. Vous pourrez ensuite \u00e0 loisir, passer des requ\u00eates directement via l&#8217;adresse de publication (Voir les liens ci-dessous). De fait, si vous avez besoin de r\u00e9cup\u00e9rer des informations contenu dans un CMS pour les injecter dans une API, c&#8217;est l&#8217;id\u00e9al. Nous avons proc\u00e9der de la sorte pour le nombreux webservices tel que Amazon, Mapbox.<\/p>\n<p><b>Dans nos cas, nous avons tester en local notre nouveau th\u00e8me de page, rien ne vous emp\u00eache de modifier la requ\u00eate afin de s\u00e9lectionner des articles (post), des post type&#8230;<\/b><\/p>\n<p>\t<!-- MODEL QUERY  --><br \/>\n\t<code>http:\/\/127.0.0.1\/wp\/json\/?user=1&num=3&format=json<\/code><br \/>\n\t<code>http:\/\/127.0.0.1\/wp\/json\/?user=1&num=-1&format=json<\/code><\/p>\n<h4>Utilisation du mod\u00e8le page <code>Template Name: Feed JSON<\/code><\/h4>\n<p>Voil\u00e0 le mod\u00e8le page  que nous avons con\u00e7u. Il permet de faire plus que d&#8217;afficher de simple articles de WP. Il permet en v\u00e9rit\u00e9 de tirer pleinement profit du syst\u00e8me de taxonomie attach\u00e9 \u00e0 un post type.<br \/>\n\t<code>http:\/\/www.your-site.com\/json\/?user=1&amp;format=json&amp;ptype=your_post_type&amp;tax=my_taxonomy&amp;term=your_term<\/code><\/p>\n<p><code>Source du mod\u00e8le page <code>Template Name: Feed JSON<\/code> <\/code><\/p>\n<pre lang=\"php\" escape=\"true\">\n\t&lt;?php\n\t\/*\n\tTemplate Name: Feed JSON\n\t*\/\n\n\t\/* require the user as the parameter *\/\n\tif(isset($_GET['user']) &amp;&amp; intval($_GET['user'])) {\n\n\t\t\/*\n\t\thttp:\/\/www.your-site.com\/json\/?user=1&format=json&ptype=your_post_type&tax=my_taxonomy&term=your_term\n\t\t*\/\n\n\n\t  \/* soak in the passed variable or set our own *\/\n\t  $tax = strtolower($_GET['tax']); \/\/ If you are using a taxonomy attached to your your_post_type eg my_taxonomy\n\t  $term = strtolower($_GET['term']); \/\/ get the terme from your taxonomy attached to your your_post_type\n\t  $user_id = intval($_GET['user']); \/\/no default\n\t  $format = strtolower($_GET['format']) == 'json' ? 'json' : 'xml'; \/\/xml is the default\n\t  $ptype = strtolower($_GET['ptype']) == 'your_post_type' ? ' your_post_type' : 'post'; \/\/post is the default\n\n\t  $number_of_posts = isset($_GET['num']) ? intval($_GET['num']) : 10; \/\/10 is the default\n\n\n\t\/* connect to the db *\/\n\t  global $wpdb;\n\n\t  \/* create one master array of the records *\/\n\t  $posts = array();\n\n\t\t$args = array(\n\t\t'post_type' =&gt;  $type,\n\t\t'taxonomy' =&gt; $tax,\n\t\t'term' =&gt; $term,\n\t\t'user' =&gt; $user_id,\n\t\t'num' =&gt; $num\n\t\t);\n\n\t  $the_query = new WP_Query($args);\n\n\n\t  while ( $the_query-&gt;have_posts() ) : $the_query-&gt;the_post();\n\n\t\t\t\/\/ add any extras that you would like to this array \n\t\t\t$posts[] = array(\n\t\t\t\t'title' =&gt; get_the_title(),\n\t\t\t\t'content' =&gt; get_the_content(),\n\t\t\t\t'link' =&gt; get_permalink(get_the_ID()),\n\t\t\t\t'your_custom_value_1' =&gt; get_post_meta($post-&gt;ID,'your_custom_value_1', true),\n\t\t\t\t'your_custom_value_2' =&gt; get_post_meta($post-&gt;ID,'your_custom_value_2', true),\n\t\t\t\t'your_custom_value_3' =&gt; get_post_meta($post-&gt;ID,'your_custom_value_3', true),\n\t\t\t\t\/* Replace your_custom_value_i by your true your custom value attached to your custom post your_post_type  *\/\n\t\t\t);\n\n\t  endwhile;\n\n\n\t  \/* output in necessary format *\/\n\t  if($format == 'json') {\n\t    header('Content-type: application\/json');\n\t    echo json_encode(array('posts'=&gt;$posts));\n\t  }\n\t  else {\n\t    header('Content-type: text\/xml');\n\t    echo '&lt;posts&gt;';\n\t    foreach($posts as $index =&gt; $post) {\n\t      if(is_array($post)) {\n\t        foreach($post as $key =&gt; $value) {\n\t          echo '&lt;',$key,'&gt;';\n\t          if(is_array($value)) {\n\t            foreach($value as $tag =&gt; $val) {\n\t              echo '&lt;',$tag,'&gt;',htmlentities($val),'&lt;\/',$tag,'&gt;';\n\t            }\n\t          }\n\t          echo '&lt;\/',$key,'&gt;';\n\t        }\n\t      }\n\t    }\n\t    echo '&lt;\/posts&gt;';\n\t  }\n\n\t  \/* reset query *\/\n\t  wp_reset_postdata();\n\t}\n\n\t?&gt;\n\t\n<\/pre>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>Advanced Taxonomy Queries with Pretty URLs<br \/><a href=\"http:\/\/thereforei.am\/2011\/10\/28\/advanced-taxonomy-queries-with-pretty-urls\/\" target=\"_blank\">http:\/\/thereforei.am\/2011\/10\/28\/advanced-taxonomy-queries-with-pretty-urls\/<\/a><\/li>\n<li>Function Reference\/register post type<br \/><a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/register_post_type\" target=\"_blank\">http:\/\/codex.wordpress.org\/Function_Reference\/register_post_type<\/a><\/li>\n<li>Function Reference\/register taxonomy<br \/><a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/register_taxonomy\" target=\"_blank\">http:\/\/codex.wordpress.org\/Function_Reference\/register_taxonomy<\/a><\/li>\n<li>REST API | MapBox<br \/><a href=\"http:\/\/www.mapbox.com\/developers\/api\/\" target=\"_blank\">http:\/\/www.mapbox.com\/developers\/api\/<\/a><\/li>\n<li>Amazon Product Advertising API<br \/><a href=\"https:\/\/partenaires.amazon.fr\/gp\/advertising\/api\/detail\/main.html\" target=\"_blank\">https:\/\/partenaires.amazon.fr\/gp\/advertising\/api\/detail\/main.html<\/a><\/li>\n<li>Custom post types in WordPress<br \/><a href=\"http:\/\/justintadlock.com\/archives\/2010\/04\/29\/custom-post-types-in-wordpress\" target=\"_blank\">http:\/\/justintadlock.com\/archives\/2010\/04\/29\/custom-post-types-in-wordpress<\/a><\/li>\n<li>The Complete Guide To Custom Post Types<br \/><a href=\"http:\/\/wp.smashingmagazine.com\/2012\/11\/08\/complete-guide-custom-post-types\/\" target=\"_blank\">http:\/\/wp.smashingmagazine.com\/2012\/11\/08\/complete-guide-custom-post-types\/<\/a><\/li>\n<li>WordPress: Fetching Post Data as JSON with AJAX<br \/><a href=\"http:\/\/forrst.com\/posts\/WordPress_Fetching_Post_Data_as_JSON_with_AJAX-Ojf\" target=\"_blank\">http:\/\/forrst.com\/posts\/WordPress_Fetching_Post_Data_as_JSON_with_AJAX-Ojf<\/a><\/li>\n<li>Retrieving wordpress posts via JSON<br \/><a href=\"http:\/\/extremelysatisfactorytotalitarianism.com\/blog\/?p=464\" target=\"_blank\">http:\/\/extremelysatisfactorytotalitarianism.com\/blog\/?p=464<\/a><\/li>\n<li>WordPress JSON output<br \/><a href=\"http:\/\/wordpress.stackexchange.com\/questions\/72448\/wordpress-json-output\" target=\"_blank\">http:\/\/wordpress.stackexchange.com\/questions\/72448\/wordpress-json-output<\/a><\/li>\n<li>Create a simple XML and JSON web service using WordPress<br \/><a href=\"http:\/\/devsforrest.com\/4\/wordpress\/create-a-simple-xml-and-json-web-service-using-wordpress\" target=\"_blank\">http:\/\/devsforrest.com\/4\/wordpress\/create-a-simple-xml-and-json-web-service-using-wordpress<\/a><\/li>\n<li>How To Use AJAX In WordPress<br \/><a href=\"http:\/\/wp.smashingmagazine.com\/2011\/10\/18\/how-to-use-ajax-in-wordpress\/\" target=\"_blank\">http:\/\/wp.smashingmagazine.com\/2011\/10\/18\/how-to-use-ajax-in-wordpress\/<\/a><\/li>\n<li>LEXOMIL &#8211; Bromaz\u00e9pam &#8211; Posologie, Effets secondaires, Grossesse &#8211; Doctissimo<br \/><a href=\"http:\/\/www.doctissimo.fr\/medicament-LEXOMIL.htm\" target=\"_blank\">http:\/\/www.doctissimo.fr\/medicament-LEXOMIL.htm<\/a><\/li>\n<li>Polyph\u00e8me<br \/><a href=\"http:\/\/fr.wikipedia.org\/wiki\/Polyph%C3%A8me\" target=\"_blank\">http:\/\/fr.wikipedia.org\/wiki\/Polyph%C3%A8me<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Il est souvent n\u00e9cessaire d&#8217;extraire des donn\u00e9es sous la forme d&#8217;un flux depuis un CMS, Drupal, Joomla ou WordPress pour ne citer que les CMS&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2013\/06\/post-json-ajax-wordpress-api-faire-un-modele-de-page-pour-obtenir-un-flux-json-depuis-votre-theme-wordpress-afin-de-se-connecter-ulterieurement-a-des-api-type-amazon-ou-mapbox\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Post, JSON, AJAX, WordPress, API &#8211; Faire un mod\u00e8le de page pour obtenir un flux JSON depuis votre th\u00e8me WordPress afin de se connecter ult\u00e9rieurement \u00e0 des API type Amazon ou MapBox<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9362,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Cr\u00e9ez un mod\u00e8le de page WordPress pour obtenir un flux JSON. Connectez-vous \u00e0 des API comme Amazon ou MapBox.","bf_ai_og_title":"Mod\u00e8le de page JSON WordPress","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3440,3442,3444,3445,3447,3450,3451,3435,3452],"tags":[15,478,579,2183,607,608,2221,138,609,610,226,611,192,3455,612,2211,20,106,613,443,614,126,2223],"class_list":["post-3646","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud-infrastructure","category-mobile-devices","category-programming-databases","category-seo-web-marketing","category-technology-trends","category-ux-product-design","category-web-design-front-end","category-web-development","category-wordpress-cms","tag-ajax","tag-amazon","tag-apache","tag-api","tag-big-data","tag-cartographie","tag-cms","tag-developpement","tag-donnees","tag-feed","tag-javascript","tag-javascript-object-notation","tag-json","tag-linux","tag-mapbox","tag-mysql","tag-php","tag-plugin","tag-post-type","tag-rss","tag-taxonomy","tag-theme","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-WO","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/06\/json_wp_b_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3646","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=3646"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3646\/revisions"}],"predecessor-version":[{"id":13206,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3646\/revisions\/13206"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9362"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=3646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=3646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=3646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}