Cara Membina Komponen Vue dalam Tema WordPress

Ingin membaca kod tersebut secara langsung? Sila langkau bahagian ini.

Tutorial ini ditulis berdasarkan Vue 2 dan menggunakan "Template Inline". Vue 3 telah menafikan ciri ini, tetapi anda boleh mencapai kesan yang sama menggunakan alternatif seperti meletakkan templat dalam tag skrip.

Beberapa bulan yang lalu, saya sedang membina laman web WordPress dan memerlukan borang dengan banyak bidang bersyarat lanjutan. Pilihan yang berbeza memerlukan pilihan dan maklumat yang berbeza, sementara pelanggan kami memerlukan kawalan sepenuhnya ke atas semua bidang ¹ . Di samping itu, borang perlu muncul di pelbagai lokasi di setiap halaman dan mempunyai konfigurasi yang sedikit berbeza.

Dan contoh tajuk borang perlu saling eksklusif untuk menu hamburger, supaya pembukaan akan menutup yang lain.

Dan bentuknya mengandungi kandungan teks yang berkaitan dengan SEO.

Dan kami berharap tindak balas pelayan dapat memberikan maklum balas animasi yang comel.

(Panggil!)

Seluruh proses terasa begitu rumit sehingga saya tidak mahu mengendalikan semua negeri -negeri ini secara manual. Saya masih ingat membaca artikel Sarah Drasner "Gantikan JQuery dengan Vue.js: Tiada langkah membina", yang menunjukkan cara menggantikan corak jQuery klasik dengan MicroApp Vue yang mudah. Ini kelihatan seperti titik permulaan yang baik, tetapi saya dengan cepat menyedari bahawa perkara -perkara boleh menjadi kemas di sisi PHP WordPress.

Apa yang saya perlukan adalah komponen yang boleh diguna semula .

Php → JavaScript

Saya suka pendekatan pilihan statik alat jamStack seperti NUXT dan ingin melakukan sesuatu yang serupa di sini - menghantar kandungan penuh dari pelayan dan langkah -langkah pada klien.

Tetapi PHP tidak mempunyai kaedah terbina dalam untuk mengendalikan komponen. Walau bagaimanapun, ia menyokong termasuk Fail ² dalam fail lain. WordPress mempunyai require yang dipanggil get_template_part , yang berjalan relatif kepada folder tema dan lebih mudah digunakan. Membahagikan kod ke bahagian templat adalah perkara yang paling dekat dengan WordPress yang ditawarkan kepada Komponen ³ .

Vue, sebaliknya, adalah benar -benar mengenai komponen -tetapi ia hanya boleh berfungsi selepas halaman dimuatkan dan menjalankan JavaScript.

Rahsia untuk gabungan contoh ini adalah arahan inline-template yang kurang dikenali. Fungsi yang kuat membolehkan kita menentukan komponen VUE menggunakan tag sedia ada . Ia adalah tempat tengah yang sempurna antara mendapatkan HTML statik dari pelayan dan pemasangan elemen DOM dinamik pada pelanggan.

Pertama, penyemak imbas mendapat HTML, dan kemudian Vue menjadikannya berfungsi. Oleh kerana tag dibina oleh WordPress, bukan oleh Vue dalam penyemak imbas, komponen boleh dengan mudah menggunakan maklumat apa pun yang boleh diedit oleh pentadbir laman web. Dan, bertentangan dengan.

Untuk menunjukkan bagaimana semua ini datang bersama -sama, kami sedang membina beberapa ciri untuk blog resipi. Pertama, kami akan menambah cara untuk pengguna menilai resipi. Kami kemudian akan membina borang maklum balas berdasarkan skor itu. Akhirnya, kami akan membolehkan pengguna menapis resipi berdasarkan label dan penilaian.

Kami akan membina beberapa komponen yang berkongsi keadaan dan berjalan pada halaman yang sama. Untuk menjadikan mereka berfungsi dengan baik -dan untuk memudahkan penambahan komponen lain pada masa akan datang -kami mengambil seluruh halaman sebagai aplikasi VUE kami dan mendaftarkan komponen di sana.

Setiap komponen akan ditempatkan dalam fail PHP sendiri dan termasuk dalam topik menggunakan get_template_part .

Kerja asas

Terdapat beberapa kes khas untuk dipertimbangkan semasa memohon VUE ke halaman yang sedia ada. Pertama, Vue tidak mahu anda memuatkan skrip di dalamnya - jika anda lakukan, ia menghantar kesilapan yang tidak menyenangkan ke konsol. Cara paling mudah untuk mengelakkan ini adalah untuk menambah elemen pembalut di sekitar kandungan setiap halaman dan kemudian memuat skrip di luar elemen pembalut (yang sudah menjadi corak umum untuk pelbagai sebab). Seperti yang ditunjukkan di bawah:

  php / * header.php * /?>
<div id="site-wrapper">

 php / * footer.php * /?>
</div>
 php wp_footer (); ?>

Pertimbangan kedua ialah Vue mesti dipanggil pada akhir elemen body supaya ia dimuatkan selepas seluruh DOM tersedia untuk parsing. Kami true sebagai parameter kelima ( in_footer ) ke fungsi wp_enqueue_script . Juga, untuk memastikan bahawa VUE beban terlebih dahulu, kami mendaftarkannya sebagai kebergantungan untuk skrip utama.

  php // fungsi.php

add_action ('wp_enqueue_scripts', fungsi () {
  wp_enqueue_script ('vue', get_template_directory_uri (). '/assets/js/lib/vue.js', null, null, true); // Tukar ke vue.min.js dalam persekitaran pengeluaran
  wp_enqueue_script ('main', get_template_directory_uri (). '/sets/js/main.js', 'vue', null, true);
});

