2013.06.27
wordpress

qTranslate 表示している言語のリンクを非表示にする方法

ワードプレスの多言語化プラグインで一番簡単に設定できるのがqTranslateだと思います。

日本語化していないプラグインですが設定がすごく簡単なのでおススメです。
こちらからダウンロードできます。

基本的な設定方法

プラグインをインストールすると、管理画面が英語になってしまいますが、後で日本語に戻せるので大丈夫です。
ダッシュボード左メニューで、Settings(設定)⇒Languagesとクリック。

そこで出てきた画面を少し下へスクロールすると下記のような表があります。
wp_plugin11

日本語と英語で設定するなら、Actionで、EnableをクリックしてDisableと表示されるようにします。

一度Save Changesと書いてある青いボタンをクリックすると、日本語と英語で設定したので、画面上部に下記のように表示されるはずです。
wp_plugin12

デフォルトにする言語をラジオボタンで選択します。

そして再度Save Changesで設定を保存します。

基本的に設定はコレだけです。
あとは、ウィジェットにqTranslate Language Chooserというのが出てくるので、通常のウィジェットと同じように追加するだけです。

追加する際に

  • Text only ・・・テキストリンクのみ
  • Image only・・・国旗(画像)のリンクのみ
  • Text and Image・・・国旗とテキストリンク
  • Dropdown Box・・・ドロップダウン

と表示方法の選択肢があります。

そして投稿画面にいくと、タイトルに英語と日本語の枠が表示されるようになり、本文もタブで英語、日本語と切り替えて入力ができるようになります。

ウィジェットではなく、テンプレートに表示する方法

ウィジェットで表示するのではなく、テンプレートの任意の場所に直接コードを書くこともできます。
言語切り替えボタンを設置したい場所に以下を記述。

<?php echo qtrans_generateLanguageSelectCode('text'); ?>

textの部分は、テキストリンクのみを表示する場合です。
他にimage(国旗)、both(テキストと国旗)、dropdown(ドロップダウン)と記述ができます。
例えば、textにした場合、bothにした場合はそれぞれ下記のように表示されます。
wp_plugin10

CSSで表示をカスタマイズする方法

qTranslateではCSSのクラスが設定されていますので、該当するクラスを通常通りCSSで編集すればOKです。

例えば、リンクをボタンのようにしたい場合はCSSに下記のように記述するとできます。

ul.qtrans_language_chooser { 
     margin:0;
     padding:0;
}
ul.qtrans_language_chooser li{
     width:80px;
     height:20px;
     float:left;
     background:#c7b299;
     text-align:center;
     padding:2px 0;
     margin:2px;
     list-style:none;
}
ul.qtrans_language_chooser li a {
     text-decoration:none;
     color:#fff;
     font-weight:bold;
}
こんな感じのボタン日本語English

CSSなので大きさや背景色、文字色などいろいろアレンジできますね。

現在表示している言語以外の言語リンクだけを表示する方法

さて、前置きが長くなりましたが、ここからが本題です。
例えば、日本語で表示しているときは、英語に切り替えるリンクのみを表示、英語のときは逆に日本語リンクのみを表示というように、表示されている言語への言語リンクを非表示にする方法です。

1.CSSを使う方法

CSSに以下を記述します。

ul.qtrans_language_chooser li.active {
display:none;
}

現在表示されている言語にはactiveというクラスが追加されているので、それをdisplay:none;で非表示にするというわけです。

2.functions.phpに記述する方法

qTranslateプラグイン本家サイトのフォーラムではこの方法が書かれていましたのでこちらのほうが正式かもしれません。
(英語ですがこちら

functions.phpに以下を記述します。

<?php
function curPageURL() {
    $pageURL = 'http';
     if ($_SERVER["HTTPS"] == "on") {
        $pageURL .= "s";
    }
     $pageURL .= "://";
     if ($_SERVER["SERVER_PORT"] != "80") {
          $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
     }
    else {
          $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
     }
return $pageURL;
}

function langlist () {
   if (qtrans_getLanguage() == 'en') {
      echo '<a href="' . qtrans_convertURL(curPageURL(), 'ja') . '">日本語</a>';
   } elseif (qtrans_getLanguage() == 'ja') {
      echo '<a href="' . qtrans_convertURL(curPageURL(), 'en') . '">English</a>';
   }
}
?>

19行目~21行目が表示に関する記述なのでここにCSSのクラスを追加したり、<img src=””>で画像をボタンにしたりできるので、1の方法よりももっとカスタマイズが自由にできますね。

そしてテンプレートの表示したい部分に以下を記述。

<?php langlist(); ?>

多言語の入力欄がない部分で各言語の表示を変えたいとき

タイトルと本文などは英語、日本語と入力欄が作成されますが、入力欄が表示されていない場所に対応させる方法。
ウィジェットや、カスタムフィールドの値、またはテンプレートの好きな場所で英語のとき、日本語のとき、のように言語設定が可能です。

1.ウィジェットやカスタムフィールドなどの場合

例えばウィジェットの最新の記事のタイトルを

[:ja]最新の記事[:en]New Entry

とすると、日本語表示の時は最新の記事、英語表示の時はNew Entryと切り替わります。

2.テンプレートの任意の場所で言語によって表示を変える場合。

日本語表示の場合と、英語表示の場合で条件分岐です。
テンプレートに以下のように書きます。(こちらを参照)

<?php if(qtrans_getLanguage() == 'ja'):?>

    <h1>日本語表示の時に表示したい内容を記述。</h1>

<?php elseif(qtrans_getLanguage() == 'en'):?>

    <h1>英語表示の時に表示したい内容を記述。</h1>

<?php endif;?>

短い場合は以下のように。(こちらを参照)

<?php _e("<!--:en-->英語表示の時の内容<!--:--><!--:ja-->日本語表示の時の内容<!--:-->"); ?>

管理画面が英語になってしまったのを日本語に戻す方法

wp_plugin13
管理画面の左のメニューの下の方に、設定で選択した言語が表示されているので、日本語に戻す場合は日本語をクリックすると管理画面が日本語に戻ります。

関連する記事

コメント & トラックバック
  1. 田尻光彦

    日本語・EnglishのLanguage Switcherをメニュー構造に追加しました。URLは
    #qtransLangSw?flags=none?title=none&current=hidden
    、ナビゲーションラベルは「言語」としています。メニュバーでは「言語」という文字と下にEnglishと2段に表示されてしまいます。この「言語」を非表示にしてEnglishのみが折り返さずに他のメニュー項目と同列に表示されるようにしたいのですが、方法をご教示いただけたら幸いです。宜しくお願いいたします。

    (表示は右端)に加えました。


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP