Drupalのモジュール（PHPFilterなど）で言語選択ブロックの改造

問題点：Drupalの多言語サイトでの言語選択スイッチがすべての言語を一覧として表示するので場所が取りすぎ

• 背景：Drupal7.54、Language Iconで言語選択肢に国旗アイコンを追加します
• 多言語ユーザーインターフェースが導入
  • Drupalのモジュール（Locale）の使用で多言語サイトの導入 (275)
  • Drupalの多言語ユーザーインターフェースの導入と設定 (274)
• 多言語のユーザーインターフェス切り替えスイッチブロックをサイトのヘッダーに設置します
  • 複数の言語（例：中国語、日本語、英語）などがあれば、一覧表示されて、場所が取りすぎ
  • ユーザーにとって一度言語を選択したらあまり変わらないので、すべての表示必要はありません

改善案：多言語選択スイッチブロックを表示にして選択された言語のみを表示させる

• 選択された言語のみをヘッダーに表示します
• 選択された言語アイコンをクリックすると言語選択スイッチが表示/非表示にします
  

モジュール（PHPFilter/BlockAttributes）などを利用して言語選択ブロックを改善します

• 以下のモジュールを利用します
  • Block Attributes
  • PHP Filter（コア）
  • Language Icon
  • ｊQuery Update （ｊQuery1.7以降に設定を勧め）
• ブロック管理画面（ホーム » 管理 » サイト構築 » ブロック）で言語選択スイッチブロックをヘッダーに設置します
  • 言語選択ブロックのｃｓｓクラスを「flag-well」に設定
  • 言語選択のタイトルを表示しない（タイトルに「<none>」を入力）
• ブロック管理画面（ホーム » 管理 » サイト構築 » ブロック）で選択された言語の表示ブロックを新規作成します
  • 選択された言語の表示PHPコード

    <?php
      global $language ;
      if ($path = variable_get('languageicons_path', drupal_get_path('module', 'languageicons') . '/flags/*.png')) {
        $title = $language->name;
        // Build up $image for theme_image() consumption.
        $image = array(
          'path' => str_replace('*', $language->language, check_plain($path)),
          'alt' => $title,
          'title' => $title,
          'attributes' => array(
            'class' => array('language-icon'),
          ),
        );
        if ($size = check_plain(variable_get('languageicons_size', '16x12'))) {
          list($width, $height) = explode('x', $size);
          $image += array('width' => $width, 'height' => $height);
        }
        print "<a href='#' class='has-anchor-link ripple'>".theme('image', $image)."</a><div class='no-anchor-link'>".theme('image', $image)."<span class='language-title'>".$language->native."</span></div>";
      }
    ?>

  • カスタムブロック、言語選択スイッチブロックを修飾するｃｓｓ定義

    <style>
      .flag-well {
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
      }
        #block-locale-language {
        position: absolute;
        right: -25px;
        top: 35px;
        padding: 5px 0;
        visibility: hidden;
      }
      #block-locale-language ul {
        padding: 0;
        margin: 0 0 0 1em;
        width: 100px;
      }
      #block-locale-language ul li {
        list-style: none;
    	display: inline-block;
      }
      #block-locale-language ul li a{
        color: black;
      }
      #block-locale-language.opened {
        visibility: visible;
      }
      #block-locale-language.closed {
        visibility: visible;
      }
      #language-setting-block .no-anchor-link {
        display: none;
      }
      #language-setting-block img {
        width: 25px;
        margin-right: 10px;
        opacity: 0.5;
        filter: alpha(opacity=50);
      }
      #language-setting-block img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100);
      }
    
    </style>

  • 言語選択スイッチの表示/非表示制御JavaScript

    <script>
      jQuery(document).ready( function($) {
        $('#language-setting-block a').on('click',function(e){
            var dropdown = $('#block-locale-language');
            e.preventDefault();
            if(dropdown.hasClass('opened')){
                dropdown.removeClass('opened').addClass('closed');
                setTimeout(function(){
                    dropdown.removeClass('closed')
                },500);
            }else{
                dropdown.addClass('opened');
            }
        });
      } );
    </script>

  • カスタムブロックのID：「language-setting-block」