しかし、現時点では記事に含まれている画像を自動でインポートする機能は実装されておらず、インポートした記事に画像が含まれていると、元のサイトのサーバーにあるファイルを参照してしまうという問題があります。

当記事では、記事をインポートしたあと、記事に含まれている画像ファイルを自動的にインポートする方法を紹介します。

プラグイン「External image replace」

WordPressプラグイン「External image replace」は、外部参照している画像を検出し、自動的に画像ファイルをダウンロード、およびimgタグの参照先をダウンロードしたファイルへ書き換えてくれるプラグインです。

External image replace

投稿記事内に存在する外部画像を一括でメディアライブラリに登録して置き換えます。

ja.wordpress.org

非常にかんたんに画像を移行することができますので、大変便利に活用させてもらっています。

記事をインポートする

記事のインポートは通常通り行えばOKです。WordPressのダッシュボードにある[ツール]＞[インポート]から行ってください。

１つだけ記事をインポートしたい場合は、コピペでも問題なくいけます。インポートツールを使わなくても、記事の編集ページで[すべてのコンテンツをコピー]をクリックし、移行先のWordPressの記事ページで貼り付ければ、手間なく記事をインポートできます。

この時点では、画像は古いサーバーのファイルが参照されています。

ローカルに画像をインポートする

記事をインポートしたら、今回の本題である画像の自動インポートを行います。

ダッシュボードへアクセスし、[ツール]＞[外部画像置き換え]をクリックします。

すると、外部参照の画像が含まれている記事がリストアップされます。

画像をインポートしたい記事をチェックし、[置き換え]をクリックします。

まとめ

このプラグインを知るまでは、元のサーバーから手動で画像ファイルをコピーし、正規表現で記事内の画像URLを書き換えていました。しかし、このプラグイン（External image replace）を使えば、これらの作業をまるごと省略することができるようになります。

WordPressのサーバーを移行するときに使ってみるといいですよ。

必要なサーバー環境

インターネット公開しているWebサーバーにWordPress6.0.1をインストールし、サイトを構築していきます。WordPress6.0.1の動作に必要な要件は以下の通りです。

• Webサーバーが動作すること（Apache2.4またはNginxが推奨）
• PHP バージョン7.4以上が動作すること
• MySQL バージョン5.7以上（またはMariaDB10.3）が動作すること

要件を満たしていない場合は、要件を満たす過去バージョンのWordPressをインストールするか、サーバー環境のアップデートが必要となります。

また、当記事ではDebianやUbuntuなどのLinuxサーバーでの構築を想定しています。コンソールから操作を行っていきますので、あらかじめログインしておいてください。

WordPressのダウンロード

サーバーの公開ディレクトリにWordPressをダウンロードします。

$cd /var/www/html  //サーバーの公開ディレクトリに移動する
$wget "https://ja.wordpress.org/latest-ja.tar.gz" //最新版のWordPressをダウンロード
$tar -axf latest-ja.tar.gz //解凍する

ダウンロードしたファイルを解凍すると、wordpressというディレクトリが作成されます。このディレクトリにアクセスすると、サイトへアクセスできるようになります。もちろんディレクトリの名前はあとで変更することもできます。

作成されたディレクトリへWebサーバーから書き込めるようにアクセス権を設定します。

$cd wordpress //解凍して作成されたフォルダへ移動
$sudo chown www-data:www-data -R . //ディレクトリの所有者をWebサーバーに設定する

アクセス権の設定を行わないと、設定をファイルに書き込むことができず、インストールに失敗します。忘れずに行いましょう。

データベースの作成

次に、WordPressで使用するデータベースを作成します。作成した記事などのデータはデータベースに保存されます。

まず、コンソールからMySQL（MariaDB）にログインします。

$sudo mysql -u root -p //mysqlにログイン

ユーザーの作成を行います。

CREATE USER sample01 IDENTIFIED BY 'asdffdas';

データベースを作成し、アクセス権を設定します。

