berurusan dengan output HTML besar melalui kode plugin

9

Baru-baru ini saya menulis plugin WP pertama saya yang menambahkan kode pendek untuk menyematkan galeri gambar jquery kustom ke dalam posting. Ini terutama hanya membuang sebagian besar HTML ke dalam posting, bersama dengan javascript yang diperlukan untuk inisialisasi.

Namun, saya harus membangun output HTML secara prosedural, sebagai string dalam PHP. Sup tag semacam ini selalu membuat saya gila, dan saya terbiasa bekerja dengan kerangka kerja MVC yang menyediakan hal-hal seperti fungsi pembantu dan template parsial untuk menghasilkan HTML.

Apa pendekatan umum untuk pembuat plugin yang perlu mengelola sejumlah besar HTML atau JS yang dibangun secara dinamis?

plugins html plugin-development Bryan M.
sumber

Jawaban:

12

@Byran M. Saya cenderung menggunakan dua konstruksi. Saya tidak sering melihat pengembang WordPress lainnya sering menggunakan, yang mengejutkan saya, tapi saya sangat menyukainya.

1.) Heredocs

Anda dapat menyimpan blok teks besar sebagai string heredocs yang mungkin terlihat seperti ini sehingga saya dapat menyimpan kekhawatiran tentang pencampuran kutipan tunggal dan ganda:

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

Perhatikan bahwa variabel mungkin diteruskan ke fungsi sebagai array dan kemudian extract()diedit atau Anda dapat menetapkannya dengan cara lain. Perhatikan juga bahwa saya menggunakan kawat gigi bukan karena selalu diperlukan tetapi mereka membuat kode lebih mudah dibaca. (Tentu saja dengan fungsi seperti the_content()berbeda secara materi dari get_the_content()WordPress tidak selalu membuat gaya pengkodean ini mudah.)

Terlebih lagi, meskipun mungkin tidak relevan bagi Anda adalah jika saya menggunakan nama heredoc seperti HTML, SQL, dll. Maka IDE PhpStorm saya melakukan injeksi sintaks dan akan memberi saya pewarnaan autocomplete dan sintaks dalam heredoc.

2.) String Concatenation menggunakan Array

Idiom lain yang saya suka gunakan adalah mengumpulkan konten ke dalam array dan kemudian implode()array. Meskipun saya tidak pernah membandingkan ini sehingga bisa kurang membantu daripada saya berasumsi saya tahu bahwa rangkaian string berulang adalah pembunuh ketika string semakin besar (jika ada yang tahu mengapa pendekatan ini tidak lebih baik atau jika Anda tahu pendekatan yang lebih baik ingin mendengar umpan balik):

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
sumber
1
+1 untuk Heredocs, sangat mengagumkan, terutama dalam situasi ini.
tidak ada yang
Belum benar-benar punya waktu untuk mengevaluasi ini, tetapi sepertinya pendekatan yang paling mudah diberikan apa yang saya butuhkan.
Bryan M.
+1 untuk penggabungan array / string. Saya sering melakukan itu. Itu membuatnya mudah untuk membangun string tanpa baris dan ruang baru yang tidak ada.
s_ha_dum
5

Periksa fungsi ini untuk PHP:

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

Anda dapat buffer file yang disertakan yang hanya akan berisi kode html di dalamnya, ke dalam variabel php. Ini akan membuatnya lebih bersih untuk dirawat.

Jadi Anda berakhir dengan sesuatu seperti ini:

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

Kemudian Anda bisa mengembalikan $ Includedhtml di mana Anda membutuhkannya dan itu membuat konten html Anda terpisah dari keharusan untuk menggema semuanya di dalam string php.

Todd Perkins
sumber
4

Saya belum benar-benar menggunakan kerangka kerja ini, tetapi model template yang ditawarkannya mungkin akan menarik. Anda mungkin ingin melihat bagaimana penulis mengaturnya.

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

Templat ========= Jika memungkinkan, kita harus memisahkan PHP dari HTML. Di dalam Wordpress, Anda akan melihat keduanya bercampur tanpa rasa takut. Meskipun ini sering merupakan "cara mudah" dalam melakukan sesuatu, itu hampir tidak pernah merupakan "cara yang benar." Sebaliknya, kita harus memisahkan keduanya, sehingga menjaga logika kita murni dan pandangan kita bodoh. Untuk tujuan ini, kami memiliki metode $ this-> render ('my-template'). Beberapa contoh:

    // 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
sumber
Itu hanya menggunakan buffering output, seperti yang dijelaskan Todd Perkins dalam jawabannya.
Ian Dunn
2

Itu tergantung pada jenis HTML dan JS.

JavaScript

Pertama-tama, pisahkan bagian dinamis dari bagian statis sebanyak mungkin. Kemudian muat variabel dinamis apa pun yang Anda butuhkan saat runtime dan antri skrip statis Anda di header (atau footer, apa pun). Tetapi dengan cara ini, sebagian besar JS Anda terpisah dari PHP Anda.

HTML

Ini adalah masalah membangun kode Anda secara bersih di PHP. Jika Anda memiliki potongan besar HTML yang akan Anda gunakan kembali, saya akan menyimpannya sebagai variabel terpisah. Kemudian, menyatukan berbagai hal ketika kode pendek dipanggil sesederhana:

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

Alih-alih mencoba membangunnya secara prosedural, buatlah sebuah objek (ya, PHP mendukung objek) yang berisi semua blok HTML Anda yang berbeda, lalu instruksikan yang mana yang akan digunakan dan data mana yang akan dikembalikan. Ini akan menghemat banyak waktu.

EAMann
sumber