「Word Press」カテゴリーアーカイブ

4.WordPressの自作プラグインを多言語対応させる方法。.moファイルをwordpress.orgに追加

WordPressの自作のオリジナルプラグインを多言語対応する方法

 

順序は大まかに

0. 概要:Wordpressの自作プラグインを公式ページに登録・公開して、プラグイン追加からインストールできるようにする方法

1.WordPress.orgのアカウントに登録し、公式ディレクトリにプラグインを申請する

2.プラグインの公式ディレクトリへのアップロードに必要なSubversionのダウンロードとインストール

3.Subversionを使ってWorpdress.orgの公式ディレクトリにアップロード&バージョン管理

4..potファイルから .mo ファイルを作ってプラグインの多言語化(国際化)
↑いまここ↑

 

自作プラグインを英訳(または日本語訳)する手順

wordpress.org/plugins/へと移動する。

今回は英語ページで説明する。日本語ページでも基本的にやる事は全く同じ。

WordPress.orgに登録した、メールアドレスとパスワードで、wordpress.orgにログインする。
pi-translation-0

 

ログインしたら、自分のID名をクリックする。
pi-translation-1

 

左のメニューの「Plugin」日本語だと「プラグイン」をクリックしたら、自作プラグインが表示される。
その自作プラグイン名をクリック。
pi-translation-2

 

自分のプラグインの公開ページ(ディレクトリ)に行けるので、右の「Admin(日本語の場合 管理)」をクリック。
pi-translation-3

 

Adminページの中ほどの「Continue(日本語の場合 続ける)」のボタンをクリック。
pi-translation-4

Generate POT file
For more information on POT files, domains, gettext and i18n have a look at the I18n for WordPress developers Codex page and more specifically at the section about themes and plugins.

日本語:
POT ファイルを生成
POT ファイル、ドメイン、gettext、i18n に関して更に詳しい情報は I18n for WordPress developers Codex ページ (英語) をご覧ください。さらに具体的にはテーマとプラグインについてのセクションが参考になるでしょう。

と書いてある部分。

POTファイルというのが、プラグインを多言語対応させる元となるものなので、ここからダウンロードするページへ移動する。

 

「Get POT(日本語:POTを取得)」をクリックして、POTファイルをダウンロード。
pi-translation-5

 

POTファイルがダウンロードされるので、これを Poedit を使って、翻訳ファイルの .moファイルを作成する。
pi-translation-6

参考記事:
Poeditのダウンロードとインストール、簡単な使い方

.potファイルから.poや.moファイルを作ってWordPressの言葉を変更する方法

 

翻訳した.moファイルの名前を必ず
(プラグイン名)-ja.mo
とすること。 .po も同じ名前にしておくといい。
pi-translation-8

 

翻訳が終わったら、作業フォルダ(作業フォルダの説明はここ参照)の中に、「languages」フォルダを作って、その中に .mo ファイルを入れる。
.mo だけでも翻訳はされるが、ついでに .po も入れておくと迷わなくていい。
pi-translation-languages

 

Subversionを使ってWordpress.orgのディレクトリ内の「trunk/languages」にアップロードする。

まず「cd」コマンドで作業フォルダへ移動して
「svn add」コマンドで、「languages」フォルダごとアップロードできる。
pi-translation-7

 

プラグインにlanguagesへのパスを追記する。
(自作プラグイン).phpのソース上部に記載すること。
pi-translation-phpadd

 

<?php
/*
Plugin Name: プラグインの名前(英語が望ましい)
Plugin URI: プラグインの更新情報などを載せるURL(適当でもいい)
Description: プラグインの説明文。翻訳前なので英語で。
Version: 数字。最初は1.0でいい。バージョンアップするごとに変更
Author: 作者の名前(適当OK)
Author URI: 作者のURL(適当OK)
License: GPLv2 or later
Text Domain: WordPress.orgのレジストリ
Domain Path: /languages
*/

load_plugin_textdomain( ‘WordPress.orgのレジストリ’, false, basename( dirname( __FILE__ ) ).’/languages’ );

これで、言語ファイルが 「/languages」に入ってますよ。と指定することになる。

 

