Backbone ile bir WordPress referans widget'ı nasıl oluşturulur

Özel widget'lar oluşturmakla ilgili çok sayıda çevrimiçi eğitim var, ancak ne yazık ki çoğu nadiren temel bilgilerin ötesine geçiyor. Bu nedenle, bugünün eğitiminde size sınırsız sayıda referansı destekleyen bir referans widget'ının nasıl oluşturulacağını göstereceğim.

Yinelenen alanlarla ilgili sorun, alanların doğru şekilde adlandırılmasına dikkat etmeniz gerektiğidir, bu da zor olabilir.

Bu sorunu çözmenin iki olası çözümü vardır ve öğrenme amacıyla bunu zor yoldan yapacağız: Backbone ile. Ön uç uygulamasını kolaylıkla yazmanıza izin veren hafif bir JavaScript çerçevesidir. Elbette, bunun için jQuery kullanabiliriz, ama sabredin, işimiz bittiğinde, yapmadığımıza şükredeceksiniz.

Gerekli javascript dosyasını oluşturun ve sıraya alın

Başlamadan önce, bazı genelleme çalışmaları sıralanmıştır; Yeni bir javascript dosyası (temanızın js klasöründe) oluşturmamız ve onu admin-testimonials.js olarak adlandırmamız gerekiyor. Ardından aşağıdaki kodu functions.php dosyanıza yapıştırın:

 /** * Enqueue admin testimonials javascript */ function testimonials_enqueue_scripts() { wp_enqueue_script( 'admin-testimonials', get_template_directory_uri() . '/js/admin-testimonials.js', array( 'jquery', 'underscore', 'backbone' ) ); } add_action( 'admin_enqueue_scripts', 'testimonials_enqueue_scripts' );

Yeni oluşturulan dosyamızın yanı sıra bir dizi bağımlılığa da ihtiyacımız var, bizim durumumuzda WordPress ile birlikte gelen omurgaya ihtiyacımız var – oldukça temiz!

Sınıfı tanımlayın

Ardından, class-testimonial-widget.php adında yeni bir dosya oluşturmamız, onu temanızın inc dizinine koymamız ve bunu functions.php talep etmemiz gerekiyor:

 /** * Load Testimonial Widget */ require get_template_directory() . '/inc/class-testimonial-widget.php';

Dosyayı açın, çünkü içinde referans widget'ımız için yeni bir sınıf tanımlayacağız ve aşağıdaki kodu koyacağız:

 <?php // Prevent direct access to this file defined( 'ABSPATH' ) or die( 'Nope.' ); /** * Register the widget with WordPress */ add_action( 'widgets_init', function(){ register_widget( 'Testimonial_Widget' ); }); class Testimonial_Widget extends WP_Widget { }

Bu sınıfa herhangi bir metot yazmadan önce resmi Widget API belgelerini kontrol etmekte fayda var. Aşağıdaki yöntemlere ihtiyacımız var:

• __construct() yapıcı yöntemdir. İçinde, ana (WP_Widget) yapıcısını çağırmamız ve ona bir kimlik (veya yanlış ve otomatik olarak bir tane oluşturacaktır), widget'ımızın adı ve isteğe bağlı bir dizi ayar iletmemiz gerekiyor.
• widget() , ziyaretçilerin gördüğü şey olan sunum tarafında çağrılan oluşturma yöntemidir.
• update() – adından da anlaşılacağı gibi, alan değerlerinin güncellenmesinden sorumlu olan yöntemdir. Dezenfektan girişi burada yapılmalıdır.
• form() , bu öğreticinin en önemli kısmı olan widget'larımızın verilerini değiştirdiğimiz wp-admin formumuzu oluşturmak için kullanılır.

Yapıcıyı tanımlayın

 public function __construct() { parent::__construct( false, 'Testimonials', array( 'description' => 'My Testimonials Widget' ) ); }

Bilmiyorsanız, yapıcı, sınıf başlatıldığında ( new bir anahtar kelimeyle) otomatik olarak çağrılan özel bir yöntemdir.

