Kendim de dahil olmak üzere birçok insan, bir WordPress ön uç olarak geleneksel bir PHP şablon sisteminden ziyade JavaScript MVC çerçevesini kullanmanın faydalarını övdü. WordPress’in geleneksel olarak şablonları nasıl işlediği konusunda oldukça hayal kırıklığına uğradığım halde, iyi çalışan bir şey bir çeviri dizesidir. WordPress, metni tercüme etmek için harika işlevlerle doludur. Her ne kadar açıların ve diğer modüllerin çevirisi yerelleştirme için mevcut olsa da, WordPress zaten iyi bir mahsulü olduğunda her şey beceriksiz ve aşırı hissediyor. Bu makalede, mahsulleri yönetmek ve açısal şablonlarınızda çevrilemeyen dizeleri kullanmaktan kaçınmak için WordPress kullanmanın basit bir yolunu paylaşmak istiyorum. Bu, Ingot’taki sorunu nasıl çözdüğümüze dayanmaktadır.
Ingot pratikte, A/B test eklentisi, yönetici sayfası için AngularJS ve WordPress Rest API tarafından desteklenen bir sayfa web uygulaması kullanıyoruz. Bu çalışma tarzından çok memnunum ve gelecekte kullanacağım. UI for Ingot’ta benimle çalışan Roy Sivan, bu tür bir fikrin sizi heyecanlandırıp heyecanlandırmadığını kontrol etmeniz gereken yönetici eklentisi için açısal ve dinlenme yangınlarının kullanımı hakkında tork hakkında iyi bir yazı var. Biraz zorlukla başlayan bir şey, WordPress tarafından yönetilen bir çeviri dizesi açısal şablona almaktır. İlk versiyonumuzda, tercüme edilemeyecek birçok dizgimiz olduğunu itiraf etmekten utanıyorum.
Konsept kanıtı olarak, 10 yayın görüntülemek için açısal ve dinlenme ateşi kullanan kısa kodlar ekleyen basit bir eklenti yaptım. Şablon dosyasında, WordPress tarafından çevrilebilen “Başlık” ve “Yazar” gibi yayınlardan ve dizelerden bir içerik karışımı kullanıyorum. Ayarlar oldukça basit. Eklentimin açısal ve açısal uygulamalarım için JavaScript dosyaları için sıralama işlevi var. Dosyalar Uygulamalar için, JavaScript değişkenlerini ekrana yazdırmak için WP_LOCALICAL_SCRINK () kullanın, çeviriler de dahil olmak üzere uygulamada ihtiyacım olan veriler ve URL REST API ve nonce. WP_LOCALICAL_SCRIP () işlevi, çeviriye devam etmek amacıyla yapılır. JavaScript’e dize. Ayrıca, yangının sonu için URL’ler gibi diğer dinamik verileri almak için yaygın olarak kullanılmıştır. Bu şekilde kullanıyorum: tanımlama (‘angtrex_url’, eklenti_dir_url (__file__));
tanımlama (‘angtrex_dir’, dirname (__file__));
Add_action (‘wp_enqueue_scripts’, function () {
wp_enqueue_script (‘angle’, ‘//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js’);
wp_enqueue_script (‘Angular-Resource’, ‘//jax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.js’, [‘Angular’]);
wp_enqueue_script (‘Angular-Trans-exp’, angtrex_url. ‘App.js’, [‘açı’]);
WP_LOCALICAL_SCRIPT (‘Angular-Trans-Exp’, ‘Angtrex’, [
‘API_URL’ => ESC_URL_RAW (REST_URL ()),
‘rest_nonce’ => wp_create_nonce (‘rest_api’),
‘çeviri’ => [
‘Başlık’ => esc_html __ (‘başlık’, ‘angtrex’),
‘Yazar’ => esc_html __ (‘yazar’, ‘angtrex’), ‘view’ => esc_html __ (‘Devamını oku’, ‘angtrex’)
]
]
);
}); Gördüğünüz gibi, yerelleştirilen nesneye Angtrex denir. Üç ipli çeviri adlı bir dizinim var. Bu dize geçti ve çeviriyi ESC_html __ () işlevini kullanmaya hazır hale getirdi.
Bu konuda benzersiz ya da yeni bir şey yok, sevdiğim bu. Her şey çok standart. Daha sonra standart kısa kod işlevinde çok basit olan açısal uygulamalar için HTML yaptım:
add_shortcode (‘angtrex’, ‘angtrex’);
Angtrex function () {

Ob_start ();
?>

{{çeviri.title}}: {{Post.title.rended}}

{{çeviri.author}}: {{post.author}}
{{post.conent.rendered}}

<? Php
Return ob_get_clean ();
} Gördüğünüz gibi, şablon "çeviri" deki yayınları ve verileri çağıran etiketleri kullanır. Yerel değişkenlerden şablonlara ulaşmak ve onu evrensel olarak kullanılabilir hale getirmek, tüm şablonlara ve tüm denetleyiciler zorluklardır.
Örnek kodumda alternatif çözümler, sadece bir denetleyicim var, bu yüzden düşündüğüm iki seçenekte belirteceğim itirazlar çok alakalı değil. Ancak gerçek dünya senaryosunda, zamanla değişebilecek birçok kontrolörle, bence itirazımın hala yürürlükte olduğunu düşünüyorum. Çözümümü ayarlamadan önce, ilk olarak çeviriyi açısal bir hizmet olarak düşündüm. İlk başta mantıklıydı. Ama sonra hizmeti her denetleyiciye enjekte etmeliyim. Bu değil, $ Scope ayarlamalıyım. Çeviriler bu hizmetle aynıdır. Acıyor. Her denetleyicide yapmak için çok daha kolay olacaktır: $ scope.translations = angtrex.translations; Bir kez daha işe yarıyor, ama çok kuru değil. Bu hatalara karşı savunmasızdır. Kontrolörde yapmayı unutabilirsiniz veya birisi satırı daha sonra silebilir. Ayrıca, çevirinin kaynağını daha sonra değiştirirsem, büyük bir yeniden düzenleyicidir. Her açısal denetleyicideki rootscope çözümleri, denetleyicinin kapsamı için benzersiz bir $ kapsam değişkeni. Mesele bu. Ancak, Angular'ın küresel bir kapsam olan $ rootscope var. Tüm modüllerime enjekte ettim, bu yüzden kullanmaya karar verdim.
Evet, rootscope'u birçok ek şeyle kirletmemek önemlidir. Ancak bu durumda, her denetleyicide ve zaten pencere kapsamı olan bir değişkende gerekli bir şey hakkında konuşuyoruz. İşlevini sağlamak için ana uygulama modülümü yaptığımda .run () kullanıyorum. Burada görebileceğiniz gibi: angtrex.app = angular.module ('angtrex', [
'Ngresource'
]) .run (işlev ($ rootscope) {
// $ rootscope.translations = angtrex.translations rotasının kapsamına çeviri ekleyin;
}); .Run () geri çağrısında, $ rootscope'a bir çeviri ekledim. Şimdi tüm denetleyicilerimde mevcut.
JavaScript MVC'yi açın, ancak yine de erişildiğinde Angular ve diğer JavaScript MVC çerçevelerinin olağanüstü kullanıcı deneyimleri yarattığına şüphe yoktur. Ancak normal vizyona sahip İngilizce konuşmacılar için harika bir deneyim yaratmak, başkalarının pahasına yapılmamalıdır. Çeviri misafirperverliği erişilebilirlik için önemli bir adımdır, ancak bu tek kişi bu değildir. ARIA etiketi doğru kullanılmadığı sürece çok dinamik bir arayüz ekran okuyucuları kullananlar için çok zor olabilir. Çok dinamik olan JavaScript ile çalışan WordPress arayüzünün ani popülaritesini seviyorum. Ancak, erişilebilirlik sorununu hatırlamamız gerekiyor. Umarım bu makale uluslararasılaşmanın bir engel olmasına izin vermenize yardımcı olur.