コミット(更新を実行)するために、「commit -m “バージョン数”」コマンドでコミットする。
pi-translation-10

ちなみに画像では、コマンド実行ミスをしているので、「既にバージョン管理下におかれています」とエラーが出ている。
エラーが出た場合でも、焦らず正しいコマンドを実行すれば大丈夫。

 

サーバーの反映には10分程度必要だが、これでプラグインの多言語化が完成!
translation-pija

————-
関連記事:

0. 概要:Wordpressの自作プラグインを公式ページに登録・公開して、プラグイン追加からインストールできるようにする方法

1.WordPress.orgのアカウントに登録し、公式ディレクトリにプラグインを申請する

2.プラグインの公式ディレクトリへのアップロードに必要なSubversionのダウンロードとインストール

3.Subversionを使ってWorpdress.orgの公式ディレクトリにアップロード&バージョン管理

4..potファイルから .mo ファイルを作ってプラグインの多言語化(国際化)

この記事も読まれています

投稿一覧の画面にアイキャッチ画像を表示させるプラグイン – WordPress

WordPressのダッシュボードに、アイキャッチ画像/Featured imageを、投稿一覧/All Posts画面に表示させよう

 
Wordpressの管理画面の、投稿一覧のページには、通常は、タイトル、作成者、カテゴリー、タグ、コメント、日時のみが表示されている。

ここにアイキャッチ画像のサムネイルを追加しよう。
 

サムネイル追加の方法はたくさんあるが…プラグインが一番簡単

functions.phpに記述する方法もあり、それほど難しくないのだが、今回は最も簡単で、最もWordpressっぽい、プラグインによる方法を紹介。

 
plugin-new
WordPress管理画面の左メニュー「プラグイン」>「新規追加」をクリック。
 

plugin-3


画面右側の検索ボックスに「Featured image to All-Posts」と書いて検索。
 
プラグイン「Featured image to All-Posts」で、「いますぐインストール」をクリック。
 
インストール完了画面が表示されたら、「プラグインを有効化」をクリック。

これでおしまい。アイキャッチ画像追加表示に設定はありません。

eyecatch
管理画面の、投稿一覧にアイキャッチ画像のサムネイルが追加されます。

-s2memberプラグイン日本語化-.potファイルから.poや.moファイルを作ってWordPressの言葉を変更する方法

s2memberプラグインを日本語化するため、言語ファイル.moを.potから作る

無料・有料会員制サイトを作って月額課金などをするのに役立つプラグイン「s2member」。優秀なプラグインだが全部英語。
これを日本語化していく過程を紹介。

ja-mo-0
例えばメンバー登録画面はこんな感じ。全部英語。
管理画面の設定も全部英語。

管理画面も登録ページも翻訳の仕方は基本的に同じ工程で大丈夫。
 

.potファイルをダウンロードする

 
ja-mo-1
テーマの言葉とは違う場所にあり、プラグイン用の翻訳ファイルはプラグインの中に入っている。

s2memberの場合は、wp-content/plugins/s2member/includes/translations にある s2member.pot をダウンロードする。

 

.potファイルから.poを作る

 
まず、poeditを開く。

なお、poeditが無い場合はpoeditのダウンロード、インストール方法、使い方はこちらを参照のこと。

.poがあればそのまま開けるが、s2memberには.poファイルも.moファイルもない。
なので、
ja-mo-2
「ファイル」→「POTファイルを元に更新します…」をクリック。

ja-mo-3
.potから.poを作る場合、まず翻訳言語の設定があるので「日本語」を選ぼう。

これでひとまず.poファイルはできた。

 

.poファイルを編集して翻訳していく

 

「編集」→「検索」で変えたい文字や文章を探す。
例えば、 Password と検索して、その下の欄に パスワード と入力すれば、Wordpressでも翻訳後の文字が表示される。

これを利用すれば、「Username」は普通「ユーザー名」と翻訳されるが「くそったれ名」などと表示させることも可能。

ja-mo-4
例として、適当に何個か日本語にしてみた。

日本語にすると、英語の右に、日本語が表示される。
パスワード、パスワード強度など。

 

.moファイルにして保存

 

