Many people, including me, praised the advantages of using JavaScript MVC framework as the front end of WordPress, rather than the traditional PHP template system. WordPress is quite disappointed with the traditional approach to templates, but one thing she is good at is translating strings. WordPress has many excellent features that can translate text. Corner conversion and other modules can be used for localization, but if excellent localization is already built into word press, they will become rough and repetitive. In this article, I want to share a simple way to manage localization and avoid using untranslatable strings using WordPress. Angular template. Problem solving method based on ingot. The
In fact, for \
As a proof of concept for setting up, we created a simple plug-in that uses angular and rest APIs to add shortcut code to display 10 posts. The template file uses a mixture of strings and content in the post, such as \
The wp_localize_script() function is created to pass a translated string to JavaScript. It is also often used to import other dynamic data, such as the URL of an API endpoint, into the dom. The method I use is: Definition (\
Definition (\
Add\u action (‘wp\u enqueue\u scripts’, function(){
Wp_enqueue_script (\
Wp_enqueue_script (\
Wp_enqueue_script (‘angular trans exp’, angtrex_url.’app.js’, [‘angular’]);
Wp_localize_script (\
‘api\u url’= > esc\u url\u raw (rest\u url()),
‘rest\u nonce’= > wp\u create\u nonce (‘rest\u api’),
\
\
\
\
View \
]The
]The
）;
}); As you can see, localized objects are called angtrex. There is an index called translation that contains three strings. The string will be escaped and the esc\u html\u() function will be used to complete the translation preparation. The
In this regard, nothing is unique or novel. This is what I like about it. Everything is very standard. Male then created a very simple angular application HTML in the standard shortcut code function. Add_shortcode (\
Function angtrex(){
Ob_start();
? >
Male
Male
Male
Male
{{translations.title}}: {{post.title.rendered}
Male
Male
{{translations.author}}: {{post.author}}
Male
Male
{{post.content.rendered}
Male
Male
Male
Male
<? PHP
Return to ob\u get\u clean();
}As you can see, the template uses tags to invoke posts and data in translation. The challenge is to import localized variables into templates to make them universally available in all templates and all controllers. The
Since the example code in the alternative solution has only one controller, the objections to the two options considered are less relevant. But in practice, I think my objection is valid, because there are many controllers that can be changed over time. Before deciding on my solution, I will consider turning translation into angular service. It made sense at first. However, the service must then be injected into all individual controllers. Not like that, $scope. The translation must be set to be the same as the service. The
It was pain. It is much easier to do the following on each controller:$ Scope Translations = angtrex Translations; Work again, but not very dry. Error prone. You can forget the controller or someone will delete the row later. In addition, if you change the translation source later, it will be a large callback. Among all angular controllers in the root mirror solution, the $scope variable is unique to the range of the controller. That is the point. However, angular also has a global scope $rootscope. We decided to use it because it has injected all the modules. The
Yes, it is important not to contaminate rootscope with many additional elements. However, in this case, we are talking about something that all controllers need and that already exists in variables with window scope anyway. To perform this task, when you create a default application module. Run() is used. From here you can see: angtrex. App = angular Module (\
\
]) Run (function ($root scope){
\/\/Add translation to routing scope
$rootscope Translations = angtrex Translations;
}) A translation of $rootscope was added from the callback of run (). It is now available on all my controllers. The
Navigate to JavaScript MVC, but keep it accessible. Angular and other JavaScript MVC frameworks undoubtedly provide an excellent user experience. However, to provide excellent experience for English users with normal vision, we should not sacrifice others
. Translation affinity is an important but not the only step in accessibility. A very dynamic interface can be very difficult for people using screen readers unless aria tags are used correctly. I fully agree with the sudden popularity of the very dynamic javascript based word press interface. But remember accessibility. I hope this article will help avoid internationalization becoming a stumbling block.