Ana kurucuya ( WP_Widget::__construct ) iletebileceğiniz birçok seçenek vardır, ancak bu öğreticinin amacı doğrultusunda, her şeyi kısa ve öz tutalım. Yöntemi kaydettiğinizde, widget'lar panosu şu şekilde görünür:

Güncelleme yöntemini tanımlayın

Ardından, güvenlikten sorumlu olacak yöntemi tanımlayalım. Kullanıcılarınızdan herhangi bir tür girdi kabul ederken, her zaman verileri uygun şekilde sterilize etmeniz önerilir.

Bu örnek temel bir örnektir, ancak size iyi bir başlangıç ​​noktası vermelidir:

 public function update( $new_instance, $old_instance ) { $instance = array(); $instance['header'] = wp_kses_post( $new_instance['header'] ); $instance['testimonials'] = $new_instance['testimonials']; return $instance; }

Burada, tüm referanslarımızla birlikte örnek başlığını ve başka bir diziyi tutacak yeni bir dizi oluşturuyoruz.

Bu durumda, örnek, widget'ın benzersiz bir kopyasıdır – çünkü çeşitli kenar çubuklarında aynı türden daha fazla widget'ınız olabilir. Her biri birer örnek olacaktır.

Ödev: Bu yöntemde, yalnızca başlığı sterilize etmeye karar verdim, ancak tüm referansları olduğu gibi ilettim. Bu öğreticiyi tamamladığınızda, tüm referansları gözden geçirin ve WordPress'in desteklediği temizleme işlevlerinden birini uygulayın. Buradan başlayın.

wp-admin form oluşturma yöntemini tanımlayın

Şimdi en önemli kısma gelelim: referanslar formu. İçinde, aşağıdaki sorumluluklara dikkat etmeliyiz:

• henüz veri yoksa veri alma veya bazı varsayılanları ayarlama
• varsa, yinelenmeyen alanları (başlık gibi) görüntüleyin
• Omurga (JavaScript) kullandığımız için, her bir bireysel referans için kullanılacak bir şablon da tanımlamamız gerekiyor.
• tüm referansların ekleneceği bir yer tutucu görüntüleyin.
• işlendikten sonra verileri getirmeyi başlat

