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

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 มันก่อน

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("ภาษาไทย text");

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

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

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

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

จากนั้นแก้ปัญหาเรื่องเมนู  ให้เพิ่มโค้ดนี้ลงไปที่ไฟล์ชื่อ 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';
}

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

4.ท่านสามารถเขียน CSS ไปควบคุมการแสดงผล ธงชาติ ได้เองตามปกติน่ะครับจะเป้นแบบไหนก็ได้ก็แล้วแต่เรา
จบแล้วครับปัญหาที่ผมเจอ และก็ใช้งานไปประมาณนี้ หวังว่าคงเป็นประโยชน์ไม่มากก็น้อยน่ะครับ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("ภาษาไทย text");

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

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

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

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

จากนั้นแก้ปัญหาเรื่องเมนู  ให้เพิ่มโค้ดนี้ลงไปที่ไฟล์ชื่อ 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|

ไปลักษณะนี้