lidiar con una gran salida HTML a través del código del complemento

9

Recientemente escribí mi primer complemento WP que agrega un código corto para incrustar una galería de imágenes jquery personalizada en las publicaciones. Principalmente solo descarga una buena porción de HTML en la publicación, junto con javascript necesario para la inicialización.

Sin embargo, tuve que construir la salida HTML de manera procesal, como una cadena en PHP. Este tipo de sopa de etiquetas siempre me vuelve loco, y estoy acostumbrado a trabajar con marcos MVC que proporcionan cosas como funciones auxiliares y plantillas parciales para generar HTML.

¿Cuál es el enfoque general para los autores de complementos que necesitan administrar grandes cantidades de HTML o JS creados dinámicamente?

plugins html plugin-development

— Bryan M.
fuente

12

@Byran M. Tiendo a usar dos construcciones que no veo a otros desarrolladores de WordPress con frecuencia, lo que me sorprende, pero me gustan mucho.

1.) Heredocs

Puede almacenar grandes bloques de texto como una cadena heredocs que podría tener este aspecto para que pueda almacenar la preocupación de mezclar comillas simples y dobles:

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

Tenga en cuenta que las variables pueden pasarse a una función como una matriz y luego extract()editarse o puede asignarlas de otras maneras. También tenga en cuenta que uso las llaves no porque siempre sean necesarias sino que hacen que el código sea más fácil de leer. (Por supuesto, con funciones como the_content()ser materialmente diferente de get_the_content()WordPress no siempre facilita este estilo de codificación).

Lo que es más, aunque puede no ser relevante para usted es que si uso nombres heredoc como HTML, SQL, etc., entonces mi IDE PhpStorm realiza la inyección de sintaxis y me dará autocompletado y coloración de sintaxis dentro del heredoc.

2.) Concatenación de cadenas usando una matriz

El otro idioma que me gusta usar es recopilar el contenido en una matriz y luego implode()la matriz. Aunque nunca he comparado esto, por lo que podría ser menos útil de lo que supongo, sé que la concatenación repetida de cadenas es mortal porque las cadenas se hacen más grandes (si alguien sabe por qué este enfoque no es mejor o si conoce un enfoque mejor, yo me encantaría escuchar comentarios):

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
fuente

1

+1 para Heredocs, son increíbles, especialmente en esta situación.

— nadie

Realmente no he tenido tiempo de evaluar esto, pero parece ser el enfoque más directo dado lo que necesito.

— Bryan M.

+1 para la concatenación de matriz / cadena. Lo hago mucho. Facilita la construcción de cadenas sin líneas y espacios extraños.

— s_ha_dum

5

Echa un vistazo a esta función para PHP:

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

Puede almacenar en un búfer un archivo incluido que solo contendría código html en una variable php. Esto hará que sea más limpio de mantener.

Entonces terminas con algo como esto:

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

Luego, puede devolver $ includedhtml donde lo necesite y evitará que su contenido html tenga que hacerse eco dentro de las cadenas php.

— Todd Perkins
fuente

4

En realidad no he usado este marco, pero el modelo de plantilla que ofrece probablemente será atractivo. Es posible que desee ver cómo el autor configuró eso.

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

Plantillas ========= Siempre que sea posible, debemos separar PHP de HTML. Dentro de Wordpress, verás los dos mezclados sin aprensión. Si bien esta es a menudo una "forma fácil" de hacer las cosas, casi nunca es la "forma correcta". En cambio, debemos segregar los dos, manteniendo así nuestra lógica pura y nuestras opiniones tontas. Para este propósito tenemos el método $ this-> render ('my-template'). Algunos ejemplos:

    // 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
fuente

Solo está usando el buffer de salida, como lo describe Todd Perkins en su respuesta.

— Ian Dunn

2

Eso depende del tipo de HTML y JS.

JavaScript

En primer lugar, separe las partes dinámicas de las partes estáticas tanto como sea posible. Luego cargue las variables dinámicas que necesite en tiempo de ejecución y ponga en cola sus scripts estáticos en el encabezado (o pie de página, lo que sea). Pero de esta manera, la mayoría de su JS está separada de su PHP.

HTML

Se trata de construir su código limpiamente en PHP. Si tiene enormes fragmentos de HTML que va a reutilizar, los almacenaría como variables separadas. Luego, juntar las cosas cuando se llama al shortcode es tan simple como:

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

En lugar de tratar de construirlo de manera procesal, construya un objeto (sí, PHP admite objetos) que contenga todos sus diferentes bloques HTML, luego instruya cuáles usar y qué datos devolver. Esto le ahorrará enormes cantidades de tiempo.

— EAMann
fuente