アーカイブ: コラム

最近、WordPressの投稿記事を一括更新する方法について調べる機会があり、いくつかのプラグインを試したところ、「WP Import Export Lite」という便利なプラグインを見つけたので、備忘録も兼ねて紹介したいと思います。

1. WP Import Export Liteについて

https://ja.wordpress.org/plugins/wp-import-export-lite/

「WP Import Export Lite」は様々なサイトデータをインポート、エクスポートできるプラグインです。主な特徴は以下の通りです。かなり高機能ですが、無料で使用することができます。

・投稿、ページ、カスタム投稿タイプ、タクソノミーなどをインポート / エクスポートできる。
・複数のファイル形式でインポート / エクスポートできる。（csv、xls、json、txt形式など）
・インポート / エクスポート時にフィルターを適用することができる。
・インポート / エクスポートの設定を保存しておくことができる。

1つ残念なのは日本語対応していないという点ですが、Chromeブラウザであれば「日本語に翻訳」をすれば十分理解できる内容です。投稿記事以外にも対応しているプラグインですが、今回は「投稿記事の一括更新」というテーマなので、投稿に焦点を当てた使い方を紹介したいと思います。

2. 投稿記事の一括更新の手順

2-1. 「WP Import Export Lite」のインストール

まずはWordPress管理画面からプラグイン「WP Import Export Lite」をインストールしましょう。また、「WP Import Export Lite」を使用する際は、文字化け対策として「WP Multibyte Patch」も必ずインストールしておきましょう。



このプラグインを入れておかないと、一括更新するためのCSVファイルをインポートした際に、入力した日本語データが文字化けを起こしてしまいます。

2-2. 投稿記事をエクスポートする

投稿記事を一括更新するには、まず現状の投稿記事のデータをCSVファイルとして書き出す必要があります。（このCSVファイルを編集してインポートすることで、投稿記事を一括更新できるようになります）
まずはサイドメニューの「New Export」ページでエクスポートする投稿を選択します。（カスタム投稿を追加している場合は、カスタム投稿のラベルを選択）



次に「Apply Filters & Options」でエクスポートの設定をしていきます。「Choose Fields」のエリアで、投稿記事からエクスポートしたいデータを設定できるので、「+ Add」や「+ Add All」ボタンで一括更新したい項目を追加していきましょう。

あらかじめ一括更新したいデータが決まっている場合は、必要な項目だけに絞っておいた方がCSVファイルが見やすくなります。また、最初から入っている「ID」や「Title」の項目も残しておいた方が、CSVファイルでデータが識別しやすくなります。

エクスポートの設定は「Save Setting」で保存しておくことができるので、あとで設定を変更して使用する可能性がある場合は保存しておきましょう。（Load Settingsで読み込みできます）



エクスポート設定が完了したら、右上の「Export」ボタンをクリックして、CSVファイルをダウンロードします。

2-3. CSVファイルを編集する

次はCSVファイルを開いて一括更新したい項目のデータを修正していきます。データを修正したら再度CSVファイルで保存する必要があるので、Windowsならエクセル、MacならNumbersで編集しましょう。

1点、CSVファイルで保存する際の注意点として、エンコーディングの設定を「Unicode（UTF-8）」にする必要があります。「UTF-8」で保存しないとCSVファイルをインポートした際に、日本語データが文字化けを起こしてしまうので忘れないように注意してください。

2-4. CSVファイルをインポートする

CSVファイルが用意できたら、いよいよ一括更新の作業になります。

【STEP1】サイドメニューの「New Imort」ページでCSVファイルを読み込んでください。読み込みが完了したら、画面右上の「Continue to Step 2」ボタンをクリックして次に進みます。



【STEP2】インポート先となる投稿（またはカスタム投稿）を選択します。
「Handle New and Existing Items」はインポート処理についての設定になります。今回は既存アイテムの一括更新が目的なので3つ目の「Update Existing Items & Skip new items（既存のアイテムを更新し、新しいアイテムをスキップ）」を選択します。



【STEP3】「Add Filter」や「File Optoins」の設定ができますが、今回は使用しませんので説明は割愛します。「File Data Preview」ではインポートしたデータを表示確認できるので、修正したデータが間違っていないか、文字化けを起こしていないか確認しましょう。「WP Multibyte Patch」がインストールされていなかったり、CSVファイルがUTF-8で保存されていないと、この画面で文字化けを起こしてしまいます。



