Vue 2 ile bir WordPress Eklentisi Oluşturun

Bu blogda Vue JS ile oynamayalı uzun zaman oldu, o halde neden WordPress için Vue ile basit bir yoklama eklentisi oluşturmaya başlayabileceğimize yeni başlayanlara odaklı bir göz atmıyoruz.

Neden Vue? Vue, tam gelişmiş tek sayfalı uygulamalar için kullanılmak üzere ölçeklenebilir, ancak geçmişte jQuery kullanmış olabileceğiniz sitelere, sayfalara veya eklentilere küçük etkileşimler eklemek için de kullanabilirsiniz. Vue burada harika bir seçenek çünkü etkileşim eklemenin hızlı ve kolay bir yolu ve oldukça düşük ek yük ile tabloya reaktivite ve bileşen tabanlı mimari getirerek geliştirme sürecini gerçekten kolaylaştırıyor.

Neden bir anket eklentisi? WordPress için çok sayıda yoklama eklentisi var, çoğu ücretsiz ve çoğu bugün oluşturacağımızdan daha iyi olacak, ancak mevcut anket eklentileri teklifinde eksik olan bir şey var: hiçbiri değil polka temalı…

Kurulum

Sanırım bunun bir WordPress eklentisi olmasını istiyorsak, biraz PHP yazmamız gerekecek, o yüzden bunu aradan çıkaralım. Buradaki amacım, aslında mümkün olduğu kadar az PHP yazmak ve Vue.js ile mümkün olduğu kadar çok işlem yapmak.

