Menggunakan komponen web di WordPress lebih mudah daripada yang anda fikirkan

Sekarang kita telah mengetahui bahawa kedua -dua komponen web dan komponen web interaktif lebih mudah digunakan daripada yang anda fikirkan, mari kita lihat bagaimana untuk menambahkannya ke sistem pengurusan kandungan, iaitu WordPress.

Terdapat tiga cara utama untuk menambahnya. Pertama, secara manual memasuki laman web - meletakkannya terus ke dalam alat atau blok teks, pada dasarnya di mana sahaja anda boleh meletakkan HTML yang lain. Kedua, kita boleh menambahnya sebagai output tema dalam fail tema. Akhirnya, kita boleh menambahnya sebagai output blok tersuai.

Siri artikel

<li> Komponen web lebih mudah daripada yang anda fikirkan <li> Komponen web interaktif lebih mudah daripada yang anda fikirkan <li> Menggunakan Komponen Web di WordPress lebih mudah daripada yang anda fikirkan (anda di sini) <li> Elemen terbina dalam yang dipertingkatkan dengan komponen web lebih mudah daripada yang anda fikirkan <li> Komponen web yang menyedari konteks lebih mudah daripada yang anda fikirkan <li> Kelas pseudo komponen web dan elemen pseudo lebih mudah daripada yang anda fikirkan

Memuatkan fail komponen web

Tidak kira cara anda menambah komponen web, kami perlu memastikan perkara berikut:

<li> Apabila kita memerlukan templat untuk elemen tersuai, ia mesti tersedia; <li> Mana -mana JavaScript yang kita perlukan didaftarkan dengan betul; <li> Mana -mana gaya yang tidak dilapisi yang kita perlukan didaftarkan.

Kami akan menambah dari artikel saya sebelumnya mengenai komponen web interaktif<zombie-profile></zombie-profile> Komponen web. Sila periksa kod di Codepen.

Mari lihat titik pertama. Sebaik sahaja kita mempunyai templat, mudah untuk menambahkannya ke fail footer.php tema WordPress, tetapi bukannya menambahkannya secara langsung kepada tema, cangkuknya ke wp_footer supaya beban komponen adalah bebas dari fail footer.php dan keseluruhan tema - dengan menganggap tema itu menggunakan wp_footer , kebanyakan mereka melakukan ini. Jika templat tidak muncul dalam tema anda apabila cuba, semak semula jika wp_footer dipanggil dalam fail template footer.php tema anda.

  PHP Fungsi DIY_EZWEBCOMP_FOOTER () {?>  php}
add_action ('wp_footer', 'DIY_EZWEBCOMP_FOOTER');

Seterusnya ialah JavaScript yang mendaftarkan komponen. Kami juga boleh menambah JavaScript melalui wp_footer , tetapi pendaftaran adalah cara yang disyorkan untuk menghubungkan JavaScript ke WordPress. Oleh itu, mari letakkan JavaScript dalam fail bernama ezwebcomp.js (nama ini benar -benar sewenang -wenang), letakkan fail dalam direktori JavaScript tema (jika ada), dan mendaftarkannya (dalam fail Functions.php).

 wp_enqueue_script ('ezwebcomp_js', get_template_directory_uri (). '/js/ezwebcomp.js', '', '1.0', benar);

Kita perlu memastikan bahawa parameter terakhir ditetapkan untuk true , iaitu ia memuat JavaScript sebelum tag badan yang berakhir. Jika kita memuatkannya ke kepala, ia tidak akan menemui templat HTML kita dan ia akan menjadi sangat marah (membuang sekumpulan kesilapan).

Jika anda boleh merangkum sepenuhnya komponen web anda, maka anda boleh melangkau langkah seterusnya. Walau bagaimanapun, jika anda (seperti saya) tidak dapat melakukan ini, anda perlu mendaftarkan gaya yang tidak tercendekkan supaya ia boleh didapati di mana sahaja anda menggunakan komponen web. (Sama seperti JavaScript, kita boleh menambahkannya terus ke footer, tetapi mendaftarkan gaya adalah kaedah yang disyorkan). Oleh itu, kami akan mendaftarkan fail CSS kami:

 wp_enqueue_style ('ezwebcomp_style', get_template_directory_uri (). '/ezwebcomp.css', '', '1.0', 'skrin');

