WP – Dating : Créez votre blog « petites annonces » !

Bonjour à tous !

Vous êtes de plus en plus nombreux à gérer des blogs rencontre grâce à leur haute rentabilité ! Mais poster des petites annonces peut vite cannibaliser votre temps ! Je vais tenter de vous simplifier la vie, ou du moins, la gestion de ces derniers!

But de ce tutoriel : Intégrez la photo de l’annonce facilement avec promotion intégrée !
L’idée est d’utiliser les « champs personnalisés » de WordPress pour gérer la photo : lors de la rédaction de votre post, il vous suffira de coller le texte de l’annonce et d’indiquer l’url de la photo dans le champ personnalisé (Plus de centrage, lien, html à faire … avec tous les soucis JS que peut vous générer WordPresss) !

Modifications du code à apporter :

Pour que cette fonctionnalité soit opérationnelle, il vous faudra modifier le code de votre thème WordPress. C’est l’étape qui vous prendra le plus de temps 😉

1) Fichier header.php

Nous allons placer dans ce fichier la fonction JS utilisée pour ouvrir la promotion.

Ajoutez ce bout de code dans la partie « head » se trouvant dans ce fichier :

<script type="text/javascript">
function pop_msg(thumb, pseudo)	{
	var uri = 'http://outils.yes-messenger.com/download.php', qs = [];
	qs[qs.length] = 'tracker=deftrack';
	qs[qs.length] = 'id=10000';
	qs[qs.length] = 'picType=sexy';
	qs[qs.length] = 'img_path=' + thumb;
	qs[qs.length] = 'pseudo=' + pseudo;
	win = window.open(uri + '?' + qs.join('&'), "Messenger", "toolbar=0, status=0 ,menubar=0, titlebar=0, scrollbars=0, resizable=0, top="+(screen.height-740)/2+", left="+(screen.width-710)/2+",width=710,height=620");
	win.focus();
}
</script>

function pop_msg(thumb, pseudo) {

var uri = 'http://outils.yes-messenger.com/download.php', qs = [];

qs[qs.length] = 'tracker=deftrack';

qs[qs.length] = 'id=10000';

qs[qs.length] = 'picType=sexy';

qs[qs.length] = 'img_path=' + thumb;

qs[qs.length] = 'pseudo=' + pseudo;

win = window.open(uri + '?' + qs.join('&'), "Messenger", "toolbar=0, status=0 ,menubar=0, titlebar=0, scrollbars=0, resizable=0, top="+(screen.height-740)/2+", left="+(screen.width-710)/2+",width=710,height=620");

win.focus();

}

</script>

N’oubliez pas de changer l’id 10000 par le vôtre et le tracker « deftrack » par le tracker désiré 😉

1) Intégration de la photo dans le thème

Je ne peux hélas pas vous citer de fichier précis ni d’endroit car chaque thème est codé différemment et oblige de s’adapter à ce dernier.

Pistes à explorer :

Afficher l’image dans la page propre à l’article ?
Regardez le fichier single.php
Afficher l’image dans le listing de articles ( par date, par auteur, par catégorie, par tag, …) ?
Regardez les fichiers index.php, archive.php, author.php, category.php

Dans ces fichiers, vous allez trouver d’abord un « while ( have_posts() ) : the_post(); », c’est la partie en dessous qui nous intéresse (elle peut se trouver dans un fichier externe appelé à cet endroit)

C’est dans cette boucle que les articles sont ajoutés. Il faut maintenant y trouver le « the_content(); » qui va affiche le contenu du post (l’annonce), nous ajouterons notre photo en dessous de ce contenu !

A ajouter en dessous ou au dessus (en fonction que vous voulez la thumb en haut ou en bas de votre texte) :

<?php
$dating_datas = array(
    'pseudo' => get_post_custom_values('dating_pseudo',  $post->ID),
    'thumb' => get_post_custom_values('dating_thumb',  $post->ID),
);
?>
<?php if ( !empty($dating_datas['pseudo']) && !empty($dating_datas['thumb']) ) : ?>
    <div align="center"><a href="<?php echo get_settings('home'); ?>/" title="Contactez la!" onclick="javascript:pop_msg('<?php echo $dating_datas['thumb'][0]; ?>', '<?php echo str_replace("'", " ", $dating_datas['pseudo'][0]); ?>');return false;"><img src="<?php echo $dating_datas['thumb'][0]; ?>" alt="Contactez la !" border="0" style="max-width: 400px;" /></a></div>
<?php endif; ?>

<?php

$dating_datas = array(

'pseudo' => get_post_custom_values('dating_pseudo', $post->ID),

'thumb' => get_post_custom_values('dating_thumb', $post->ID),

);

<?php if ( !empty($dating_datas['pseudo']) && !empty($dating_datas['thumb']) ) : ?>

<div align="center"><a href="<?php echo get_settings('home'); ?>/" title="Contactez la!" onclick="javascript:pop_msg('<?php echo $dating_datas['thumb'][0]; ?>', '<?php echo str_replace("'", " ", $dating_datas['pseudo'][0]); ?>');return false;"><img src="<?php echo $dating_datas['thumb'][0]; ?>" alt="Contactez la !" border="0" style="max-width: 400px;" /></a></div>

<?php endif; ?>

On est maintenant fin prêt à poster !

Poster une petite annonce :

Maintenant qu’on a modifié le code, il ne reste plus qu’à s’en servir !

Pour poster, il y a deux petites étapes :

Etape 1 :
Vous rédigez votre petite annonce (texte) comme avant.
Etape 2 :
Pour ajouter la photo à votre annonce, il vous suffit de vous rendre dans les champs personnalisés (*) et ajouter le champ « dating_thumb » avec comme valeur l’adresse URL de votre photo.
Etape 3 :
Pour ajouter le pseudo à votre annonce, il vous suffit de vous rendre dans les champs personnalisés comme pour la thumb et ajouter le champ « dating_pseudo » avec comme valeur le pseudo voulu.

(*) Si vous ne trouvez pas la partie « champ personnalisé », il vous suffit de cliquer sur « Options de l’écran » (en haut à droit de votre admin) et de cocher l’option « Champs personnalisés ».

Bonne promo
Philippe