การใช้งาน Plugin qTranslate สำหรับผู้ที่ต้องการทำเว็บไซต์ด้วย WordPress หลายภาษา

วันนี้เว็บไซต์ PrettyHD จะมาอัพเดทบทความเกี่ยวกับ wordpress อัพเดทเรื่อง wordpress การใช้งาน Plugin qTranslate สำหรับผู้ที่ต้องการทำเว็บไซต์ด้วย WordPress หลายภาษา วันพฤหัสบดีที่ 24 ตุลาคม พ.ศ. 2556 ซึ่งมีเนื้อหามีดังนี้

1.Download ที่ http://wordpress.org/extend/plugins/qtranslate/

2.ติดตั้งแล้วทำการ Active มันก่อน

3.ส่วนของการ Set ค่าภาษา ท่านสามารถมาดูได้ที่ Link นี้
-http://don-jai.com/wp-qtranslate-wordpress-plugin/
-http://byyoursites.com/wordpress-qtranslate/82907/
-http://www.inkthemes.com/how-to-translate-your-wordpress-website-using-qtranslate-plugin/01/
ซึ่ง Link ดังกล่าวได้อธิบายไว้ดีอยู่แล้วน่ะครับ

4.ที่นี้มาดูวิธีการเอามาใช้งานก็มี 2 วิธีหลักๆก็คือ
-วิธีที่ 1. เป็นแบบ Widgets โดยท่านก็ไปสร้าง Widget ขึ้นมาแล้วก็ลากมาใส่ได้เลย แล้วก็เอาไปใส่ในเว็บว่าจะให้แสดงตรงไหน
-วิธีที่ 2. คือใช้คำสั่ง Code แสดงลงไปตรงๆเลย แล้วแทรกแล้วแทรกไว้ในไฟล์ที่ท่านต้องการ

echo qtrans_generateLanguageSelectCode('image');

ที่นี้จะมาพูดถึงปัญหาที่เราจะเจอต่อไป (กรณีนี้ ผมสร้างและออกแบบ Theme เองน่ะครับ)

1.กรณี ไม่แสดงรูปธงชาติ ต้องใส่ wp_head(); กับ wp_footer(); ซึ่งเป็นการใส่ให้แสดง show_admin_bar() ด้วย ต้องระวังส่วนนี้ไว้ด้วย ต้องใส่ทั้ง wp_head(); กับ wp_footer(); หากใส่แค่ wp_head(); มันจะสร้าง CSS ขึ้นมาให้เองอัตโนมัติคือ

html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }

ดังนั้นมันจะดัน Layout เราเสียไป แต่ก็สามารถแก้ไขได้โดยสั่งให้ซ่อน Admin Bar ไปที่ ไฟล์ functions.php แล้วพิมพ์คำสั่งนี้ลงไป show_admin_bar( false ); แต่ทางที่ดีควรใส่ให้ครบทั้งคู่คือ wp_head(); กับ wp_footer();

2.กรณีที่ต้องการแสดงแบบเช็คภาษาเอง ให้ทำแบบนี้แบบตรงๆกับไฟล์ php ตรงๆเลยก็ได้

_e("english text");

ซึ่งมันก็เหมือนเราเขียนแบบนี้

if (qtrans_getLanguage() == 'en') {
  echo 'English Text';
} elseif (qtrans_getLanguage() == 'th') {
  echo 'ภาษาไทย Text';
}

3.กรณีที่เราทำเมนูขึ้นมาก็อยากให้เป็น 2 ภาษาด้วยก็สามารถใส่เงื่อนไขแบบ Quick Code ไปตรงๆได้เลยที่ Navigation Label ของ Menus

4.ท่านสามารถเขียน CSS ไปควบคุมการแสดงผล ธงชาติ ได้เองตามปกติน่ะครับจะเป้นแบบไหนก็ได้ก็แล้วแต่เรา
จบแล้วครับปัญหาที่ผมเจอ และก็ใช้งานไปประมาณนี้ หวังว่าคงเป็นประโยชน์ไม่มากก็น้อยน่ะครับ1.Download ที่ http://wordpress.org/extend/plugins/qtranslate/

2.ติดตั้งแล้วทำการ Active มันก่อน

echo qtrans_generateLanguageSelectCode('image');

html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }

_e("ภาษาไทย text");

ซึ่งมันก็เหมือนเราเขียนแบบนี้

if (qtrans_getLanguage() == 'en') {
  echo 'English Text';
} elseif (qtrans_getLanguage() == 'th') {
  echo 'ภาษาไทย Text';
}