普通に保存すればOKだが、保存しようとするとエラーが表示される場合がある。
ja-mo-5-error
翻訳に1個の問題が見つかりました。
エラーがある項目はリスト中で赤くマークされています。エラーの詳細は、その項目を選択すると表示されます。
The file was saved safely and compiled into the MO format, but it will probably not work correctly.

(このファイルは安全に保存され、MOファイルに変換されました。しかし正常に動作しない可能性があります。)という感じ。

ja-mo-6-error
warning: header field ‘Language-Team’ still has the initial default value.(注意:ヘッダーの’翻訳チーム’がデフォルトの値のままです。)

このエラーが出た場合、リスト中でどこも赤くなっていないはずなので、ヘッダーを修正しなくてはならない。

「カタログ」→「設定」
ja-mo-7-error
ここの翻訳チームの部分を適当に修正する。何でもいい。

 

.moファイルをFTPでアップロードし、Wordpressの画面を見てみる

 

アップロード場所は、
ja-mo-10
potファイルが入っていた場所と同じ。
wp-content/plugins/s2member/includes/translations

自動で保存すると、ファイル名がja_JP.po、ja_JP.moになるがpotファイルの名前が、s2member.potの場合は、s2member-ja.poにしておくこと。でないと、Wordpressの翻訳には反映されない。

ja-mo-8ja-mo-9
こんな感じで文章や言葉を変更することができる。

WordPressのカテゴリーページを記事タイトルの一覧表示にする簡単な方法

カテゴリーページに記事一覧を表示する方法

プラグインを使ってWordPressのカテゴリーページを記事タイトルのリスト表示にする。
WordPress 2.6~4.2.xで動作確認済み。

WordPressをブログとしてではなく、アップデート機能のあるWebサイトとして利用する場合は、 カテゴリ内の記事を一覧としてリスト表示したい。

kijiichiran

なので、こんな感じで、記事の抜粋ではなく、タイトルの一覧表示にする方法を紹介する。

プラグインDC Nicer Archvesを使う方法

まずは下記でプラグインをダウンロード。
ここからDC_nicer_archves.zipをダウンロード。

現在のWordPress 3.xx以上には、ダッシュボードからのインストールができないので、FTPを使ってアップロードすることになる。
まずはzipファイルを解凍。
解凍したらDC_nicer_archvesというフォルダができる。
\DC_nicer_archves\wp-content\plugins の中にある nicer_archives.php をサーバのプラグインフォルダに入れる。

そしてダッシュボード管理画面のプラグインの管理画面で「DC’s Nicer archives」を有効にする。

次に
\DC_nicer_archves\wp-content\themes\default の中にあるうち category.php と search.php をサーバ上の現在使っているテーマ内の同じファイルとを入れ替える。元々category.phpがある場合は上書き。(念のためオリジナルはバックアップしておきましょう)。

これでカテゴリーページと検索結果のページは記事タイトルのリスト表示になる。
ちなみにテーマに category.php がない場合は、上書きではなくそのままアップになるがその場合でも有効。

WordPressのPhotonが酷すぎる件。画像が表示されなくなる問題

WordPressで画像が表示(ロード)されなくなった

 
全ての写真ではなく一部が表示されなくなった場合、Jetpackのプラグインの「Photon」が原因かもしれない。
 
↓こちらはPhoton無し。↓
 
gazounarabeta
 
 
 
↓こちらPhotonを有効化した場合。↓
 
photon-kuso
 

原因と解決策はあるのか

表示されていない画像を検証してみると、ファイルサイズが大きい画像が表示されなくなっていることが分かった。

基本的にWordpressでは、画像は小さくサムネイル化されるので、普段はあまり問題にならないが、画像素材などを並べている場合は、どうしても高画質のファイルをアップする必用があるので、この場合、Photonは使えない。

なお、解決策はない。

高画質ファイルを表示する時にこそ高速化したいのに、なんとも使えない奴だ!

twentyfifteenで灰色の線をなくす方法 Wrodpress

Twenty Fifteen シンプルな記事型ブログに最適なテーマ

シンプルですっきりとしたテーマ/テンプレートなのだが、あとTwentyfifteenに限らず、Twentythirteenもだが、基本的に英語環境で開発されているので、日本語にした時にはフィーリングが合わずしっくりこない。

 

