Catégorie : développement Internet

WordPress : thème enfant : comment inclure des fichiers « proprement »

Si vous avez crée un template « enfant », comme je l’ai déjà fait plusieurs fois, un des problèmes les plus énervants à chercher est : comment trouver le répertoire courant du thème.

En fait WordPress met à disposition deux fonctions, et il vous faut utiliser soit l’une, soit l’autre :

  • get_stylesheet_directory_uri()
  • get_template_directory_uri()

get_stylesheet_directory_uri()

Vous renvoie le répertoire de l’enfant, donc le répertoire en cours du thème « enfant » que vous êtes en train de développer.

get_template_directory_uri()

Vous renvoie le répertoire du parent, cela peut être pratique si vous voulez chercher des informations dans le parent (utiliser une feuille de style déjà présente, par exemple, afin de ne pas la copier-coller dans votre thème).

NodeJS qui sert des fichiers et accède à MongoDB

// Exemple copié collé et adapté sur stackoverflow :
// http://stackoverflow.com/questions/15630770/node-js-check-if-path-is-file-or-directory
// http://stackoverflow.com/questions/7268033/basic-static-file-server-in-nodejs
//
var http = require('http'),
    url = require('url'),
    fs = require('fs'),
    mongoose = require('mongoose'),
    fileSystem = require('fs'),
    path = require('path');
var mimeTypes = {
    "html": "text/html",
    "jpeg": "image/jpeg",
    "jpg": "image/jpeg",
    "png": "image/png",
    "js": "text/javascript",
    "css": "text/css"};

var server;
var Schema = mongoose.Schema;

mongoose.connect('mongodb://localhost/test');
var db = mongoose.connection;

var personneSchema = new Schema({
  nom: String,
  prenom: String
});
var Personne = db.model('Personne', personneSchema);

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function () {
    console.log('DB connexion reussie');
    server = http.createServer(function (request, response) {
        if (request.url=='/personnes') {
            console.log("> JSON");
            Personne.find({}).select('nom prenom').exec(function (err, p) {
                if (err) {
                    return console.log(err);
                }
                var retour='[';
                for (var i = 0; i < p.length; i++) {
                    retour+='{'+ p[i].nom+', '+p[i].prenom+'},';
                };
                retour=retour.substr(0, retour.length-2)+']';
                response.writeHead(200, {
                    'Cache-Control': 'no-cache, must-revalidate',
                    'Expires': 'Mon, 26 Jul 1997 05:00:00 GMT',
                    'Content-type': 'application/json'
                });
                response.end(retour);
            });
            // Stopper tout traitement :
            return;
        }
        var uri = url.parse(request.url).pathname;
        var filename = path.join(process.cwd(), uri);
        console.log("> " + filename);
        fs.exists(filename, function(exists) {
            if ((!exists) || (fs.lstatSync(filename).isDirectory())) {
                console.log(">> fichier inexistant : " + filename);
                response.writeHead(200, {'Content-Type': 'text/plain'});
                response.write('404 Not Found\n');
                response.end();
                // Stopper tout traitement :
                return;
            }
            var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
            response.writeHead(200, {'Content-Type':mimeType});

            var fileStream = fs.createReadStream(filename);
            fileStream.pipe(response);
        });

        //var p = new Personne({
        // nom: 'Pons',
        // prenom: 'Olivier'
        //});
        //p.save(function (err) {
        // if (err) {
        // return console.log(err);
        // }
        // var query = Personne.find();
        // query.select('nom prenom');
        // query.exec(function (err, p) {
        // if (err) return console.log(err);
        // for (var i = 0; i < p.length; i++) {
        // console.log(p[i].nom+' '+p[i].prenom);
        // };
        // console.log('Nombre total d\'enregistrements : '+p.length);
        // });
        //})
    });
    // Listen on port 8000, IP defaults to 127.0.0.1
    server.listen(8000);
    // Put a friendly message on the terminal
    console.log("Server running at http://127.0.0.1:8000/");
});

WordPress : notes pour les débutants

Petites notes que j’ai apprises lors du développement d’un plugin qui créait des champs entièrement personnalisés :

