こんにちは！NNCの大土です。
2024年ひとつめの記事はWordpressのお話です。

WordPressで大量の投稿を作成する必要があり、手入力で1件ずつ行うのが大変…！と悩んだことはないでしょうか？

そういった場合、あらかじめ投稿内容をまとめたCSVファイルを作成しておき、Really Simple CSV Importerというプラグインを使うことによって大量の投稿を一括で反映させることができます。

CSVを作成する手間がありますが、1件1件投稿を作成して内容を入力して…という作業を行うことを考えると、よりスピーディーに制作を進めることができます。

また、納品後にお客さんの更新のしやすさを考えてカスタムフィールドを使用することもよくあるケースですよね。
Really Simple CSV Importerはカスタムフィールドの内容もCSVに記入し一括反映を可能にしてくれる、とても便利なプラグインです。

アップロード自体はとても簡単にできるのでぜひ取り入れていただきたいのですが、CSVの書き方やカスタムフィールドを使用する場合の注意点がいくつかあるので、今回はそれについてお話をしていきたいと思います。

まずは、そもそものCSVデータの作成〜アップロードまでの手順をご紹介します。

CSVデータ準備からアップロードまで

1.CSVデータを準備する

まずは情報をまとめるためのCSVを作成していきましょう。
Open OfficeやLibreOfficeなどのフリーソフトを使って作成することができます。
すぐに使えるCSVフォーマットをご用意しましたので、ご自由にご利用ください！

サンプルCSVのダウンロードはこちら

上記のCSVサンプルデータにも記入されていますが、CSVを作る際、必ず1行目には下記の内容を入力する必要があります。
全部が必須というわけではなく、不要なものは削除してOKです。

また、CSVを保存するときは必ず「UTF-8」形式で保存しましょう。

2.Wordpressプラグイン「Really Simple CSV Importer」をインストール

次に、プラグインをWordpressにインストールしていきます。

使用するReally Simple CSV Importerというプラグインは長らく更新がされていないのですが、2024年1月時点では問題なく機能しています。

一度アップロードしたら以降は使用しない、という場合はプラグインの無効化もしくは削除を行うと良いと思います。

3.WordpressにCSVデータをインポートする

WordPressの　ツール→インポート →CSVの下にある「インポーターの実行」をクリック
該当のCSVファイルを選択し、「ファイルをアップロードしてインポート」ボタンを押して完了です。

問題なくアップされると、このように「すべて完了しました。」と表示されます。

投稿一覧を見ると、投稿が反映されていることが確認できます。

補足：CSVデータ作成時の注意点

CSVの形式は必ず「UTF-8」で保存

CSVを保存するときは必ず「UTF-8」形式で保存しましょう。
別の形式で保存されているとアップロードが上手く行かないのでご注意ください。

,や+などの記号や特殊文字を入力する場合は必ず文字コードに置き換え

テキストやテキストエリアを入力させる箇所に記号を使う際、文字化けを起こしたりページ上で情報が正しく表示されないケースがあります。
そういったことを防ぐために、記号や特殊記号は文字実体参照を使用しましょう。

特殊文字や記号の文字実体参照をまとめてくれているありがたいサイトがあるので、以下参考にしてください。

https://mimi.moe.in/nmp/hms/cer

https://weblan3.com/html/special-character

CSVデータを修正して再度アップロードしたい場合

一度アップしたCSVファイルのデータを書き換えて再度アップすることも可能です。
その場合は「post_id」の入力セルに記事ごとに発行されている「投稿id」を記入する必要があります。
idを記入しないままアップしてしまうと同じ情報が重複して登録されてしまうため、件数が多い場合は特に注意しましょう。

投稿idは投稿の右側のURLで確認ができ、末尾についた数値がidです。（下記の例なら「38」）

後からidを記入することが面倒な場合、あらかじめ指定のidの数字をCSVに記入しておき、アップロードすることも可能です。
ただし、以降に管理画面から投稿を追加する場合は自動でidが振られてしまうため、idが重複しないよう注意が必要です。

また、一度にアップできるCSVの最大サイズは300MBとなっています。
データサイズがそれよりも大きくなりそうな場合は複数のCSVに分けてアップロードしましょう。

まず初めに数件をアップロードしてテストを行い、内容が問題なく表示されていたら全てのデータをアップロードしていただくと安心だと思います。

カスタムフィールドを使用する場合のCSV作成と注意点

ここからは、カスタムフィールドを使って情報を反映させる場合のCSVの書き方、また注意点についてお話ししていきます。

今回は、これらの前提条件でお話を進めていきます。

・商品詳細ページの内容をカスタムフィールドで登録

主な内容と該当するカスタムフィールドの種類は下記の4つとします。

-商品の品番：テキスト
-商品についての説明：テキストエリア
-商品画像：画像
-商品が関連するジャンル：ラジオボタン

下記のようなページを作るイメージです。

・カスタムフィールドは、プラグイン「Advanced Custom Fields」を使って作成

今回はそれぞれのカスタムフィールド名を以下とします。

-商品の品番：　product_number
-商品についての説明：product_desc
-商品画像：product_img
-商品が関連するジャンル：product_type

商品名、説明、画像、ジャンルの4つをそれぞれCSVに記入していきます。

1.商品の品番

フィールドの種類：テキスト
フィールド名：product_number

品番をそのままテキスト入力します。

2.説明文

フィールドの種類：テキストエリア
フィールド名：product_desc

文章の改行をしたい場合は改行位置に<br>タグを入れることで改行が可能です。
CSVや入力欄で改行を行っても反映されませんので注意しましょう。

3.商品画像

フィールドの種類：画像
フィールド名：product_img

画像を表示させたい場合、カスタムフィールドの戻り値の形式には「画像 ID」を使用するのがおすすめです。

あらかじめWordpressに画像を全てアップロードしておき、画像に割り振られるidをCSVに記述することで管理画面上にも反映させることができます。
一度画像をアップロードしなくてはならない手間がありますが、それさえできてしまえばスムーズです。

画像idは左メニューのメディア→ライブラリで画像をクリックし、URLバーに表示されている「item=」の後ろの番号です。

上記の方法で画像をページ上で表示させるためにはphpを以下のように記述しましょう。
あらかじめカスタムフィールド名を取得する変数を用意しておき、「wp_get_attachment_image()」で画像を表示させます。

 <p>
       <?php
        $productImg = get_field('product_img');


        if($productImg) {
           echo wp_get_attachment_image($productImg);
        }
       ?>
 </p>

4.商品が関連するジャンル

フィールドの種類：ラジオボタン
フィールド名：product_type

ラジオボタンの場合、カスタムフィールド上で表示させたい選択肢を値として記入し、返り値は「値」を設定しておきましょう。
こうすることで、CSVに記入した値が投稿のカスタムフィールドにも登録され、選ばれた値が表示されることになります。

おわりに

CSVで一括アップロードする方法を知っているかいないかで作業量を大幅に削減することができるため、たくさんの情報を一括で登録したいという場合にこの記事の内容を参考にしていただければ嬉しいです！

STUDIO NNCでは、スポットでの制作案件のお手伝いや軽微なコーディング修正など細かなご相談も受け付けております。詳細はこちらの記事をご覧ください。

お困りの方は、ぜひお問い合わせフォームよりお気軽にご連絡ください！