จากนั้นแก้ปัญหาเรื่องเมนู ให้เพิ่มโค้ดนี้ลงไปที่ไฟล์ชื่อ functions.php ในธีมนั้นๆ

// You put this piece of code in your functions.php file
class CustomLinkModifierWalker extends Walker_Nav_Menu {
function __( $text ) {
if ( preg_match_all(‘~(.*?)\|(\w{2,})\|~’, $text, $matches) ) {
$text = ”;
foreach ($matches[1] as $i => $match) {
$text .= “[:{$matches[2][$i]}]$match”;
}
$text = __( $text );
}
return $text;
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( “\t”, $depth ) : ”;

$class_names = $value = ”;

$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = ‘menu-item-’ . $item->ID;

$class_names = join( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ” : ”;

$id = apply_filters( ‘nav_menu_item_id’, ‘menu-item-’. $item->ID, $item, $args );
$id = $id ? ‘ id=”‘ . esc_attr( $id ) . ‘”‘ : ”;

$output .= $indent . ‘<li’ . $id . $value . $class_names .’>’;

$attributes = ! empty( $item->attr_title ) ? ‘ title=”‘ . esc_attr( $item->attr_title ) .’”‘ : ”;
$attributes .= ! empty( $item->target ) ? ‘ target=”‘ . esc_attr( $item->target ) .’”‘ : ”;
$attributes .= ! empty( $item->xfn ) ? ‘ rel=”‘ . esc_attr( $item->xfn ) .’”‘ : ”;
$attributes .= ! empty( $item->url ) ? ‘ href=”‘ . esc_attr( $this->__( $item->url ) ) .’”‘ : ”;

$item_output = $args->before;
$item_output .= ‘<a’. $attributes .’>’;
$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;
$item_output .= ”;
$item_output .= $args->after;

$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}

จากนั้นไปที่ header.php ของธีม
เอาโค้ด ’walker’ => new CustomLinkModifierWalker(), ไปใส่ตามด้านล่าง

new CustomLinkModifierWalker(),
‘theme_location’ => ‘main-menu’,
‘container_id’ => ‘menu-main-menu-container’,
‘menu_id’ => ‘menu-main-menu’,
‘depth’ => 2,
‘fallback_cb’ => ‘snapshot_wp_page_menu’,

));

วิธีใช้งานก็ให้เข้าไปที่ เมนู > เลือกส่วน ลิงก์ ใส่ ( |en| แทนพารามิเตอร์ที่ใช้เปลี่ยนภาษา )

http://www.siam2learn.com/en|en|http://www.siam2learn.com/|th|

ไปลักษณะนี้english text”);

ซึ่งมันก็เหมือนเราเขียนแบบนี้

if (qtrans_getLanguage() == 'en') {
  echo 'English Text';
} elseif (qtrans_getLanguage() == 'th') {
  echo 'ภาษาไทย Text';
}

2.ติดตั้งแล้วทำการ Active มันก่อน

echo qtrans_generateLanguageSelectCode('image');

html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }

_e("ภาษาไทย text");

ซึ่งมันก็เหมือนเราเขียนแบบนี้

if (qtrans_getLanguage() == 'en') {
  echo 'English Text';
} elseif (qtrans_getLanguage() == 'th') {
  echo 'ภาษาไทย Text';
}

$class_names = $value = ”;

$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = ‘menu-item-’ . $item->ID;

$class_names = join( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ” : ”;

$id = apply_filters( ‘nav_menu_item_id’, ‘menu-item-’. $item->ID, $item, $args );
$id = $id ? ‘ id=”‘ . esc_attr( $id ) . ‘”‘ : ”;

$output .= $indent . ‘<li’ . $id . $value . $class_names .’>’;

$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}

จากนั้นไปที่ header.php ของธีม
เอาโค้ด ’walker’ => new CustomLinkModifierWalker(), ไปใส่ตามด้านล่าง

));

หากต้องการทราบการอัพเดทของ wordpress การใช้งาน Plugin qTranslate สำหรับผู้ที่ต้องการทำเว็บไซต์ด้วย WordPress หลายภาษา และเรื่องที่เกี่ยวข้อง แนะนำให้กด ที่ facebook ด้านล่างนี้เลยค่ะ เผื่อที่จะได้อัพเดทก่อนใคร

อัพเดทเมื่อ วันพฤหัสบดีที่ 24 ตุลาคม พ.ศ. 2556 ในหมวดหมู่ของ wordpress เรื่อง wordpress การใช้งาน Plugin qTranslate สำหรับผู้ที่ต้องการทำเว็บไซต์ด้วย WordPress หลายภาษา

LabelsHD