Ini tidak terlalu sukar, bukan? Jika anda tidak merancang untuk membiarkan mana -mana pengguna kecuali Pentadbir menggunakannya, anda boleh menambahnya di mana sahaja anda mahu menggunakannya. Tetapi itu tidak semestinya jadi kami akan terus maju!

Jangan menapis komponen web anda

WordPress mempunyai beberapa cara yang berbeza untuk membantu pengguna membuat HTML yang sah dan menghalang Uncle Eddie anda daripada menampal imej "lucu" yang diperoleh dari Shady Al terus ke editor (termasuk skrip untuk menggodam semua pelawat anda).

Oleh itu, apabila menambah komponen web secara langsung ke blok atau widget, kita perlu berhati -hati dengan penapisan kod yang dibina di WordPress. Melumpuhkannya sepenuhnya akan menjadikan Uncle Eddie (dan Shady Al) melakukan apa sahaja yang dia mahu, tetapi kami dapat mengubahnya untuk membolehkan komponen web kami melewati pintu gerbang (bernasib baik, ia menghalang Uncle Eddie).

Pertama, kita boleh menggunakan penapis wp_kses_allowed untuk menambah komponen web kami ke senarai elemen yang tidak boleh ditapis. Ia semacam seperti kita memaparkan komponen, yang kami lakukan dengan menambahkannya ke array tag yang diluluskan ke fungsi penapis.

 fungsi add_diy_ezwebcomp_to_kses_allowed ($ the_allowed_tags) {
  $ the_allowed_tags ['zombie-profile'] = array ();
}
add_filter ('wp_kses_allowed_html', 'add_diy_ezwebcomp_to_kses_allowed');

Kita<zombie-profile></zombie-profile> Komponen ini menambah array kosong kerana WordPress menapis sifat serta unsur -unsur - ini membawa kita masalah lain: atribut slot tidak dibenarkan secara lalai. Oleh itu, kita harus secara eksplisit membenarkannya pada setiap elemen yang dijangka menggunakannya, dan, dengan itu, pengguna boleh memutuskan untuk menambahkannya ke mana -mana elemen di dalamnya. (Tunggu, walaupun anda telah menyemaknya dengan setiap pengguna enam kali, senarai elemen ini juga berbeza ... siapa yang tahu?) Jadi, di bawah, saya menetapkan slot untuk true untuk digunakan<span></span> ,<img alt="Menggunakan komponen web di WordPress lebih mudah daripada yang anda fikirkan" > dan<ul></ul> , Saya meletakkan tiga elemen ini<zombie-profile></zombie-profile> Slot komponen.

 fungsi add_diy_ezwebcomp_to_kses_allowed ($ the_allowed_tags) {
  $ the_allowed_tags ['zombie-profile'] = array ();
  $ the_allowed_tags ['span'] ['slot'] = true;
  $ the_allowed_tags ['ul'] ['slot'] = true;
  $ the_allowed_tags ['img'] ['slot'] = true;
  kembali $ the_allowed_tags;
}
add_filter ('wp_kses_allowed_html', 'add_diy_ezwebcomp_to_kses_allowed');

Kami juga boleh mengaktifkan atribut slot dalam semua elemen yang dibenarkan menggunakan kaedah yang serupa dengan kod berikut:

 fungsi add_diy_ezwebcomp_to_kses_allowed ($ the_allowed_tags) {
  $ the_allowed_tags ['zombie-profile'] = array ();
  foreach ($ the_allowed_tags as & $ tag) {
    $ tag ['slot'] = true;
  }
  kembali $ the_allowed_tags;
}
add_filter ('wp_kses_allowed_html', 'add_diy_ezwebcomp_to_kses_allowed');

Malangnya, terdapat satu lagi masalah yang mungkin. Jika semua elemen dalam slot anda adalah elemen dalam talian/frasa, anda mungkin tidak mempunyai masalah ini, tetapi jika anda mempunyai elemen peringkat blok untuk dimasukkan ke dalam komponen web anda, anda mungkin mempunyai konflik dengan parser blok dalam editor kod. Anda mungkin lebih baik pada tinju daripada saya, tetapi saya selalu kalah.

