Hướng dẫn viết block hiển thị icon ngôn ngữ cho website NukeViet

Ở bài trước Thịnh có hướng dẫn các bạn thiết lập website đa ngôn ngữ đối với những website sử dụng mã nguồn mở NukeViet. Nhưng bạn sẽ gặp vấn đề với việc hiển thị ngoài site sao cho khách truy cập có thể lựa chọn được ngôn ngữ.

Chính vì thế hôm nay Thịnh hướng dẫn các bạn viết block ngôn ngữ hiển thị bằng icon thay vì block ngôn ngữ mặc định trong themes default. Vì đặc điểm hiển thị dạng select của block ngôn ngữ đó bất tiện khi bạn thiết kế các mẫu giao diện website khác nhau và hơn nữa nó lại không hợp cũng như dở ẹc.

Nhưng trước khi sử dụng block này bạn cần phải kích hoạt đa ngôn ngữ cho website. Nếu bạn chưa biết thì xem ở bài này: Hướng dẫn kích hoạt đa ngôn ngữ trên website sử dụng NukeViet.

Hướng dẫn viết block hiển thị icon ngôn ngữ trên NukeViet

Bước 1

Đầu tiên bạn tạo 2 file có tên như sau trong thư mục blocks của themes mà bạn đang sử dụng

• global.language.php
• global.language.tpl

2 file này sẽ giúp cho website của bạn có được icon language thay vì dạng select thuận tiện hơn rất nhiều.

Bước 2

Trong file “global.language.php” bạn copy đoạn mã sau và dán vào nó.

<?php

/**
* @Project NUKEVIET 4.x
* @Author Mr.Thinh (thinhwebhp@gmail.com)
* @Copyright (C) 2016 Thinhweb Blog. All rights reserved
* @License GNU/GPL version 2 or any later version
* @Createdate Wed, 08 June 2016 12:41:32 GMT
*/

if (! defined('NV_MAINFILE')) {
 die('Stop!!!');
}

if (! nv_function_exists('nv_language')) {
function nv_language($block_config)
{
 global $global_config, $site_mods, $lang_global, $language_array;

 if (file_exists(NV_ROOTDIR . '/themes/' . $global_config['module_theme'] . '/blocks/global.language.tpl')) {
  $block_theme = $global_config['module_theme'];
 } elseif (file_exists(NV_ROOTDIR . '/themes/' . $global_config['site_theme'] . '/blocks/global.language.tpl')) {
  $block_theme = $global_config['site_theme'];
 } else {
  $block_theme = 'default';
 }

 $xtpl = new XTemplate('global.language.tpl', NV_ROOTDIR . '/themes/' . $block_theme . '/blocks');
 $xtpl->assign('NV_BASE_SITEURL', NV_BASE_SITEURL);
 $xtpl->assign('BLOCK_THEME', $block_theme);
 $xtpl->assign('SELECT_LANGUAGE', $lang_global['langsite']);

 // Multiple languages
 if ($global_config['lang_multi'] and sizeof($global_config['allow_sitelangs']) > 1) {
  foreach ($global_config['allow_sitelangs'] as $lang_i) {
  $xtpl->assign('LANGSITENAME', $language_array[$lang_i]['name']);
  $xtpl->assign('LANGSITEURL', NV_BASE_SITEURL . 'index.php?' . NV_LANG_VARIABLE . '=' . $lang_i);
  $xtpl->assign( 'ICON', NV_BASE_SITEURL . 'themes/' . $global_config['module_theme'] . '/images/icons/' . $lang_i . '.png' );
  $xtpl->parse( 'main.language.item' );
  }
  $xtpl->parse('main.language');
 }

 $xtpl->parse('main');
 return $xtpl->text('main');
 }
}

if (defined('NV_SYSTEM')) {
 $content = nv_language($block_config);
}

Tiếp đến bạn mở file “global.language.tpl” và dán vào nó đoạn mã sau

<!-- BEGIN: main -->
<!-- BEGIN: language -->
<ul class="language">
<!-- BEGIN: item -->
<li class="fl">
<a title="{LANGSITENAME}" href="{LANGSITEURL}"><img src="{ICON}" alt="{LANGSITENAME}"/></a>
</li>
<!-- END: item -->
</ul>
<!-- END: language -->
<!-- END: main -->

Bước 3

Bạn lên Google Search tìm cho mình icon ngôn ngữ website mà bạn cần và đặt tên theo dạng như sau và sao chép nó vào thư mục icons nằm trong thư mục images của themes mà bạn đang sử dụng.

• Tiếng Việt: vi.png
• Tiếng Anh: en.png
• Tiếng pháp: fr.png

Ngoài ra bạn có thể đổi sang định dạng khác và nhớ thay đổi lại địn dạng file ở cuối cấu lệnh sau sang định dạng ảnh mới mà bạn muốn sử dụng.

$xtpl->assign( 'ICON', NV_BASE_SITEURL . 'themes/' . $global_config['module_theme'] . '/images/icons/' . $lang_i . '.png' );

Như vậy là xong và thật đơn giản phải không? Nếu bạn ngại tạo file và copy paste thì hãy tả về ở link sau và copy vào đúng thư mục như ở các bước trên.

Link tải về: Gitlab