Bir kısa kodu işlememize izin veren bir eklenti için minimum minimum değerle başlayacağız:

 <?php /* Plugin Name: Pollka King Description: Live-updating polls for your WordPress website Version: 0.1 Author: Jeffrey Gould Author URI: https://jrgould.com */ if ( ! class_exists( 'PollkaKing' ) ) { class PollkaKing { private $shortcode_name = 'pollka'; public function register() { add_shortcode( $this->shortcode_name, [$this, 'shortcode'] ); add_action( 'wp_enqueue_scripts', [$this, 'scripts'] ); } public function shortcode( $atts ) { return "loading poll..."; } public function scripts() { global $post; // Only enqueue scripts if we're displaying a post that contains the shortcode if( has_shortcode( $post->post_content, $this->shortcode_name ) ) { wp_enqueue_script( 'vue', 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js', [], '2.5.16' ); wp_enqueue_script( 'pollka-king', plugin_dir_url( __FILE__ ) . 'js/pollka-king.js', [], '0.1', true ); wp_enqueue_style( 'pollka-king', plugin_dir_url( __FILE__ ) . 'css/pollka-king.css', [], '0.1' ); } } } (new PollkaKing())->register(); }

Açıkçası, eklenti Pollka King olarak adlandırılıyor ve [pollka] etkinleştiriyor. Şu anda bu kısa kod sadece “anket yükleniyor…” metnine dönüştürülecek. Ek olarak, cdnjs.com'dan Vue'yu, bir css dosyasını (takip ediyorsanız indirebileceğiniz) ve tüm JavaScript'imizi pollka-king.js adlı bir komut dosyasını sıkıştırıyoruz.

Kısa Kodla Başlamak

Ardından, kısa kodumuzu nasıl kullanmak istediğimizi tanımlayabilir ve ardından bunu kısa kodu gerçekten işlemek için kılavuzumuz olarak kullanabiliriz. İşte sonunda yeni bir anket oluşturmak için editöre yazabilmek istediğim şey: (okunabilirlik için yeni satırlar eklendi):

 [pollka question="How much do you like polka?" answer-1="Strike up the music, I love polka!" answer-2="Polka is lit, fam" answer-3="I guess polka is amazing..." answer-4="Frankie Yankovic is my hero." ]

Bu kısa koda dayanarak, $atts bağımsız değişkeninden tüm bu öznitelikleri çıkarmak için shortcode() yöntemimizi güncellememiz ve Vue'nun devralmasına izin vermeden önce bazı işlemler yapmamız gerekecek gibi görünüyor.

Yapmak isteyeceğimiz ilk şey, anketimizi veritabanına kaydettiğimizde bir HTML niteliği olarak veya bir anahtar olarak kullanılabilecek şekilde id niteliğini sterilize etmektir:

 $id = sanitize_title_with_dashes( $atts['id'], '', 'save' );

Ardından, tüm bu answer-n niteliklerini bir diziye dönüştürmek isteyeceğiz, böylece daha kolay yinelenebilirler:

 $answers = []; foreach ( $atts as $key => $val ) { if ( strstr( $key, 'answer-' ) ) { $answers[ str_replace( 'answer-', '', $key ) ] = $val; } }

Son olarak, tüm bu verileri JavaScript'imize iletmek isteyeceğiz. Bir sayfada birden fazla ankete sahip olabileceğimizden emin olmak isteyeceğiz, böylece bu veriler değişkenlere doldurulmuş olarak bir komut dosyası etiketi çıktısı alamayacağız. Bunun yerine, bir HTML öğesi oluşturacağız ve bu verileri, biraz sonra JS tarafında erişebileceğimiz nitelikler olarak ekleyeceğiz.

Önce bir HTML niteliğine yapıştırabileceğimiz bir JSON nesnesi oluşturalım:

 $vue_atts = esc_attr( json_encode( [ 'id' => $id, 'question' => $atts['question'], 'answers' => $answers, ] ) );

Ardından, öznitelik olarak eklenen bu verilerle bir div çıktısı almak için yöntemimizi güncelleyeceğiz:

 return "<div data-pk-atts='{$vue_atts}'>loading poll...</div>";

İşte biraz yeniden düzenlemeden sonra güncellenmiş shortcode() yöntemimiz:

 public function shortcode( $atts ) { $id = sanitize_title_with_dashes( $atts['id'], '', 'save' ); $answers = []; foreach ( $atts as $key => $val ) { if( strstr( $key, 'answer-' ) ) { $answers[ str_replace( 'answer-', '', $key ) ] = $val; } } $vue_atts = esc_attr( json_encode( [ 'id' => $id, 'question' => $atts['question'], 'answers' => $answers, ] ) ); return "<div data-pk-atts='{$vue_atts}'>loading poll...</div>"; }

Anketleri Başlatma

Artık gerekli HTML çıktısını almak için kısa kodumuzu ayarladık, bir CDN'den Vue'yu kuyruğa alıyoruz ve boş pollka-king.js dosyamızı kuyruğa alıyoruz – biraz JavaScript yazmaya başlamaya hazırız gibi görünüyor . Yapmak isteyeceğimiz ilk şey, kısa kodumuzun sayfada oluşturduğu div'i bulmaktır ve bunu vanilya js™ ile querySelectorAll() kullanarak yapabiliriz:

 var elements = document.querySelectorAll('[data-pk-atts]');

Bu bize data-pk-atts özniteliğimizi içeren herhangi bir div öğesinin bir dizisine çok benzeyen bir JavaScript NodeList verecektir. Aynı sayfada birden fazla anketin görünmesini istediğimiz için, bu NodeList üzerinde dolaşabilir ve her birinde bulduğumuz Vue tabanlı sihri çalıştırabiliriz.

Döngümüzü oluşturalım ve ayrıca data-pk-atts özniteliğimizden JSON'u alıp JavaScript Nesnesi olarak kullanılabilecek şekilde ayrıştıralım:

 elements.forEach( function( element ) { var atts = JSON.parse( element.getAttribute('data-pk-atts') ); // Do something with this element and its `atts` });

Vue, Baştan

Vue hakkında sevdiğim şeylerden biri ne kadar esnek olduğu. Vue, tek dosya bileşenleri ( .vue dosyaları) için oluşturma araçlarıyla tamamlanmış yeni bir Vue uygulamasının iskeletini oluşturmak için kullanılabilen bir komut satırı aracına (vue-cli) sahip olsa da, herhangi bir mevcut sayfaya veya siteye kolayca eklenebilir. herhangi bir alet. Vue ile oluşturmanın tercih edilen yolu olan tek dosya bileşeni deyimini kullanamayacağız, ancak aynı zamanda karmaşık tek sayfalık bir uygulama yazmayacağız, bu nedenle bir CDN'den Vue'yu eklemek yeterince kolay ve bazı düz eski JavaScript yazmaya başlayın. O halde ona geçelim:

Kısa kodlarımızın oluşturduğu div'leri yoklamalara dönüştürmek için yapmamız gereken bir sonraki şey, her birinin yerine bir Vue örneği başlatmak ve atts nesnesini Vue örneği içinde kullanılabilir hale getirmektir. Bu çok fazla örnek/nesne konuşması gibi görünebilir, ancak aslında oldukça basit olmalıdır. Hadi bir bakalım:

 elements.forEach( function( element ) { var atts = JSON.parse( element.getAttribute('data-pk-atts') ); // Do something with this element and its `atts` var vm = new Vue({ el: element, created: function() { this.atts = atts; } } ); });

Burada, geçerli element yaşayacak yeni bir Vue örneği oluşturuyoruz. Ayrıca, geçerli örneğe atts nesnesini eklemek için Vue'nun created yaşam döngüsü yöntemini kullanıyoruz. Bunun için de Vue'nun data nesnesini kullanabilirdik, ancak bu bilginin reaktif olması gerekmiyor ve kodda statik ve reaktif özellikler arasında net bir ayrım oluşturmayı seviyorum.

Daha sonra Vue'ya div yer tutucumuzun yerini alacak bir şey sağlamamız gerekecek. Şimdilik .pk-container sınıfına sahip yeni bir div ekleyelim ve her şeyin çalıştığından emin olmak için question görüntüleyeceğiz. Bu fazla HTML olmayacağından ve işleri basit tutmaya çalıştığımızdan, yeni Vue nesnemize bir template özelliği ekleyebilir ve onu dize tabanlı bir şablonla doldurabiliriz:

 var vm = new Vue({ el: element, created: function() { this.atts = atts; }, template: '<div class="pk-container">{{atts.question}}</div>' } );

Her şey yolunda giderse, bu kısa kodu eklediğimiz her yerde sorumuzun görüntülendiğini görmeliyiz:

birleştirmek

Her şeyi ana Vue örneğinde yapmak yerine, bunu daha küçük bileşenlere bölmek mantıklıdır – biri anketi diğeri sonuçları görüntülemek için. Ankete, bizim atts olan 1 özniteliği kabul edecek pk-poll diyeceğimiz yeni bir Vue bileşeni oluşturarak başlayacağız. Mevcut `{{atts.question}} yer tutucusunu kaldıralım ve şimdi oluşturmak üzere olduğumuz bileşeni şablonumuza ekleyelim.

 template: '<div class="pk-container">\ \<pk-poll :atts="atts" />\ </div>',

Herhangi bir fantezi oluşturma aracı kullanmadığımız için, pollka-king.js dosyasına ekleyebiliriz ve özel olarak yapmamız gereken tek şey, bileşenimizi kullanmadan önce tanımladığımızdan emin olmaktır. Öğelerimizde Vue'yu başlatmadan önce bunu dosyanın en üstüne ekleyeceğiz:

 var pkPoll = Vue.component('pk-poll',{ props: ['atts'], data: function() { return { selectedAnswer: null, } }, });

Gördüğünüz gibi, hala işleri çok basit tutuyoruz, bu sadece pk-poll bileşenimizi oluşturuyor, atts kabul ediyor ve ayrıca bir kullanıcının hangi cevabı seçtiğini izlemek için kullanacağımız selectedAnswer adlı bir reaktif veri özelliğini tanımlıyor. Daha sonra, bu bileşen için, tıpkı ana Vue örneği için yaptığımız gibi yapacağımız bir şablon oluşturmamız gerekecek:

 template: '<div class="pk-poll">\ <h2>{{atts.question}}</h2>\ <div class="radio-group">\ <label v-for="(answer, key) in atts.answers" :key="key"><input type="radio" v-model="selectedAnswer" :value="key" >{{answer}}</label>\ </div>\ <button @click="submitPoll">Submit</button>\ </div>',

Bu şablon bize pk-poll olarak sınıflandırılan bir sarma div verecek, soruyu bir h2 gösterecek ve ardından v-for yönergesini kullanarak her soru için radyo girdileri üretecektir. Ayrıca, bileşenimize bir methods nesnesi ve bir submitPoll işlevi ekleyerek oluşturacağımız bir submitPoll() yöntemini çağırmak için ayarlanmış @click yönergesine ( v-on:click 'in kısaltmasıdır) sahip bir düğme ekliyoruz. bunun içinde:

 methods: { submitPoll: function() { if( null === this.selectedAnswer ) return; // don't run if no answer is selected var queryString = '?action=pk_submit_poll&id=' + this.atts.id + '&answer=' + this.selectedAnswer; fetch(window.ajaxurl + queryString); } }

Burada sadece bir yanıtın seçili olup olmadığını kontrol ediyoruz ve eğer öyleyse, WordPress' ajaxurl (wp-admin/admin-ajax.php) bir GET isteği gerçekleştirmek için fetch kullanıyoruz ve geçiyoruz WordPress'in isteğimizi, anketin kimliğini ve kullanıcının seçtiği yanıtı yönlendirmesine yardımcı olacak bir eylem adı, pk_submit_poll . Eklenti php dosyamıza geri dönersek, register yöntemimize aşağıdakileri ekleyerek bu isteği yerine getirebiliriz:

 add_action( 'wp_ajax_nopriv_pk_submit_poll', [$this, 'submit_poll'] );

Bu, pk_submit_poll eylemine sahip isteklerin sınıfımızda bir submit_poll yöntemiyle işlenmesine neden olur, bu nedenle daha sonra bu yöntemi ekleyeceğiz:

 public function submit_poll(){ $id = sanitize_title_with_dashes( $_GET['id'], '', 'save' ); $answer = sanitize_text_field( $_GET['answer'] ); $option_name = 'pollka-poll_' . $id; $option_value = get_option( $option_name, [] ); $answer_count = isset( $option_value[ $answer ] ) ? $option_value[ $answer ] : 0; $option_value[ $answer ] = $answer_count + 1; update_option( $option_name, $option_value ); exit( 'success' ); }

Burada yaptığımız tek şey, $_GET aracılığıyla gönderdiğimiz veriler üzerinde minimum miktarda sterilizasyon yapmak, varsa ilgili seçeneği veritabanından almak veya yoksa oluşturmak ve ardından nasıl yapılacağının sayısını artırmaktır. verilen cevap birçok kez seçilmiştir. Bu, kullanıcılarımızın yanıtlarını kaydetmek için yeterli olmalıdır.

Ayrıca, window.ajaxurl değişkeninin ön uç kodumuzda kullanılabilir olduğundan emin olmak için scripts yöntemimize aşağıdakini eklemek isteyeceğiz:

 wp_add_inline_script( 'pollka-king', 'window.ajaxurl = "' . admin_url( 'admin-ajax.php' ) . '"');

İşte şimdiye kadar sahip olduklarımız:

Şu anda, bir kısa kod kullanarak anında anketler oluşturabiliyoruz ve sitemizi ziyaret edenler cevaplarını anketlerimize gönderebilirler. Geriye kalan tek şey sonuçları görüntülemek! pollka-king.php zaten açık olduğundan, bize bir anketin verilerini sağlayacak başka bir Ajax bitiş noktası ekleyerek başlayalım.

İlk olarak, bir pk_get_poll_data bitiş noktasını etkinleştirmek için register yöntemimize bir Ajax eylemi ekleyeceğiz:

 add_action( 'wp_ajax_nopriv_pk_get_poll_data', [$this, 'get_poll_data'] );

Ardından, onu işlemek için get_poll_data yöntemini oluşturacağız:

 public function get_poll_data() { $id = sanitize_title_with_dashes( $_GET['id'], '', 'save' ); $option_name = 'pollka-poll_' . $id; $option_value = get_option( $option_name, [] ); exit( json_encode( $option_value ) ); }

Bu yöntem sonuncusundan bile daha basittir, sadece $_GET anket kimliğini almamız ve daha önce olduğu gibi sterilize etmemiz ve ardından veritabanından ilgili seçeneği almamız gerekiyor. Seçenek yoksa, sadece boş bir dizi göndeririz. Buradaki "anlaşılan" şey, verileri return yerine, verileri JSON olarak çıktılamak ve ardından isteği sonlandırmak için exit() kullanmamızdır.

JavaScript dosyamıza geri dönersek, pk-results adında başka bir Vue bileşeni oluşturabiliriz:

 var pkResults = Vue.component('pk-results',{ template: '<div class="pk-results">\ </div>', props: ['atts'], data: function() { return { } }, methods: { } });

Ardından bu bileşeni, pk-poll bileşenimizden hemen sonra ana Vue örnek şablonumuza ekleyebiliriz:

 template: '<div class="pk-container">\ <pk-poll :atts="atts" />\ <pk-results :atts="atts" />\ </div>',

Ardından, soru ve cevaplarımızı göstermek için pk-results şablonunu güncellemek isteyeceğiz:

 template: '<div class="pk-results">\ <h2>{{atts.question}}</h2>\ <div claass="results-group">\ <p v-for="(answer, key) in atts.answers" :key="key"><span>{{answer}}</span></p>\ </div>\ </div>',

Artık soru ve cevapları aldığımıza göre, API'den sonuçları almamız ve bunları göstermenin en iyi yolunu bulmamız gerekiyor. Sonuçlarımız için API'yi sorgulamak için mounted yaşam döngüsü yöntemini kullanabiliriz:

 mounted: function() { var queryString = '?action=pk_get_poll_data&id=' + this.atts.id fetch(window.ajaxurl + queryString) .then( function(response) { return response.json() }) .then( function(json) { this.results = json; }.bind(this) ); },

Burada pk_get_poll_data uç noktamızı sorgulamak için tekrar fetch kullanıyoruz ve sonuçlar geri geldiğinde, ortaya çıkan JSON nesnesini alıp bileşen örneğinde özellik results olarak saklıyoruz. Geri aramanın içindeki this bileşen örneğine atıfta bulunmasını sağlamak için bind kullanıyorum, ancak bunun yerine burada bir ok işlevi de kullanabilirsiniz.

Yukarıdaki kodla ilgili bir sorun var: Ajax çağrımızdan aldığımız verileri this.results ancak bu özellik reaktif değil, bu nedenle bu veriler göründüğünde bileşenimiz otomatik olarak hiçbir şey yapmayacak. Bununla. Bunun reaktif olmasını sağlamak için, biraz hile yapabilir ve şablon olarak atts ile birlikte ilettiğimiz answer nesnesinin bir kopyasını kullanarak veri answers özelliği oluşturabiliriz:

 data: function() { return { results: Object.assign( {}, this.atts.answers ) } },

Bu, daha sonra this.results kullanarak erişip güncelleyebileceğimiz reaktif bir nesne olarak results yaratacaktır. Buradaki tek dezavantaj, bileşen başlatıldığında, bu nesnenin değerlerinin bir sayı yerine cevap dizeleri olacağıdır, ancak JavaScript dinamik olarak yazılmıştır, bu yüzden bize çok fazla sorun yaratmaz, sadece created kullanacağız. tüm bu değerleri sıfırlamak için yaşam döngüsü yöntemi:

 created: function() { Object.keys( this.results ).forEach( function( key ) { this.results[key] = 0; }.bind(this)) },

Şimdi, bu verileri şablonumuzda kullanmamıza yardımcı olacak bazı yöntemler oluşturabiliriz – muhtemelen sonuçları 11/27 gibi oranlar olarak görüntülemek isteyeceğiz, ancak aynı zamanda çubuk grafik stili bir ekrana sahip olmak isteyeceğiz, bu nedenle' Ayrıca sonuçları CSS'de kullanabileceğimiz yüzde olarak almak için bir yöntem oluşturacağız.

 methods: { getAnswerRatio( key ) { var total = Object.values(this.results).reduce( function( acc, cur ) { return acc+cur; }, 0 ); var count = parseInt(this.results[key], 10) || 0; return count + ' / ' + total; }, getAnswerStyle( key ) { var total = Object.values(this.results).reduce( function( acc, cur ) { return acc+cur; }, 0 ); var count = parseInt(this.results[key], 10) || 0; var percentage = (count / total) * 100; return 'width: '+ percentage + '%;'; } }

Ve şimdi şablonumuzu doldurmak için bu yöntemleri kullanabiliriz:

 template: '<div class="pk-results">\ <h2>{{atts.question}}</h2>\ <div class="results-group">\ <p v-for="(answer, key) in atts.answers" :key="key">\ <span>{{answer}} ({{getAnswerRatio(key)}})</span>\ <span class="percentage-bar" :></span>\ </p>\ </div>\ </div>',

Ve biraz CSS büyüsü ile her şey şu şekilde görünüyor:

Şimdi düzeltmemiz gereken iki küçük sorunumuz var. Birincisi, sonuçların, kullanıcılarımız yanıtlarını gönderme şansı bulamadan yüklenir, bu nedenle yanıtlarının anketi nasıl etkilediğini görmezler. İkincisi, kullanıcıların anketi birden çok kez gönderebilmesidir. Bu sorunların her ikisini de önce yalnızca anketi göstererek ve ardından anketi gizleyerek ve kullanıcı yanıtını gönderdiğinde sonuçları göstererek çözebiliriz.

Bunu, önce ana Vue pollSubmitted başlangıçta `false:

 data: { pollSubmitted: false },

Daha sonra, ana Vue örneğinin şablonundaki pk-poll bileşenine, pk-poll submitted olarak adlandıracağımız bir olay pollSubmitted değerini true olarak ayarlayacak bir olay dinleyicisi ekleyeceğiz. Hazır oradayken, v-if ve v-else yönergelerini yalnızca pollSubmitted yanlış olduğunda anketi ve pollSubmitted olduğunda sonuçları görüntülemek için kullanalım:

 template: '<div class="pk-container">\ \<pk-poll :atts="atts" @submitted="pollSubmitted=true" v-if="!pollSubmitted"/>\ \<pk-results :atts="atts" v-else/>\ </div>',

Son olarak, kullanıcı formu gönderdiğinde bu submitted olayı yaymak için pk-poll bileşenini ayarlamamız yeterlidir. Bunu this.$emit('submitted'); ekleyerek yapabiliriz. bileşenin submitPoll yöntemine, sonuçları görüntülemeden önce verilerin gönderildiğinden emin olmak fetch bu yöntemin içindeki bir geri çağırma çağrısına ekleyeceğim:

 submitPoll: function() { if( null === this.selectedAnswer ) return; var queryString = '?action=pk_submit_poll&id=' + this.atts.id + '&answer=' + this.selectedAnswer; fetch(window.ajaxurl + queryString).then( function() { this.$emit('submitted'); }.bind(this) ); }

Ve işimiz bitti! İşte eylemdeki son ürünümüz:

Ve işte github'daki tüm kodlar: https://github.com/JRGould/pollka-king/

Çözüm

Uç noktalarımıza biraz güvenlik eklemek için nonces kullanmak, kullanıcıların bir kereden fazla göndermesini engellemek, JS veya PHP'de hata işleme, verileri bu şekilde depolamak gibi burada ele almadığımız birkaç şey var. seçenekler tablosu yetersiz ve eminim yapmayı planladığın birkaç şey daha vardır. bağırmak yorumlarda benimle paylaşın. Tüm bunlar, birinin gerçek bir sitede kullanabileceği bir eklenti için önemli olsa da, umarım bu, minimum kurulumla bir WordPress eklentisine biraz etkileşim eklemek için Vue kullanmaya iyi bir giriş olmuştur.

Bu eklentiyi dağıtılmaya hazır hale getirmek için atabileceğimiz birçok sonraki adım ve gerçek zamanlı güncelleme gibi ekleyebileceğimiz birçok harika özellik veya tüm sonuçların genel bir görünümünü gösteren bir yönetici ekranı var. Ayrıca koda da odaklanabiliriz: Vue kodumuz için bir derleme süreci ayarlayın ve javascript'i tek dosya bileşenlerine ayırın.

Bu yazının devamı ile ilgileniyorsanız ve hangi konuların ele alınmasını istediğinizi yorumlarda bize bildirin.

Bir WordPress eklentisinin kullanıcı arayüzünü oluştururken tercih ettiğiniz JavaScript çerçevesi nedir?

— Lezzetli Beyinler (@dliciousbrains) 12 Temmuz 2018