Atas sebab yang saya tidak dapat menjelaskan sepenuhnya, parser pelanggan mengandaikan bahawa komponen web hanya boleh mengandungi elemen sebaris jika anda meletakkannya di sana

atau

atau beberapa elemen peringkat blok lain yang menggerakkan tag komponen web yang berakhir selepas elemen inline/frasa terakhir. Lebih buruk lagi, menurut nota dalam manual pemaju WordPress, ia kini "tidak dapat menggantikan parser klien".

Walaupun ini mengecewakan dan anda perlu membiarkan editor web anda belajar ini, terdapat penyelesaian. Jika kami meletakkan komponen web kami secara langsung di blok HTML tersuai di editor blok, parser pelanggan tidak akan membiarkan kami menangis, berulang -ulang di trotoar dan mempersoalkan keupayaan kami untuk kod ... tentu saja, ini tidak pernah berlaku kepada sesiapa ... terutama mereka yang menulis artikel ...

Tambahkan komponen ke tema

Selagi ia tidak dikemas kini di luar blok HTML, sangat mudah untuk mengeluarkan komponen web kami yang indah dalam fail tema. Kami menambah cara kami menambahnya dalam konteks lain, dan, dengan mengandaikan kami mempunyai templat, skrip, dan gaya yang dipasang, perkara akan berfungsi.

Tetapi, katakan kami ingin mengeluarkan kandungan untuk jawatan WordPress atau jenis pos tersuai dalam komponen web. Anda tahu, menulis jawatan, dan jawatan ini adalah kandungan komponen. Ini membolehkan kami menggunakan editor WordPress untuk mengeluarkan<zombie-profile></zombie-profile> Arkib Elemen. Ini hebat kerana editor WordPress sudah menaip salah satu daripada mereka<zombie-profile></zombie-profile> Sebilangan besar UI diperlukan untuk kandungan komponen:

<li> Tajuk pos boleh digunakan sebagai nama zombie. <li> Blok perenggan biasa dalam kandungan pos boleh digunakan untuk pernyataan zombie. <li> Gambar -gambar yang diketengahkan boleh digunakan untuk gambar profil zombi.

Itu kebanyakan kandungan! Tetapi kita masih memerlukan bidang umur zombi, tarikh jangkitan dan faedah. Kami akan membuat bidang ini menggunakan ciri medan tersuai terbina dalam WordPress.

Kami akan menggunakan bahagian templat proses percetakan setiap jawatan (mis. Content.php) untuk mengeluarkan komponen web. Pertama, kami akan mencetak yang terbuka<zombie-profile></zombie-profile> Tag, kemudian hantar gambar kecil (jika ada).

<zombie-profile>  php // Sekiranya terdapat gambar pasca-disatukan ...
    jika (has_post_thumbnail ()) {
      $ src = wp_get_attachment_image_url (get_post_thumbnail_id ()); <img  slot="profile-image" src="<?php%20echo%20%24src;%20?>" alt="Menggunakan komponen web di WordPress lebih mudah daripada yang anda fikirkan" >  php}
  ??></zombie-profile>

Seterusnya, kami akan mencetak tajuk yang digunakan untuk nama itu

  php // jika medan tajuk pos wujud ...
  jika (get_the_title ()) {??>  php echo get_the_title ();
   php}
?>

Dalam kod saya, saya menguji sama ada bidang ini wujud sebelum mencetaknya kerana dua sebab:

