BOGOとDeepL Pro API translation pluginでWordPressの多言語化をした時の知見

昨今グローバル化が進んでいて…というのは建前でw、手っ取り早くアクセスとページ数を稼ぎたいため、過去記事を多言語化する中で得た知見をまとめたいと思います。

多言語化プラグインの選定

WordPressで多言語化プラグインで検索するといろいろ出てくる中、候補として選んだのは「WPML」「Polylang」「BOGO」の3つでした。

WPMLはDB内が荒らされそうなので却下、Polylangがかなり候補に上がっていましたが、BOGOの以下の一文で決定。

独自テーブルをたくさん作ったり後で頭痛を起こすような HTML コメントの混入をしない、とても素直な多言語化プラグイン。

WordPressのデータベースは基本ずっと使い続けるものなので、なるべくシンプルにしておきたい。そうすることで、未来の変化にも対応しやすくなるだろうということを最優先事項にしました。

そこを重視したため、作業が若干面倒な部分はありますw

翻訳

機械翻訳でやる事は確定していますが、翻訳に定評のあるDeepLで翻訳したかった。そのために選択したプラグインが「DeepL Pro API translation plugin」です。

このプラグインは、開いているページのタイトルと記事を「翻訳するだけ」のプラグインです。いちいち文章をコピペしたり、張り替えたりする作業を短くするためのプラグインだと思ってください。

「DeepL Pro API translation plugin」を使うには、DeepL APIの契約が必要です。以下の実費がかかります。

  • 月額630円
  • テキスト1,000,000文字あたり2,500円(金額ストッパーがあるので、使いすぎにならないので大丈夫)

費用は節約したいので、作業は1ケ月以内に終わらせる事が前提ですw
結構な値段だと思うかもしれませんが、実は安い方です。翻訳にDeepLを使いつつ、多言語化する他のプラグインは高いです。月額5,000~10,000円位します。そう考えると安いほうだと思います。

DeepL Pro API translation pluginの知見

今回使った「DeepL Pro API translation plugin」ですが、結論から行くと、翻訳はできるが、バギーな点が結構ありました。以下に、その知見を書いていきます。

Classic Editor必須、Gutenberg非対応

執筆時点で、Classic Editorプラグイン必須、Gutenberg非対応となっています。Gutenbergは今後Pro版として有料対応になるようです…

Update 2020/07 : yes, I’m working on a Gutenberg compatibility + a Pro version to batch translate.

Update 202007 : そうそう、Gutenberg互換+Pro版でバッチ翻訳をしています。

WP Githuber MDが衝突

私はMarkdownで記事を書いているため、「WP Githuber MD」を使っていますが、こちらのプラグインと衝突してうまく翻訳できません。翻訳作業をするときは無効化しましょう。

Default target languageが選べない

APIキーを入れて翻訳設定を変更しようとしても、プルダウンに言語が表示されませんw
まぁここは一番上の空欄を選んで置けば大丈夫です。(各記事の翻訳画面で選択できます)

翻訳設定

各記事に新たな項目が追加されています。翻訳元は「japonais」、翻訳したい言語は「anglais」を選択します。anglaisとは、英語の事です。ちなみに翻訳には10秒くらいかかりますので、あせらずお待ちください。

ビジュアルエディタでしか動作しない

ビックリな仕様ですがw、なんとビジュアルエディタ側でしか動作しません。テキストエディタ側ではうんともスンとも言いません。ご注意ください。

つまり、不要なエディタ系プラグインはすべてOFFにして、かつ、ビジュアルエディタで行う必要があります。

BOGOで複製後、一旦一覧にでないと翻訳が反映されない

BOGOで英語用の記事を複製し、翻訳するのですが、そのまま更新しても反映されません!
理由はわかりませんが、複製後、一旦一覧画面に戻り、再度編集画面にいくことで更新・公開ボタンがちゃんと処理されます。

翻訳記事は日本語記事と同じ日付にしていくのがよい

過去記事を普通に複製・翻訳・公開すると、公開時の日付となってしまいます。
これがあとあと面倒になるので、手動で日本語記事と同じ日付にすることをおすすめします。

記事一覧でも日本語記事のすぐ近くに英語記事があった方が便利だと思います。

なぜこの組み合わせにしたか

理由は上述したように、DB内を変な汚され方をされたくないからです。
また、全部の記事を多言語化する必要もないのかな、と思っています。明らかに日本にしかニーズのないような記事を多言語化する意味はないと思うのです。

