icon ngôn ngữ

Ở 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 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 . '/blocks/global.language.tpl')) { $block_theme $global_config; } elseif (file_exists(NV_ROOTDIR . '/themes/' . $global_config . '/blocks/global.language.tpl')) { $block_theme $global_config; } 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); // Multiple languages if ($global_config and sizeof($global_config) > 1) { foreach ($global_config as $lang_i) { $xtpl->assign('LANGSITENAME', $language_array); $xtpl->assign('LANGSITEURL', NV_BASE_SITEURL . 'index.php?' . NV_LANG_VARIABLE . '' . $lang_i); $xtpl->assign( 'ICON', NV_BASE_SITEURL . 'themes/' . $global_config . '/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 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 . '/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

icon ngôn ngữ

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