WordPress Yöneticisinde Vuejs ve ES6’yı Kullanma
JavaScript arabirimini WordPress Rest API ile kullanmak için harika bir fırsat, WordPress yöneticisini ve ekranını ayarlamaktır. Son zamanlarda bir ayar ekranı oluşturmak için dinlenme ve jQuery kullanımı hakkında tork için bir yazı yazdım. Bu iyi bir giriş ama genellikle Vuejs kullanacağım. Gelecekte, Vuejs ile nasıl yapılacağı hakkında daha fazla yazacağım, ancak bunun benim yaklaşımım olan noktaya ulaşmak için ele aldığım iki önemli noktayı tartışmak istiyorum – ES6 derleme ve yaratma şablonu. Birçok nedenden dolayı büyük bir Vuejs hayranıyım. Başlamak kolaydır ve kullanmak için lüks veya ES6 araçlarını kullanmanıza gerek yoktur. Bu, ES6’nın JavaScript’te büyük bir artış olduğunu söylüyor, bu nedenle ES6 üzerine yazmak Vuejs veya JavaScript ile çalışmayı çok daha iyi hale getiriyor.
ES6 hakkında öğrendiklerimi WordPress ortamına uygulamak konusunda karmaşık olduğunu düşündüğüm bir şey, araçları nasıl hazırlayacağımı öğrendiğim her şeyin geleneksel bir HTML + JavaScript projesini varsaymasıdır. WordPress’ten gerçekten ayrılmış bir şey için iyidir, ancak bunu WordPress yöneticisinde yapmak istiyorum. Birkaç deneyden sonra, WordPress eklentisindeki JavaScript dosyalarını, tarayıcılar için güvenli olan ES5’e ES6’yı derlemek için Babel’i kullanmak için kullandığım Gulp iş akışını uyarladım. Bu sizi yenilikçi JS onaylamayacaktır, ancak işe yarar. Size nasıl çalıştığını göstermek ve HTML’nizi nasıl oluşturacağınız gibi WP-Admin’de Vuejs ile çalışmada başka zorlukları tartışmak istiyorum.
ES6 ES6’nın derlenmesi çok iyidir ve onunla çalışmayı seviyorum, ancak tüm tarayıcılarda kullanmak güvenli değil. Şimdilik Babylon, tarayıcılar için güvenli bir ES5 kodu oluşturmak için kullandığım en güvenilir araç. Bu yakında değişebilir, ancak şimdilik, Internet Explorer’ın hala bir sorun olduğu düşünüldüğünde, bu bir endişe kaynağı. JavaScript dosyalarını küçültmek ve birleştirmek için yudum kullandım, bu yüzden yudum kullanmaya devam etmek istiyorum, ama aynı zamanda Babylon’a da daha hızlı olduğunu bilerek Babel’i silebileceğim. Babylon’u nispeten basit bir yudumla kullanıyor. İlk olarak, paketime Gulp-Babel’i ekledim: “DeveDepenents”: {
“Babel-Preset-ENV”: “^1.4.0”,
“Sepuk”: “^3.8.11”,
“Gulp-Babel”: “^6.1.2”,
“Gulp-Camp”: “^2.5.2”,
“Gulp-Minify”: “0.0.15”,
“Gulp-Minify-CSS”: “^1.1.1”,
“Gulp-Sass”: “^2.0.1”,
“Gulp-Sourcemaps”: “^2.6.0”,
“Gulp-Watch”: “^4.2.4”
} Bununla birlikte, standart JavaScript’imi yapma sürecine bir Babylon derlemesi ekleyebilirim:
const twit = gerektirir (‘SIP’);
const watch = ihtiyaç (‘içme izleme’);
const minify = ihtiyaç (‘SIP-SIP-Minify’);
Const sourCemaps = gerektirir (‘yudum kaynaklıemaps’);
Const babylon = ihtiyaç (‘yudum’);
const cum = ihtiyaç (‘SIP-SIP’);
gulp.task (‘adminjs’, function () {
Yudumlamak.
Src (‘./ varlıklar/js/admin/*. Js’)
.Pipe (sourCemaps.init ())
.pipa (Babel ({
Ön ayar: [‘Env’]
}))
.Pipe (cum (‘./ varlıklar/js/admin.js’))
.Pipe (sourCemaps.write (‘.’))
.pipe (en aza indirin ({
ext: ‘. Min.js’,
Nosumber: Yanlış,
Mang: Doğru,
Sıkıştırma: Doğru
}))
.pipe (karıştırma. Amaç (‘.’))
});
gulp.task (‘izle’, function () {
gulp.watch (‘./assets/js/admin/*.js’, [‘adminjs’]);
});
gulp.task (‘varsayılan’, [‘adminJS’]); Angular gibi şablon vuej’lerinizi hazırlayın, HTML şablonları kullanır. WordPress bağlamında VUE kullanmazsam, şablonum için HTML veya .VUE dosyasını kullanacağım. Ancak WordPress’te, en iyisi PHP dosyalarını kullanmak. Neden? Niye? İki neden: Tercüme ve varsayılan değerlerin düzenlenmesi.
Tork için önceki AngularJS uygulamasına çevrilebilen bir dizeye girmenin çeşitli yolları hakkında yazıyorum. Şablonu oluşturmak için PHP kullanmayı veya JavaScript’e çevrilen dizeleri sağlamak için wp_localale_script () kullandığını iddia ediyorum. Şu anda, açısal veya vue için, bir şablon yapmak için PHP kullanmanın çeviri işlemini kolaylaştırdığını düşünüyorum. İşte Vuejs + WordPress Rest API tanıtan önceki makalemden kopyaladığım bir HTML dosyası olarak yayın düzenleyicisi için bir Vuejs şablonu örneği.
{{post.title.rendered}}
Bunun form etiketi için çevrilemeyen bir dizeye sahip olduğunu göreceksiniz. Basitlik uğruna ayrıntılardan kaçınıyorum, ama asla böyle bir kod göndermeyeceğim. Aşağıda, standart WordPress çeviri işlevi aracılığıyla aynı dizeyi sağlayan bir PHP dosyasına yeniden düzenleyen aynı koddur:
<? Php
İf (! Tanımlı (‘abspath’)) {
Git dışarı;
}
?>
{{post.title.rendered}}
İlk endişemi kırdı. Ama çözmek istediğim başka sorunlarım var. Örnek kodda, orijinal makalede, gönderme için başlangıç durumunun WordPress Rest API’sına bir GET isteği yaparak ayarlanır. Benim için bu mantıklı değil. Neden bir sayfa almak için bir istek, ardından bir gönderme içeriği almak için bir istek? Bir süre önce ek HTTP istekleri olmadan WordPress Rest API kullanma hakkında yazdım. Nasıl çalıştığını incelemenizi öneririm. Ayrıca, Gutenberg’in yeni WordPress’in prototip editörünün, mevcut yayınlar için veri verileri pencere kapsam değişkenine alıp, daha sonra ilk durumu reaksiyona girecek şekilde ayarlamak için kullanılabilecek WordPress Rest API’sini nasıl kullandığını ek HTTP istekleri olmadan nasıl kullandığını görün. Aşağıda, JavaScript dosyasını sıralamak ve JavaScript._Exampledor Nesne Penceresi’ne depolanan gönderim verilerini yerleştirmek için Gutenberg koduna dayanan bir işlev örneği:
post_type);
if (current_user_can (‘edit_post’, $ post-> id) {
$ request = yeni wp_rest_request (‘get’, sprintf (‘/wp/v2/%s/%d’ ,! boş ($ post_type_object-> rest_base)? $ post_type_object-> rest_base: $ post_type_object> id));
$ request-> set_param (‘bağlam’, ‘düzenleme’);
$ tepkisi = rest_do_request ($ istek);
if ($ rep Respons-> is_error ()) {back;
}
wp_enqueue_script (‘Hand-you’, ‘/yol’);
wp_add_inline_script (‘senin’, ‘pencere
}
} Bununla, Vuejs bileşenini yukarıda gösterdiğim şablonu kullanacak şekilde ayarlayabilirim.
Yeni Vue ({
EL: ‘#Posting’,
Veri: function () {
dönüş {
Gönderi: Window._Exampleitor
}
}
}); Bazen JavaScript tabanlı arayüzü artırmak için küçük bir PHP çok ileri gider. Örnek ve kendim yap, şu ana kadar yönetici ekranında Vuejs kullanan birkaç eklenti yaptım. Caldera Forms Pro istemci eklentisi ES6 kullanan tek kişidir. Github’daki kaynağı kontrol etmenizi öneririm. React kullanma örneği için WP dizüstü bilgisayarı Kadam White veya Gutenberg eklentisini okumalısınız. Şimdi senin sıran. Vuejs ile artırabileceğiniz veya reaksiyona girebileceğiniz ve öğrenmenin bir yolu olarak kullanabileceğiniz eklentinin veya temasının veya yöneticisinin bir kısmını bulun. Ardından, sitenizi daha da geliştirmek için bu beceriyi ön uçta kullanmaya başlayın.
