Veilles pubs

par gael  Foutoir technologique Imprimer Imprimer 6 commentaires
Diffuser de la publicité sur son blog sans emmerder ses visiteurs réguliers n’est pas une tâche facile. Il existe actuellement plusieurs solutions, comme par exemple celle qui consiste à afficher les bandeaux publicitaires uniquement aux visiteurs qui proviennent des moteurs de recherches.

En plus ou à la place de cette solution, on peut ajouter une autre technique qui consiste à afficher lesdites publicités (ou tout autre code HTML) uniquement sur les vieux billets, ceux qui ont plus d’un certain nombre de jours.

La solution existe en tant que plugin pour WordPress, mais c’est beaucoup moins drôle que le hack que je vais te présenter aujourd’hui.

Pour commencer tu vas éditer le fichier « single.php » qui se trouve dans le répertoire de ton thème, normalement quelque chose comme « /wp-content/themes/ton_theme » . Tu places ensuite le code PHP suivant à l’endroit où tu veux que ta bannière s’affiche, n’oublie pas de l’encadrer par les balises PHP.

1
2
3
4
5
6
7
8
9
10
// Age du billet (en jours)
$nbjours = round((strtotime(date('Y-m-d')) - strtotime(get_the_time('Y-m-d')))/(60*60*24)-1);

// Si le billet date de plus de 60 jours
if ($nbjours > 60) {

    // Intégration du code de la bannière situé dans le fichier externe
    include("adsense.php");

}


Par exemple, si tu veux que ta bannière s’affiche avant ton billet, tu places le code précité juste après la ligne suivante.

1
<div id="main">


Tu noteras que dans cet exemple le code de la bannière publicitaire se trouve dans le fichier « adsense.php » , à toi de le créer et de le placer dans le répertoire de ton thème. Sinon, rien ne t’empêche d’afficher directement le code avec une ou plusieurs instructions « echo » .

Tu peux même aller faire un tour sur mes vieux billets pour voir ce que ça donne, le menu « Archives » dans la barre latérale de droite te sera utile.
, , ,    Imprimer le billet Imprimer le billet   6 commentaires

Des vidéos sous WordPress

par gael  Foutoir technologique Imprimer Imprimer 12 commentaires
N’ayant à ce jour pas trouvé de plugin pour WordPress permettant l’ajout de vidéos sur mon blog selon mes besoins précis, je me suis lancé dans le codage d’un petit hack qui a finalement répondu à mes attentes. Pour suivre cette manipulation il suffit d’avoir une légère maitrise de PHP, du XHTML ainsi que savoir se servir d’un client FTP.

Je n’utilise pas d’espace de stockage public tels que Youtube ou Dailymotion pour mes vidéos, tout est enregistré sur mon serveur web. J’utilise depuis longtemps le lecteur vidéo JW Player de chez Longtail, il peut être téléchargé gratuitement pour une utilisation non commerciale. Il est écrit en Flash et reconnait la plupart des formats du web (flv, mp4, etc.).

Intégrer une vidéo dans un billet en utilisant ce lecteur est une sinécure, le code HTML est énorme et rébarbatif, d’où l’idée d’utiliser les shortcodes de WordPress pour simplifier à l’extrême. Au final, l’insertion d’une vidéo dans un article se résume ainsi en une simple ligne écrite directement dans le texte du billet.

1
[flv file="mavideo.flv" image="image.jpg" width="300" height="200"]


Ce shortcode « flv » permet au moyen des attributs de spécifier la vidéo, l’image facultative qui sera utilisée en attendant la lecture, la largeur et la hauteur. Il est important de noter que toutes les vidéos et toutes les images d’attente sont stockées dans un répertoire particulier et envoyées sur le serveur au moyen d’un client FTP, donc pas de belle interface dans le tableau de bord, tout est fait à la main. Dans l’exemple qui suit, le répertoire contenant ces fichiers est le répertoire « /bin » .

La première étape consiste à récupérer le lecteur vidéo JW Player depuis le site de l’éditeur. Attention à bien décocher la case « Include Viral, a video sharing plugin » avant de cliquer sur « Download » , sinon tu vas te retrouver avec un lecteur contenant le plugin « Viral » qui est extrêmement lourd, il t’affichera une page très soulante après chaque lecture.

