<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CSS &#38; Webdesign &#187; Customs fields</title>
	<atom:link href="http://css.4design.tl/tag/customs-fields/feed" rel="self" type="application/rss+xml" />
	<link>http://css.4design.tl</link>
	<description>Le blog de l&#039;intégrateur web</description>
	<lastBuildDate>Sun, 20 May 2012 15:30:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>WordPress &#8212; Gérer les images avec les champs personnalisés (Customs fields)</title>
		<link>http://css.4design.tl/wordpress-gerer-les-images-avec-les-champs-personnalises-customs-fields</link>
		<comments>http://css.4design.tl/wordpress-gerer-les-images-avec-les-champs-personnalises-customs-fields#comments</comments>
		<pubDate>Thu, 07 Aug 2008 02:29:03 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Balise meta]]></category>
		<category><![CDATA[Boucle]]></category>
		<category><![CDATA[Customs fields]]></category>
		<category><![CDATA[Loop]]></category>
		<category><![CDATA[Magazine]]></category>
		<category><![CDATA[Tutoriels]]></category>
		<category><![CDATA[URL]]></category>

		<guid isPermaLink="false">http://www.css4design.com/?p=503</guid>
		<description><![CDATA[Les champs personnalisés permettent d&#8217;ajouter des informations avant ou après le contenu de votre billet (dans la boucle WordPress) sans quitter l&#8217;interface de rédaction. Il s&#8217;agit d&#8217;associer une valeur (le contenu) à une clé choisie librement (ou parmi celles que vous avez déjà définie) et d&#8217;utiliser la fonction get_post_meta() dans votre thème. De nombreux thèmes à tendance &#171;&#160;magazine&#160;&#187; se servent des champs personnalisés pour afficher une image au-dessus d&#8217;un billet. Pour cela, on crée la clé illustration et on met l&#8217;URL de l&#8217;image dans le champs valeur. Voici un exemple concret : ID, 'illustration', $single = true); ?&#38;gt; Le contenu [...]]]></description>
			<content:encoded><![CDATA[<p>Les <a href="http://codex.wordpress.org/fr:Utiliser_les_champs_personnalis%C3%A9s">champs personnalisés</a> permettent d&#8217;ajouter des informations avant ou après le contenu de votre billet (dans la <a href="http://codex.wordpress.org/fr:La_Boucle">boucle WordPress</a>) sans quitter l&#8217;interface de rédaction. Il s&#8217;agit d&#8217;associer une valeur (le contenu) à une clé choisie librement (ou parmi celles que vous avez déjà définie) et d&#8217;utiliser la fonction <code>get_post_meta()</code> dans votre thème.<span id="more-503"></span></p>

<p>De nombreux thèmes à tendance &laquo;&nbsp;magazine&nbsp;&raquo; se servent des champs personnalisés pour afficher une image au-dessus d&#8217;un billet. Pour cela, on crée la <code>clé</code> <em>illustration</em> et on met l&#8217;URL de l&#8217;image dans le champs <code>valeur</code>.</p>

<p>Voici un exemple concret :</p>

<pre><code>ID, 'illustration', $single = true); ?&amp;gt;
</code></pre>

<p>Le contenu de la clé <em>llustration</em> est placée dans la variable <code>$image</code> pour l&#8217;afficher plus loin :</p>

<pre><code>&amp;lt;img src=&amp;quot;" /&amp;gt;
</code></pre>

<p>C&#8217;est déjà fini ?</p>

<h3>Les problèmes commencent</h3>

<p>Maintenant, il faut saisir l&#8217;URL de votre image dans la section <em>Champs personnalisés</em> en bas de l&#8217;interface d&#8217;édition du billet.</p>

<p>Oui, mais voilà, cette URL, vous ne l&#8217;a connaissez pas encore. En effet, WordPress s&#8217;occupe lui-même de l&#8217;emplacement de votre image dans un dossier du genre <code>/files/2008/08/...</code></p>

<h4>1ère solution : télécharger l&#8217;image via un client FTP</h4>

<p>Certains ont résolu le problème en créant un répertoire dédié pour ces images et en les téléchargeant avec un client FTP. Mais à l&#8217;usage, ça reste très lourd au point d&#8217;enlever presque tout intérêt à l&#8217;affichage d&#8217;images par ce moyen.</p>

<pre><code>&amp;lt;img src=&amp;quot;mes-images/" /&amp;gt;
</code></pre>

<p>Toutefois, il existe une option sous forme de case à (dé)cocher (<em>organiser mes fichiers envoyés dans des dossiers mensuels et annuels</em>) pour mettre toute les images en vrac dans le dossier <code>/uploads</code>. Comme ça, il suffit d&#8217;ajouter le nom du répertoire dans le thème et de saisir le nom de l&#8217;image dans le champ <code>valeur</code> :</p>

<pre><code>&amp;lt;img src=&amp;quot;uploads/" /&amp;gt;
</code></pre>

<p>Toutefois, ces images en vrac ne sont pas une solution satisfaisante : on risque de créer plus de problèmes sur le long terme que ça en a réglé sur le court terme. Et puis, il est toujours nécessaire de télécharger les images à part, même si l&#8217;on économise la création d&#8217;un dossier ;)</p>

<h4>2ème solution : utiliser la boite de dialogue prévue&#8230;</h4>

<p>En réfléchissant un peu à la question, j&#8217;ai trouvé une petite astuce toute simple pour connaitre cette fameuse URL en évitant de mettre le bazar dans <code>/uploads</code></p>

<ol>
    <li>Ajouter une image comme vous le feriez si vous vouliez l&#8217;afficher dans le billet,</li>
    <li> Copier l&#8217;adresse de l&#8217;image qui apparait dans la boite de dialogue.</li>
    <li>Fermer la fenêtre d&#8217;importation</li>
    <li>Coller l&#8217;adresse de votre image dans le champ <code>valeur</code> à côté de la <code>clé</code> <em>llustration</em> dans les Champs personnalisé.</li>
</ol>

<p>Voilà, c&#8217;est simple, efficace et sans bavure ;)</p>

<p><strong>MAJ :</strong> Dans la version 2.7, l&#8217;adresse n&#8217;apparait plus dans la boite de dialogue d&#8217;importation. Il est nécessaire d&#8217;incorporer l&#8217;image pour obtenir l&#8217;url.</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css.4design.tl/danse-avec-les-loops-1-un-theme-wordpress-mis-a-nu' title='Danse avec les loops #1 : un thème WordPress mis à nu'>Danse avec les loops #1 : un thème WordPress mis à nu</a></li><li><a href='http://css.4design.tl/wordpress-26-un-nouveau-tag-conditionnel-avec-has_tag' title='WordPress 2.6 &#8212; un nouveau &quot;tag&quot; conditionnel avec has_tag()'>WordPress 2.6 &#8212; un nouveau &quot;tag&quot; conditionnel avec has_tag()</a></li><li><a href='http://css.4design.tl/wordpress-26-mes-news-carburent-a-press-this' title='WordPress 2.6 &#8212; Mes news carburent à &quot;Press This&quot; (chaine inside)'>WordPress 2.6 &#8212; Mes news carburent à &quot;Press This&quot; (chaine inside)</a></li><li><a href='http://css.4design.tl/wordpress-une-meilleure-indexation-avec-not-at-all-in-one-seo' title='WordPress &#8212; Une meilleure indexation avec Not at All in One SEO'>WordPress &#8212; Une meilleure indexation avec Not at All in One SEO</a></li><li><a href='http://css.4design.tl/quelques-notes-sur-un-theme-magazine-de-a-a-z-e-comme-epure' title='Quelques notes sur un thème magazine de A à Z &#8212; E comme épure'>Quelques notes sur un thème magazine de A à Z &#8212; E comme épure</a></li></ul>
 <p><a href="http://css.4design.tl/?flattrss_redirect&amp;id=503&amp;md5=8438c45fb39fea52c7435009929a7c07" title="Flattr" target="_blank"><img src="http://css.4design.tl/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css.4design.tl/wordpress-gerer-les-images-avec-les-champs-personnalises-customs-fields/feed</wfw:commentRss>
		<slash:comments>49</slash:comments>
		<atom:link rel="payment" href="https://flattr.com/submit/auto?user_id=br1o&amp;popout=1&amp;url=http%3A%2F%2Fcss.4design.tl%2Fwordpress-gerer-les-images-avec-les-champs-personnalises-customs-fields&amp;language=fr_FR&amp;category=text&amp;title=WordPress+%26%238212%3B+G%C3%A9rer+les+images+avec+les+champs+personnalis%C3%A9s+%28Customs+fields%29&amp;description=Les+champs+personnalis%C3%A9s+permettent+d%26%238217%3Bajouter+des+informations+avant+ou+apr%C3%A8s+le+contenu+de+votre+billet+%28dans+la+boucle+WordPress%29+sans+quitter+l%26%238217%3Binterface+de+r%C3%A9daction.+Il+s%26%238217%3Bagit+d%26%238217%3Bassocier+une+valeur+%28le...&amp;tags=Balise+meta%2CBoucle%2CCustoms+fields%2CLoop%2CMagazine%2CTutoriels%2CURL%2CWordPress%2Cblog" type="text/html" />
	</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using disk: basic

Served from: css.4design.tl @ 2012-05-24 17:16:02 -->
