Wordpress

WordPress에서 사용자의 위치에 따라 HTML Lang 속성 동적으로 설정하기

0

이 글에서는 WordPress 사이트에서 사용자의 위치와 브라우저 설정에 따라 HTML `lang` 속성을 동적으로 설정하는 방법을 알아봅니다. 이 방법을 통해 방문자가 다양한 지역에서 웹사이트를 더 쉽게 접근하고 사용자 친화적으로 이용할 수 있습니다. 또한, 로그인한 사용자의 언어 설정을 저장하고 적용하는 방법도 함께 살펴봅니다.

1. 소개

웹사이트의 접근성과 사용자 경험을 향상시키기 위해 사용자의 위치와 선호 언어에 맞게 HTML의 `lang` 속성을 설정하는 방법을 살펴보겠습니다. 이를 통해 다국적 사용자들에게 더 나은 서비스를 제공할 수 있습니다.

2. GeoLite2 데이터베이스 설정

MaxMind의 GeoLite2 데이터베이스는 IP 주소를 기반으로 사용자의 위치를 확인할 수 있는 도구입니다. 이 데이터베이스는 무료로 제공되며, 기본적인 위치 정보를 제공하는 데는 충분합니다.

  • MaxMind 웹사이트에서 GeoLite2 데이터베이스를 다운로드합니다.
  • 다운로드한 `GeoLite2-Country.mmdb` 파일을 서버의 적절한 위치에 업로드합니다. 예: `wp-content` 디렉토리.

3. GeoIP2 PHP 라이브러리 다운로드 및 설치하기

Composer를 사용하지 않고 GeoIP2 PHP 라이브러리를 직접 다운로드하여 설치할 수도 있습니다.

  • MaxMind의 GitHub 저장소에서 GeoIP2 PHP 라이브러리를 다운로드합니다.
  • 다운로드한 파일을 `wp-content` 디렉토리에 압축 해제합니다.

4. GeoIP2 라이브러리 Autoload 파일 생성하기

압축을 해제한 디렉토리에 Autoloader 파일을 생성하여 PHP 파일을 자동으로 로드합니다.

// wp-content/GeoIP2/autoload.php 파일 생성
spl_autoload_register(function ($class) {
    // 프로젝트의 기본 디렉토리
    $base_dir = __DIR__ . '/src/';
    // 클래스 이름에서 네임스페이스 접두사 제거
    $prefix = 'GeoIp2\\';

    // 클래스 이름이 접두사를 갖지 않는 경우, 무시
    $len = strlen($prefix);
    if (strncmp($prefix, $class, $len) !== 0) {
        return;
    }

    // 나머지 클래스 이름
    $relative_class = substr($class, $len);

    // 파일 경로 생성
    $file = $base_dir . str_replace('\\', '/', $relative_class) . '.php';

    // 파일이 존재하면 require
    if (file_exists($file)) {
        require $file;
    }
});

5. 브라우저 언어 감지 및 설정 함수 작성하기

사용자의 브라우저 설정에서 언어를 감지하고, 이를 바탕으로 HTML `lang` 속성을 설정하는 함수를 작성합니다.

// functions.php 파일 수정
require_once ABSPATH . 'wp-content/GeoIP2/autoload.php';
use GeoIp2\Database\Reader;

function get_browser_language($type = null) {
  $lang = 'en';
  if (isset($_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
    $langs = explode(',', $_SERVER['HTTP_ACCEPT_LANGUAGE']);
    if (count($langs) > 0) {
      // 언어 및 품질 지수를 분리하여 배열로 저장
      $lang = explode(';', $langs[0]);
      $lang = strtolower(substr($lang[0], 0, 2)); // 언어 코드의 첫 두 문자 반환
    }
  }

  // 오른쪽에서 왼쪽으로 쓰는 언어를 확인
  $rtl_languages = ['ar', 'he', 'fa', 'ur'];
  $dir = in_array($lang, $rtl_languages) ? 'rtl' : 'ltr';

  if ($type == 'attribute') {
    return sprintf('lang="%s" dir="%s"', esc_attr($lang), esc_attr($dir));
  }

  return $lang; // 기본값
}

function get_user_language() {
  if (is_user_logged_in()) {
    $user_id = get_current_user_id();
    $user_lang = get_user_meta($user_id, 'user_language', true);
    if ($user_lang) {
      return $user_lang;
    }
  }
  return get_browser_language(); // 브라우저 언어 감지 함수 호출
}

function set_html_lang_attribute() {
  echo '<html ' . get_browser_language('attribute') . '>';
}

// 워드프레스의 wp_head 액션에 함수 추가
add_action('wp_head', 'set_html_lang_attribute');

6. 사용자 프로필에 언어 선택 추가

로그인한 사용자가 언어 설정을 선택할 수 있도록 사용자 프로필 페이지에 언어 선택 필드를 추가합니다.

// 사용자 프로필 페이지에 언어 선택 추가
function add_user_language_field($user) {
  ?>
  <h3>언어 설정</h3>
  <table class="form-table">
    <tr>
      <th><label for="user_language">언어</label></th>
      <td>
        <select name="user_language" id="user_language">
          <option value="en" <?php selected('en', get_the_author_meta('user_language', $user->ID)); ?>>English</option>
          <option value="ko" <?php selected('ko', get_the_author_meta('user_language', $user->ID)); ?>>Korean</option>
          <option value="fr" <?php selected('fr', get_the_author_meta('user_language', $user->ID)); ?>>French</option>
          <option value="ar" <?php selected('ar', get_the_author_meta('user_language', $user->ID)); ?>>Arabic</option>
          <option value="he" <?php selected('he', get_the_author_meta('user_language', $user->ID)); ?>>Hebrew</option>
          <option value="fa" <?php selected('fa', get_the_author_meta('user_language', $user->ID)); ?>>Persian</option>
          <option value="ur" <?php selected('ur', get_the_author_meta('user_language', $user->ID)); ?>>Urdu</option>
          <!-- 필요한 다른 언어 추가 -->
        </select>
      </td>
    </tr>
  </table>
  <?php
}
add_action('show_user_profile', 'add_user_language_field');
add_action('edit_user_profile', 'add_user_language_field');

function save_user_language_field($user_id) {
  if (!current_user_can('edit_user', $user_id)) {
    return false;
  }
  update_user_meta($user_id, 'user_language', $_POST['user_language']);
}
add_action('personal_options_update', 'save_user_language_field');
add_action('edit_user_profile_update', 'save_user_language_field');

7. header.php 수정하여 lang 속성 설정하기

`header.php` 파일을 수정하여 HTML의 `lang` 속성을 설정합니다.

<!DOCTYPE html>
<html <?php echo get_browser_language('attribute'); ?>>
<head>
    <!-- 헤더 내용 -->
</head>
<body <?php body_class(); ?>>
    <!-- 바디 내용 -->
</body>
</html>

결론

이 가이드를 통해 사용자의 위치와 브라우저 설정, 그리고 로그인한 사용자의 선호도에 따라 WordPress에서 HTML `lang` 속성을 동적으로 설정할 수 있습니다. 이를 통해 방문자가 다양한 지역에서 웹사이트를 더 쉽게 접근하고 사용자 친화적으로 이용할 수 있으며, GeoLite2 데이터베이스와 GeoIP2 PHP 라이브러리를 활용하여 사용자의 위치를 감지하고, 사용자 프로필 페이지에서 언어 선택 기능을 추가하여 사용자 경험을 향상시킬 수 있습니다.

답글 남기기