海外の方が、日本株の銘柄の情報なんて水モノの情報ほしいですかね?そう考えると、腐りづらい情報を中心に多言語化するのがいいと思いました。

最後に

こんなに使いづらいんだ…と思った方もいるかもしれませんが、個人的には実は満足しています。
というのも、今回はAPIを使って翻訳していますが、新規記事については、無料版でやればいいからです。

作業時間がが縮まらないのは仕方がないかもしれません。でも1万円払ってイメージ通りできないより、多少手間がかかっても、確実にできる方を選びました。その方がデータもすっきりしますしね。

よかったら参考にしてみてください。

今回のホームページリニューアルで行った事

ホームページのリニューアルで今回行った事をメモしておきたいと思います。

すべての記事をMarkdownに変更

何度かリニューアルを行う中で、懸案事項だった、htmlとMarkdownの混合状態。今回はそれらをすべてMarkdownに変更しました。

いろいろ探してみたのですが、残念ながら全自動というわけには行かず、泣く泣く手動で作業を行いました。

その作業で作業の短縮につながったプラグインが「WP Githuber MD – WordPress Markdown Editor – WordPress プラグイン | WordPress.org 日本語

こちらのプラグインは、Markdownエディタでありながら、html→Markdownにコンバートしてくれる機能がついているのです。なので、大まかにMarkdownに変換し、細かい部分を手動で修正していきました。

上記プラグインで大変なのは、moreタグの存在。変換時に消えてしまうので、その都度自分で設置していました。

ただ、それを差し引いても普通に手作業より楽にできますよ。

WP Githuber MDを使う事により、メンテナンスが終了しているJP Markdownは削除しました。

Amazon、楽天のアフィリエイトを一括管理できるように

Amazon、楽天のアフィリエイトも設置していたのですが、ツールが変わってアフィリエイトとしての意味をなしていない記事がたくさん存在していまっていました。それらを今回「商品リンク管理プラグインRinker(リンカー)」を使って管理する事にしました。

商品を登録すると、専用のショートコードを生成してくれるので、それをコピペするだけ。

便利なのは、どの記事に設置したのかを別途一覧で確認できる事。削除も簡単に判断できるのがいいですね。

時代に合わせた製品に入れ替える時も、商品側のマスターを変えればいいので、楽です。

商品に1つずつつけると大変なので、カテゴリやタグごとに商品を決めてしまうのがてっとり早いのかな、と感じました。

このあたりの一括管理はまだ完全にできていないので、追々やっていきたいなと思います。

SEOプラグインの変更

SEOプラグインといれば「All in One SEO Pack – WordPress プラグイン | WordPress.org 日本語」が鉄板でしょう。

ただ今回はよりシンプルなプラグインがよいといろいろ探した結果、「SEO SIMPLE PACK – WordPress plugin | WordPress.org」にしました。

こちらがいいのは、日本の実情に合わせたものになっていること、もちろんすべて日本語、使わないような無駄な機能がないことが決め手でした。

無駄なテーブル、カスタムフィールドの削除

いろいろなプラグインを使っていた弊害で、データベースに不要なテーブルやカスタムフィールドが溜まっていましたので、それらを削除しました。

今回やらなかった事

画像のWebP化は今回行いませんでした。Markdownを使っているからか、うまくプラグインが動かなかったからです。

その代わり、画像サイズを500pxと軽量化することで、サイト全体が軽くなっていると思います。その結果「PageSpeed Insights」で96、99点となかなかの高評価になりました。

さいごに

当サイトで現在使っているプラグインなども追って紹介したいと思います。
Note風味で軽量のサイトができて満足しております。

最短で旧ビジュアルエディタの見た目を実際と合わせるコード

クライアントへ納品する際、ビジュアルエディアも見た目に合わせていく必要があります。editer-style.cssを作って~という流れは知っているのですが、なにかスマートではないので、自分なりに単純作業化させたので、コードを載せておきます。

はじめに

  • Gutenberg(グーテンベルグ)は使いません。旧エディタです。プラグイン「Classic Editor」を入れます

コード

functions.phpに以下のコードをコピペします。

