目次

日本語名のファイル

日本語名がついた画像ファイル
日本語名がついた画像ファイル

例えば、上記「ひまわり畑.jpg 」のような、日本語名がついた画像ファイルを、 WordPress の投稿編集画面に挿入するのに「ひまわり畑.jpg 」を WordPress の /wp-content/uploads フォルダにアップロードするわけですが、その際、ファイル名を日本語のままにしておくか、それとも英語というか、 a-zA-Z0-9.-_ の文字のみを使用して命名するべきか悩んでいます。どちらかで統一をするべきか。

目次まで戻る

日本語名のまま

WordPress では、日本語のファイル名のまま、アップロードから保存、使用まで可能で、実際に「ひまわり畑.jpg 」をアップロードして、 WordPress 管理画面 ≫ メディア ≫ ライブラリ を見てみても「ひまわり畑.jpg 」の名前で保存されています。 FTP ソフトで見ても同様です。

2018.02.05 追記:日本語のファイル名のままだと、 FTP ソフトでダウンロードできないこともあるかもしれないので、やはり、日本語のファイル名はやめておいたほうが良いかもしれません。

WordPress のライブラリ画面のスクリーンショット
WordPress のライブラリ画面のスクリーンショット
FTP ソフトのサーバ側 /wp-content/uploads フォルダのスクリーンショット
FTP ソフトのサーバ側 /wp-content/uploads フォルダのスクリーンショット

今の時点で、「ひまわり畑.jpg 」のファイル名、 URL の情報は以下のようになっています。

ファイル名 :
ひまわり畑.jpg

画像の URL :
https://pulogu.net/wordpress/wp-content/uploads/2016/08/%E3%81%B2%E3%81%BE%E3%82%8F%E3%82%8A%E7%95%91.jpg
※「ひまわり畑」の文字は URL エンコードされている。

添付ファイルページの URL :
https://pulogu.net/fixed-page/javascript-experiment-collection/image-file-name/attachment/%e3%81%b2%e3%81%be%e3%82%8f%e3%82%8a%e7%95%91/
※「ひまわり畑」の文字は URL エンコードされている。

目次まで戻る

URL エンコード

上記で出てきた URL エンコードとは、通常 URL として使用されない日本語などの文字を URL に適した文字に変換することです。上記の例では、「ひまわり畑」の文字が「 %E3%81%B2%E3%81%BE%E3%82%8F%E3%82%8A%E7%95%91 」に変換されています。

上記の「 https://pulogu.net/wordpress/wp-content/uploads/2016/08/%E3%81%B2%E3%81%BE%E3%82%8F%E3%82%8A%E7%95%91.jpg 」をブラウザで表示すると、ブラウザのアドレスバーの URL は、「 https://pulogu.net/wordpress/wp-content/uploads/2016/08/ひまわり畑.jpg 」になっているかもしれません。しかし、ブラウザのアドレスバーの URL をクリップボードにコピーして、メモ帳に貼り付けてみると URL エンコード済みの %xx の形式になっています。これは、ブラウザが URL エンコード済みの URL を人が見てわかりやすいように変換して表示してくれているからだと思われます。

私もよくわかっていないので、以下に JavaScript で URL エンコード、 URL デコードを行うための変換フォームを設置してみました。エンコード処理で元の文字列が %xx の形式に変換され、デコード処理で元の文字列に戻るはずです。良ければテストしてみてください。

変換フォーム

2019.1.31 もう少し使い易い変換フォームを作成しました。以下のリンクです。

↓↓↓

JavaScript で URL エンコード、 URL デコードの変換テスト。 – pulogu.net

↑↑↑

プライバシーポリシー

下記フォームの入力内容、実行結果は、当サイト管理人および外部に送信される仕組みで作成していません。ただ、何があるか分からないので、念のため、重要な情報は入力しないほうが良いと思います。

エンコードの結果

デコードの結果

目次まで戻る

どうしようか

日本語のままでも良いと思う気持ちが 8 割方を占めてきましたが、せっかくなので、あとの 2 割の方も検討してみます。

今、考えているのは以下の命名方法です。

"6 桁くらいの投稿 ID" + "-" + "翻訳サイトで日本語を英語に翻訳した結果" + ".拡張子"

6 桁くらいの投稿 ID をつけておけば数量的に不足はないと思われ、どこのページで使う画像かわかりやすく、パソコンのフォルダ内で名前順に整列した時に、 000001-xxx.ai , 000001-xxx.jpg , 000001-xxx.psd のように並ぶので、画像を作成したアプリケーションが何だったのかも分かりやすくなり、英語への翻訳結果で、その英語名から画像の大体の分別が付き、 URL エンコードされた長い URL を避けられるという算段です。

それでは、当記事の投稿 ID 「 967 」を「 000967 」と 6 桁で表記して、ハイフン( - )を付加。更に「ひまわり畑」を英語に翻訳した結果の「 Sunflower field 」と「 .jpg 」をつなげます。そうすると以下の文字列になります。

「 000967-Sunflower field.jpg 」

なかなか、良さそうなファイル名ではないですか !? 。ではこのファイル名でアップロードしてみます。

アップロード結果
アップロード結果

そうすると。「 000967-Sunflower field.jpg 」でアップロードしたファイルが「 000967-Sunflower-field.jpg 」というファイル名に変更されています。「Sunflower」と「field」の間の半角スペースを、 WordPress が自動で URL に適した文字(ハイフン)に変換してくれたみたいです。

タイトルの部分は拡張子が除去されて元のファイルのベース名がついています。

パーマリンクの部分も元のファイル名から生成されているようですが、こちらも同じく拡張子が除去されて、ファイルのベース名の部分は「 000967-sunflower-field 」と英大文字が小文字に変換されています。

総合すると、フォトショップやイラストレーターで画像を保存するときの名前から、WordPress で使用する時の最終形に合わせて、 半角スペースをハイフンにして、大文字を小文字にしておいたほうがファイルの管理が楽かもしれない。ということで以下の命名方法で考えてみます。

"6 桁くらいの投稿 ID" + "-" + "翻訳サイトで日本語を英語に翻訳した結果の半角スペースをハイフンにして大文字を小文字に変換した文字" + ".拡張子"

ただ、 WordPress にアップロードする前の画像作成の段階で、上記の命名をしたいので、Wordpress のファイル名、パーマリンクの自動変換機能が使用できません。手作業で半角スペースをハイフンに変換と、大文字から小文字への変換を行わなければなりません。というわけで、Javascript で半角スペースをハイフンに置換して大文字を小文字に変換するテストフォームを作ってみました。

テストフォームを作ったあとに思いました。どう考えても手作業のほうが早いのではないかと。

テストフォーム

プライバシーポリシー

下記フォームの入力内容、実行結果は、当サイト管理人および外部に送信される仕組みで作成していません。ただ、何があるか分からないので、念のため、重要な情報は入力しないほうが良いと思います。

目次まで戻る

参考情報

以上、閲覧ありがとうございました。

目次まで戻る

コメントを残す

  • わかる範囲でしかお答えできませんが、質問も大歓迎です。
  • * のついた項目は必須になります。
  • お名前が未入力の場合は「匿名」という名前で送信されます。
  • 投稿していただいたコメントは、当ブログ管理者の承認後に表示されます。全体的には、以下の流れになります。
    1. コメントを送信。
    2. このページに自動で戻ってきて何の変化もない状態です。
    3. 都度、管理者承認。
    4. コメントが表示されます。
*
コメント欄では、次の HTML タグと属性を使用することができます。 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

同じカテゴリの投稿( JavaScript )

前後の投稿