Aşağıdaki yöntemi sınıfa kopyalayın (aşağıdaki açıklama):

 public function form( $instance ) { // segment #1 $header = empty( $instance['header'] ) ? 'Testimonials' : $instance['header']; $header = empty( $instance['header'] ) ? 'Testimonials' : $instance['header']; $testimonials = isset( $instance['testimonials'] ) ? array_values( $instance['testimonials'] ) ? array_values( $instance['testimonials'] ) : array( array( 'id' => 1, 'quote' => '', 'author' => '', 'image' => '' ) );?> <!— segment #2 —> <p> <label for="<?= $this->get_field_id( 'header' ); ?>">Header</label> <input class="widefat" id="<?= $this->get_field_id( 'header' ); ?>" name="<?= $this->get_field_name( 'header' ); ?>" type="text" value="<?= esc_attr( $header ); ?>" /> </p> <!— segment #3 —> <script type="text/template" id="js-testimonial-<?= $this->id; ?>"> <p> <label for="<?= $this->get_field_id( 'testimonials' ); ?>-<%- id %>-quote">Quote:</label> <textarea rows="4" class="widefat" id="<?= $this->get_field_id( 'testimonials' ); ?>-<%- id %>-quote" name="<?= $this->get_field_name( 'testimonials' ); ?>[<%- id %>][quote]"><%- quote %></textarea> </p> <p> <label for="<?= $this->get_field_id( 'testimonials' ); ?>-<%- id %>-author">Author:</label> <input class="widefat" id="<?= $this->get_field_id( 'testimonials' ); ?>-<%- id %>-author" name="<?= $this->get_field_name( 'testimonials' ); ?>[<%- id %>]
About the author
			
			
" type="text" value="<%- author %>" /> </p> <p> <input name="<?= $this->get_field_name( 'testimonials' ); ?>[<%- id %>][id]" type="hidden" value="<%- id %>" /> <a href="#" class="js-remove-testimonial"><span class="dashicons dashicons-dismiss"></span>Remove Testimonial</a> </p> </script> <!— segment #4 —> <div id="js-testimonials-<?= $this->id; ?>"> <div id="js-testimonials-list" style="padding: 0px 15px; background: #fafafa;"></div> <p> <a href="#" class="button" id="js-testimonials-add">Add New Testimonial</a> </p> </div> <!— segment #5 —> <script type="text/javascript"> var testimonialsJSON = <?= json_encode( $testimonials ) ?>; myWidgets.repopulateTestimonials( '<?= $this->id; ?>', testimonialsJSON ); </script> <?php }

Neler olduğunu görmek için bu oldukça uzun yöntemin üzerinden geçelim.

İlk bölümde, ön uçta kullanılacak bir başlık tanımlıyoruz. Buraya kolayca daha fazla alan ekleyebilirsiniz, örneğin, bu referanslara sahip bir kaydırıcınız varsa (ana sayfamızdaki gibi bir kaydırıcınız varsa, o zaman döngü aralığı gibi bazı kaydırıcı yapılandırma seçenekleri ekleyebilirsiniz. Segment #2 daha sonra bu alanları işler.

Segment #3, işlerin heyecanlandığı yerdir. Buradaki tüm çıktıların bir <script> etiketine sarıldığını fark etmiş olabilirsiniz. Tekrarlayan alanları oluşturmak için Omurga kullandığımızdan, her nesneye uygulanacak bir şablona ihtiyacı var (bizim durumumuzdaki referans). Bu eğitim için iki alan kullanıyoruz – quote ve author – ancak istediğiniz kadar kullanabilirsiniz. Bir referansı kaldırabilmek istediğimizden, son öğe tam da bunu yapmak için bir düğmedir. Boş bir href parametresi olduğunu fark etmiş olabilirsiniz; Bunun nedeni, WordPress'e eşzamansız bir çağrı yapmak için JavaScript kullanacağımızdır.

Dördüncü bölüm, temel olarak, görünecek tüm referansların listesi için bir yer tutucudur. Bunun dışında, Yeni Referans butonunu da burada oluşturmaya karar verdim, ancak başka bir yere koymaktan çekinmeyin.

Son, beşinci segmentte, mevcut referanslarımızdan bir JSON nesnesi oluşturuyoruz ve ardından bunları oluşturacak bir işlev çağırıyoruz (bundan biraz daha fazlası). Widget örneğinin ve JSON nesnesinin kimliğini iletiyoruz.

Bu noktada pencere öğesi panosunu yenilemeye çalışırsanız, repopulateTestimonials işlevimiz henüz mevcut olmadığından konsol javascript hatalarını bildirir. Tanımlamadan önce, önce…

Web sitesi oluşturma yöntemini tanımlayın

Bu son yöntemdir ve referanslarımızı bir kenar çubuğunda görüntülemek için kullanılır:

 public function widget( $args, $instance ) { $header = apply_filters( 'widget_title', empty( $instance['header'] ) ? '' : $instance['header'], $instance, $this->id_base ); ?> <h3><?= $header ?></h3> <?php foreach ( $instance['testimonials'] as $testimonial ): ?> <blockquote> <p><?= $testimonial['quote'] ?></p> <footer>— <?= $testimonial['author'] ?></footer> </blockquote> <?php endforeach; }

Burada çok fazla açıklamaya gerek yok, standart filtreyi başlığımıza uyguluyoruz ve onu gösteriyoruz, sonra tüm referanslar arasında dolaşıyoruz ve hem alıntıyı hem de yazarını gösteriyoruz.

Şimdi JavaScript ceketimizi giyme ve Backbone'un güzel dünyasına girme zamanı – artık ihtiyacımız olmayacağı için php dosyasını kapatmaktan çekinmeyin.

Widget'ımızın Omurgası

Daha önce oluşturduğumuz admin-testimonials.js hatırlıyor musunuz? Sihri burada gerçekleştireceğiz.

Omurgaya aşina değilseniz, korkmayın, burada yapacağımız şey oldukça basit, ancak hala bazı kısımları anlamadıysanız, resmi belgelerini ziyaret edin – bu sadece bir (oldukça uzun olmasına rağmen) bir sayfadır.

Yapacağımız ilk adım bir ad alanı oluşturmak:

 var myWidgets = myWidgets || {};

Bu tekniğe aşina değilseniz, kodunuzu düzenlemenin bir yoludur, böylece global ad alanını kirletmez – bu makalede bununla ilgili daha fazla bilgi edinin.

Şimdi referanslarımız için herhangi bir kod yazmaya başlamadan önce, tüm gereksinimleri kontrol etmeye değer:

• her bir referansı kaydetmenin ve referans göstermenin bir yoluna ihtiyacımız var.
• bir referansı güncellememiz gerekiyor.
• yeni bir referans oluşturmamız veya mevcut bir referansı silmemiz gerekiyor.

Geliştirme dünyasında, rastgele bir nesneyi temsil eden bir varlığa genellikle model denir ve Backbone, kutudan çıktığı gibi modelleme verilerini destekler:

 myWidgets.Testimonial = Backbone.Model.extend({ defaults: { 'quote': '', 'author': '' } });

Burada, Backbone'un model için yapılandırdığı varsayılan davranışı genişleten bir Testimonial model tanımladık, bir örnek her zaman gerekli olmayan defaults anahtarıdır, ancak verilerimizin şemasını görsel olarak tanımlamamıza yardımcı olabilir. İlk gereksinim çözüldü.

Şimdi iki Görünüm tanımlamamız gerekiyor. Biri bireysel referans ve davranışıyla ilgilenecek, diğeri ise tüm listenin düzgün olmasını sağlayacaktır. JavaSsript/Omurga terminolojisindeki Görünüm, bir öğenin (veya bir grubunun) HTML çıktısını değiştirmek için kullanılan bazı mantık anlamına gelir. Sunucu taraflı dillerin çoğunda View, işlenmiş HTML'dir, ancak işleme mantığına controller veya sunucu adı verildiğinden, genellikle bu konuda bir karışıklık vardır. Ve Görünüm daha sonra şablon olarak adlandırılır. Biliyorum. Dağınıklık.

İlk olarak, her bir bireysel referans nesnesinden sorumlu olan tek bir görünüm oluşturmamız gerekiyor:

 myWidgets.TestimonialView = Backbone.View.extend( { className: 'testimonial-widget-child', events: { 'click .js-remove-testimonial': 'destroy' }, initialize: function ( params ) { this.template = params.template; this.model.on( 'change', this.render, this ); return this; }, render: function () { this.$el.html( this.template( this.model.attributes ) ); return this; }, destroy: function ( ev ) { ev.preventDefault(); this.remove(); this.model.trigger( 'destroy' ); }, } );

Şimdi bu görünümün ne yaptığını gözden geçirelim:

• className , listemizdeki her bir referans için bir sınıf tanımlar (bunu biçimlendirmeniz gerekirse)
• olaylar , meydana gelen olaylar üzerine tetiklenmesi gereken olayların ve karşılık gelen eylemlerin bir listesini tanımlar.
• Başlatma , yeni bir referans oluşturulduğunda (JavaScript ile) çağrılır. Bir şablon parametresi almayı bekler ve ayrıca bir değişiklik olması durumunda yeniden işlemek için bir dinleyici ekler.
• render , verileri şablonla birleştirerek HTML'yi oluşturur
• yok et – hem HTML'yi hem de ilişkili verileri kaldırır

Artık bireysel bir referansla ilgilendiğimize göre, şimdi Liste görünümüne odaklanalım:

 myWidgets.TestimonialsView = Backbone.View.extend( { events: { 'click #js-testimonials-add': 'addNew' }, initialize: function ( params ) { this.widgetId = params.id; this.$testimonials = this.$( '#js-testimonials-list' ); this.testimonials = new Backbone.Collection( [], { model: myWidgets.Testimonial } ); this.listenTo( this.testimonials, 'add', this.appendOne ); şunu döndür return this; }, addNew: function ( ev ) { ev.preventDefault(); var testimonialId = 0; if ( ! this.testimonials.isEmpty() ) { var testimonialsWithMaxId = this.testimonials.max( function ( testimonial ) { return testimonial.id; } ); testimonialId = parseInt( testimonialsWithMaxId.id, 10 ) + 1; } var model = myWidgets.Testimonial; this.testimonials.add( new model( { id: testimonialId } ) ); return this; }, appendOne: function ( testimonial ) { var renderedTestimonial = new myWidgets.TestimonialView( { model: testimonial, template: _.template( jQuery( '#js-testimonial-' + this.widgetId ).html() ), } ).render(); this.$testimonials.append( renderedTestimonial.el ); this.$testimonials.append( renderedTestimonial.el ); return this; } } );

Liste görünümü biraz daha karmaşıktır, çünkü yeni bir referansın eklenmesini ve mevcut olanların kaldırılmasını yönetir:

• initialize , tek görünümde olduğu gibi, onu başlattığımızda otomatik olarak çağrılır ve hem DOM nesnesi hem de koleksiyon olarak tüm referansları kaydeder ( $ karakterine dikkat edin). Ayrıca koleksiyonu dinler ve koleksiyona yeni bir referans nesnesi eklendiğinde add işlevini tetikler.
• addNew , “Yeni Ekle” düğmesine her tıkladığımızda tetiklenir ve bu, olaylar nesnemizde tanımlanır. Ayrıca kimliğin saklanmasını sağlar (her biri bir artıştır)
• appendOne , tahmin edebileceğiniz gibi, ilettiğimiz referansla yeni bir tek görünüm oluşturur ve onu DOM'ye ekler.

Bu noktada, hala bir temel öğeyi kaçırıyoruz ve bu, ilk tanımladığımız PHP şablonundan çağırdığımız repopulateTestimonials işlevidir:

 myWidgets.repopulateTestimonials = function ( id, JSON ) { var testimonialsView = new myWidgets.TestimonialsView( { id: id, el: '#js-testimonials-' + id, } ); testimonialsView.testimonials.add( JSON ); };

Burada tek yaptığımız, kimliği (aynı kenar çubuğunda widget'ımızın birden fazla örneğini kullanmamız durumunda kullanışlıdır) ve listemize eklemek istediğimiz DOM öğesini ileterek liste görünümümüzü oluşturmaktır. Son olarak, mevcut tüm referanslarımızı görünüme itiyoruz.

Dosyayı kaydedin ve widget gösterge tablonuzu yenileyin, bunun gibi bir şey görürseniz arkanıza yaslanın – aferin!

Bu öğreticiyi herhangi bir kod yazmadan takip ettiyseniz, biraz zaman kazanmak için bu özü alın

Çözüm

Oldukça temiz ha? Aynı etkiyi elde etmek için jQuery kullanabiliriz, ancak Backbone, mini Javascript uygulamamızı düzgün bir şekilde yapılandırmamıza izin verir; bu, işler her zamanki hide , show ve toggle'dan daha karmaşık hale geldiğinde büyük bir avantajdır.

Her referansa (avatarlar için) bir ek alanı ekleyerek işleri daha da karmaşık hale getirebiliriz, ancak bu eğitim zaten uzun, bu yüzden gelecekte yapabilirim – aşağıdaki yorumlarda bana bildirin.

Son olarak ProteusThemes'den Primoz Cigler'e kod konusunda yardımcı olduğu ve yazmam için fikir verdiği için teşekkür ederim.