Les filtres et les actions se ressemblent beaucoup à la fois dans la documentation et dans la déclaration, pourtant :

  • un filtre est une fonction qui reçoit quelque chose en paramètre et qui doit renvoyer quelque chose en paramètre, et s’il n’y a aucune modification du paramètre qui arrive, elle doit obligatoirement renvoyer le paramètre entrant ;
  • par opposition, une action est une fonction qui ne reçoit pas forcément quelque chose en paramètre et surtout, qui n’a pas besoin de renvoyer quelque chose (même si elle renvoie quelque chose, c’est ignoré).

Dans beaucoup de fonctions, il y a deux versions : avec et sans get_ :

  • the_ID(); et get_the_ID();
  • the_category(); et get_the_category();
  • …

La version sans le get_ affiche le contenu correspondant (= echo) alors que la version avec get_ renvoie le contenu correspondant, il faut donc utiliser cette dernière en l’assignant à une variable (par exemple : $categorie = get_the_category();).

Enfin dernière astuce : très souvent (voire tout le temps), les fonctions qui commencent par wp_ affichent le contenu, elles font un echo. Exemple de code que j’ai trouvé un peu déroutant quand on ne sait pas ce qu’il en est :

echo '<div class="form-wrap">';
wp_nonce_field(
    'ma_cle_unique',
    'ma_cle_unique_nonce'
);
echo '</div>';

Ici, wp_nonce_field() affiche quelque chose. Les fonctions qui commencent par wp_ affichent quelque chose.

Voilà. En espérant que cela évite à des personnes de perdre autant de temps que cela m’en a fait perdre…

CreateJS : comment résoudre « …security restrictions on reading canvas pixel data with local or cross-domain images. »

Si vous essayez de charger des images qui ne sont pas sur le site d’origine qui demande la requête, vous allez sûrement avoir ce problème que va vous afficher le navigateur :

Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.

Lisez la documentation très claire ici : .

Parmi toutes les solutions que vous allez trouver sur le Web, je n’en ai pas trouvé une qui fonctionne de manière simple :

Mon framework est optimisé pour la rapidité et la dispersion de ressources statiques sur des domaines différents.
Exemple : mon site principal est www.battlesoop.fr mais à partir de là, toutes les ressources statiques être chargées sur des domaines différents : fr.s1.battlesoop.fr, fr.s2.battlesoop.fr et fr.s3.battlesoop.fr, en prenant aussi la langue du navigateur en compte.
J’ai passé presque une journée avant de faire fonctionner cela avec CreateJS. La solution m’a été donnée sur les forums même, ici. N’hésitez pas à aller poser des questions par là-bas : c’est la première fois depuis des années que la réponse a été plus rapide sur ces forums que sur stackoverflow !

En tous les cas : HTML5 rocks!

🙂

CSS : table – tr – comment mettre un border sur les « tr »

Si, comme moi, vous voulez mettre de la couleur sur la ligne entière, en CSS, vous risquez de perdre pas mal de temps, parce que cela ne fonctionnera jamais « simplement ».

Voici une aide qui pourra certainement vous en faire gagner – du temps. Il faut connaître la propriété « border-collapse ».

Solution qui fonctionne :

$('table')
    .css('border-collapse', 'collapse')
    .find('tr')
    .css({'border':'1px solid green'});

J’espère vous avoir fait gagner du temps !

Ingesup – Y-nov à terminer après les vacances

Terminer l’appel à la déconnexion en AJAX

$(document).ready(function () {
    $('div[role="navigation"]')
        .find('form')
        .submit(function () {
            $(this).fadeOut(function() {

                $.ajax({
                    url:    $(this).attr('action'),
                    method: $(this).attr('method'),
                    params: $(this).serialize()
                })
                .done(function (data) {
                    if (data.success) {
                        /* montrer le bouton de déconnexion */      
                    } else {
                        /* montrer un message d'erreur (PAS alert) et
                         * remontrer la form de connexion      
                         */
                        
                    }
                })
                .error(function () {
                    alert('Erreur');
                });
            });

            return false;
        });
});