>MariaDB [(none)]> create database wordpress_sample;//wordpress_sampleというデータベースを作成する
MariaDB [(none)]> GRANT ALL PRIVILEGES ON wordpress_sample.* TO 'sample01'@'localhost';//wordpress_sampleデータベースへのアクセスをユーザーsample01に許可する
MariaDB[(none)]> quit;  //mysqlのコンソールを終了

WordPressのセットアップ

ブラウザから解凍したWordPressにアクセスします。公開ディレクトリのトップで作業を行った場合は、http://サーバーのIPアドレス/wordpress/がURLとなります。

すると、このようなセットアップ画面が表示されます。

WordPressから作成したMySQL（MariaDB）データベースへアクセスするためのアカウントを入力していきます。

入力したら[送信]をクリックします。

データベースとの通信に成功しました。[インストール実行]をクリックします。

最後にWordPressにログインするためのアカウントなどの情報を設定していきます。サイトタイトルなども設定しますが、あとからでも変更できます。

すべての項目を入力したら、セットアップ完了です。

サンプル

当サイト（ばすにっきTips）の新着記事を取得し、表示するサンプルです。

Vue.jsとAxiosで実装してみました。

解説

まず、axiosでAPIにアクセスし、データを取得しています。

// 最新記事を取得する
axios
  .get("https://takabus.com/tips/wp-json/wp/v2/posts?_embed")
  .then((res) => {
    this.posts = res.data;
  });

最新の投稿は/wp-json/wp/v2/posts?_embedからGETで取得できます。

例えば、hoge.comにwordpressのトップがあるとすると、hoge.com/wp-json/wp/v2/posts?_embedがAPIとなります。ブラウザからアクセスして確認してみましょう。URLと一緒にクエリパラメーターを追加することで、カテゴリ（?categories）やタグ（?tags）で絞り込んだりといったこともできます。

このほか多くのパラメーターが準備されており、かなり細かい指定が可能となっているようです。

Posts – REST API Handbook | Developer.WordPress.org

Schema

developer.wordpress.org

取得したデータはdataに置いておき、v-forで各記事へのリンクとサムネイル・タイトルなどを表示させています。

<!-- 記事ごと -->
<a :href="post.link" v-for="post in posts" :key="post.id" style="text-decoration:none;color:#2c2c2c;">
    <div class="card" style="max-width: 540px;">
        <div class="row g-0">
            <div class="col-4">
                <img class="d-block w-100"
                    :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumb320.source_url"
                    alt="..." />
            </div>
            <div class="col-8">
                <div class="card-body p-2">
                    <h6 class="card-title mb-0">{{post.title.rendered}}</h6>
                    <div>
                        <small>{{post.date.substr(0,10)}}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</a>

余分なクラスやスタイルを取り払うとこんな感じとなります。

<a :href="post.link" v-for="post in posts" :key="post.id">
    <div>
    <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumb320.source_url" />
    <h6>{{post.title.rendered}}</h6>
    <small>{{post.date.substr(0,10)}}</small>
    </div>
</a>

よくつかうであろうキーは以下のとおりです。

なお、サムネイル画像は?_embedをつけないと取得できません。

まとめ

WordPressサイトの記事一覧をほかのサイトに埋め込みたいときなどに便利そうですね。例えばWebアプリのお知らせサイトをWordPressで制作し、Webアプリ内にお知らせを埋め込む、なんて使い方が考えられます。

▼こちらのURLで実際に運用しているサンプルも公開しています。Nuxt.jsを使用したサイトですが、記事内容はサーバーサイドレンダリング、新着記事のところは当記事の方法を使いクライアントサイドでレンダリングすることで、つねに最新の記事が表示される仕組みとなっています。実際のユースケースとして、参考にしていただければ幸いです。

バスずかん

バスの写真をたくさん掲載！バスずかんでは仙台を中心としたバスの写真を掲載しています。バスにっきとあわせてごらんください。

takabus.com