gérer une grande sortie HTML via le code du plugin

9

J'ai récemment écrit mon premier plugin WP qui ajoute un shortcode pour intégrer une galerie d'images jquery personnalisée dans les publications. Il s'agit principalement de jeter un bon morceau de HTML dans le message, ainsi que du javascript nécessaire à l'initialisation.

Cependant, j'ai dû construire la sortie HTML de manière procédurale, comme une chaîne en PHP. Ce type de soupe aux balises me rend toujours fou, et j'ai l'habitude de travailler avec des frameworks MVC qui fournissent des choses comme des fonctions d'assistance et des modèles partiels pour générer du HTML.

Quelle est l'approche générale pour les auteurs de plugins qui doivent gérer de grandes quantités de code HTML ou JS construit dynamiquement?

plugins html plugin-development

— Bryan M.
source

12

@Byran M. J'ai tendance à utiliser deux constructions que je ne vois pas souvent d'autres développeurs WordPress utiliser souvent, ce qui me surprend, mais je les aime beaucoup.

1.) Heredocs

Vous pouvez stocker de gros blocs de texte sous forme de chaîne heredocs qui pourrait ressembler à ceci afin que je puisse stocker le souci de mélanger les guillemets simples et doubles:

   $html=<<<HTML
<input type="{$type}" size="{$size}" id="{$id}" class="{$class}" value="{$value}" />
HTML;

Notez que les variables peuvent être transmises à une fonction sous forme de tableau puis extract()éditées ou vous pouvez les affecter de différentes manières. Notez également que j'utilise les accolades non pas parce qu'elles sont toujours obligatoires mais qu'elles facilitent la lecture du code. (Bien sûr, des fonctions comme the_content()être sensiblement différentes de get_the_content()WordPress ne facilitent pas toujours ce style de codage.)

De plus, bien que cela ne vous concerne pas, si j'utilise des noms hérédoc comme HTML, SQL, etc., mon IDE PhpStorm effectue une injection de syntaxe et me donnera une saisie semi-automatique et une coloration syntaxique dans l'hérédoc.

2.) Concaténation de chaînes à l'aide d'un tableau

L'autre idiome que j'aime utiliser est de collecter le contenu dans un tableau puis dans implode()le tableau. Bien que je n'ai jamais évalué cela, cela pourrait être moins utile que je suppose.Je sais que la concaténation de chaînes répétée est un tueur car les chaînes deviennent plus grandes (si quelqu'un sait pourquoi cette approche n'est pas meilleure ou si vous connaissez une meilleure approche, je aimerais entendre des commentaires):

function my_get_form_and_fields($input_items) {
    $html = array();
    $html[] = '<form name="my_form" method="get">';
    foreach($input_items as $input_item) {
        extract($input_item);
        $html=<<<HTML
<input type="{$type}" size="{$size}" id="{$id}" class="{$class}" value="{$value}" />
HTML;
    $html[] = '</form>';
    return implode("\n",$html);         
}

— MikeSchinkel
source

1

+1 pour Heredocs, ils sont géniaux, surtout dans cette situation.

— personne

Je n'ai pas vraiment eu le temps d'évaluer cela, mais cela semble être l'approche la plus simple compte tenu de mes besoins.

— Bryan M.

+1 pour la concaténation tableau / chaîne. Je fais beaucoup ça. Il facilite la construction de chaînes sans sauts de ligne et espaces superflus.

— s_ha_dum

5

Découvrez cette fonction pour PHP:

http://php.net/manual/en/function.ob-start.php

Vous pouvez tamponner un fichier inclus qui contiendrait simplement du code html, dans une variable php. Cela le rendra plus propre à entretenir.

Vous vous retrouvez donc avec quelque chose comme ceci:

ob_start();
   include('path/to/my/html/file.php');
   $includedhtml = ob_get_contents();
ob_end_clean();

Ensuite, vous pouvez simplement retourner $ includedhtml là où vous en avez besoin et cela garde votre contenu html séparé d'avoir à tout répéter à l'intérieur des chaînes php.

— Todd Perkins
source

4

Je n'ai pas réellement utilisé ce cadre, mais le modèle de modèle qu'il propose plaira probablement. Vous voudrez peut-être jeter un œil à la façon dont l'auteur a configuré cela.

https://github.com/Emerson/Sanity-Wordpress-Plugin-Framework

Modèles ========= Dans la mesure du possible, nous devons séparer PHP du HTML. Dans Wordpress, vous verrez les deux se mélanger sans appréhension. Bien que ce soit souvent une «façon facile» de faire les choses, ce n'est presque jamais la «bonne façon». Au lieu de cela, nous devons séparer les deux, gardant ainsi notre logique pure et nos vues stupides. Pour cela, nous avons la méthode $ this-> render ('mon-modèle'). Quelques exemples:

    // From within a method in our controller
    $this->data['message'] = 'Pass this on to the template please';
    $this->render('my-template');

    // Meanwhile, in the /plugin/views/my-template.php file
    <h2>The Separation of Logic and Views</h2>
    <p><?php echo $this->data['message'];?></p>

— marfarma
source

Il utilise simplement la mise en mémoire tampon de sortie, comme Todd Perkins le décrit dans sa réponse.

— Ian Dunn

2

Cela dépend du type de HTML et de JS.

Javascript

Tout d'abord, séparez autant que possible les parties dynamiques des parties statiques. Ensuite, chargez toutes les variables dynamiques dont vous avez besoin au moment de l'exécution et placez vos scripts statiques dans l'en-tête (ou le pied de page, peu importe). Mais de cette façon, la majorité de votre JS est distincte de votre PHP.

HTML

Il s'agit de construire proprement votre code en PHP. Si vous avez d'énormes morceaux de HTML que vous allez réutiliser, je les stockerais en tant que variables distinctes. Ensuite, assembler les choses lorsque le shortcode est appelé est aussi simple que:

echo $firstblock;
echo $shortcodecontent;
echo $lastblock;

Plutôt que d'essayer de le construire de manière procédurale, construisez un objet (oui, PHP prend en charge les objets) qui contient tous vos différents blocs HTML, puis indiquez-lui lesquels utiliser et quelles données transmettre. Cela vous fera gagner énormément de temps.

— EAMann
source