Une fois le téléchargement de l’archive terminé, tu la décompresses où bon te semble. Tu n’auras besoin que de deux fichiers, « swfobject.js » et « player.swf » , tu les envoies dans la racine de ton site web via ton client FTP favori. Si tu as le fichier « player-viral.swf » à la place c’est que tu as téléchargé le lecteur contenant le plugin « Viral » , tu viendras pas te plaindre.

La seconde étape est la mise en place du hack. Tu vas aller ouvrir le fichier « functions.php » qui se trouve dans le répertoire de ton thème WordPress. Normalement le chemin est « /wp-content/themes/ton_theme » . Tu y ajoute le code suivant, bien entendu entre les balises PHP.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Shortcode FLV function
// Author : http://www.memepasmal.ch
function flv_func($atts) {

    // Répertoire des vidéos, change-le si tu veux
    $repmedia = "/bin/";

    // L'ID du DIV doit être unique
    $div = "media" . rand(0,999999);

    // Extraction des attributs
    extract(shortcode_atts(array(
            'file' => '',
            'image' => '',
            'width' => '320',
            'height' => '240',
        ), $atts));

    // Construction du code HTML
    $html = "";
    $html .= "<div style='text-align:center;' id='" . $div . "'></div>\n";
    $html .= "<script type='text/javascript'>\n";
    $html .= "  var so = new SWFObject('/player.swf','single','" . $atts["width"] . "','" . $atts["height"] . "','0');\n";
    $html .= "  so.addParam('allowfullscreen','true');\n";
    $html .= "  so.addParam('allowscriptaccess','always');\n";
    $html .= "  so.addParam('wmode','opaque');\n";
    $html .= "  so.addParam('autostart','false');\n";
    $html .= "  so.addParam('controlbar','bottom');\n";
    $html .= "  so.addVariable('file','" . $repmedia . $atts["file"] . "');\n";
    if ($atts["image"] != "") {
        $html .= "  so.addVariable('image','" . $repmedia . $atts["image"] . "');\n";
    }
    $html .= "  so.write('" . $div . "');\n";
    $html .= "</script>\n";

    return $html;

}


Cette fonction PHP sera utilisée par notre futur shortcode. Tu noteras la présence de la ligne permettant d’indiquer le répertoire des fichiers vidéos.

1
$repmedia = "/bin/";


Tu peux modifier « /bin/ » avec le nom de ton répertoire qui contient tes médias. Attention à bien terminer par un slash.

Juste après l’accolade finale de cette fonction, toujours dans le fichier « functions.php » tu ajoutes la ligne suivante qui a pour but la création du shortcode « flv » .

1
2
// Ajout du shortcode
add_shortcode('flv', 'flv_func');


La dernière étape consiste à intégrer le code JavaScript qui permet au lecteur de fonctionner. Tu vas donc aller ouvrir le fichier « header.php » qui se trouve dans le répertoire de ton thème, et tu vas ajouter la ligne suivante à la suite des balises HTML. Attention à l’emplacement, normalement ce code devrait se trouver entre les balises « <head> » et « </head>.

1
<script type='text/javascript' src='/swfobject.js'></script>


Tu envoies les deux fichiers « functions.php » et « header.php » modifiés sur ton serveur et le tour est joué, tu peux maintenant utiliser le shortcode nommé « flv » pour intégrer facilement des vidéos dans tes billets.

Par exemple, pour jouer le fichier vidéo « mpm.flv » de 320 pixels par 240, avec comme image d’attente « mpm.jpg » .

1
[flv file="mpm.flv" image="mpm.jpg" width="320" height="240"]


Ce code affichera le résultat suivant aux visiteurs.

Télécharger la vidéo


L’attribut « image » est optionnel. Voici le code pour jouer ce même fichier vidéo, mais sans image d’attente.

1
[flv file="mpm.flv" width="320" height="240"]


Une petite astuce pour terminer, si malgré tous mes avertissements tu as téléchargé le lecteur incluant le plugin Viral et que tu as la flemme de télécharger une version sans cette lourdeur supplémentaire, il te suffit d’ajouter ces quelques lignes à la fonction PHP (au milieu de celles qui se ressemblent) pour désactiver cet horrible message de partage en fin de vidéo.

1
2
3
    $html .= "  so.addVariable('viral.allowmenu','false');\n";
    $html .= "  so.addVariable('viral.onpause','false');\n";
    $html .= "  so.addVariable('viral.oncomplete','false');\n";


C’est à toi de jouer maintenant.
, , , ,    Imprimer le billet Imprimer le billet   12 commentaires