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

language

Ở 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

icon-block-language

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

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

  1. Huy Cường viết:

    Chào bạn! Mình làm theo đúng như của bạn, nhưng khi ra kích hoạt block ngôn ngữ thì nó không hiển thị gì nội dung của block đó nữa. Mình đang dùng bản 4.3 bạn ạ

    1. Thịnh Nguyễn viết:

      Vậy thì bạn kiểm tra bằng cách f12 trình duyệt đẻ nó show ra đoạn xem vị trí rồi tìm đến đúng chô bạn thêm block xem nó có hiển thị html ko nhé. Hơn nữa bạn xem thêm thông tin file log trong mục data/logs/error_logs/

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Back To Top