0
206
2018-12-14

WordPress, WPML - Переключатель языков только ISO код языка (RU,UK)

Рассмотрим на примере как сделать свой переключатель языков для плагина WPML. В котором будут отображаться только ISO код языков сайта (а не флаги и названия как по умолчанию).
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Друзья, перед вами часто мной используемый вариант кода, который позволит Вам отобразить языки переключателя в более приятном виде чем при отображении его по умолчанию. Да и изображения флагов на сайте как по мне выглядят “не очень”, ну а названия языков, дак просто занимают не лишнее место в меню сайта. И так мой вариант кода позволит Вам отображать языки в формате “EN | RU” то есть в ISO формате.

В итоге мы получим вот такой переключатель:

Как сделать свой переключатель WPML

Для применения кода на своем сайте в коде ниже, в данной строке:

if( !empty($languages)  && $args->theme_location == 'top' ){

Место "top" Вам нужно указать theme_location вашего меню.

Добавить в function.php

// --------------------------------------------------------

add_filter( 'wp_nav_menu_items', 'language_selector_special',10,2 );
function language_selector_special( $items,$args ){
    $languages  = icl_get_languages('skip_missing=0&orderby=code');
    $ls_str     = NULL;

    if( !empty($languages)  && $args->theme_location == 'top' ){

        foreach($languages as $l){
                        $ls_str .= "<span class='wpml_lang_span a-class-lang-code-{$l['language_code']}'><a href='{$l['url']}' class='wpml_lang_link a-class-lang-code-{$l['language_code']}'>";
                        $ls_str .= $l['language_code'];
                        $ls_str .= "</a></span>";
                        $ls_str .= '';
        }

        $ls_str = $items . '<li>'.substr($ls_str,0,-2).'</li>';

        return $ls_str;
    }

    return $items;
}

// WPML ISO wpml_language_switcher
// add_action('header_right_after','iso_list_menu');
/*******************************************************
***  WMPL SHORTCODE[wpml_custom_lang_ISO] only ISO  ****
********************  START  ***************************
********************************************************
HTML:
<span class="SDStudio_custom_icons_mobile_block">
    <?php echo do_shortcode("[wpml_custom_lang_ISO]"); ?>
    [wpml_custom_lang_ISO]
</span>

CSS:
Если нужно скрыть активный язык (и разделитель), делаем через CSS:

div#SDStudio-wpml-shortcode span.active,
span.separator_wpml_lang {
    display: none;
}
********************************************************/
function wpml_shortcode_lang_ISO() {
    $languages = icl_get_languages('skip_missing=0');

    // if( 1 < count( $languages ) ) {
    if (function_exists('icl_get_languages')) {
             $languages = icl_get_languages('skip_missing=0&orderby=code&order=desc');
             $langs = '';
                     if(!empty($languages)){
                             foreach($languages as $l){
                                     $class = $l['active'] ? ' class="active"' : '';
                                     if ($class) {
                        $langs .=  '<span ' . $class . ' id="wpml_lang_span">' . strtoupper ($l['language_code']). '</span>';
                    } else {
                        $langs .=  '<a href="'.$l['url'].'" class="wpml_lang_link">' . strtoupper ($l['language_code']). '</a> <span class="separator_wmpl">|</span> ';
                    }
                             }
                             $langs = substr($langs,0,-3);
                             $langs = '<div class="lang_selector">'.$langs.'</div>';
                             // echo $langs;
                     }
     }

    return  $langs;
    }

add_shortcode( 'wpml_custom_lang_ISO', 'wpml_shortcode_lang_ISO' );
/*******************************************************
***  WMPL SHORTCODE[wpml_custom_lang_ISO] only ISO  ****
********************  END  *****************************
********************************************************/
// -------------------------------------------------------

CSS Стили:

span.a-class-lang-code-ru, span.a-class-lang-code-en {
    font-family: Oswald !important;
    font-size: 18px;
    text-transform: uppercase;
    margin: 10px 10px 10px 20px;
    padding: 4px 0px 4px 0px;
    font-weight: 800;
}

 span.a-class-lang-code-en {
    display: none;
}

 span.a-class-lang-code-ru {
    display: none;
}

@media screen and (max-width: 1530px) {
    span.a-class-lang-code-ru, span.a-class-lang-code-en {
        font-family: Oswald !important;
        font-size: 18px;
        text-transform: uppercase;
        margin: 15px 10px 10px 20px;
        padding: 4px 0px 4px 0px;
        font-weight: 800;
    }

    div#SDStudio_Fixed_Menu span.a-class-lang-code-ru, span.a-class-lang-code-en {
        font-family: Oswald !important;
        font-size: 18px;
        text-transform: uppercase;
        margin: 3px 10px 10px 20px;
        padding: 4px 0px 4px 0px;
        font-weight: 800;
    }
}

@media screen and (min-width: 768px) and (max-width:1299px) {
    div#SDStudio_Fixed a {
        font-family: Oswald !important;
    }

    span.a-class-lang-code-ru, span.a-class-lang-code-en {
        font-family: Oswald !important;
        font-size: 18px;
        text-transform: uppercase;
        margin: 0px 0px 0px 0px;
        padding: 16px 0px 4px 0px;
        font-weight: 800;
    }

}

@media screen and (max-width:767px){
  span.wpml_lang_span{
    display:none;
  }
}
/* Фиксированное меню */
@media screen and (min-width: 921px) and (max-width:1299px) {
  div#SDStudio_Fixed_Menu span.a-class-lang-code-ru,
  div#SDStudio_Fixed_Menu span.a-class-lang-code-en {
      font-family: Oswald !important;
      font-size: 17px;
      text-transform: uppercase;
      margin: 3px 10px 10px 20px;
      padding: 4px 0px 4px 0px;
      font-weight: 800;
  }
}
@media screen and (max-width: 920px){
div#SDStudio_Fixed_Menu span.a-class-lang-code-ru,
div#SDStudio_Fixed_Menu span.a-class-lang-code-en {
    font-family: Oswald !important;
    font-size: 17px;
    text-transform: uppercase;
    margin: 3px 10px 10px 20px !important;
    padding: 11px 0px 4px 0px;
    font-weight: 800;
}

}

/* Оформление внешнего вида переключателя для мобильных (в менюхе) */

/* Шрифт сылки */
a.wpml_lang_link.a-class-lang-code-en,
a.wpml_lang_link.a-class-lang-code-ru {
    font-family: Oswald;
}

.lang_selector {
    padding-right: 10px;
}

/* CSS:
Если нужно скрыть активный язык (и разделитель), делаем через CSS: */

div.lang_selector span.separator_wmpl,
span#wpml_lang_span.active {
    display: none;
}

.lang_selector a.wpml_lang_link {
    font-family: Oswald;
    font-size: 21px;
    margin-top: -3px;
    display: block;
    font-weight: 500;
    color: #33445d;
}