How can I translate my navigation menu's LINKS with qtranslate on wordpress?

Question

I have a bilingual (english/arabic) wordpress site. I was able to successfully translate the navigation menu items. However, the menu links on the arabic site, link to the default language which is English.

How can I tell wordpress that I need the menu links to change on the arabic site (I need the links on the arabic site to include /ar, for example: www.talalonline.com/ar instead of www.talalonline.com)

thanks

Solution 1

@maha, I searched a lot about this and found the solution here, but the answer is a little fuzzy…

As you don't want to mess with your WP core files, all changes are in the theme. Your theme is located in wp-content/themes/your-theme-name/

Find your theme's function.php and add the code above in the end of the file, before the php end tag (?>):

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 ? ' class="' . esc_attr( $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 .= '</a>';
        $item_output .= $args->after;

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

Then, you have to find where's your menu view inside your theme. The theme I'm using implement's it in the header.php. Maybe your's uses another file name, like header-fancy-theme.php.

My header view code was like this:

<?php
$nav_sec_menu_params = array(
    'depth' => 0,
    'theme_location' => 'sec-menu',
    'container_class' => 'menu-topmenu-container',
    'menu_class' => 'menus menu-topmenu',
    'fallback_cb' => 'block_sec_menu'
);
wp_nav_menu($nav_sec_menu_params);
?>

All you have to do is add the Walker implementation in the param array:

<?php
$nav_sec_menu_params = array(
    'walker' => new CustomLinkModifierWalker(),
    'depth' => 0,
    'theme_location' => 'sec-menu',
    'container_class' => 'menu-topmenu-container',
    'menu_class' => 'menus menu-topmenu',
    'fallback_cb' => 'block_sec_menu'
);
wp_nav_menu($nav_sec_menu_params);
?>

Then, in your menu, you'll use |lang| after the language URL ,like this:

I know it's not the exactly use you were hopping of automatic language links, but this may solve your problem.

Solution 2

 //tested and worked for me.
//use native wordpress filter wp_setup_nav_menu_item

 function qtrans_menuitem( $menu_item ) {

// convert local URLs in custom menu items
   if ($menu_item->type == 'custom' && stripos($menu_item->url, get_site_url()) !== false){
    $menu_item->url = qtrans_convertURL($menu_item->url);
}     
return $menu_item;
 }

 add_filter('wp_setup_nav_menu_item', 'qtrans_menuitem', 0);

Solution 3

fork of qtranslate does this out of the box:

https://wordpress.org/plugins/qtranslate-x/

in the menu item in the field "navigation label" just provide strings for both languages:

[:en]English Text[:de]Deutsch Text

tested with qTranslate-X 2.7.8, Wordpress 4.1 and Twenty Fifteen 1.0 theme

Comments

[maha]

Thanks for your reply.. however, I have already managed to translate my menu TEXT.. What I need to translate is the menu LINKS (meaning I would like to append '/ar' to the menu's links.. how can I do that?

[a.boussema]

Worked for me ! Thanks a lot

[Kamel Labiad]

Hi guys, sorry for the newbie question, where should I put this code?

[ashraf mohammed]

@Kamel Labiad put it in your plugin

[Kamel Labiad]

@ashrafmohammed yes which file?

[Kamel Labiad]

@Eduardo The URL part is not working for me, when I click the link it takes me to example.com|en|http://www.example.com/ar/|ar| instead of the language side of the site.

[ashraf mohammed]

@Kamel you can put it anywhere in your plugin after "Plugin Header". to create wordpress plugin please follow this link codex.wordpress.org/Writing_a_Plugin

[Eduardo Russo]

@KamelLabiad, did you made the changes in the code? It should be parsing the "pipes" instead of sending them to the html.

[Kamel Labiad]

@EduardoRusso I just doped the idea of translating the menu on my site, it added more complicity to the URI, the content on my site is mostly arabic but the menus are in english and I think users they can still be able to use it that way you could see it here kamellabiad.com, thanks.

[bk138]

Cool, have you tried submitting this upstream at qianqin.de/qtranslate ?