For IT Specialist

WordPress. Polylangのフリープランでプルダウン言語スイッチャーのショートコードを作る

この記事のターゲット

WordPressの構造、コードを理解している人

概要

このサイトでも使った機能です。PolylangはWordPressを多言語対応するプラグインです。フリープランでも多機能ですが不足する機能はProプランにする以外に、自分で機能を作ることもできます。要望にある一つがショートコードで言語スイッチャーを設置することです。WordPressにfunctions.phpへショートコードの新規作成が可能です。詳細は割愛しますがテーマへfunctions.phpへ追記する作業の為、テーマのバージョン更新を行うと追記データは失われるなどの影響を受けます。子テーマを作成してカスタマイズを行いましょう。サーバにバックアップ機能があればバックアップを行う方が良い。バックアップ機能がない場合は、変更前のファイルをコピーして復元できるようにしましょう。

設置サンプル

サンプル1

サンプル2
サンプル1を元にプルダウンにSelect Languageというプルの説明と矢印が文字に重ならないようにプルダウン文字の右側に20pixel余白をCSSで追加したものです。私はCSSはテーマカスタマイズ内の追加CSSへ書きました。

導入後の使い方

このプルダウンの挙動は公式のウィジェットと同様に動作しています。設置したページのPolylangでリンクされた多言語ページへ切換えます。コードをfunctions.phpへ追記した後は、固定ページや投稿ページへショートコードを設置します。Gutenberg Editerで説明します。

  1. ページをブロックエディタで開く
  2. ブロックメニューからショートコードを設置
  3. ショートコードへ custom_polylang_langswitcher_dropdown を入力する。実際には[]でショートコードは囲む.

サンプルコード

このコードをfunctions.phpへ追記してください。
サンプルのショートコードは説明の為、文字数がおおい。任意で変更して問題はない。
デザインなども任意でCSS追記など行って使いやすくしてください。

サンプル1

PHP
// polylangの言語スイッチャーショートコードを作成できるようにします。
function custom_polylang_langswitcher_dropdown() {
    // Polylang関数が存在するか確認
    if (function_exists('pll_the_languages')) {
        // 言語リストを取得するための引数
        $args = array(
            'dropdown'        => 1, // ドロップダウンとして出力
            'show_flags'      => 0,
            'show_names'      => 1,
            'echo'            => 0,
        );
        
        // 言語リストを取得
        $languages = pll_the_languages($args);
        
        // JavaScriptで選択された言語にリダイレクトするスクリプト
        $output = "<script>
                    document.addEventListener('DOMContentLoaded', function() {
                        var langSwitcher = document.querySelector('.custom-polylang-langswitcher');
                        if (langSwitcher) {
                            langSwitcher.addEventListener('change', function() {
                                window.location.href = this.value;
                            });
                        }
                    });
                   </script>";
        
        // プルダウンメニューを追加
        $output .= '<select class="custom-polylang-langswitcher">' . $languages . '</select>';
        
        return $output;
    }
}

add_shortcode('custom_polylang_langswitcher_dropdown', 'custom_polylang_langswitcher_dropdown');

サンプル2

PHP
function custom_polylang_langswitcher_dropdown2() {
    if (function_exists('pll_the_languages')) {
        $args = array(
            'raw'   => 1,
            'echo'  => 0,
        );

        $languages = pll_the_languages($args);
        
        $output = '<select class="custom-polylang-langswitcher" onchange="window.location.href=this.value;">';
        // プレースホルダーとして機能する最初のオプションを追加
        $output .= '<option value="">' . esc_html__('Select Language', 'text-domain') . '</option>';
        
        foreach ($languages as $lang) {
            $output .= '<option value="' . esc_url($lang['url']) . '" ' . ($lang['current_lang'] ? 'selected' : '') . '>' . esc_html($lang['name']) . '</option>';
        }
        $output .= '</select>';

        return $output;
    }
}
add_shortcode('custom_polylang_langswitcher_dropdown2', 'custom_polylang_langswitcher_dropdown2');

サンプル2のCSS

CSS
.custom-polylang-langswitcher {
    padding-right: 10px; /* プルダウンの右側に余白を追加 */
}