Discussion :

[TMKFrench]

Bonjour à toute la communauté de Developpez.com

Je me tourne vers vous car je n'ai pas dans mon entourage des gens compétent pour m'aider dans mon projet.
Je suis un Guild Master sur Guild Wars 2 et j'ai monté un site à l'aide de WordPress

J'ai modifié le thème, fais des CSS persos que j'ai intégré sans problème.

Mais je n'ai aucune connaissance en php pour programmer un plugin WP.

Dans les articles que je poste, je fais afficher, quand on passe la souris sur un item de jeu, une infobulle donnant les détails de celui-ci grâce à un appel JS sur une base de donnée des objets du jeu.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p>Vous aurez besoin d'un <a class="rarity_masterwork" href="http://db.gw2.fr/item/67818" target="_blank" data-gw2-item="67818">Appareil d'extraction de mordrem expérimental</a></p>

Cela marche très bien comme vous pouvez le constater à cette adresse : http://www.guilde-gdc.fr/hall_de_guilde/?p=710

Mais imaginez un article comprenant un tableau avec 50 item à lister avec des classes de rareté différentes (légendaire, rare, basique, etc...) + la référence de l'item à mettre deux fois dans le HRef...
Le travail devient long et fastidieux.

D'où ma volonté de créer un petit plugin qui rajouterai un bouton dans l'interface d'édition des articles/pages qui ferai apparaitre une fenêtre popup demandant les renseignements et générant directement la balise <a>.....</a>

Dans le popup, il faudrait une liste déroulante avec les différentes rareté de l'objet, une zone texte pour récupérer l'ID de l'item et une autre pour le texte descriptif de celui-ci ou faire comme la fonction link intégrée dans l'éditeur : on tape le texte, on le mets en surbrillance, on clique sur le bouton et cela récupère le texte pour l'intégrer dans la fenêtre du popup.

J'avoue que je suis perdu car je ne sais vraiment pas comment faire. J'ai bien pensé à essayer de trouver le code de la fonction Link de wordpress, mais vu la quantité de ligne de code, j'ai abandonné.