//旧ビジュアルエディタ用CSSファイル読み込み
function wpdocs_theme_add_editor_styles() {
  add_editor_style( 'style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

//旧ビジュアルエディタのクラス名に任意のclassを追加する
add_filter( 'tiny_mce_before_init', 'tiny_mce_before_init_custom_demo' );
function tiny_mce_before_init_custom_demo( $mceInit ) {
//追加するクラス名を付け加える
$mceInit['body_class'] .= ' postBody'; //エディタの基軸となるクラス名を入力
return $mceInit;
}

  • editer-style.cssといった別ファイルは読み込みません。通常読み込むstyle.cssを想定しています。
  • [postBody]の箇所には、エディタの基軸となるクラス名を入力してください。

普通にCSSを書く

普通にCSSファイルを書いてください。上記例で行くと、postBodyクラスを基軸によく使うタグのスタイルを記載します。

.postBody{
    h2{}
    h3{}
    p{}
    ul{
        li{
    }
}
dl{
    dt{}
    dd{}
}
//…以下省略

}//postBody

エディタに余白をもたせるCSSコード

自分のスタイルだけの場合、エディタエリアにいっぱいいっぱいに表示されます。そのため中に余白を設けます。

body.mce-content-body.wp-autoresize{
  padding: 20px !important;
}

WordPressの年アーカイブリストで、年の追加、投稿数をaタグ内に入れるコード

WordPressの月アーカイブだと投稿数が少なすぎる場合、年アーカイブリストを使うのですが、いろいろ使いづらい部分を改良するコードを紹介します。

不便な所

  • wp_get_archives();を使用
  • 年アーカイブに「年」の文字を付与
  • 記事カウント数をリンクタグ内に入れる
  • 記事カウントのかっこ()を取り、spanタグを追加

コード

functions.phpに以下のコードをコピペ

function filter_to_archives_link( $link_html, $url, $text, $format, $before, $after ) {
  if ( 'html' === $format ) {
      $output = preg_replace('/.*((d+))/','$1',$after);
    $link_html = "
  • $before$text"."年 "."$output
  • n"; } return $link_html; } add_filter( 'get_archives_link', 'filter_to_archives_link', 10, 6 );

    表示該当箇所にwp_get_archiveを追加

      'yearly', 'limit' => '5', 'format' => 'html', 'before' => '', 'after' => '', 'show_post_count' => true, 'echo' => 1, 'order' => 'DESC', 'post_type' => 'post' ); wp_get_archives( $args ); ?>

    ブログテーマをCocoonにしました

    ここ1週間ぐらいワードプレスのテーマをいろいろ着替えていましたが、最終的に「Cocoon」と言うテーマに落ち着きました。

    今回はこの「Cocoon」と言うテーマに落ち着いた経緯を書きたいと思います。

    適度に詰まったデザイン

    これは私の性格的な問題かもしれませんがホームページのデザインを選ぶときに、適度に密度のあるデザインを選びます。

    無料のワードプレステーマはたくさんあるのですが、そのどれもが洗練されていてかっこいいデザインばかりです。

    その洗練さを表現するために余白をたっぷりとっているのですが、私はそれが逆に気になってしまいます。

    デザイナーで言うところの余白恐怖症でしょうか^_^

    「Cocoon」は適度な密度感があるため、候補として選びました。

    豊富なオプション

    「Cocoon」には、非常にたくさんのオプションが用意されています。

    アフィリエイトの出す日を決められるのはもちろんのことパソコンとモバイルで出す広告を変更できたり、MB大様の広告も出せるようになったり、便利な機能が揃っています。

    あと、個人的に凄い機能だなと思ったのは、アマゾン、楽天、Yahoo!などのアフィリエイトを簡単に設置できるショートコートがついていることです。

    私はウェブ関連の仕事をしているため、アフィリエイトコードを貼ること自体は難しいことでは無いのですが、いちいちコード作ったり、体裁を整えたりするのがめんどくさいんですね^^
    なぜならこのブログは仕事ではなく半分趣味のようなものだからです。
    趣味のブログはなるべく手を抜きたいと思うのが自然では無いでしょうか^
    ^

    その点、この「Cocoon」と言うワードプレステーマはその辺も簡単にするための仕組みがあらかじめついています。以下のようにショートコードを書くだけで、3種類のeコマースに対応したコードを吐き出してくれます。

    [amazon asin=”4774173800″ kw=”WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)”]

    多少カスタマイズが必要

    全体的に、問題のない国んですが、やはり気になる部分があったのでそこを修正しています。

    具体的には記事ごとのサムネイルが、少し大きすぎるようで、適度に小さめにしています。
    これも上述の密度感と関係しますがサムネイルが大きすぎるので、スカスカに感じてしまうんですね。

    記事一覧型のサムネイルの画像サイズを以下のようなコードを追加して小さくしています。

    .entry-card-thumb {
        width: 20%;
    }
    

    .entry-card-content {
    margin-left: 23%;
    }

    .a-wrap {
    margin-bottom: 5px;
    }

    .related-entry-card-thumb {
    width: 15%;
    }
    .related-entry-card-content {
    margin-left: 18%;
    }

    .widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a{
    padding: 3px 0;
    }

    .entry-card-snippet, .related-entry-card-snippet {
    color: #777;
    line-height: 1.6;
    }

    総合力が高いワードプレステーマ

    若干気になるところがありつつも、総合的にはかなり完成度の高いテーマだと感じました。

    デザインがゴロゴロ動いていましたが、しばらくはこのテーマを使い続けたいと思っています。

    WordPressの_e()と__()関数の第2引数について

    WordPressの海外テーマを見ていると、知らない関数や引数がありました。今回は_e()と__()の第2引数についてメモ。

    _e()と__()関数は?

    簡単に書くと「国際化対応のための関数」です。WordPressは世界中で使われているので、こういった関数があるんですね。

    基本的に、第1引数は記載した「英文」を、第2引数は記載した「ロケール」に応じた翻訳を見ます。蛇足ですが、第1引数には必ず英語を入力するようにしましょう。

    __('英文', 'ロケール');
    _e('英文', 'ロケール');
    

    第2引数の「ロケール」とは?

    やっと本題ですw。第2引数の「ロケール」とは、翻訳ファイルを区別するための名称だと思ってください。例えば以下のようなコードがあったとします。

    _e('hello world', 'hoge');
    

    すると、wp-content/languages/hoge.moのファイルを見て、記載された翻訳を表示する流れです。

    WordPressでテンプレートやドメインURLを出力するショートコード

    投稿記事内の画像指定をする時に、「テーマファイル内の画像を指定したい」「メディアに登録するのはめんどくさい」という時がよくあります。クライアントに画像を触らせたくない時などとか。
    そういった時にfunctions.phpにコピペするだけでシンプルに使える、ショートコードをメモしておきます。

    続きを読む

    WordPressで新着表示(New!)を指定日間自動で表示する方法

    1つ前の記事の応用ですが。WordPressで新着表示を自動で表示する方法も考えてみました。

    確認環境

    • WordPress3.1.4(多分どのバージョンでも大丈夫だと思います)

    コード

    functions.phpに、以下のコードを記載します。前回のコードと全く同じですねw

    = $prevday){
            echo 'New!';
        }
    }
    ?>

    使用方法

    上記コードを読み込ませた状態で、以下のように記述します。ブログの投稿日を渡して、Newの期間内であれば表示します。

    spanタグはthe_date関数内で指定してもいいのですが、テーマ側の記述をできるだけシンプルにしたかったので、あえてタグは空白状態にしています。

    WordPressではApacheのKeepAlive設定をOffにした方が速い気がする

    Apacheのhttpd.confに「KeepAlive」という設定があるのですが、そのサーバでWordPressを運営している場合、KeepAliveをOffにした方が体感的に速くなった気がするのでメモ。サーバ関係には疎いので、そんな事ないよ等と言ったツッコミお待ちしておりますw

    続きを読む

    WordPressのパンくずをカスタマイズする

    WordPressのパンくずは、プラグインを使ってやることが多いと思いますが、SEOを考慮したサイトのパンくずのhtmlソースを見た時に独特な方法だったため、プラグインでは実装できそうにありませんでした。どうにかして再現できないかと試行錯誤して作ってみたので、そのコードをメモ。

    続きを読む

    WordPressのカテゴリ名に小文字のxがある場合に×へ変換されるのを直す方法

    カテゴリ名に「100×100」と言ったxが付いている場合、最終出力時にxの部分が×に変換されてしまう現象があります。WordPressの最新版では大丈夫かもしれませんが、手元で運用しているWordPressサイトは変換されてしまうので、直す方法をメモしておきます。

    続きを読む

    【随時更新】私がWordPressに入れている定番プラグイン

    以前、「私がWordPressに入れている定番プラグイン-2011/10 | 1bit::memo」という記事を書きましたが、あれからさらに調整をかけたので、そのプラグインをメモしておこうと思います。

    内容的には、ど定番プラグインばかりなので、面白くないと思いますww

    プラグイン

    Meta Manager
    All in One SEO Packの代替。descriptionとkeywordタグを自動入力するプラグイン。titleタグは対応しなくなるので、テンプレートに以下のように記述。
    <?php wp_title(&#039;|&#039;, true, &#039;right&#039;); ?><?php bloginfo(&#039;name&#039;); ?>
    Akismet
    定番スパム排除プラグイン。WordPressに標準で入っていますね。
    Google XML Sitemaps
    定番サイトマップ用XML作成プラグイン。
    Breadcrumb NavXT
    パンくずを作成するプラグイン。定番。
    WPtap Mobile Detector
    自分はスマホ向けテーマは別に作成する派なので、対応機種に応じてテーマを切り替えるためのプラグインを使っています。Ktai Styleの代替。というか、ガラケーはもう対応しない方向にしてる。
    cbnet Ping Optimizer
    Smart Update Pingerの代替。新規記事更新時のみpingを送信するプラグイン。
    Tweet old post
    過去のブログ記事をツイートしてくれるプラグイン。
    WordTwit
    記事を投稿したらツイートしてくれるプラグイン。
    WP Multibyte Patch
    日本語関係の処理を最適化してくれるプラグイン。WordPressに標準で入っていますね。
    DB Cache Reloaded Fix
    WP Super Cacheの代替。キャッシュを生成してサイトを軽くしてくれるプラグイン。
    WP Total Hacks
    不要なコードを削除したり、リビジョンを無効にしたりなど、かゆい所に手が届くプラグイン
    Resize at Upload Plus
    大きなサイズの画像を自動的にリサイズしてくれるプラグイン。客先が1,000万画素の画像をアップしようとする時にサーバを圧迫するため、入れています。
    WordPress Database Backup
    WordPressのDBデータをバックアップするプラグイン。自分は一番簡素なこちらを使用。(WordPress Database Backup:WordPressのデータベースを定期バックアップするプラグイン | 1bit::memo
    PuSHPress
    PubSubHubbubによる即時通知プラグイン。

    使用頻度は低いけど使っているプラグイン

    RSS Footer
    配信RSSの各記事の下に内容を追加するプラグイン。記事のコピー対策的な意味合いが強い。
    AddQuicktag
    コード画面で、よく使うタグや言葉を登録しておけるプラグイン
    WordPress Popular Posts New!
    よく読まれている記事を表示するプラグイン。日・週など細かい指定ができるので使用頻度が上がった。
    Faster Image Insert New!
    画像を連続挿入するプラグイン。画像の多い記事を作成する時に便利。ブログ作成専用アプリは、記事IDを無駄に消費するので使用頻度が減った。
    Delete-Revision
    自動保存すると、どんどんデータが貯まっていくため、それらを削除するプラグイン。自動保存はWP Total Hacksで止めているので使う機会はほとんどないですが。

    まとめ

    プラグインは減らしていきたい方向なのに、以前より増えているようなw

    たとえばWordTwitのような外部サービスに任せられるようなものは、できるだけ切っていき、自サイトは軽くしていく事が重要な気がします。

    WordPressでスマートフォン表示時の投稿記事内画像をテキストリンクに置き換える方法

    WordPress向けスマホ用テーマを作っていて気になる箇所があります。それは、PC向けに作成した記事内画像をスマホで表示するため、表示が重くなっていること。

    ガラケー時代と比べて読み込みも速くなったとはいえ、速い表示が求められると思っています。実際、私も画像が重すぎるページはそれだけで見なくなっています。

    そこで、スマホで読み込んだ時に記事内画像をテキストリンクに変換し、タップして見てもらう形をとりたくて、方法を探したらちょうどいい記事があったのでメモ。

    続きを読む

    WordPressアクションフック自分用まとめ

    WordPressのアクション(&フィルタ)に若干苦手意識を持っています。
    プラグイン API/アクションフック一覧 – WordPress Codex 日本語版」を見ても、用意されたアクションがどう動くのかがいまいちピンとこないからなのかなと思いました。

    なので勉強&備忘録の意味でよく使いそう?なアクションを自分なりにまとめてみることにしました。随時追加していく形になると思います。

    続きを読む