【WordPress】投稿のスラッグを日本語から英語に自動変換する方法【Deep L連携】

WEBデザインWordpress
この記事は約8分で読めます。

みなさん、こんにちは。あずまです。

今回はこのブログを作るにあたって投稿したあとのパーマリンクが日本語になって、urlアドレスをコピーすると「~%E6%」のような文字列となってしまって、見た目も悪いしSEO的にもよろしくないのではないかと考え解決策を調べて、更に作ってみました。

なぜWordPressのスラッグを自動変換する必要があるの?

WordPressのスラッグを自動変換する必要がある理由は、特にweb制作において、SEO対策やユーザーエクスペリエンスを向上させるためです。スラッグは、記事のタイトルを基に生成され、googleなどの検索エンジンでの表示に影響を与えます。

WordPressの基本設定では記事を保存する際に日本語でスラッグが保存されてしまい、urlに影響を与えます。手動でも英語に打ち替えることも可能ですが英語を調べたり、翻訳したり、手動で入力するのが面倒でよね?

そこで、functions.phpにDeepL APIを使った自動で日本語から英語に自動変換してスラッグに追加する仕組みを作っちゃいました。手動での編集が不要になり、作業効率が向上します。

さらに、スラッグが一貫していることで、SNSでのシェア時にも適切なリンクが生成され、ユーザーが迷うことなくアクセスできるようになります。もし、スラッグが不適切な場合、訪問者は記事を見つけることができず、結果的にウェブサイトの訪問数が減少してしまいます。

日本語のスラッグが持つ問題点

WordPressでは、記事やページのURLを設定する際に「スラッグ」を使用します。日本語のスラッグは、SEOやユーザーエクスペリエンスに影響を与えるいくつかの問題点があります。

まずはじめに、日本語のスラッグはUTF-8にエンコードされ「~%E6%97%A5%E6%9C%AC%E8%AA%9E」のようにurlが長くなります。英語や他の言語に比べて文字数が多くなるため、URLが複雑になり、特にSNSやメールで共有する際に不便です。

次に、ブラウザやプラットフォームによっては日本語のスラッグが正しく表示されないことがあります。特に、古いブラウザや特定のデバイスでは、文字化けが起きることがあり、ユーザーの混乱を招く恐れがあります。

さらに、SEOの観点から見ても、日本語のスラッグは英語に比べて検索エンジンのインデックスにおいて劣る場合があります。多くの検索エンジンは英語を優先的に処理するため、日本語のスラッグが適切に評価されない可能性があります。

SEO対策としての英語スラッグの利点を解説

英語のスラッグを使用することは、SEO対策において多くの利点があります。まず、検索エンジンは英語を主要な言語として処理するため、英語のスラッグはより効果的にインデックスされやすくなります。これにより、検索結果での表示順位が向上し、サイトへのトラフィック増加が期待できます。

次に、英語のスラッグは短くシンプルに保つことができるため、urlの可読性が向上します。短いurlは、ユーザーにとっても覚えやすく、シェアやリンクの際にも便利です。また、SNSなどでの共有時に、英語のスラッグは視認性が高く、クリック率の向上につながることがあります。

さらに、英語のスラッグは国際的なアクセスを考慮した場合にも有利です。特に多言語サイトや国際的なオーディエンスをターゲットとする場合、英語を使用することで、幅広い層にアプローチしやすくなります。

最後に、英語のスラッグは、コンテンツの内容を簡潔に示すことができるため、ユーザーエクスペリエンスの向上にも寄与します。明確で関連性のあるスラッグは、訪問者が何についてのページかを瞬時に理解できるため、サイト内の回遊率を高める効果があります。

検索をするとでてくる「記事IDに自動的に変換する方法」ばかりが出てくる問題

ボクはまずはじめに、プラグインで解決できないかを検索しました。様々な先人たちのブログ情報を見ましたが、私が求める答えはなかなか見つかりません。Google先生の検索がアホなので有用な情報が出てきません。

一つだけ日本人の方が作っていたプラグインを見つけることができました。以下の記事です。

しかし残念ながら、このやり方ではIBMのサービスAPIを利用していたのですが、IBMのサービスが終了していたで、もう実現できなかったのです。

そこで、次はfunctions.phpに追記して変換する方法を模索。しかしながら、検索で見つかるのは日本語スラッグを捨てて、自動的に記事IDへと変更して投稿するやり方ばかりだったのです。

日本語のスラッグを英語に自動変換する方法

無いなら作ればいいじゃないか

先程のプラグインにインスパイアされて、同じ手順(だと思われる方法)で、2024年版としてボクが同じ思想で作ったものになります。現在のこのブログにも利用しているものになります。

functions.phpに次のコードを書いてください

完成したコードはこちら。funcition内にコピペしてください。

function translate_slug_with_deepL($post_id) {
    // 投稿が自動保存の場合は何もしない
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;

    // 投稿のタイトルを取得
    $post_title = get_the_title($post_id);

    // DeepL APIを使用して英語に翻訳
    $api_key = 'YOUR_DEEPL_API_KEY'; // ここにAPIキーを入力
    $url = 'https://api-free.deepl.com/v2/translate';

    $response = wp_remote_post($url, array(
        'body' => http_build_query(array(
            'auth_key' => $api_key,
            'text' => $post_title,
            'target_lang' => 'EN'
        )),
        'headers' => array('Content-Type' => 'application/x-www-form-urlencoded')
    ));

    if (is_wp_error($response)) {
        return; // エラーが発生した場合は終了
    }

    $body = json_decode(wp_remote_retrieve_body($response), true);
    if (isset($body['translations'][0]['text'])) {
        $translated_title = $body['translations'][0]['text'];
        $slug = sanitize_title($translated_title);

        // スラッグを更新
        $args = array(
            'ID' => $post_id,
            'post_name' => $slug,
        );
        remove_action('save_post', 'translate_slug_with_deepL'); // 無限ループを防ぐ
        wp_update_post($args);
        add_action('save_post', 'translate_slug_with_deepL'); // アクションを元に戻す
    }
}
add_action('save_post', 'translate_slug_with_deepL');

※十分に配慮して制作していますが、素人制作のため環境によっては問題が発生してしまう場合があります。自己責任にてご利用してください。

functions.phpにコードを書く方法

WordPressの管理画面から「外観」「テーマエディター」の順番で選びます。

functions.phpにコードを追加して更新する

コードの解説

このコードの処理の流れは次のとおりです。

  1. タイトルを取得
  2. DeepLを利用して英語に翻訳
  3. Slugの自動置き換え

コードの中の、この部分に自身のDeepL APIキーを入力してカスタマイズしてください。

    // DeepL APIを使用して英語に翻訳
    $api_key = 'YOUR_DEEPL_API_KEY'; // ここにAPIキーを入力

DeepL APIキーの取得方法は以下の方がわかりやすく解説してくれていました。

これで、コードを更新すれば設定は完了です。

投稿でスラッグを手動で設定しなくても自動的に英語に翻訳されるようになり、管理も簡単になりますね!

この記事を書いた人
あずま
あずま

2024年、事業に失敗して多額の負債を抱えることに。
経済的に自由になるために様々な副業に挑戦していきます。

あずまをフォローする
\ SNSでシェアする /
タイトルとURLをコピーしました