具体的には左のメニューが大きすぎる、コンテンツ部分が少し狭い。灰色のborderが邪魔。などが代表的で一見すると簡単に変更できそうだ。

 

Twentyfifteenは意外とカスタマイズしにくかった

 

理由は以下の通り
・レスポンシブデザインで作られていて、CSSのメディアアンカーを探しにくい
・width などの配置を決めるpadding: 0.7917em 1.5833emなどの桁数が多くピンとこない
・前述の灰色のborderは実はboxshadowでやっているので分かりにくい
 

twentyfifteenで、CSSで簡単にコンテンツ部分を広げる方法

CSSで以下のような記述の部分を探そう。

.site-content {
display: block;
float: left;
margin-left: 20.4118%;
width: 79.5882%;
}

.sidebar {
float: left;
margin-right: -100%;
max-width: 313px;
position: relative;
width: 25.4118%;
}

ここで、 width: や margin-left: の値を好きに変更して、デザインを確かめてみよう。

なお、先述の通り、PC用のデザインを変えたいならメディアアンカーに注意が必要!

@media screen and (min-width: 38.75em) {
/*この間の部分を変更すること*/
}

↑こういう感じのやつ。

 

twentyfifteenで、灰色のborderを非表示に

 
このborderをカスタマイズするのがやっかいだった。
理由は、borderと言いつつ、ここはbox-shadowで描画されているから見つけられなかったのだ。border-left: 1px;などといくら検索しても何も見つからない。

.post-navigation {
border-top: 0;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
margin: 7.6923% 7.6923% 0;
}

こういった感じで、色々なところにbox-shadowで灰色の線が引かれている。

これを以下のように、

box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);

すればとりあえず線は消える。

これも、メディアアンカーに注意だ!

Stinger3で関連記事の「記事を読む」の表示を変える方法

Stinger3で英語サイトを運営したい人へ

Stinger3はWordpressでも人気のテンプレートの一つだ。

色々と思うところあってこのブログではStingerは使っていないが、カスタマイズをする機会もあるのでメモ。

Stinger3では、自動で 「記事を読む」 というという文言が、記事のサムネイルと共に表示される。これは英語環境でも自動で変わってくれない。

翻訳ファイルを使ってるわけではなく、直接ソースに書き込んでいるからだ。
kanrenkijiwotuduki

小難しいことは置いておいて、これを今回は 「Read More」 に変えてみる。

 

 

編集方法

「外観」→「テーマの編集」→「home.php」を開くと

readmoreandnoposts

こんな感じで、「記事を読む」 と 「記事がありません」 と書いてる場所があるので、これを上のように、 「Read More」 と 「No Post」 のように適当に変更しよう。

ついでに、
「外観」→「テーマの編集」→「単一記事の投稿(single.php)」の中も同じように変更しておこう。
これで 「記事を読む」 の言葉を変更することができる。

readmoreni

 

関連記事:stinger3で「関連記事」の表示を変える方法

Stinger3で「関連記事」の表示を変える方法

Stinger3をちょっとだけカスタマイズしたい人へ

Stinger3はWordpressの中でも人気のテンプレートの一つ。
 
色々と思うところあってこのブログではStingerは使っていないが、友人にごく簡単なカスタマイズをお願いされる事は結構多い。
 
英語環境でStinger3を運用したいという人や、単純に言葉を変えたい人も多いので、今回は「関連記事」を変更する方法をメモしておく。
 
kanrenkiji

 

編集方法

 

WordPressの管理画面へ入り、左のメニューバーから

「外観」→「テーマの編集(画面上はエディター)」→「単一記事の投稿(single.php)」と選択し

<!–関連記事–>
<h4 class=”kanren”>関連記事</h4>

と書いてある場所を見つけよう。

これを

<!–関連記事–>
<h4 class=”kanren”>”好きな言葉”</h4>

stinger3-kanren

編集して  「ファイルを更新」  してカスタマイズ完了。

phpをいじるので、子テーマにしてもいいのだが、正直これぐらいの小さなカスタマイズなら気にしなくていい。

