WordPress Gösterge Tablosu’nda bir JavaScript Tek Sayfa Uygulaması Oluşturun

Bu tamamen UX kullanıcı deneyimi veya UX, önemlidir ve başlamadan önce dikkatlice değerlenmelidir. WordPress kontrol paneli artık orijinal yeteneği ile sınırlı değil. API dinlenmesi ile, şimdi belirli ihtiyaçlara uyacak şekilde değiştirilebilir ve evet, UX’i artırabilir. Artık size benzersiz bir UX ve UI esnekliği sağlayan bir JavaScript uygulaması oluşturabilirsiniz. Bu, API dinlenmesinin gerçek güçlü yanlarından biridir ve bu çok fazla geliştiriciyi heyecanlandırır. Başlamadan önce UX’inizi düşünün. Bu, API dinlenmesinin gerçek güçlü yanlarından biridir ve bu çok fazla geliştiriciyi heyecanlandırır. Öyleyse tekrarlayayım, başlamadan önce UX’inizi düşüneyim. Bu öğreticinin diğer kodunun anısı birçok temel bilgileri keşfedecek. Github’daki kodumu takip etmek istiyorsanız, NPM, Gulp ve JavaScript hakkında bilgiye ihtiyacınız var. Önlem İncelemesi: Bir eklenti yapın ve bazı içerik ekleyin Not: Bu, başlangıçtan başlarken gerekli olan temel bir adımdır. Zaten içerik (veya verileri) içeren bir eklentiniz veya temanız varsa, bu bölümü iletebilirsiniz. Başlamadan önce, görülecek ve manipüle edilecek verilere ihtiyacınız var. Bir eklenti yaparak başlayın, ardından yazı türünü ve bazı yayınları ekleyin. Oluşturulan içeriği depolamak için site_option kullanıyorum.
GitHub’da CPT yapmak ve içerik yapmak için kodumu görebilirsiniz. Bir CPT yaptığımda, show_in_menu’yu false olarak ayarladığımdan emin oldum, böylece yönetici gösterge panosunun sol kenar çubuğundaki diğer tüm CPT gibi görünmüyordu. Adım 1: Bir menü oluşturun, DOM uygulamasını ekleyin ve JavaScript’i ENQUEUE Bir sonraki adım, uygulamanızın devralabilmesi için kullanıcı arayüzü ve temel DOM’u hazırlamaktır. Yönetici menü sayfasının oluşturulmasının veya enqueueuring betiğinin ayrıntılarını tartışmayacağım, ancak kodum çevrimiçi olmalı. Yönetici Menüsü Sayfası DOM menü sayfası oldukça basittir. Navigasyon bıçaklarınız ve temel içeriğiniz var. Yeni başlıyorsanız, tüm durum kullanıma hazır olana kadar gezinmeyi atlamayı öneririm. Bu, kodladığınız son şeylerden biri olabilir. Kodun tamamını burada görebilirsiniz. Ayrıca, çok ileri gitmeden önce, WordPress kontrol panelinizi yenileyerek bunu doğru bir şekilde kodladığınızdan emin olmak için test edin. PHP veya JavaScript konsolunda bir hata alırsanız, bu iyi bir işarettir. Dom’un oluşturulup oluşturulmadığını görmek için yorumlanan enqueue’yi deneyin. Evet ise, bu menü sayfasını gerektiği gibi çalışacak şekilde doğrular. Hepimiz WordPress menü kodunun her zaman en samimi olmadığını biliyoruz. Enqueue admin js, açısal, açısal-UI yönlendirici, açısal-reaksiyon ve yönetici uygulamam dahil olmak üzere diğer birkaç dosyadan oluşan birleşik bir dosya olan admin-app-scripts.js söyledim. Devreyi idare etmek için yudum kullanıyorum. Ayarlarımı kullanmak istiyorsanız, NPM yüklemesini kullanarak tüm NPM bağımlılıklarını yükledikten sonra GULP JS’yi komut satırınızda çalıştırmanız gerekir.
Kodun tamamını burada görebilirsiniz. Birleştirilen dosyayı görmek veya yeni bir dosyayı eklemek için Gulpfile.js dosyasından 6-11 satırını açın. Localize Script: Yerel bir JavaScript nesnesi oluşturmak için localize_script kullandığım admin_js.php adresinde görebilirsiniz. Özellikle, şu anda ateş URL’si, şablon dizini ve nonce almak için dinamik bir yol kaydetmek istiyorum. HTML Şablon Dizin Nesnesi Yerelleştirilen Dizin Nesnesi Template_Directory. Bu, normal PHP şablonlarımız için değil, JavaScript uygulamamızda kullanacağımız HTML şablonları içindir. Eklenti Basic dizininizde bir şablon dizininiz yoksa, şimdi yapın. .Html dosyasını gerektiği gibi buraya ekleyeceğiz. Adım 2: Verileriniz için API’yi ayarlayın Bir uygulama oluşturmadan önce, API’nın verileri kolayca almak ve manipüle etmek için gereken bitiş noktasına sahip olduğundan emin olmanız gerekir. Varsayılan yayın türü (posta ve sayfa) için yeni bir uygulama yaptıysanız, lütfen bu adımı geçin. Adım 2A: Özel Vs. Varsayılan bitiş noktası Bu makaleyi ilk yazmaya başladığımda ve onun için bir kod yaptığımda, nasıl çalıştığını göstermek için özel bir bitiş noktası yaptım, ancak Josh Pollock tarafından hızla düzeltildim. Bunun nedeni, basit bir CPT’niz varsa ve eylemlerinizin yalnızca düzenlemek, silmek ve oluşturmak olması durumunda, varsayılan işlevselliği varsayılan bitiş noktasıyla kullanmanız gerekir. Özel alanlar eklemek WordPress 4.4’te desteklenmez, bu nedenle Beta V2 API dinlenmesini indirmeniz gerekir.
CPT’ye dinlenme yeteneği eklemek, mevcut CPT’ye huzurlu destek eklemek çok kolaydır. CPT oluşturulmasına erişiminiz varsa, show_in_rest parametresini True olarak ayarlayın, CPT oluşturma koduna erişiminiz yoksa, örneğimi burada takip edin. Bu örneği kullanarak, $ Post_type_names dizisine CPT sümüğünüzü ekleyerek birkaç CPT için restoran desteği ekleyebilirsiniz. Özel API Alanı Varsayılan olarak, API’nın geri kalanı Post’tan yanıta meta verileri içermez, bu nedenle özel bir alan eklememiz gerekir. İlk olarak, bir alan kaydetmeniz, ardından GET ve Post isteklerini işlemek için iki dönüş işlevi yapmanız gerekir. Bu iade çağrısı işlevi, Meta POS’un alınmasını ve güncellenmesini işler. İlk olarak, alanı kaydetmeniz, ardından GET ve Post isteklerini işlemek için iki dönüş işlevi yapmanız gerekir. Bu iade işlevi, Meta Post’un alınması ve yenilenmesi ele alınır. Örneğimde, özellikle Meta Post’un iki alanı aldım ve saklandığında tekrarladım. Bu kolay bir yaklaşımdır, ancak üretim uygulamaları için, her özel yazı meta için özel bir alan oluşturmanızı öneririm. Bu şekilde her biri modülerdir ve diğer özel meta alanlardan bağımsız olarak alana herhangi bir mantık yapabilirsiniz (türü kontrol etmek, verileri değerlendirme, vb.).
[Php] register_custom_fields () function {register_api_field (‘kitap’, ‘meta’, set (‘get_callback’ = & amp; dizi ($ this, ‘get_book_meta’ = & amp; dizisi ($ this, ‘ update_book_meta ‘),’ şema ‘= & amp; gt; iptal edildi,)); } function get_book_meta ($ object, $ field_name, $ request) {$ back = array (‘isbn’ = & amp; get_post_meta ($ object [‘id’], ‘isbn’, true), ‘fiyat’ = & amp; gt; get_post_meta ($ object [‘id’], ‘fiyat’, true)); Geri $ geri; } function update_book_meta ($ value, $ object, $ field_name) {foreach ($ Key = & amp; $ new_value) {update_post_meta ($ object- & amp; id, $ key, $ new_value); } dönüş; } [/Php] Özel bitiş noktası, sadece bir gönderi ve bazı POST meta depolamanın yanı sıra daha fazla işlev istiyorsanız, her şey için eksiksiz bir özel bitiş noktası yapmak isteyebilirsiniz. Bu iki adımlı işlemle özel bir son noktası oluşturabilirsiniz. İlk olarak, rotayı bir ad alanı ile kaydedin, ardından HTTP yöntemine göre bir dönüş çağrısı işlevi oluşturun. Burada temel örneğimin kodunu bıraktım. Adım 2B: Ateşinizi test edin İlk kısmı bitirdikten sonra, başarılı olup olmadığını kolayca test edebilmelisiniz. Bunu yapmanın en hızlı yolu, özel son noktanızı bildirdiğiniz veya CPT slug’unuzu bulduğunuz ad alanını bulup bulamayacağınızı görmek için’niz.com.com/wp-json/ adresine gitmektir. Kodum örneğinde, “WP/V2” adında “Kitap” buldum, bu yüzden gönderme listesini “Kitap” ı görmek için domain.com/wp-json/wp/v2/book adresine gidebileceğimi biliyorum.
En son . Bu başarılı oldu – Huzzah! Her şeyi test etmek istiyorsanız, herhangi bir kod yazmadan doğrudan yazı gibi aramaları kontrol etmenizi sağlayan Chrome, Postman Rest API için bir uygulama gibi bir şey kullanabilirsiniz. Unutmayın, yerel nesnelerde depolanan nonce kullanmanız gerekebilir. Adım 3: Uygulamalar, kullanıcı arayüzü, fabrikalar ve html filtreleri oluşturun (HTML, JavaScript ve API), yönetici arayüzünüzü kodlamaya başlamaya hazırsınız. Örnek uygulamamı dört sayfaya sahip olacak şekilde derledim: Ana Sayfa (Genel Bilgi Sayfası)
Liste sayfası (CPT’mizden bir yayın kaydetmek için)
Detay sayfası

ve sayfaları düzenleme.
PHP’de belirttiğiniz menü sayfasına uygulamaları ve bağımlılıkları bildirmek. Örneğimde, div konteynerinin ng-app olduğunu göreceksiniz, bu açısal uygulamanızın adıyla uygun olmalıdır. Bir UI yönlendirici ve kaynak kullanacağınız için, bu harici bağımlılıkları uygulamanıza dahil etmelisiniz. Son kodunuz şöyle görünecek: [js] admin_js_app.app = angular.module (‘admin-js-app’, [‘ui.router’, ‘ngresource’]); [/js] Şimdi rotayı ve şablonu hazırlayın rotayı ayarlama zamanı. UI yönlendiricisini kullanarak bazı durumları ve kontrollü kontrolleri ve şablonları belirleyeceksiniz: [js] admin_js_app.app.config (işlev ($ stateProvider, $ urlrouterProvider) {$ urlrouterProvider.otherwise (‘/’); $ stateProvider. ‘Main. ‘, {url:’/’, templateUrl: admin_app_local.template_directory +’ /admin-js-app-main.html ‘
,}) … [/js] Tam kodu burada görebilirsiniz. Yukarıda listelenen dört durumun uygun UI ve HTML yönlendiricisi kullanılarak tanımlandığını görebilirsiniz. Uygulamanızı görmeye çalışırken 404 hatası alamamanız için doğru yerde bir HTML dosyanız olduğundan (veya bunu yapın) olduğundan emin olun. Filtreler ve Fabrika Hazırlama Uygulama için yalnızca bir filtreye ve fabrikaya ihtiyacınız var. Birden fazla uç noktayla çalışmak istiyorsanız, yeni bir fabrika yapmanız gerekir. Filtreler, HTML metnine güvenmek için enjekte edilebilen $ SCE kullanır ve sadece HTML yerine oluşturulan HTML’yi bir dize olarak görüntüleyin. Ayrıca fabrikaya nonce enjekte ettiğimi görebilirsiniz, bu yüzden çağrı-DEMI çağrısına dayanarak yapmam gerekmez. Son noktanıza göre fabrikadaki rotayı /kitabınıza göre değiştirdiğinizden emin olun. ‘CPT kitabınız’ yoksa bu sizin için işe yaramaz. Kodun tamamını burada görebilirsiniz. Adım 4: Denetleyiciyi şimdi her şeye sahip olduktan sonra yapın, bulmacanın son kısmı denetleyiciyi çalıştırmaktır. Uygulamanızı, işe yarayıp yaramadığını görmek için test etmek istiyorsanız, “ana” durum için nasıl olduğuma benzer şekilde, herhangi bir denetleyici çağrısını açısal kullanıcı arayüzünde silin
Denetleyicisi yok.Her HTML şablonunda HTML’yi değiştirir ve /Book gibi URL’ye işaret ederseniz, doğru HTML şablonunu görürsünüz.Denetleyici, her bir şablon veya ekran için veri hazırlar.Bir liste denetleyicisiyle başlayarak bir denetleyici yapın ve fabrikanızı enjekte ettiğinizden emin olun.Liste denetleyicimin bir örneğini burada görebilirsiniz.Liste denetleyicisi oldukça temeldir.Tek yaptığı son Point’i sormaktı ve daha sonra $ scope.books’a kaydettiğim.Şablonda, tüm yayınların bir listesini görüntülemek için tüm kitapları tekrarlayan bir tekrar var.Liste denetleyicisinin bir başka kısmı Sil düğmesidir.Buna ihtiyacınız yok, ancak bence bu sayfada olmanın iyi olabileceğini düşünüyorum.Delete’nin komutu, JavaScript dizisinden ayrılmak için geri arama işlevi ile sadece kitaplar, sadece kitaplar ({id: book.id}) gibi düzenleme veya yorum almak kadar kolaydır.İşte burada!Liste denetleyiciniz tamamlandı!