Dalam tema blok, terjemahan WordPress terjadi secara berbeda. File PHP tradisional dengan fungsi terjemahan tidak berfungsi dengan templat HTML, blok javascript dan editor situs. Tema blok membutuhkan sistem internasionalisasi blok WordPress yang berbeda.
Panduan ini memberikan solusi teknis untuk membuat tema blok multibahasa. Kami akan mencari tahu bagaimana menghadapi tantangan terjemahan tema blok, cara mengimplementasikan solusi dan bagaimana mengintegrasikan situs mereka dengan plugin terjemahan.
Karena tema blok tidak berfungsi dengan metode terjemahan tradisional
Blok tema ganti banyak file php WordPress dengan template html yang berisi blok blok. Namun, ini menciptakan kesulitan karena templat HTML tidak dapat melakukan fungsi terjemahan PHP seperti _() Hai _e(). Akibatnya, string terjemahan yang sudah ada tetap tidak digunakan dalam file statis.
WordPress 6.8 membawa beberapa perbaikan yang menyederhanakan internasionalisasi tema blok. Pertama, tema dengan header Domain teks e Jalur domain benar tidak lagi membutuhkan panggilan manual a load_theme_textdomain().
Sebaliknya, untuk memastikan kinerja, WordPress secara otomatis menagih file terjemahan dan memberikan prioritas wp-content/languages/themes/ dibandingkan dengan direktori tema.
Untuk memulai, kami mengkonfigurasi tema mengikuti pendekatan klasik, menambahkan metadata ke file style.css.
/*
Theme Name: My Block Theme
Text Domain: my-block-theme
Domain Path: /languages
*/
Perlu diingat bahwa header dari Domain teks Ini harus sesuai dengan nama folder tema (biasanya dalam kasus kebab) untuk memastikan pemuatan file terjemahan secara otomatis dalam versi terbaru WordPress.
Seperti file style.cssfile functions.php membutuhkan konfigurasi minimum:
<?php
// Optional in WordPress 6.8+ but included for backward compatibility
function my_block_theme_setup() {
load_theme_textdomain( 'my-block-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_block_theme_setup' );
// Register block scripts with translation support
function my_block_theme_scripts() {
wp_enqueue_script(
'my-block-theme-scripts',
get_template_directory_uri() . '/assets/js/theme.js',
array( 'wp-i18n' ),
'1.0.0',
true
);
wp_set_script_translations(
'my-block-theme-scripts',
'my-block-theme',
get_template_directory() . '/languages'
);
}
add_action( 'wp_enqueue_scripts', 'my_block_theme_scripts' );
Perbedaan mendasar antara tema klasik dan blok adalah bahwa yang terakhir membagi tanggung jawab untuk terjemahan antara server PHP dan klien sisi JavaScript. Sebaliknya, tema klasik harus bergantung pada PHP untuk mengelola sebagian besar terjemahan.
Cara membuat terjemahan dalam file block.json
File block.json adalah semacam “hub konfigurasi” untuk diterjemahkan. Pengaturan internasionalisasi yang benar menyebabkan blok diterjemahkan dengan benar baik di editor maupun di front-end.
Cara kanonik untuk merekam blok adalah melalui block.json. Mulailah dengan konfigurasi textdomain Itu berarti bahwa WordPress dapat menerjemahkan bidang judul, keterangan e kata kunci Kapan textdomain itu ditetapkan:
{
"$schema": "
"apiVersion": 3,
"name": "my-theme/testimonial",
"title": "Testimonial",
"category": "text",
"description": "Display customer testimonials",
"keywords": ["quote", "review", "testimonial"],
"textdomain": "my-block-theme",
"attributes": {
"content": {
"type": "string",
"source": "html",
"selector": "blockquote"
}
}
}
Namun, dalam kasus di mana “konteks” diperlukan, diperlukan pendaftaran sisi server. Konteksnya, dalam hal ini, penting karena kata yang sama dapat diterjemahkan secara berbeda tergantung pada penggunaannya. Misalnya, “posting” sebagai kata benda atau sebagai kata kerja membutuhkan terjemahan yang berbeda dalam banyak bahasa:
function my_theme_register_testimonial_block() {
register_block_type_from_metadata(
get_template_directory() . '/blocks/testimonial',
array(
'title' => _x( 'Testimonial', 'block title', 'my-block-theme' ),
'description' => _x(
'Display customer testimonials',
'block description',
'my-block-theme'
),
'keywords' => array(
_x( 'quote', 'block keyword', 'my-block-theme' ),
_x( 'review', 'block keyword', 'my-block-theme' )
)
)
);
}
add_action( 'init', 'my_theme_register_testimonial_block' );
Variasi blok juga membutuhkan denominasi terstruktur, karena ketika memuat terjemahan WordPress, ia mencari pola tertentu. Nama masing -masing varian menjadi bagian dari kunci terjemahan:
{
"name": "my-theme/button",
"title": "Button",
"textdomain": "my-block-theme",
"variations": [{
"name": "primary",
"title": "Primary Button",
"attributes": {
"className": "is-style-primary"
}
},
{
"name": "secondary",
"title": "Secondary Button",
"attributes": {
"className": "is-style-secondary"
}
}
]
}
Internasionalisasi JavaScript membutuhkan impor fungsi WordPress I18N dan konfigurasi terjemahan skrip. Ini karena editor situs dilakukan di browser dan bukan di server. Karena fungsi terjemahan PHP tidak ada di JavaScript, WordPress menyediakan fungsi yang setara melalui paket @wordpress/i18n:
import {
registerBlockType
} from '@wordpress/blocks';
import {
__
} from '@wordpress/i18n';
import {
useBlockProps,
RichText
} from '@wordpress/block-editor';
registerBlockType('my-theme/testimonial', {
edit: ({
attributes,
setAttributes
}) => {
const blockProps = useBlockProps();
return ( < div { ...blockProps } >
< RichText tagName = "blockquote" value = { attributes.content } onChange = { (content) => setAttributes({
content
})
}
placeholder = {
__('Add testimonial text...', 'my-block-theme')
}
/> < cite >
< RichText tagName = "span" value = { attributes.author } onChange = { (author) => setAttributes({
author
})
}
placeholder = {
__('Author name', 'my-block-theme')
}
/> < /cite> < /div>
);
}
});
Selain itu, adalah ide yang baik untuk menghasilkan file terjemahan Jons untuk JavaScript karena WordPress menggunakan format yang berbeda untuk terjemahan sisi klien. PHP menggunakan file .moSedangkan JavaScript membutuhkan file .json dengan konvensi denominasi tertentu. Dimungkinkan untuk mengotomatiskan operasi ini menggunakan perintah WP-CLI:
# Extract strings from JavaScript files into POT
wp i18n make-pot . languages/my-block-theme.pot
# Convert PO files to JSON for JavaScript
wp i18n make-json languages/ --no-purge --pretty-print
File JSON yang dihasilkan mengikuti skema yang koheren: {textdomain}-{locale}-{handle}.json. Jadi, saat Anda memohon wp_set_script_translations()WordPress dapat memuatnya.
Konversi template html statis menjadi komponen php siap untuk diterjemahkan
Karena templat HTML statis, tidak mudah untuk bekerja untuk internasionalisasi tema blok, karena fungsi yang ada dan teknik terjemahan tidak berfungsi.
Bagian -bagian templat berdasarkan PHP dapat menyelesaikan masalah ini karena WordPress menguraikannya sebagai file PHP meskipun dirujuk dalam templat HTML. Pendekatan hibrida ini memungkinkan Anda untuk mempertahankan struktur blok dan pada saat yang sama untuk membuat konten dinamis:
<!-- templates/page.html -->
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-title {"level":1} /-->
<!-- wp:post-content /-->
<!-- wp:template-part {"slug":"post-meta"} /-->
</main>
<!-- /wp:group →
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
Perhatikan bahwa template bagian mungkin berisi PHP:
<!-- parts/post-meta.html -->
<!-- wp:group {"className":"post-meta"} -->
<div class="wp-block-group post-meta">
<?php
echo sprintf(
/* translators: 1: Post date, 2: Post author */
__( 'Published on %1$s by %2$s', 'my-block-theme' ),
get_the_date(),
get_the_author()
);
?>
</div>
<!-- /wp:group -->
Blok kompleks membutuhkan file render.php Karena beberapa konten memerlukan pemrosesan sisi server yang tidak dapat dikelola oleh blok blok saja. Permintaan pada database, logika bersyarat dan pembuatan konten dinamis memerlukan pelaksanaan PHP:
// blocks/recent-posts/render.php
<?php
$recent_posts = get_posts( array(
'numberposts' => $attributes['count'] ?? 5
) );
?>
<div <?php echo get_block_wrapper_attributes(); ?>>
<h3><?php echo esc_html__( 'Recent Posts', 'my-block-theme' ); ?></h3>
<?php if ( $recent_posts ) : ?>
<ul>
<?php foreach ( $recent_posts as $post ) : ?>
<li>
<a href=" echo get_permalink( $post ); ?>">
<?php echo get_the_title( $post ); ?>
</a>
<span class="post-date">
<?php echo get_the_date( '', $post ); ?>
</span>
</li>
<?php endforeach; ?>
</ul>
<?php else : ?>
<p><?php esc_html_e( 'No posts found.', 'my-block-theme' ); ?></p>
<?php endif; ?>
</div>
Ini berarti mengkonfigurasi blok sehingga menggunakan file rendering di block.json:
{
"name": "my-theme/recent-posts",
"render": "file:./render.php",
"attributes": {
"count": {
"type": "number",
"default": 5
}
}
}
Cara mengimplementasikan terjemahan konten dinamis untuk bidang yang dipersonalisasi dan input pengguna
Terlepas dari kehadiran yang luar biasa di situs WordPress, konten dinamis dapat menyebabkan masalah terjemahan karena ada dalam database dan bukan dalam file tema. Untuk alasan ini, plugin terjemahan -pihak ketiga harus mengidentifikasi dan mengelola konten ini secara terpisah dari string statis tema.
Di sinilah pendaftaran bidang yang dipersonalisasi sangat berharga dengan konfigurasi tujuan yang benar, karena plugin terjemahan menghubungkan ke sistem tujuan WordPress untuk mendeteksi konten yang dapat diterjemahkan. Parameter show_in_rest memungkinkan kompatibilitas dengan editor situs:
function my_theme_register_meta_fields() {
register_post_meta( 'page', 'custom_subtitle', array(
'type' => 'string',
'description' => __( 'Page subtitle', 'my-block-theme' ),
'single' => true,
'show_in_rest' => true,
'auth_callback' => function() {
return current_user_can( 'edit_posts' );
}
));
}
add_action( 'init', 'my_theme_register_meta_fields' );
// Display with plugin compatibility
function my_theme_display_subtitle( $post_id ) {
$subtitle = get_post_meta( $post_id, 'custom_subtitle', true );
if ( ! $subtitle ) {
return;
}
// WPML compatibility
// (documented at wpml.org/documentation/support/wpml-coding-api/wpml-hooks-reference/)
if ( function_exists( 'icl_t' ) ) {
$subtitle = icl_t(
'my-block-theme',
'subtitle_' . $post_id,
$subtitle
);
}
// Polylang compatibility
// (documented at polylang.pro/doc/function-reference/)
if ( function_exists( 'pll_translate_string' ) ) {
$subtitle = pll_translate_string( $subtitle, 'my-block-theme' );
}
echo '<h2 class="page-subtitle">' . esc_html( $subtitle ) . '</h2>';
}
Kueri basis data juga memerlukan filter bahasa karena WordPress tidak secara otomatis memfilter konten berdasarkan bahasa. Plugin terjemahan menambahkan perubahan pada kueri yang harus diperhitungkan:
function my_theme_get_localized_posts( $args = array() ) {
$defaults = array(
'post_type' => 'post',
'posts_per_page' => 10
);
$args = wp_parse_args( $args, $defaults );
// Polylang adds language taxonomy
// (documented at polylang.pro/doc/developpers-how-to/)
if ( function_exists( 'pll_current_language' ) ) {
$args['lang'] = pll_current_language();
}
// WPML filters queries automatically when suppress_filters is false
// (wpml.org/documentation/getting-started-guide/translating-custom-posts/)
if ( defined( 'ICL_LANGUAGE_CODE' ) ) {
$args['suppress_filters'] = false;
}
return get_posts( $args );
}
Elaborasi modul mencampur konten dinamis dan statis, tetapi label modul, pesan kesalahan dan pemberitahuan administrasi membutuhkan terjemahan bahasa yang sadar. Bahkan penerima email dapat bervariasi sesuai dengan bahasa:
function my_theme_process_contact_form() {
if ( ! isset( $_POST['contact_nonce'] ) ||
! wp_verify_nonce( $_POST['contact_nonce'], 'contact_form' ) ) {
return;
}
$name = sanitize_text_field( $_POST['name'] );
$email = sanitize_email( $_POST['email'] );
$message = sanitize_textarea_field( $_POST['message'] );
// Get admin email in current language
$admin_email = get_option( 'admin_email' );
// For language-specific admin emails, use WPML's string translation
// (documented at wpml.org/documentation/support/wpml-coding-api/wpml-hooks-reference/)
if ( function_exists( 'icl_t' ) ) {
// First register the string if not already registered
if ( function_exists( 'icl_register_string' ) ) {
icl_register_string( 'my-block-theme', 'contact_email', $admin_email );
}
$admin_email = icl_t(
'my-block-theme',
'contact_email',
$admin_email
);
}
$subject = sprintf(
/* translators: %s: Sender name */
__( 'Contact form submission from %s', 'my-block-theme' ),
$name
);
wp_mail( $admin_email, $subject, $message );
}
add_action( 'init', 'my_theme_process_contact_form' );
Penting juga untuk mengevaluasi kesadaran bahasa navigasi karena menu, URL dan struktur dapat berbeda dari satu bahasa ke bahasa lain. Plugin terjemahan mungkin memiliki API untuk membuat tombol untuk perubahan bahasa:
function my_theme_language_switcher_block() {
if ( ! function_exists( 'pll_the_languages' ) &&
! function_exists( 'icl_get_languages' ) ) {
return;
}
$output="<div class="language-switcher">";
// Polylang language switcher
// (documented at polylang.pro/doc/function-reference/)
if ( function_exists( 'pll_the_languages' ) ) {
$languages = pll_the_languages( array( 'raw' => 1 ) );
foreach ( $languages as $lang ) {
$output .= sprintf(
'<a href=" class=">%s</a>',
esc_url( $lang['url'] ),
$lang['current_lang'] ? 'current-lang' : '',
esc_html( $lang['name'] )
);
}
}
// WPML language switcher
// (documented at wpml.org/documentation/support/wpml-coding-api/multi-language-api/)
elseif ( function_exists( 'icl_get_languages' ) ) {
$languages = icl_get_languages();
foreach ( $languages as $lang ) {
$output .= sprintf(
'<a href=" class=">%s</a>',
esc_url( $lang['url'] ),
$lang['active'] ? 'current-lang' : '',
esc_html( $lang['native_name'] )
);
}
}
$output .= '</div>';
return $output;
}
Bekerja dengan plugin terjemahan mungkin akan menjadi bagian penting dari pekerjaan ini, jadi mari kita analisis aspek ini.
Bekerja dengan plugin terjemahan: kompatibilitas dan optimasi
Setiap plugin terjemahan WordPress mengelola blok blok secara berbeda. Memahami pendekatan yang diadopsi oleh solusi yang berbeda membantu dalam kompatibilitas dan fleksibilitas sejak awal.
Dokumentasi WPML pada pengeditan situs lengkap menggambarkan perlunya konfigurasi spesifik untuk tema blok:
// WPML FSE compatibility based on official documentation
add_action( 'init', function() {
if ( ! defined( 'WPML_VERSION' ) ) {
return;
}
// FSE themes are automatically detected in WPML 4.5.3+ // Enable FSE support
add_filter( 'wpml_is_fse_theme', '__return_true' );
// Register custom strings per WPML String Translation documentation
// (documented at wpml.org/documentation/support/wpml-coding-api/wpml-hooks-reference/)
if ( function_exists( 'icl_register_string' ) ) {
icl_register_string(
'my-block-theme',
'footer-copyright',
'© My Company.'
);
}
});
Polylan Pro mendukung editor situs dari versi 3.2. Plugin mengelola blok tema melalui antarmuka terjemahan standar dari string:
// Polylang string registration per official documentation
if ( function_exists( 'pll_register_string' ) ) {
pll_register_string(
'Footer Copyright',
'© My Company.',
'my-block-theme',
true // Multiline support
);
}
Dokumentasi TranslataPress menunjukkan bahwa beberapa elemen dinamis harus dikecualikan untuk mendapatkan kinerja yang optimal:
// TranslatePress optimization based on official recommendations
// (documented at translatepress.com/docs/developers/)
add_filter( 'trp_stop_translating_page', function( $stop, $url ) {
// Skip admin and API requests per TranslatePress documentation
if ( is_admin() || wp_is_json_request() ) {
return true;
}
// Skip pattern preview URLs that can cause rendering issues
if ( strpos( $url, 'pattern-preview' ) !== false ) {
return true;
}
return $stop;
}, 10, 2 );
Akhirnya, ada beberapa tip umum yang harus ditransmisikan saat bekerja dengan kode -kode pihak ketiga (seperti plugin). Pertama -tama, pendekatan sistematis untuk debug terjemahan harus diikuti.
// Debug helper for translation issues
function my_theme_debug_translations() {
if ( ! WP_DEBUG || ! current_user_can( 'manage_options' ) ) {
return;
}
error_log( 'Text domain loaded: ' . is_textdomain_loaded(
'my-block-theme' ) );
error_log( 'Current locale: ' . get_locale() );
error_log( 'Translation test: ' . __(
'Hello World',
'my-block-theme'
)
);
// Check JSON translations for blocks
$json_file = WP_LANG_DIR . '/themes/my-block-theme-' . get_locale() . '-script-handle.json';
error_log( 'JSON translation exists: ' . file_exists( $json_file ) );
}
add_action( 'init', 'my_theme_debug_translations' );
Cache situs dapat mengganggu pembaruan terjemahan, jadi lebih baik menghapus cache saat file terjemahan diubah:
# Clear WordPress transients
wp transient delete --all
# Generate fresh translation files
wp i18n make-pot . languages/my-block-theme.pot
wp i18n make-json languages/ --no-purge
Optimalisasi kinerja menjadi mendasar dengan plugin terjemahan. Setiap plugin menambahkan kueri ke database dan biaya pemrosesan, dan juga dalam hal ini cache terjemahan yang digunakan lebih sering manfaat darinya:
function my_theme_cached_translation( $text, $domain = 'my-block-theme' ) {
$cache_key = 'translation_' . md5( $text . get_locale() );
$cached = wp_cache_get( $cache_key, 'my_theme_translations' );
if ( false === $cached ) {
$cached = __( $text, $domain );
wp_cache_set( $cache_key, $cached, 'my_theme_translations', HOUR_IN_SECONDS );
}
return $cached;
}
Atau, mungkin berguna untuk melewatkan cache sampai Anda siap untuk didistribusikan. Lingkungan pementasan sangat ideal untuk tujuan ini dan secara umum Anda tidak akan memerlukan peningkatan kinerja yang disediakan oleh cache.
Ringkasan
Internasionalisasi tema blok membutuhkan kerja diikuti oleh metode terjemahan WordPress dan pada saat yang sama untuk mengikuti pendekatan baru editor situs.
Dengan mengonfigurasi metadata tema, menerapkan strategi untuk penggunaan templat dan memahami persyaratan plugin terjemahan, kami dapat membuat tema blok multibahasa yang bekerja dengan baik dan menawarkan pengalaman pengguna berkualitas tinggi.
Ketika kami siap untuk peluncuran, hosting yang dikelola untuk WordPress di Kinsta menawarkan kinerja dan ruang lingkup global yang dibutuhkan setiap situs, berkat cache yang terintegrasi, ke CDN dengan 37 lokasi dan alat seperti integrasi Git dan lingkungan pementasan.
News
Berita
News Flash
Blog
Technology
Sports
Sport
Football
Tips
Finance
Berita Terkini
Berita Terbaru
Berita Kekinian
News
Berita Terkini
Olahraga
Pasang Internet Myrepublic
Jasa Import China
Jasa Import Door to Door
Situs berita olahraga khusus sepak bola adalah platform digital yang fokus menyajikan informasi, berita, dan analisis terkait dunia sepak bola. Sering menyajikan liputan mendalam tentang liga-liga utama dunia seperti Liga Inggris, La Liga, Serie A, Bundesliga, dan kompetisi internasional seperti Liga Champions serta Piala Dunia. Anda juga bisa menemukan opini ahli, highlight video, hingga berita terkini mengenai perkembangan dalam sepak bola.
