newsberg模板添加多语言下拉框

老司机

/www/wwwroot/chamber.teochew.jp/wp-content/themes/newsup/inc/ansar/hooks
顶部加了多语言代码
<div class="mg-head-detail hidden-xs">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-6 col-xs-12">
                <ul class="info-left">
                    <?php newsup_date_display_type(); ?>
                </ul>
            </div>

            <div class="col-md-6 col-xs-12">
                <ul class="mg-social info-right">
                    <?php if($header_social_icon_enable == true) { do_action('newsup_action_header_social_icon'); } ?>
                </ul>
                <div class="custom-lang-switcher-inline">
                  <?php
                    pll_the_languages(array(
                      'dropdown' => 0,
                      'show_flags' => 1,
                      'show_names' => 1,
                      'hide_if_empty' => 0,
                      'display_names_as' => 'name',
                    ));
                  ?>
                </div>
            </div>
        </div>
    </div>
</div>

红色为添加部分

老司机

将这段 CSS 添加到外观 > 自定义 > 附加 CSS，或者主题的 style.css 文件中。

/* 语言切换器整体右对齐 */
.custom-lang-switcher-inline {
  text-align: right;
}

/* 每个语言项 */
.custom-lang-switcher-inline li {
  display: inline-block;
  margin-left: 8px;
}

/* 未选中语言按钮 */
.custom-lang-switcher-inline a {
  display: inline-block;
  color: #ffffff;
  background-color: #ff6f61;     /* 更鲜艳的浅红色 */
  padding: 4px 10px;
  height: 24px;
  line-height: 16px;
  border-radius: 5px;
  font-size: 13px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

/* 未选中语言按钮悬停 */
.custom-lang-switcher-inline a:hover {
  background-color: #ff3b2f;     /* 鲜红色，明显变深 */
  color: #ffffff;
}

/* 当前选中语言按钮 */
.custom-lang-switcher-inline .pll-current a {
  background-color: #8b0000;     /* 深暗红色，区别明显 */
  color: #ffffff;
  font-weight: bolder;
}

/* 国旗图标 */
.custom-lang-switcher-inline img {
  vertical-align: middle;
  margin-right: 4px;
  width: 16px;
  height: auto;
}