Je me retourne vers vous. Je suis prêt à aider dans la mesure de mes connaissances (vraiment limitée j'avoue... ), mais je suis curieux et j'aime apprendre. C'est grace à votre aide que j'ai réussi à développer mon timer et à le coder.

Vous pouvez me contacter par skype pour un travail en simultané ou par Team Speak aussi.

En vous remerciant de votre aide par avance

TMK

[miss_socrates]

Je pense que le popup peut se faire en javascript et je suppose que les items sont dans un array, il est alors possible de les afficher dans le popup

[mathieu]

d'après ce que tu as expliqué, je te proposerai juste de créer un "shortcode" au lieu de modifier l'interface d'édition.
avec ça tu créera le texte suivant dans ton article :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Vous aurez besoin d’un [ObjetGuildWars numero="67818"]

et ensuite ta page s'affichera de la même façon que ce tu as pour le moment

est ce que cela te convient ?
pour créer une extension va dans le répertoire "wp-content/plugins" et crée un répertoire du nom de ton extension par exemple "objet-guild-wars". et dans ce répertoire crée un nouveau fichier du même nom "objet-guild-wars.php" avec ce contenu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
/*
Plugin Name: Objet Guild Wars
Version: 1.0
*/

après va dans l'espace d'administration, partie "extensions" et active ta nouvelle extension même si elle ne fait rien pour le moment


l'étape d'après est d'ajouter du code PHP dans ce fichier
pour savoir comment créer un shortocode dans ton extension, regarde là :
http://codex.wordpress.org/Function_.../add_shortcode

[TMKFrench]

Merci mathieu pour ta réponse.

Effectivement un shortcode pourrait faire l'affaire.

Je suis allé faire un tour sur le codex de WP et utilisé le générateur de shortcode. Voila ce que j'obtiens :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Add Shortcode
function genbal( $atts ) {
 
	// Attributes
	extract( shortcode_atts(
		array(
			'itemid' => '',
			'rarete' => 'junk',
			'descript' => '',
		), $atts )
	);
 
	// Code
return '<a class="rarity_' . $atts['rarete'] . '" href="http://db.gw2.fr/item/' . $atts['itemid'] . '" target="_blank" data-gw2-item="' . $atts['itemid'] . '">' . $atts['descript'] . '</a>';
}
add_shortcode( 'gw2obj', 'genbal' );

Je ne sais pas si la partie après le return est bien écrite car comme il y a des " " un peu de partout je ne sais pas si la syntaxe va être tolérée ou s'il faut l'écrire comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

'<a class="rarity_' . $atts['rarete'] . '" href="http://db.gw2.fr/item/' . $atts['itemid'] . '" target="_blank" data-gw2-item="' . $atts['itemid'] . '"> ' . $atts['descript'] . '</a>'

Voila le code que j'ai créé en html/js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
<body>
<form id="genbal">
Description : <input type="text" name="descritp" value="" required><br>
Item ID: <input type="text" name="itemID" value="" size="6" maxlength="6" required><br>
Rareté : <select name="rarete">
<option value="junk" style="color: #787878;">Inutile</option>
<option value="basic" style="color: #6E6E6E;">Basique</option>
<option value="fine" style="color: #217fff;">Rafiné</option>
<option value="masterwork" style="color: #20a800;">Chef d oeuvre</option>
<option value="rare" style="color: #cab900;">Rare</option>
<option value="exotic" style="color: #cb8b00;">Exotique</option>
<option value="ascended" style="color: #f52176;">Elevé</option>
<option value="legendary" style="color: #8f00fe;">Légendaire</option>
</select>
</form><br>
<button onclick="recup()">Générer la balise</button>
 
<p id="test"></p>
 
<script>
function recup() {
    var x = document.getElementById("genbal");
    var baldata = new Array();
    var i;
    for (i = 0; i < x.length ;i++) {
        baldata[i] = x.elements[i].value;
    }
 
    balise = "&lt;a class=&#x22;rarity_" + baldata[2] + "&#x22; href=&#x22;http://db.gw2.fr/item/" + baldata[1] + "&#x22; target=&#x22;_blank&#x22; data-gw2-item=&#x22;" + baldata[1] + "&#x22;&gt; " + baldata[0] + "&lt;/a&gt;";
 
    document.getElementById("test").innerHTML = balise;
}
</script>
</body>
</html>

Maintenant se pose un problème. Si je serai le seul à écrire des articles j'utiliserai certainement le shortcode, car je connais les valeur de "Rareté" et pourrais mettre les bonnes valeurs à chaque fois. Hors nous sommes plusieurs à écrire des articles et guides sur le site et tous ne sont pas calés en informatique. D'où mon idée du bouton dans l'interface d'édition. Cela éviterai tout problème.
Pas besoin d'un truc extraordinaire, mais juste un petit popup comme j'ai fait dans mon exemple html avec les 3 champs + un bouton.

Peux-tu dans un premier temps m'aider à transformer mon code js qui crée le texte de la balise avec les arguments récupéré lors de l'appel du shortcode. Ca me permettrai déjà de le mettre en place en attendant un plugin plus abouti.

Encore merci de ton aide.

[TMKFrench]

Bon le shortcode marche parfaitement !!!

Mais j'aimerai vraiment le développer en plugin avec une fenêtre popup pour les raisons que j'ai donné dans le post précédent.
De plus je pense que cela pourrai intéresser d'autres personnes.

Edit : Je viens de penser à une chose. Pour que le shortcode fonctionne, il faut intégrer deux ligne dans le header :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript" src="http://db.gw2.fr/js/remote-tooltip-jquery.js"></script>
 
et
 
<link rel="stylesheet" type="text/css" href="http://www.guilde-gdc.fr/map/media/dbobjet.css" />

Bien evidement la feuille de style peut être placée ailleurs comme dans le répertoire du plugin

Comment puis-je intégré automatiquement ces lignes dans le header à l'installation du plugin ?

Moi je les ai intégré manuellement en éditant le fichier header de mon thème.

merci de votre aide.

[mathieu]

Comment puis-je intégré automatiquement ces lignes dans le header à l'installation du plugin ?

Moi je les ai intégré manuellement en éditant le fichier header de mon thème.

pour ça, utilise les fonctions suivantes dans ton extension :
http://codex.wordpress.org/Function_...enqueue_script
http://codex.wordpress.org/Function_..._enqueue_style


pour ta question, n'y a-t-il pas un service qui permet de récupérer la rareté en fonction du numéro d'objet ? comme pour les données de l'infobulle : http://db.gw2.fr/tooltip/item/67818
j'ai cherché sur le site gw2.fr mais je n'ai pas trouvé de documentation, comment connaitre les autres services disponibles ?

[TMKFrench]

Bon,

j'ai inclus le script et le css dans le plugin pour qu'ils soient chargés dans le header. Pas de soucis de ce côté.

pour ta question, n'y a-t-il pas un service qui permet de récupérer la rareté en fonction du numéro d'objet ?

non car le css ne fait pas parti du script originel. C'est une feuille de style perso pour mettre le texte de la couleur de l'objet.

De plus il est possible d'appeler les recettes aussi de la même manière en utilisant recipe ou mystic dans l'adresse à la place de l'item

donc je vais rajouter en plus une liste pour le type d'appel en fonction de l'objet. Dans ce cas cela m'oblige à faire 3 shortcodes différents.

D'où l’intérêt de faire une fenêtre popup proposant ces 4 paramètres.

[mathieu]

je demandais la documentation de l'utilisation des données du site gw2.fr parce que je voulais utiliser ces données dans le shortcode lui-même en PHP
ainsi tu auras juste besoin de mettre le numéro d'objet dans le shortcode comme ça [ObjetGuildWars 67818] et c'est le code PHP qui s'occupera de chercher la rareté et le nom de l'objet.
donc tu n'auras pas besoin d'une interface spéciale, il suffira de se rappeler du nom du shortcode pour l'inclure sur la page. si jamais tous les contributeurs ne se souviennent pas du texte à rajouter, je sais qu'il existe des extensions qui présentent la liste des shortcode dans un menu déroulant pour l'ajouter rapidement dans l'espace d'édition

je vais faire un essai pour te montrer comment je vois tout ça et je le posterai à la suite ce soir ou demain.

[TMKFrench]

Oui je comprends ce que tu veux faire.

Malheureusement la seule documentation que j'avais trouvé, est un post sur le forum, ou il explique qu'il faut le script js et ils donnent trois exemple d'utilisation. C'est tout.

Après il faudrait décortiquer le script pour en savoir plus. mais je ne m'y suis pas intéressé car mes connaissances sont trop limitées en ce domaine.

[mathieu]

en fait je n'avais pas compris que le site gw2.fr n'est pas un site officiel et d'après ce que j'ai trouvé, le site propose juste ce service de tooltip.
et j'ai aussi trouvé l'API du site officiel qui propose plus de choses mais avec tous les libellés en anglais : http://wiki.guildwars2.com/wiki/API:Main

en ce qui concerne le shortcode, j'ai trouvé comme extraire la rareté, voilà le fichier de l'extension : gw2-shortcode-db.php
ce n'est pas optimisé puisque le shortcode appelle le site gw2.fr en PHP et ensuite il y a un autre appel en JavaScript alors qu'on pourrait économiser un des 2 appels.
mais c'est déjà un bon début pour ce dont tu as besoin je pense

[TMKFrench]

Merci pour ta réponse rapide et le code que tu me fournis.

J'ai quelques questions concernant celui-ci.

Comment marche la fonction namespace ? Car j'ai fait quelques recherches mais je n'ai trouvé que des résultats l'utilisant de manière complètement differente.

Dans la déclaration des shortcodes j'ai rajouté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function gw2forge($attributs, $contenu, $tag)
{
	return generation_shortcode("mystic", $attributs, $tag);
}
 
add_shortcode("gw2forge", "Gw2ShortcodeDb\\gw2forge");

Car il y a trois appels différents : item = objet, recipe = recette craft artisanat et mystic = recette forge mystique.

Comment fonctionne "Gw2ShortcodeDb\\gw2forge" ?

Pour les attributs du shortcode en lisant le code j'en ai déduis que attributs = ID objet, mais à quoi correspondent contenu et tag ?

J'ai modifié :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
	wp_register_style("Gw2ShortcodeDb\\css_tooltip", 
		plugins_url('dbobjet.css', __FILE__));

Pour pouvoir fournir le fichier css avec le plugin et éviter des appels sur mon site web depuis l'exterieur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$lienShortcode = "<a href=\"$urlLien\" class=\"$listeClasses\" target=\"_blank\">$titre</a>";

Ici j'ai rajouté le target="_blank" car il semble nécessaire dans les exemples donnés.

Et dernière question, quel est l’intérêt de mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
	wp_enqueue_script("Gw2ShortcodeDb\\script_tooltip");
	wp_enqueue_style("Gw2ShortcodeDb\\css_tooltip");

dans la fonction plutôt que dehors à la fin du fichier ?

Cela fait pas mal de question, mais plutôt que de prendre le code et juste l'utiliser tel quel, j'aimerai comprendre comment il a été construit pour essayer de me dépatouiller si je dois le modifier sans devoir t’embêter à nouveau.

Je te mets le fichier tel que je l'ai modifié ici : gw2-shortcode-db.php

Pour être sur que je n'ai pas fais de boulettes.

Dernière chose, quelle est la syntaxe des shortcodes ? [gw2objet xxxxx] où xxxxx représente l'item ID ?

En tout cas merci de l'aide précieuse que tu m'as apporté dans ce projet.

[mathieu]

Cela fait pas mal de question, mais plutôt que de prendre le code et juste l'utiliser tel quel, j'aimerai comprendre comment il a été construit pour essayer de me dépatouiller si je dois le modifier sans devoir t’embêter à nouveau.

il n'y a pas de problème, le forum est fait pour ça. il n'y a rien de plus mal vu que quelqu'un qui arrive et qui dit "j'ai ce code que je ne veux pas comprendre, dites-moi comment rajouter un 3me shortcode" et souvent ces gens qui n'ont pas compris le but du forum rajoutent "et vite je n'ai plus beaucoup de temps pour finir ça"

Comment marche la fonction namespace ? Car j'ai fait quelques recherches mais je n'ai trouvé que des résultats l'utilisant de manière complètement differente.

ça permet de donner un genre de préfixe commun à toutes les fonctions pour éviter une collision si une autre extension choisi le même nom
regarde là pour plus d'explications : http://php.net/language.namespaces.rationale

quelle est la syntaxe des shortcodes ? [gw2objet xxxxx] où xxxxx représente l'item ID ?

oui c'est ça

Pour les attributs du shortcode en lisant le code j'en ai déduis que attributs = ID objet, mais à quoi correspondent contenu et tag ?

dans $tag tu retrouves par exemple "gw2objet". pour $attributs et $contenu, il s'agit des paramètres passées au shortcode, tu peux voir des exemple là : http://codex.wordpress.org/Shortcode_API

j'ai rajouté le target="_blank" car il semble nécessaire dans les exemples donnés.

ça permet d'ouvrir un lien dans un nouvel onglet / fenêtre. ce n'est pas nécessaire et personnellement, j'évite de l'utiliser pour que le visiteur puisse choisir s'il veut ouvrir le lien dans la même page ou dans une nouvelle

Et dernière question, quel est l’intérêt de mettre les "wp_enqueue_script" dans la fonction plutôt que dehors à la fin du fichier ?

cela permet de générer l'appel des scripts uniquement s'il y a au moins un shortcode dans la page.

[TMKFrench]

Merci pour les précisions concernant le code.

J'ai une idée concernant l'optimisation du shortcode. Puisque nous avons trois shortcodes pour les trois appels, on doit pouvoir n'en faire qu'un
en rajoutant un attribut supplémentaire pour définir le type d'objet :

[gw2obj x yyyyy] où x peut prendre comme valeur i , r ou m pour item, recipe ou mystic et yyyyy est le numéro de l'item.

dis moi si je me trompe sur le code.

Pour la déclaration du shortcode ca donnerai ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function gw2objet($attributs, $contenu, $tag)
{
	// Attributs
	extract( shortcode_atts(
		array(
			'typeobj' => '', // Doit être i pour Item, r pour recette craft artisanat ou m pour recette forge mystique
			'idobj' => '', // Se trouve en faisant une recherche sur http://db.gw2.fr
		), $attributs )
	);
	return generation_shortcode($attributs['typeobj'], $attributs[idobj], $tag);
}
 
add_shortcode("gw2objet", "Gw2ShortcodeDb\\gw2objet");

et pour la fonction de génération de la balise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
function generation_shortcode($typeDonnee, $attributs, $tag)
{
     $typeapl = strtolower($typeDonnee)
 
switch ($typeapl) {
     case "i":
         $typeDonnee = "item";
         break;
     case "r":
         $typeDonnee = "recipe";
         break;
     case "m":
         $typeDonnee = "mystic";
         break;
     default:
 		"
			<span class=\"messageErreur\">
				[$tag $typeapl] : Le type objet doit être i r ou m !!!
			</span>
		";
}
 
 
	if (!isset($attributs[0])) {
		// le numéro d'objet n'est pas défini
		return "";
	}
 
	$idDonnee = $attributs[0];
 
	// recherche des informations
	$urlDb = "http://db.gw2.fr/tooltip/$typeDonnee/$idDonnee";
	// à faire : prévoir le cas où le serveur ne répond pas
	$donnees = json_decode(wp_remote_retrieve_body(wp_remote_get($urlDb))); 
 
	if (!isset($donnees)) {
		return
		"
			<span class=\"messageErreur\">
				[$tag $idDonnee] : mauvais format
			</span>
		";
	}
 
	if (4 === $donnees->status) {
		return
		"
			<span class=\"messageErreur\">
				[$tag $idDonnee] : n'existe pas dans la base de données de gw2.fr (status : 4)
			</span>
		";
	}
 
	// recherche de la rareté pour calculer les classes CSS du lien
	preg_match("#<h2.*class=\"(.*)\"#Uis", $donnees->html, $resultats);
 
	$listeClasses = "";
 
	foreach (explode(" ", $resultats[1]) as $classe) {
		if (0 === strpos($classe, "rarity_")) {
			$listeClasses = $classe;
		}
	}
 
	// préparation du lien
	$titre = $donnees->name;
	$urlLien = "http://db.gw2.fr/$typeDonnee/$idDonnee";
 
	$lienShortcode = "<a href=\"$urlLien\" class=\"$listeClasses\" target=\"_blank\">$titre</a>";
 
	// demande de chargement du script et de la feuille de style
	wp_enqueue_script("Gw2ShortcodeDb\\script_tooltip");
	wp_enqueue_style("Gw2ShortcodeDb\\css_tooltip");
 
	// résultat du shortcode
	return $lienShortcode;
}

Me suis-je trompé quelque part ?

[mathieu]

oui tu peux aussi utiliser le shortcode comme cela et donc comme les fonctions "gw2objet" et "generation_shortcode" sont utilisées qu'une seule fois, tu pourras les regrouper en une seule, ça fera du code plus simple à lire

en ce qui concerne les attributs, si tu fais un appel comme ça : "[gw2obj r 567]" tu auras "r" dans $attributs[0] et "567" dans $attributs[1]
et si tu fais "[gw2obj type=r id=567]" tu auras "r" dans $attributs["type"] et "567" dans $attributs["id"]

[TMKFrench]

Bon j'ai pris note de la subtilité concernant l'appel du shortcode et donc j'ai modifié cette ligne comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return generation_shortcode($attributs[0], $attributs[1], $tag);

pour éviter d'alourdir la syntaxe du shortcode.

Voici le fichier final :

GW2Oject2.php

Peux-tu valider le code que je puisse le mettre en service sur mon site ?

Si tout est bon, je pourrais passer le sujet en résolu.

Encore merci de ton aide.

[mathieu]

il y avait encore un problème pour l'appel de la fonction generation_shortcode
j'ai modifié l'appel et le début de la fonction et ça devrait être bon : GW2Oject2.php

[TMKFrench]

je viens de regarder le fichier et merci pour l'optimisation de l'appel

Par contre j'ai vu ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
     $typeapl = strtolower($attributs[1]);
et
     $idDonnee = $attributs[0];

Si l'appel du shortcode est : [gw2obj X YYYYY]

Normalement l'attributs[0] contient le type d'appel et le 1 l'ItemID.

Donc on devrait avoir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
     $typeapl = strtolower($attributs[0]);
et
     $idDonnee = $attributs[1];

non ?

[mathieu]

ah oui j'ai inversé les 2, bien vu

[TMKFrench]

Bon j'ai modifié les attributs pour les remettre dans le bon ordre et j'ai testé le plugin.

Je me suis aperçu qu'il ne fonctionnait pas

J'ai repris le code et trouvé le problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function gw2objet($attributs, $contenu, $tag)
{
	return generation_shortcode($attributs, $tag);
}
 
add_shortcode("gw2obj", "Gw2ShortcodeDb\\gw2obj");

c'était dans la dernière ligne, je n'appelle pas la bonne fonction. J'ai du faire la coquille
quand j'ai retravaillé l'appel du short code.

Maintenant tout marche à merveille.

Juste un truc, si tu as le temps, tu pourras m'expliquer ton appel sur le site db.gw2.fr pour trouver les infos et comment tu as testé les résultats. par curiosité.

Encore merci de toute l'aide que tu m'as apporté dans mon projet.

[mathieu]

pour l'accès à la base de données, j'ai utilisé l'URL utilisée par le script remote-tooltip-jquery.js
par exemple http://db.gw2.fr/tooltip/item/67818

c'est au format Json donc il suffit d'utiliser la fonction http://php.net/json_decode pour le transformer en tableau
et ensuite j'ai utilisé une expression régulière pour extraire le code de la rareté qui était au milieu du code HTML