() translation by (you can also view the original English article)
В этой серии статей мы рассмотрим, как интернационализировать наши проекты WordPress. Для тех, кто только присоединяется к нам, я настоятельно рекомендую вам ознакомиться с первым сообщением в этой серии, так как мы рассмотрим все функции, предоставляемые в WordPress, чтобы помочь нам интернационализировать наши строки.
И хотя это полезно, это все равно не помогает объяснить, что такое интернационализация. Как мы выяснили в первом посте:
Интернационализация - это процесс разработки вашего плагина, который потом можно легко перевести на другие языки.
Учитывая, что WordPress обладает примерно 25% интернет-ресурсов и что Интернет не является местным для вашей страны происхождения, имеет смысл обеспечить, чтобы работа, которую мы производим, могла быть переведена на другие языки.
Чтобы быть ясным, это не означает, что вы, как разработчик, несете ответственность за перевод всех строк в вашей кодовой базе на различные языки, которые могут использовать ваши клиенты. Вместо этого это значит, что вы используете надлежащие API-интерфейсы, чтобы гарантировать, что кто-то другой может прийти и предоставить переводы для них.
Прежде чем мы пойдем дальше, напомним:
- Интернационализация, часто упоминаемая как i18n, - это процесс, с помощью которого мы создаем наше программное обеспечение с возможностью перевода.
- Локализация - это когда мы берем интернационализированные строки и затем переводим их в соответствующую локаль.
Достаточно легко понять, правильно? Но есть много информации о том, как это сделать, и это может быть очень трудно отделить сигнал от шума, особенно если вы новичок в этом.
Но это то, к чему стремится эта серия уроков: чтобы убедиться, что вы вооружены всем, что вам нужно знать, чтобы правильно интернационализировать ваш проект WordPress.
В следующих двух статьях мы создадим простой плагин, который будет правильно интернационализирован. Кроме того, мы рассмотрим каждый участок плагина, который войдет в интернационализацию кода, чтобы убедиться, что мы полностью его понимаем.
В следующей статье мы рассмотрим один из инструментов, который я нашел наиболее полезным для локализации вашей работы и как проверить, что локализация работает правильно.
С учетом сказанного, давайте начнем.
Начинаем
Для этого учебника я буду использовать последнюю версию WordPress, доступную через Subversion. Если у вас установлена локальная копия WordPress, и это последняя версия, то замечательно.
Если, однако, вы хотите получить последнюю версию, то не стесняйтесь проверить это руководство, чтобы получить последнюю версию кода.
В конечном счете, это не повлияет на работу, которую мы делаем, но даст возможность немного расширить ваши навыки в области развития.
Подготовка плагина
С локальной копией WordPress, настроенной на вашей машине, мы готовы приступить к работе над плагином. Обратите внимание, что в этом уроке мы создадим невероятно простой плагин.
Цель состоит не в том, чтобы понять, как построить плагин, так как мы это уже рассматривали в других курсах и уроках; А чтобы понять тонкости нюансов, которые входят в интернационализацию кода, чтобы вы понимали, что вы делаете, продолжая двигаться вперед в работе, которую вы будете выполнять в текущих или будущих проектах.
1. Создайте каталог плагинов и Bootstrap
Сначала найдите каталог wp-content/plugins и создайте каталог под названием tutsplus-i18n. Это каталог, в котором мы будем хранить наши файлы плагинов. Он называется Tuts+ Internationalization.
Двигаемся дальше и создадим один файл в каталоге, который будет использоваться для запуска плагина. Вызовите файл tutsplus-i18n.php.
Прежде чем мы перейдем дальше, нам нужно решить, что этот плагин будет делать. Мы знаем, что нам нужно показать что-то пользователю, чтобы мы могли попрактиковаться в интернационализации (и локализацию). Это означает, что к плагину должен быть компонент пользовательского интерфейса.
Для этого создадим простой плагин, в котором будет представлен новый пункт меню в меню «Инструменты». Мы будем вызывать пункт подменю «Информация о сервере», и мы будем использовать данные, которые легко доступны в PHP, чтобы отображать экран содержимого в удобной для пользователя форме.
Возможно, это может быть использовано для отправки журналу отладки поставщику, если что-то пошло не так с плагином.
2. Определите плагин
Я предполагаю, что вы знакомы с тем, как создавать базовый плагин. Если нет, у нас есть ряд учебников и курсов, посвященных этому. Кодекс также содержит некоторую информацию о том, как начать работу.
Если вы не знаете, как это сделать, я рекомендую проверить указанные выше ресурсы. С учетом сказанного, давайте продолжим и определим основы нашего плагина.
Для начала нам нужно определить заголовок плагина. Откройте tutsplus-i18n.php и убедитесь, что он содержит следующую информацию:
1 |
<?php
|
2 |
/**
|
3 |
* The plugin bootstrap File_Upload_Upgrader::cleanup
|
4 |
*
|
5 |
* @link https://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676
|
6 |
* @since 1.0.0
|
7 |
* @package TutsPlus_i18n
|
8 |
*
|
9 |
* @wordpress-plugin
|
10 |
* Plugin Name: Tuts+ Internationalization
|
11 |
* Plugin URI: http://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676
|
12 |
* Description: Easily view internationalized server information.
|
13 |
* Version: 1.0.0
|
14 |
* Author: Tom McFarlin
|
15 |
* Author URI: https://tommcfarlin.com
|
16 |
* Text Domain: tutsplus-i18n
|
17 |
* License: GPL-2.0+
|
18 |
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
|
19 |
*/
|
Затем сохраните файл и перейдите к экрану плагинов в WordPress. Там вы должны увидеть запись для плагина, который вы только что создали.
Конечно, на этом этапе ничего не произойдет, но вы видите, что мы на верном пути. Кроме того, обратите внимание, что мы добавили тег, который вы не часто видите в проектах WordPress, и это тег Text Domain. Это то, что мы будем использовать, чтобы помочь интернационализировать наш плагин.
Вот подробные сведения об этом теге:
Если вы переводите плагин или тему, вам нужно будет использовать текстовый домен, чтобы обозначить весь текст, принадлежащий этому плагину. Это увеличивает мобильность и лучше работает с уже существующими инструментами WordPress. Текстовый домен должен соответствовать «slug» плагина.
Очевидно, мы определили наш текстовый домен как tutsplus-i18n. Вы увидите, что это используется во всей оставшейся части кода в оставшейся части руководства.
Наконец, не забудьте убедиться, что вы также обновляете теги URI Author и Author, чтобы они соответствовали вашему имени и вашей домашней странице.
3. Ввести пункт меню
Первое, что мы хотим сделать, - это ввести элемент подменю в меню «Инструменты». Чтобы сделать это, мы воспользуемся хуком add_submenu_page, предлагаемым WordPress.
Обратите внимание, что мы используем функцию __ (), которую мы обсуждали в первой части этого руководства, чтобы убедиться, что текст пункта меню правильно интернационализирован для перевода. Кроме того, обратите внимание, что второй параметр, переданный в функцию, совпадает с текстовым доменом, определенным в заголовке плагина.
1 |
<?php
|
2 |
|
3 |
add_action( 'admin_menu', 'tutsplus_i18n_add_submenu_page' ); |
4 |
/**
|
5 |
* Adds a new submenu item to the Tools menu that will display server
|
6 |
* information to the user.
|
7 |
*
|
8 |
* The menu item is internationalized so that we can provide proper translations
|
9 |
* for users who are outside of our own locale.
|
10 |
*/
|
11 |
function tutsplus_i18n_add_submenu_page() { |
12 |
|
13 |
add_submenu_page( |
14 |
'tools.php', |
15 |
__( 'Server Information', 'tutsplus-i18n' ), |
16 |
__( 'Server Information', 'tutsplus-i18n' ), |
17 |
'manage_options', |
18 |
'tutsplus-i18n-menu', |
19 |
'tutsplus_i18n_display_submenu_page'
|
20 |
);
|
21 |
|
22 |
}
|
Теперь этого недостаточно. Если вы прочли указанную выше документацию, вы знаете, что нам также нужно определить функцию, которая будет отображать содержимое страницы. В приведенном выше коде мы ссылались на функцию как tutsplus_i18n_display_submenu_page, но мы фактически не определяли эту функцию.
Давайте это сделаем сейчас. Мы сделаем это простым, так что плагин будет фактически выполнен. На странице ничего не будет отображаться, но плагин продолжит работу.
1 |
<?php
|
2 |
|
3 |
/**
|
4 |
* Displays the content of the page associated with the new Server Information
|
5 |
* menu item located in the Tools menu.
|
6 |
*/
|
7 |
function tutsplus_i18n_display_submenu_page() { |
8 |
echo ''; |
9 |
}
|
В этот момент вы можете активировать плагин и посмотреть содержимое в меню «Инструменты». На данный момент ничего нельзя перевести; Однако вы должны увидеть новый пункт меню.
И когда вы нажмете на элемент, вы увидите что-то похожее на экран выше. Это пустое место. Но это нормально, потому что в следующем разделе мы собираемся фактически разместить некоторую информацию на экране.
4. Добавьте экран плагина.
В зависимости от того, какие другие плагины и какой другой код вы изучали при работе с плагинами WordPress, вы видели код, написанный одним из двух способов (или, возможно, обоих способов, на самом деле), поскольку он относится к отображению экрана плагина.
- Весь HTML жестко закодирован в файле PHP основного плагина.
- HTML включен во внешний файл, который включен в основной файл PHP.
Я поклонник последнего, потому что я думаю, что это помогает сделать код более удобным. Поэтому для целей этого примера мы будем следовать этому подходу. На этом этапе создайте второй файл в каталоге вашего плагина и назовите его tutsplus-i18n-ui.php.
Затем добавьте следующий код в файл. Мы обсудим это более подробно после того, как у вас будет возможность его просмотреть.
1 |
<?php
|
2 |
/**
|
3 |
* The user interface for the plugin.
|
4 |
*
|
5 |
* @link http://code.tutsplus.com/tutorials/internationalizing-wordpress-projects-a-practical-example-part-1--cms-26676
|
6 |
* @since 1.0.0
|
7 |
* @package TutsPlus_i18n
|
8 |
*/
|
9 |
|
10 |
?>
|
11 |
|
12 |
<div class="wrap"> |
13 |
|
14 |
<h1><?php echo esc_html( get_admin_page_title() ); ?></h1> |
15 |
<span class="description"><?php esc_html_e( 'Information about the environment in which WordPress is running.', 'tutsplus-i18n' ); ?></span> |
16 |
|
17 |
<table id="tutsplus-i18n-table"> |
18 |
<thead>
|
19 |
<tr>
|
20 |
<th>
|
21 |
<?php esc_html_e( 'Server Key', 'tutsplus-i18n' ); ?> |
22 |
</th>
|
23 |
<th>
|
24 |
<?php esc_html_e( 'Server Value', 'tutsplus-i18n' ); ?> |
25 |
</th>
|
26 |
</tr>
|
27 |
</thead>
|
28 |
<tbody>
|
29 |
|
30 |
<?php // This counter is used to determine even/odd rows for styles. ?> |
31 |
<?php $i = 0; ?> |
32 |
|
33 |
<?php foreach ( $_SERVER as $key => $val ) { // Input var okay. ?> |
34 |
|
35 |
<?php // Determine if we're on an odd or even row. ?> |
36 |
<?php $striped = ( $i % 2 ) ? 'even' : 'odd'; ?> |
37 |
|
38 |
<tr class="<?php echo esc_attr( $striped ); ?>"> |
39 |
<th>
|
40 |
<?php echo $key ; ?> |
41 |
</th>
|
42 |
<td>
|
43 |
<?php echo $val; ?> |
44 |
</td>
|
45 |
</tr>
|
46 |
|
47 |
<?php // Increase the counter by one. ?> |
48 |
<?php $i++; ?> |
49 |
|
50 |
<?php } ?> |
51 |
</tbody>
|
52 |
</table>
|
53 |
|
54 |
</div>
|
Обратите внимание, что мы создаем элемент table, который будет отображать все ключи и значения, найденные в коллекции PHP $_SERVER.
Возможно, наиболее важные вещи, которые нужно заметить, - это то, что мы используем функцию esc_html_e() для наших функций интернационализации, и мы используем оператор модуля, чтобы помочь нам обеспечить некоторые стили для экрана.
5. Стилизация плагина
Технически, на данный момент, плагин будет работать. Давайте сделаем еще один шаг, чтобы убедиться, что экран выглядит немного приятнее.
Сначала создайте файл tutsplus-i18n.css в корневом каталоге вашего плагина и добавьте следующий код:
1 |
#tutsplus-i18n-table { |
2 |
|
3 |
margin-top: 20px; |
4 |
border: 1px solid #ccc; |
5 |
padding: 10px; |
6 |
|
7 |
}
|
8 |
|
9 |
#tutsplus-i18n-table thead th { |
10 |
|
11 |
font-size: 15px; |
12 |
height: 40px; |
13 |
|
14 |
}
|
15 |
|
16 |
#tutsplus-i18n-table thead, |
17 |
#tutsplus-i18n-table tbody { |
18 |
font-family: 'Monaco', 'Menlo', 'Courier New', Monospace; |
19 |
}
|
20 |
|
21 |
#tutsplus-i18n-table tbody td { |
22 |
|
23 |
height: 30px; |
24 |
padding: 5px; |
25 |
|
26 |
}
|
27 |
|
28 |
#tutsplus-i18n-table tbody tr.odd { |
29 |
background: #fff; |
30 |
}
|
Затем добавьте функцию в файл плагинов, который будет правильно помещать этот файл в очередь, но только на экране информации о сервере:
1 |
<?php
|
2 |
|
3 |
add_action( 'admin_enqueue_scripts', 'tutsplus_i18n_dashboard_styles' ); |
4 |
/**
|
5 |
* Add styles to the table displayed in the Server Info page available from the
|
6 |
* Tools menu.
|
7 |
*/
|
8 |
function tutsplus_i18n_dashboard_styles() { |
9 |
|
10 |
// Only register the stylesheet if we're on the Server Information page.
|
11 |
if ( 'tools_page_tutsplus-i18n-menu' !== get_current_screen()->id ) { |
12 |
return; |
13 |
}
|
14 |
|
15 |
wp_enqueue_style( |
16 |
'tutsplus-i18n-css', |
17 |
plugin_dir_url( __FILE__ ) . '/tutsplus-i18n.css', |
18 |
array(), |
19 |
'1.0.0', |
20 |
'all'
|
21 |
);
|
22 |
|
23 |
}
|
На этом этапе плагин должен иметь немного более приятный вид:
Нет, это не нужно, но это помогает сделать плагин более читаемым в контексте того, что мы делаем.
Что относительно объектно-ориентированного программирования?
Для тех, кто следил за моими курсами и моими учебниками, вы знаете, что я предпочитаю писать свой код в объектно-ориентированном стиле, а не в процедурном.
Когда речь заходит о преподавании новой концепции, я стараюсь сделать акцент на уроке как можно более ясным. С этой целью я часто вижу, что использование процедурного программирования для обучения чему-то вроде этого создает меньше путаницы, чем при использовании объектно-ориентированного программирования.
То есть, объектно-ориентированное программирование предполагает, что у вас есть четкое представление о некоторых концепциях, которые вы, возможно, не имеете, проходя через эту кодовую базу. И если это так, то вы не сможете сосредоточиться на основном материале этого урока.
Таким образом, основные темы, которые мы стремимся рассмотреть, не имеют ничего общего с объектно-ориентированным программированием, но с пониманием того, как интернационализировать и, в конечном итоге, локализовать проект WordPress.
Заключение
На данный момент у нас есть функциональный плагин, который можно загрузить, установить и запустить в рамках установки WordPress. Хотя он интернационализирован, у нас нет файлов локализации, чтобы показать, как работает этот процесс. Вы можете загрузить копию плагина с боковой панели этой страницы.
В следующем уроке мы рассмотрим, как мы можем создавать файлы локализации и моделировать другой язык для проверки наших переводов, а также рассмотрим инструменты, которые мы можем использовать.
Пока вы ждете следующего выпуска, не забудьте посмотреть, что у нас есть на рынке Envato, чтобы пополнить ваш растущий набор инструментов для WordPress.
Если вам интересно узнать больше о WordPress с точки зрения развития, обратите внимание, что я исключительно работаю с WordPress и часто пишу об этом. Вы можете перехватить все мои курсы и учебные материалы на моей странице профиля, а так же вы можете следить за мной в моем блоге и/или Twitter в @tommcfarlin, где я рассказываю о разработке программного обеспечения в контексте WordPress.
Как обычно, пожалуйста, не стесняйтесь оставлять комментарии или вопросы в ленте комментариев ниже.
Рекомендации