【STEP4】インポートしたデータを投稿記事のどの項目に反映するのかを指定していきます。
画面左側の「Field Mapping」のエリアが反映先となる項目、画面右側のテーブルエリアがインポートされたデータになります。



ここからの操作が若干特殊ですが、データを流し込みたい項目の箇所に右側のテーブルからドラッグ＆ドロップで設定を行っていきます。
例）記事タイトルを一括更新する場合は、テーブルの「title」を「Post Title」までドラッグ＆ドロップします。



カスタムフィールドのデータを一括更新したい場合は「Custom Fields」を開きます。「Name」にカスタムフィールドの名前を入力して、「Value」にインポートデータをドラッグ＆ドロップしてください。



データのインポート設定ができたら、最後に「Other Item Options」でインポート後の投稿状態を設定します。今回は既存アイテムの一括更新が目的なので「Published（公開）」にチェックを入れておきます。



【STEP5】最後に既存アイテムの処理設定をします。
「Search Existing Item」は何を基準に投稿記事を検索するかの設定です。一括更新の場合は「タイトル」か「スラッグ」を選択しておけば問題ないかと思います。



「Update Existing items Fields」では一括更新で上書きしたいデータを設定します。
「カスタムフィールド」を上書きする場合は「Update all Custom Fields and keep fields if not found in file（上書き更新＆ファイル内に見つからない場合はフィールドを保持）」にチェックを入れておきます。



【確認画面】最後に確認画面が表示されるので、設定内容を確認しましょう。問題がなければ、画面右上の「Confirm & Run Import」ボタンをクリックするとインポートが始まります。



インポートが完了すると投稿記事が一括更新されます。

3. おわりに

今回は投稿記事を一括更新できるプラグイン「WP Import Export Lite」の使い方について紹介しました。UIが英語という点で利用するのに少し抵抗がある方もいるかもしれませんが、現在も定期的に更新されていて、且つ最新のWordPressでも検証済みという一括更新プラグインはなかなか見当たらないので、もし導入を迷っている方は今回の記事を参考に試していただけると幸いです。

コーディングをするとき、テーブルやリスト等のよく使うコードを一から書くのが面倒だと感じたことはないでしょうか？
今回はそんな時に役立つ、コピペで使えるCSSパーツをまとめたサイトを4つご紹介します。

CSS Stock

シンプルで使いやすいパーツがカテゴリごとにまとめられているサイトです。

こちらのサイトの特徴としては、デザイン調整 > HTMLコピペ > CSSコピペのステップで利用する流れになっているので、パーツをあらかじめサイトの色味などに合わせて使用することが可能なところです。

全体的に見やすく、カテゴリもよく使うものは一通り用意されています。

公式サイト：CSS Stock

Uiverse.io

少し動きのあるようなパーツが多くまとめられているサイトです。

海外のサイトなので英語ですが、使い方はシンプルで、コピペしたいパーツの「Get code」から、HTMLとCSSがコピペできます。

また、自分で作成したパーツをアップロードすることも可能で、閲覧数順でソートして人気のパーツが確認できるのもポイントです。

公式サイト：Uiverse.io

UI Buttons

こちらはボタンに特化したパーツまとめサイトになります。

とにかく色々なパターン・動きのボタンが用意されているので、ホバー時の動きがどのようなCSSで書かれているのか勉強にもなります。

公式サイト：UI Buttons

Code Pen

最後にご紹介するのは「Code Pen」です。

こちらはパーツまとめサイトというよりは、ユーザーがコードを投稿したり、オンライン上でコードを編集できるサービスになります。

あらかじめ探しているパーツが決まっているのであれば、検索ボックスで「card layout」等のキーワードで検索することで、他のユーザーが作成したパーツのHTML, CSSを参考にすることができます。

アカウントを作成すれば自分の作成したコードをストックしておくこともできるので、オススメです。

公式サイト：Code Pen

おわりに

今回は、CSSのパーツまとめサイトをご紹介しました。
初めはコードを理解するためにも一からコーディングすることをおすすめしますが、ある程度理解が進んできて、一からコーディングするほどでもないパーツを作る場合に、こういったサイトを活用することで作業時間の短縮に繋がります。
今回ピックアップしたサイト以外にもたくさんのサイトがありますので、是非調べてみて下さい。