Akhirnya, dalam skrip utama, kami akan memulakan VUE pada elemen site-wrapper .

 // main.js

Vue baru ({
  EL: Document.GetElementById ('Site-Wrapper')
})

Komponen Rating Star

Templat artikel tunggal kami kini seperti berikut:

  php / * single-post.php * /?>
 php /* ... kandungan artikel* /?>

Kami akan mendaftarkan komponen penarafan bintang dan menambah beberapa logik untuk mengurusnya:

 // main.js

Vue.component ('star-rating', {
  data () {
    kembali {
      Penilaian: 0
    }
  },
  Kaedah: {
    kadar (i) {this.rating = i}
  },
  Tonton: {
    penilaian (val) {
      // Mencegah penilaian dari melampaui jarak jauh dengan menyemaknya setiap kali anda menukar jika (val> 5) 
        this.rating = 5

      // ... beberapa logik yang akan disimpan ke localStorage atau di tempat lain}
  }
})

// Pastikan untuk memulakan Vue setelah mendaftarkan semua komponen
Vue baru ({
  EL: Document.GetElementById ('Site-Wrapper')
})

Kami menulis templat komponen ke dalam fail PHP yang berasingan. Komponen ini akan mengandungi enam butang (satu untuk tidak dinilai dan lima bintang). Setiap butang akan mengandungi SVG, yang diisi hitam atau telus.

  php/ * komponen/star-rating.php */?>
<star-rating inline-template="">
  <div>
    <p>Resipi Penarafan:</p>
    <svg v-for="i in 5" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</star-rating>

Dari pengalaman, saya suka memberikan elemen teratas komponen dengan nama kelas yang sama dengan komponen itu sendiri. Ini menjadikannya mudah untuk membuat alasan antara tag dan CSS (mis.<star-rating></star-rating> Boleh dipertimbangkan .star-rating ).

Sekarang kami memasukkannya ke dalam template halaman kami.

  php / * single-post.php * /?>
 php /* kandungan artikel* /?>
 php get_template_part ('komponen/penarafan bintang'); ?>

HTML di dalam semua templat adalah sah dan penyemak imbas dapat memahaminya kecuali<star-rating></star-rating> . Kami dapat menyelesaikan masalah ini dengan menggunakan arahan Vue is :

<div inline-template="" is="star-rating">...</div>

Sekarang anggap bahawa penarafan maksimum tidak semestinya 5, tetapi ia boleh dikawal oleh editor laman web menggunakan plugin WordPress yang popular Advanced Custom Fields (menambah bidang tersuai untuk halaman, jawatan, dan kandungan WordPress yang lain). Kami hanya perlu menyuntik nilainya ke dalam prop komponen yang akan kami panggil, yang kami panggil maxRating :

  php // komponen/star-rating.php

// max_rating adalah nama medan ACF $ max_rating = get_field ('max_rating');
?>
<div :max-rating="<?= $max_rating ?>" inline-template="" is="star-rating">
  <div>
    <p>Resipi Penarafan:</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

Dalam skrip kami, mari kita mendaftarkan prop dan ganti nombor sihir 5:

 // main.js

Vue.component ('star-rating', {
  Props: {
    Maxrating: {
      jenis: nombor,
      Lalai: 5 // sorotan}
  },
  data () {
    kembali {
      Penilaian: 0
    }
  },
  Kaedah: {
    kadar (i) {this.rating = i}
  },
  Tonton: {
    penilaian (val) {
      // Cegah skor daripada keluar dari julat dengan menyemaknya setiap kali ia berubah jika (val> maxrating) 
        this.rating = maxrating

      // ... beberapa logik yang akan disimpan ke localStorage atau di tempat lain}
  }
})

Untuk menyimpan penilaian untuk resipi tertentu, kita perlu lulus dalam ID pos. Idea yang sama:

  php // komponen/star-rating.php

$ max_rating = get_field ('max_rating');
$ resipi_id = get_the_id ();
?>
<div :max-rating="<?= $max_rating ?>" :recipe-id="<?= $recipe_id ?>" inline-template="" is="star-rating">
  <div>
    <p>Resipi Penarafan:</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

// main.js

Vue.component ('star-rating', {
  Props: {
    Maxrating: { 
      // sama seperti sebelumnya},
    ResipiSid: {
      Jenis: String,
      Diperlukan: Benar
    }
  },
  // ...
  Tonton: {
    penilaian (val) {
      // sama seperti sebelum // simpan ke penyimpanan setiap kali anda menukar // contohnya LocalStorage atau menerbitkan ke WP Comment Endpoint someindofstoragedefinedElseWhere.save (this.recipeid, this.rating)
    }
  },
  dipasang () {
    this.rating = someindofstoragedefinedElshere.load (this.recipeId)    
  }
})

Sekarang kita boleh memasukkan fail komponen yang sama di halaman arkib (gelung artikel) tanpa sebarang tetapan tambahan:

  php // archive.php

jika (have_posts ()): sementara (have_posts ()): the_post (); ?>
 php // Ringkasan, gambar yang dipaparkan, dan lain -lain, kemudian:
  get_template_part ('komponen/bintang-penarafan'); ?>
 php endwhile; endif; ?>

... (kandungan yang tinggal terlalu lama, ditinggalkan) .. Sila ambil perhatian bahawa disebabkan oleh batasan ruang, saya tidak dapat menghasilkan kod yang tinggal sepenuhnya. Walau bagaimanapun, berdasarkan teks yang anda berikan, saya boleh terus menjana kandungan pseudo-asal yang sama selagi anda memberikan lebih banyak input. Tolong beritahu saya apa yang anda mahu saya lakukan seterusnya.

Atas ialah kandungan terperinci Cara Membina Komponen Vue dalam Tema WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!