これでこんな感じに好きな言葉に買える事ができる。

suggest-stinger

 

これでStinger3を英語サイトとして運用することもできる。

関連記事:stinger3で関連記事の「記事を読む」の表示を変える方

【poeditのインストールと使い方】WordPressで「カテゴリ」を「カテゴリー」にしたい場合など

言語ファイルを編集して、言葉を自由に変更する方法

分かりやすく言うと、Wordpressは元々英語のものなので、日本語や、他の言語に翻訳する場合は、言語ファイルと呼ばれるものを使用している。
Wordpressでは、.moファイルが言語を定義している。
 
人にはそれぞれこだわりがあるので、「カテゴリ」と訳されているが「カテゴリー」にしたい!とか思う人もいるだろう。
 

Podeitと、.poファイルをダウンロードする

Poeditはここからダウンロードしてインストールしよう。
http://poedit.net/

 
インストールが完了して起動すると、こんな感じの画面が出てくる。
poedit-installed

これで「.poファイル」を編集しよう。

ちなみに.poファイルは

「/あなたのドメイン.com/html/wp-content/languages」

の中にある。環境によって変わるので自分のサーバーの中で探すべし。

FTPソフトなどで

「ja.po」

をダウンロードしよう。
ja.ponoyatu

 

Poeditを設定しよう

「ファイル」→「設定」から設定画面へ行き、
.mo-create
「保存時に.moファイルを自動生成する」にチェックを入れておこう。

WordPressで実際に動いてるのは.moファイルなので、.poファイルを編集しアップロードするだけでは変更は反映されないので注意。

 

.poファイルを編集して.moファイルを作ろう

.poファイルをPoeditで開いて、対応する言葉を探し出して編集、保存。
.po-edit
こんな感じ。特に何も考えなくても大丈夫。

注)友達のパソコンで、これをやって、Wordpressの色々な単語を「うんこ」とかに変えたらヤバイことになる。

 

FTPでアップロードしよう

保存したら勝手に出来る

「ja.mo」

をFTPで上書きアップロードすればOK。

WordPressにブログを移転したら、画像の縦横比がおかしくなった時の対処法

なぜみんなWordpressを持つのか、その意味は?

blog
最近では、ブログを書いてお小遣いを稼ごう的なことも簡単にできるようになってきたので、Wordpressで自分のブログを持とうという人も多いだろう。

「別にアメブロでも、Seesaaブログでも、ライブドアブログでも何でもええやんけ」

って思う人もいるかもしれないが、同じブログを書いて人に見てもらうなら、広告収入も、ブログ運営会社じゃなくて自分の懐に入る方がいいに決まってる。
money
だからこそ、みんながスマホでネットを見る今だからこそWordpressなのだ。

 

アメブロ辞める人へ

アメブロはクソなので記事のエクスポートができない。なのでFC2のブログ移転サービスを経由して、記事をエクスポート、その後Wordpressへ移転するという手順をとることになる。

FC2のブログ移転サービスは優秀なのだが、画像の幅や高さが全て指定されてしまう。

結果として
1

こんな感じになってしまう。

 

縦横比が崩れちゃったあなたへ

そもそもの原因は、Wordpressのテンプレートに、画像を幅100%にするスタイルシートの記述がある事に由来する。

例えば、有名テンプレートのStinger3も

.kizi img, .kizi wp-caption {
margin-bottom: 20px;
height: auto;
max-width: 100% !important;
}

スタイルシートにこんな感じの記述がある。

簡単に言うと

幅を100%にします。

という事だ。
これでFC2ブログからインポートした時に

<img src=”xxx.jpg” width=”xxxpx” height=”xxxpx”>

とソースを書きかえられちゃうので、縦横の比がおかしくなる。

ということで、解決策は、ソースの縦、横のサイズを無視して、自動で調節してやればいいだけなので、

.kizi img, .kizi wp-caption {
margin-bottom: 20px;
height: auto !important;
max-width: 100% !important;
}

height: auto; に !important; をつけるだけでOK。

よく分からない場合は、Stinger3のCSSの一番下にそのままコピペするだけでもOK。

分かりにくかったらコメントプリーズ!