2026年7月29日

WordPressのRTL（右から左）言語対応テーマを作る方法

テーマ・デザイン

はじめに

この記事では、WordPressのテーマを開発する際にRTL（Right-To-Left）言語に対応させる方法を紹介します。RTL言語はアラビア語やヘブライ語など、右から左へと文字が読まれる言語群です。

症状・背景

このテーマが必要になる主な場面:

RTL対応の言語でWordPressサイトを運営する場合
ユーザーインターフェースやデザイン要素の方向性をRTLに対応させる必要がある場合
アラビア語やヘブライ語などのユーザー向けにコンテンツを提供する際

手順・設定方法

ステップ1: RTLスタイルシートの追加

# functions.phpファイルを開き、以下のコードを追加します。
function wp_rtl_add_styles() {
    if ( is_rtl() ) {
        wp_enqueue_style( 'rtl-styles', get_template_directory_uri() . '/css/rtl.css', array(), false, 'all' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_rtl_add_styles' );

# RTLスタイルシートのCSSファイルを作成し、必要なスタイルを追加します。

ステップ2: レイアウトと方向性の調整

# CSSでレイアウト要素の方向性を調整します。
body.rtl {
    direction: rtl;
    text-align: right;
}

# RTL対応のためにフローティング要素の向きを変更します。
.rtl .float-right {
    float: left !important;
}

ステップ3: リソースと画像の配置

# RTL用のスライドショー画像やアイコンなどのリソースを準備します。
function wp_rtl_add_resources() {
    if ( is_rtl() ) {
        $rtl_assets = get_template_directory_uri() . '/images/rtl/';
        echo '<link rel="stylesheet" href="' . esc_url( $rtl_assets ) . 'styles.css">';
    }
}
add_action('wp_head', 'wp_rtl_add_resources');

# RTL用の画像やアイコンをCSSで配置します。
.rtl #header-logo {
    background-image: url(images/logo-rtl.png);
}

ステップ4: 言語設定とRTL判定

# WordPress管理画面から言語設定をRTLに対応させるため、functions.phpに以下のコードを追加します。
function wp_rtl_support() {
    add_filter( 'locale', 'wp_rtl_locale' );
}
add_action('init', 'wp_rtl_support');

# ロケールがRTLの場合は方向性を変更します。
function wp_rtl_locale($locale) {
    if ( is_rtl() ) {
        return 'ar_SA';
    }
    return $locale;
}

注意事項

RTLスタイルシートは通常のCSSとは別に作成し、適切なリソースを準備すること。
テーマ全体の方向性とレイアウト要素がRTLに対応していることを確認すること。
デザイン要素や画像の配置がRTL言語で読みやすく、視覚的に正しいかをテストすること。

まとめ

1. RTLスタイルシート: 適切なCSSファイルを作成し、必要に応じて追加します。

2. レイアウト調整: レイアウト要素と方向性の変更を行うCSSコードを準備します。

3. 画像配置: RTL用の画像やアイコンを適切に配置します。

4. 言語設定: 言語設定がRTLに対応していることを確認し、必要に応じて調整を行います。

Post Views: 9