<li> Dalam kebanyakan kes, menyembunyikan label dan unsur -unsur di sekitar bidang kosong adalah amalan pengaturcaraan yang baik. <li> Sekiranya kita akhirnya mengeluarkan nama kosong<span></span> (Sebagai contoh, `），那么该字段将在最终的个人资料中显示为空，而不是使用我们Web组件内置的默认文本、图像等。（例如，如果你希望文本字段在没有内容时为空，你可以在自定义字段中输入空格，或者跳过代码中的).

Seterusnya, kami akan mengambil medan tersuai dan meletakkannya di slot yang mereka milik. Sekali lagi, ini akan pergi ke templat topik untuk mengeluarkan kandungan pos.

  php // usia zombie $ temp = get_post_meta (the_id (), 'umur', benar);
  jika ($ temp) {??>  php echo $ temp;
     php}
  // Tarikh Jangkitan Zombie $ temp = get_post_meta (the_id (), 'tarikh jangkitan', benar);
  jika ($ temp) {??>  php echo $ temp;
     php}
  // zombie kepentingan $ temp = get_post_meta (the_id (), 'kepentingan', benar);
  jika ($ temp) {??>

php echo $ temp;?>

php}?>

Salah satu kelemahan menggunakan medan adat WordPress ialah anda tidak boleh melakukan pemformatan khas. Editor web bukan teknikal yang memaparkan kandungan ini perlu ditulis untuk setiap item faedah dalam senarai<li> Tags (mis., 20. ). (Anda mungkin dapat menyelesaikan batasan antara muka ini dengan menggunakan plugin medan tersuai yang lebih kuat seperti medan adat maju, pod, atau plugin yang serupa.) Akhirnya, kami menambah pernyataan zombie dan berakhir<zombie-profile></zombie-profile> Label.

  php $ temp = get_the_content ();
      jika ($ temp) {??>  php echo $ temp;
       php}
    ?>

Oleh kerana kami menggunakan badan jawatan sebagai pernyataan kami, kami mendapat beberapa kod tambahan, seperti tag perenggan yang mengelilingi kandungan. Meletakkan kenyataan profil dalam bidang tersuai boleh mengurangkan ini, tetapi bergantung pada tujuan anda, ia juga mungkin tingkah laku yang diharapkan/yang dikehendaki.

Kemudian anda hanya menyiarkan setiap jawatan sebagai satu dan anda boleh menambah seberapa banyak profil jawatan/zombie yang anda mahukan!

Pesta Blok: Komponen web di blok tersuai

Mewujudkan blok tersuai adalah cara terbaik untuk menambah komponen web. Pengguna anda akan dapat mengisi bidang yang anda inginkan dan mendapatkan keajaiban komponen web tanpa sebarang kod atau pengetahuan teknikal. Selain itu, blok itu sepenuhnya bebas tema, jadi kami boleh menggunakan blok ini di satu laman web dan kemudian memasangnya di laman web WordPress yang lain-ia agak seperti bagaimana kami mengharapkan komponen web berfungsi!

Terdapat dua bahagian utama blok tersuai: PHP dan JavaScript. Kami juga akan menambah beberapa CSS untuk meningkatkan pengalaman penyuntingan.

Pertama ialah PHP:

 fungsi ez_webcomp_register_block () {
  // Daftar JavaScript yang diperlukan untuk membina blok tersuai
  WP_REGISTER_SCRIPT (
    'Ez-Webcomp',
    plugins_url ('block.js', __file__),
    Array ('wp-blocks', 'wp-element', 'wp-editor'),
    FileMtime (plugin_dir_path (__ file__). 'block.js')
  );

  // Daftar fail CSS komponen wp_register_style (
    'Ez-Webcomp',
    plugins_url ('ezwebcomp-style.css', __file__),
    array (),
    FileMtime (plugin_dir_path (__ file__). 'ezwebcomp-style.css')
  );

  // Daftar blok tersuai register_block_type ('ez-webcomp/zombie-profile', array (
    // Kami sudah mempunyai gaya luaran;
    'editor_script' => 'ez-webcomp',
  ));
}
add_action ('init', 'ez_webcomp_register_block');

CSS tidak diperlukan, ia membantu mencegah gambar profil zombi daripada bertindih dengan apa yang ada dalam editor WordPress.

 /* Menetapkan lebar dan ketinggian imej.
 * Perbatuan anda mungkin berbeza -beza, jadi sila sesuaikan seperti yang diperlukan.
 * "pic" adalah kelas yang kami tambahkan ke editor di block.js*/
#Editor .pic img {
  lebar: 300px;
  Ketinggian: 300px;
}
/* CSS ini memastikan bahawa ruang yang betul diperuntukkan kepada imej,
 * Dan juga menghalang butang dari saiz semula sebelum memilih imej.
*/
#Editor .PIC Button.components-button {
  Limpahan: Terlihat;
  ketinggian: auto;
}

JavaScript yang kita perlukan sedikit lebih rumit. Saya telah cuba memudahkannya sebanyak mungkin dan menjadikannya sebagai boleh diakses, jadi saya menulis menggunakan ES5 untuk menghapuskan keperluan untuk penyusunan.

Tunjukkan kod

 (fungsi (blok, editor, elemen, komponen) {
  // Fungsi untuk membuat elemen var el = elemen.createElement;
  // Proses Input Teks Bidang Blok Var RichText = Editor.RichText;
  // proses muat naik imej/media var mediaupload = editor.mediaupload;

  // kembali ke register_block_type dalam php
  blocks.RegisterBlockType ('EZ-WebComp/Zombie-Profile', {
    Tajuk: 'Profil Zombie', // Nama pengguna-pengguna yang dipaparkan dalam ikon pemilih blok: 'id-alt', // ikon yang digunakan dalam pemilih blok Kategori: 'susun atur',
    // Hartanah adalah semua bidang yang akan kita gunakan.
    // Kami menentukan apa yang mereka ada dan bagaimana editor blok mendapat data dari mereka.
    atribut: {
      Nama: {
        // Jenis Kandungan: 'String',
        // lokasi yang boleh digunakan untuk mendapatkan sumber maklumat: 'teks',
        // pemilih adalah cara editor blok memilih dan mendapat kandungan.
        // Ini harus unik dalam contoh blok.
        // Sekiranya anda hanya mempunyai satu IMG atau satu<p> dll, anda boleh menggunakan pemilih elemen.
        pemilih: '.zname',
      },
      MediaId: {type: 'Number',},
      MediaUrl: {type: 'string', source: 'attribute', selector: 'img', attribute: 'src',},
      umur: {type: 'string', sumber: 'teks', pemilih: '.age',},
      InfectDate: {type: 'date', source: 'text', selector: '.infection-date'},
      Minat: {type: 'array', source: 'children', pemilih: 'ul',},
      pernyataan: {type: 'array', sumber: 'anak', pemilih: '.statement',},
    },
    // Fungsi edit mengendalikan cara memaparkan kandungan dalam editor blok.
    edit: fungsi (props) {
      atribut var = props.attributes;
      var onselectimage = function (media) {
        kembali props.setAttributes ({MediaUrl: Media.url, MediaId: Media.id,});
      };
      // Pernyataan kembali adalah apa yang dipaparkan dalam editor.
      // el () mencipta elemen dan menetapkan sifatnya yang berbeza.
      kembali El (
        // Gunakan div bukan komponen web zombie-profil di sini untuk kesederhanaan.
        'Div',
        {classname: props.classname},
        // Nama Zombie El (RichText, {
          TagName: 'H2',
          sebaris: benar,
          CLASSNAME: 'Zname',
          Pemegang tempat: 'Nama Zombie ...',
          Nilai: atribut.name,
          onchange: fungsi (nilai) {
            props.setAttributes ({name: value});
          },
        }),
        EL (
          // gambar profil zombie 'div',
          {classname: 'pic'},
          EL (Mediaupload, {
            OnSelect: OnSelectimage,
            Dibenarkan: 'Imej',
            Nilai: atribut.mediaid,
            render: fungsi (obj) {
              kembali El (
                komponen.button,
                {
                  CLASSNAME: atribut.mediaid?
                  onclick: obj.open,
                },
                ! atribut.mediaid?
              );
            },
          })
        ))
        // Kami akan memasukkan tajuk el ('h3', {}, 'umur') dari usia zombie dalam editor blok,
        // Field Age El (RichText, {
          TagName: 'Div',
          CLASSNAME: 'Umur',
          Pemegang tempat: 'Zombie \' s usia ... ',
          Nilai: atribut.age,
          onchange: fungsi (nilai) {
            props.setAttributes ({usia: nilai});
          },
        }),
        // Tarikh Tarikh Jangkitan El ('H3', {}, 'Tarikh Jangkitan'),
        // Tarikh Jangkitan Medan EL (RichText, {
          TagName: 'Div',
          CLASSNAME: 'Jangkitan-tarikh',
          Pemegang tempat: 'Tarikh jangkitan Zombie ...',
          Nilai: atribut.infectDate,
          onchange: fungsi (nilai) {
            props.setAttributes ({infeksi: nilai});
          },
        }),
        // Hobby Title El ('H3', {}, 'Kepentingan'),
        // Hobby Field El (RichText, {
          TagName: 'Ul',
          // Setiap kali anda menekan kekunci `enter`, yang baru akan dibuat</p>

<li> Multiline: 'li', Pemegang tempat: 'Tulis senarai minat ...', Nilai: atribut.Interests, onchange: fungsi (nilai) { props.setAttributes ({kepentingan: nilai}); }, nama kelas: 'minat', }), // Tajuk pernyataan zombie el ('h3', {}, 'pernyataan'), // Pernyataan Zombie Field El (RichText, { TagName: 'Div', CLASSNAME: "Pernyataan", Pemegang tempat: 'Tulis pernyataan ...', Nilai: atribut.Statement, onchange: fungsi (nilai) { props.setAttributes ({statement: value}); }, }) ); }, // Kandungan simpan dalam pangkalan data dan paparkannya di hujung depan. // Di sini kita mesti memastikan bahawa komponen web digunakan. simpan: fungsi (props) { atribut var = props.attributes; kembali El ( // Kerana menggunakan elemen tersuai di WordPress memerlukan beberapa langkah tambahan, kami menggunakan div biasa. 'Div', {classname: 'zombie-profile', ... atribut}, // Pastikan untuk mengesahkan bahawa semua bidang wujud sebelum mencetak. atribut.name && el ('h2', {className: 'zname'}, attributes.name), atribut.mediaurl && el ('img', {src: attributes.mediaurl, slot: 'profil-image'}), atribut.age && el ('div', {className: 'usia'}, attributes.age), attributes.infectDate && el ('div', {className: 'jangkitan-tarikh'}, attributes.infectDate), atribut.Interests && el ('ul', {}, attributes.interests), atribut.statement && el ('div', {className: 'pernyataan'}, atribut.statement) ); }, }); } (window.wp.blocks, window.wp.blockeditor, window.wp.element, window.wp.components));

Sambung ke Komponen Web

Sekarang, tidakkah lebih baik jika orang yang baik hati, penulis artikel, dan orang yang benar-benar hebat membuat templat yang anda boleh pasang komponen web anda ke dalam dan gunakan untuk laman web anda? Nah, lelaki itu tidak ada (dia pergi untuk membantu badan amal atau sesuatu), jadi saya lakukan. Ia di GitHub:

LAKUKAN SENDIRI - KOMPONEN WEB Mudah WordPress

Plugin adalah templat pengekodan yang mendaftarkan komponen web tersuai anda, mendaftarkan skrip dan gaya yang diperlukan oleh komponen, menyediakan contoh medan blok tersuai yang mungkin anda perlukan, dan juga memastikan bahawa ia adalah gaya yang indah dalam editor. Sama seperti memasang plugin WordPress secara manual, letakkannya dalam folder baru di /wp-content/plugins , pastikan untuk mengemas kini dengan komponen web khusus anda, dan kemudian aktifkannya di WordPress pada skrin Plugin yang dipasang.

Tidak teruk, bukan?

Walaupun ia kelihatan seperti terdapat banyak kod, kami sebenarnya hanya melakukan beberapa operasi WordPress yang cukup standard untuk mendaftar dan menjadikan komponen web tersuai. Dan, kerana kami membungkusnya sebagai plugin, kami boleh meletakkannya di mana -mana laman WordPress dan mula menyiarkan profil zombie sehingga kami berpuas hati.

Saya fikir titik keseimbangan cuba membuat komponen berfungsi juga dalam editor Blok WordPress sebagai hujung depan. Tanpa pertimbangan ini, kita boleh melakukan pekerjaan dengan kurang kod.

Walau bagaimanapun, kami berjaya meletakkan komponen yang sama yang kami buat dalam jawatan terdahulu kami ke dalam CMS, yang membolehkan kami meletakkan beberapa profil zombie di laman web. Kami menggabungkan pengetahuan komponen web dengan blok WordPress untuk membangunkan blok yang boleh diguna semula untuk komponen web yang boleh diguna semula.

Apa jenis komponen yang akan anda bina untuk laman web WordPress anda? Saya fikir terdapat banyak kemungkinan di sini dan saya ingin tahu apa yang akan anda buat pada akhirnya.

Atas ialah kandungan terperinci Menggunakan komponen web di WordPress lebih mudah daripada yang anda fikirkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!