WordPressの最新デフォルトテーマ「Twenty Twenty-Five 」は、デフォルトの状態だと画面を広く使う「1列（1カラム）」のレイアウトになっています。

しかし、アフィリエイトブログや情報発信サイトを運営する場合、右側にプロフィールやカテゴリー一覧、最新記事などを表示する「2列（2カラム・サイドバー付き）」のレイアウトにしたい方が多いのではないでしょうか。

この記事では、Twenty Twenty-Fiveでカラムブロックを使い、ブログらしいサイドバー付きの2列レイアウトを構築する方法を分かりやすく解説します！

なぜブログには「サイドバー付き2列レイアウト」が適しているのか？

1カラムレイアウトは、読者の視線を記事本文に集中させる効果があります。ランディングページ（LP）や企業サイトなどでは有効ですが、回遊性を高めたいブログにおいては、以下のような理由からサイドバー付きの2列レイアウトが好まれます。

• 回遊率の向上：記事を読んでいる途中でも、右側のサイドバーに「関連記事」や「カテゴリー」が目に入るため、他の記事も読んでもらいやすくなります。
• 運営者情報の提示：プロフィールやSNSリンクを常に表示しておくことで、ファン化を促すことができます。
• 広告の配置：サイドバー上部やスクロール追従エリアに広告を配置しやすいというメリットがあります。

Twenty Twenty-Fiveでは、この2列レイアウトを簡単に実現する方法が用意されています。

カラムブロックを使って2列レイアウトを構築する

トップページ（ホームページ）全体や、投稿テンプレート、固定ページなどを自由に2列レイアウトにデザインしたい場合は、エディター内で「カラム」ブロックを使用します。

ステップ1：エディターを開く

WordPress管理画面の 「外観」 ＞ 「エディター」 をクリックします。

ステップ2：2列レイアウトにしたいテンプレートを選択する

1. エディターの左メニューから 「テンプレート」をクリックします。
2. 2列（2カラム）にしたいテンプレート（例：個別記事なら「個別投稿」、トップページなら「ブログホーム」など）を選択し、編集画面を開きます。

ステップ3：カラムブロックを挿入する

1. 編集画面で 「カラム」ブロックを挿入します。
2. レイアウトの比率を選ぶ画面が出るので、ブログでよく使われる「70：30」 または「66：33」の2列を選択します。

ステップ4：ブロックを配置する

• 左側の広いカラム（70%）：記事一覧を表示する「クエリーループ」ブロックや、固定ページの「コンテンツ」ブロックを配置します。
• 右側の狭いカラム（30%）：プロフィール画像（画像ブロック）、カテゴリー一覧（カテゴリーブロック）、検索窓（検索ブロック）などを縦に積んで配置し、サイドバーを作ります。

この方法をマスターすれば、どんなページでも自由自在に2列レイアウトを作成できるようになります。

まとめ

Twenty Twenty-Fiveでブログらしい2列レイアウトを作るのは難しくありません。

カラムブロックを使ったレイアウト調整をマスターすれば、トップページから個別記事テンプレートまで、自由自在にサイドバー付きのレイアウトを構築できるようになります。

レイアウトが整ったら、次はいよいよサイトの「色」や「フォント」を変えて、デザインを魅力的にカスタマイズしていきましょう！次回は、スタイルバリエーションの選定について解説します。

＜スポンサーリンク＞

作って学ぶ　WordPress ブロックテーマ (Compass Web Development)

単行本（ソフトカバー）

Amazonで探す

WordPressの標準テーマ「Twenty Seventeen」から「Twenty Twenty-Five」に移行するにあたって、まず最初に検討したいのが「子テーマ（Child Theme）を作るべきかどうか」です。

従来のクラシックテーマ（古いテーマ）では、「カスタマイズするなら絶対に子テーマを作るべき！」というのが常識でした。しかし、最新のブロックテーマ（フルサイト編集：FSE）であるTwenty Twenty-Fiveでは、その常識が少し変わっています。

この記事では、技術者目線で「そもそも子テーマは必要なのか？」という疑問に答え、実際にTwenty Twenty-Fiveの子テーマを作成して有効化するまでの手順を分かりやすく解説します！

Twenty Twenty-Fiveに「子テーマ」は必要？

　結論から言うと、「多くの人にとっては、子テーマは不要（作らなくても大丈夫）」になりました。

なぜなら、Twenty Twenty-Fiveのようなブロックテーマでは、サイトエディター（FSE）を使って行ったデザインの変更やテンプレートの編集が、テーマのファイルではなく**「データベース」に直接保存されるから**です。親テーマがアップデートされても、エディターで行ったカスタマイズが消えることはありません。

子テーマを作らなくてよいケース（不要）

• サイトエディターで色やフォントを変更するだけ
• ヘッダーやフッター、テンプレートのレイアウトを編集するだけ
• ブロックの配置を変更するだけ

子テーマを作った方がよいケース（必要）

• `theme.json` ファイルを直接編集して、テーマ独自の標準カラーパレットやフォント設定を定義したい
• `functions.php` を使って、PHPによる高度な機能追加やフック処理を行いたい
• 親テーマのアップデートで上書きされたくない独自のアセット（画像やフォントファイルなど）をテーマフォルダ内に保持したい

もし上記のような高度なカスタマイズを行う予定があるなら、以下の手順で子テーマを作成しましょう。

Twenty Twenty-Fiveの子テーマ作成に必要なファイル

　子テーマの作成に必要なファイルは、最小構成で以下の2つだけです。クラシックテーマの時に必要だった `functions.php` やスタイルシートの読み込み処理（`wp_enqueue_style`）は、最初は不要です。

1. style.css：子テーマであることをWordPressに認識させるためのファイル。
2. theme.json：ブロックテーマの設定ファイル。親テーマの設定を引き継ぎつつ、カスタマイズを行います。

【図解】子テーマを作成する具体的な3ステップ

　それでは、実際に子テーマを作成して適用してみましょう。

ステップ1：ローカルPCでファイルを用意する

パソコンのデスクトップ等に、新しいフォルダを作成します。フォルダ名は twenty-twenty-five-child`とします。

     説明: フォルダとファイルの配置を視覚的に分かりやすく示します。 –>

フォルダの中に、以下の2つのファイルを作成します。

① style.css

テキストエディタで新規ファイルを作成し、以下の内容を貼り付けて `style.css` という名前で保存します。

“`css

/*

 Theme Name:   Twenty Twenty-Five Child

 Template:     twentytwentyfive

 Description:  Twenty Twenty-Five の子テーマです。

 Version:      1.0.0

*/

*※ `Template: twentytwentyfive` の部分は、親テーマのフォルダ名と完全に一致させる必要があります（大文字小文字を区別します）。*

② theme.json

同様に新規ファイルを作成し、以下の最小限のコードを貼り付けて `theme.json` という名前で保存します。

“`json

"$schema": "https://schemas.wp.org/trunk/theme.json",

{

  "version": 3

}

※ ブロックテーマでは、子テーマの `theme.json` に何も書かなくても、自動的に親テーマの `theme.json` の設定がすべて継承されます。変更したい部分だけを後からここに追記していくことになります。*

ステップ2：作成したフォルダをWordPressにアップロードする

作成した `twenty-twenty-five-child` フォルダを、以下のいずれかの方法でWordPressのテーマディレクトリ（`/wp-content/themes/`）にアップロードします。

方法A（初心者向け）：ZIP化して管理画面からアップロード

  ローカルの `twenty-twenty-five-child` フォルダを右クリックしてZIP圧縮し、`twenty-twenty-five-child.zip` を作ります。WordPress管理画面の 「外観」 ＞ 「テーマ」 ＞ 「新規追加」 からZIPファイルをアップロードします。

方法B（中級者向け）：FTPツールでアップロード

  FileZillaなどのFTPソフトを使い、サーバーの `/wp-content/themes/` ディレクトリ直下にフォルダごとアップロードします。

     説明: フォルダをWordPressにインストールする操作を示します。 –>

ステップ3：子テーマを有効化する

アップロードが完了したら、WordPressの管理画面から 「外観」 ＞ 「テーマ」 を開きます。

テーマ一覧に 「Twenty Twenty-Five Child」 が表示されていることを確認し、「有効化」 ボタンをクリックします。

有効化した後、ブログのフロント画面を確認し、デザインが崩れずに親テーマと同じように表示されていれば、無事に子テーマの作成は成功です！

ブロックテーマの子テーマ作成における注意点

functions.php は必要になってから作る

  PHPでのカスタマイズが必要ない段階では、`functions.php` を作成する必要はありません。後からフック処理や独自関数の追加が必要になった時点で、子テーマフォルダ内に新規作成すれば問題なく動作します。

theme.json の強力な継承ルール

  親テーマの `theme.json` は自動的に読み込まれるため、子テーマの `theme.json` に親テーマの中身をすべてコピーする必要はありません。自分がカスタマイズしたい色（カラーパレット）やフォントの設定のみをピンポイントで記述するようにしましょう。これによって、ファイルの管理が非常にスマートになります。

まとめ

ブロックテーマ「Twenty Twenty-Five」における子テーマの作成は、クラシックテーマに比べてファイル構成がとてもシンプルです。

一般的なブログ運営であれば、サイトエディターの進化によって子テーマが不要なケースも増えていますが、「将来的にPHPやtheme.jsonで高度なカスタマイズを行いたい」という場合は、移行の最初の段階で子テーマを用意しておくと、後々の作業がスムーズになります。

あなたのブログのカスタマイズ規模に合わせて、導入を検討してみてください！

当サイトも利用しているロリポップ！とムームードメインでの組み合わせでのWordPressサイトの構築手順について説明していきたいと思う。

WordPressサイトの設定方法について多数の記事を投稿してきていたのですが、何故かロリポップ！でのドメイン設定～WordPress簡単インストールまでを行う手順についての記事を作成していなかったので、今更ですが作成してみました。

WordPressサイトの構築について（導入編）

今回はWordPressサイトが構築されサイトがウェブブラウザに表示されるのと、WordPressサイトの管理画面へログインできるところまでを説明します。またこの手順の中にSSL設定も流れに入れています。

恐らくここまでがサイト構築入門者にとっては少し戸惑うところではないかと思います。この記事が少しでもそのような方々の参考になればと思います。

構築手順

【手順1】ムームードメインでドメインを取得

まずは構築するサイト用のドメインをムームードメインで取得してください。ムームードメインでの取得でなくても構築可能ですが、ロリポップ！を利用する場合にはムームードメインでのドメイン取得が一番簡単になります。この記事での構築手順はムームードメインで取得したドメインの利用を前提に説明いたしますのでご了承下さい。

【手順2】ロリポップ！で独自ドメイン設定を行う

ロリポップのユーザー画面のメニューより[サーバー管理・設定]ー[独自ドメイン設定]を選択

下図の[独自ドメイン設定]ボタンをクリック

下図で[設定する独自ドメイン]にムームードメインで契約したドメインと[公開（アップロード）フォルダ]に任意のフォルダ名を指定し、[独自ドメインをチェックする]ボタンをクリック

するとネームサーバー認証のためにムームーIDとパスワードを指定し[ネームサーバー認証]ボタンをクリック

上記の手順が上手くいくと下図のように確認画面が出てきますので、問題なければ[設定]ボタンをクリック

【手順3】必要に応じてサブドメイン設定を実施

新規サイトを構築する場合にドメインの頭に「www」を付加するかどうか？

このサイトのURLは「https://digital-life.club/」なのですが「https://www.digital-life.club/」もアリとするか？ということですかね。

SEOを理論的に考えた時にURLが2つあるのは宜しくないのでは？っと私は勝手に思っているので、私は「www」のサブドメインを削除してしまいます。

削除手順は下記です。

下図の[サーバー管理・設定]ー[サブドメイン設定]を選択

下図のように今回作成しようとしているドメインに「www」が付加されているサブドメインにチェックを入れ[サブドメイン解除]ボタンをクリック

下図のように削除完了のメッセージが表示されたらOKです。

【手順4】WordPress簡単インストールの実施

下図の[サイト作成ツール]ー[WordPress簡単インストール]を選択

「WordPress簡単インストール」画面が表示されたらインストール先として［サイトURL］と［利用データベース］を指定します。［利用データベース］は「新規自動作成」とします。

「WordPressの設定」も全て指定し［入力内容確認］ボタンをクリック。

上記で入力した内容の確認画面が表示されますので、内容を確認して問題なければ［承諾する］にチェックを入れ［インストール］ボタンをクリック。

WordPressのインストールが正常に完了すると下図のように完了画面が表示されます。

【手順5】インストールされたWordPressサイトが動作するかをチェック

上記で指定したサイトURLにブラウザでアクセスし下図の「Hello World!」画面が表示されるかをチェック。

［管理者ページURL］にブラウザでアクセスし、下図のような管理者用のログイン画面が表示されるかをチェック。

上記の［管理者用のログイン］画面でログイン用の［ユーザ名］と［パスワード］を使いログインをしてみる。ログインが成功すると下図のような管理者画面が表示されます。ここまで確認できればOKです。

【手順6】SSL設定を行う

SSLを導入すると「http://○○.com」が 「https://○○.com」 と「http」に「s」が付加されます。簡単な説明だと「このサイトはセキュリティ的な対策がされています」と言うことでしょうか？

GoogleChromeではSSL対策されていないサイトは「保護されいない通信」とアドレスバーに表示されるかと思います。これはサイトの信用に関わることですので、SSLの導入は初期段階で行っておくことをお勧めします。

ロリポップにはSSL証明の導入を無料で行うことができます。有料のSSLにはセキュリティ強度は敵わないかもしれませんが、商品を販売するようなクレジットカード等の重要な情報を取り扱うようなサイトでなければ十分ではないかと思います。

それなのでロリポップでサイト構築した際には、最初からSSL設定をしておくことをお勧めします。

下図のロリポップのコントロール画面にて［セキュリティ］ー［独自SSL証明書導入］を選択

下図のような画面が表示されますので「SSL保護されていないドメイン」から今回SSL設定をしたいドメインにチェックを入れ、［独自SSL（無料）を設定する］ボタンをクリック

下図のように「SSL設定作業中」の表示となります。この作業は多少時間が掛かりますので完了するまでお待ちください。

完了したらサイトURLおよびWordpress管理者画面URLに「http://」ではなく「https://」にしてアクセスできることを確認してください。

SSLの導入については下記の記事にもう少し詳しく記載してありますので、必要な方はご参照ください。

サイトを充実させる

上記までの手順でロリポップにWordPressサイトの構築が完了しました。あとはWordPressの中でサイトテンプレートを変更したり記事を投稿したりしてサイトを充実させていく作業となります。

下記の記事がWordPressサイトを構築するためのHowToをまとめた記事となりますので、興味のある方はご参照ください。

【A8.netに登録しよう！】
◇ 広告主数・アフィリエイトサービス数日本最大級☆
◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
◇ 使いやすいサイトNO.1
⇒アフィリエイトならA8.net

本サイトを分析していて、「ページ／セッション数」をもう少し上昇させることが出来ないか？

これを上昇させることが出来るとPV数を増加させることが可能となります。

セッション数が変わらないのが前提条件ですが、関連記事を表示させるだけでPV数の増加が望めます。勿論PV数増加の条件はランディングページにユーザが満足してくれることが条件ですが。満足してくれたユーザなら関連記事が表示されていればクリックしてくれる人もいると思うのです。

関連記事を表示するだけでPV数が増加しSEO対策となりますね。とても簡単な手法です。今までこれを全くやっていなかったのは何故なのか？自分でもわかりません。((´∀｀))ｹﾗｹﾗ

本サイトで使用しているテーマの機能には関連記事を表示する機能がはありません。

最近のSEO対策されているテーマは、関連記事や人気記事を表示する機能が標準装備されているのが当たり前となっています。

WordPressの公式テーマの考え方はテーマでデザイン、機能はプラグインでというのが基本であるため、テーマの中にこのような機能がないのが一般的なのですかね。

しかし関連記事や人気記事を表示するためのプラグインは有名どころが幾つかあり、自分好みのプラグインをインストールして利用することが出来ます。

今回は「Related Posts for WordPress」というプラグインを使ってみたいと思います。このプラグインの利用方法についてここから説明していきたいと思います。

また他のカスタマイズ等についても知りたい方は「WordPressのカスタマイズ方法を徹底解説！」をご参照ください。

「Related Posts for WordPress」の利用方法

このプラグインの利用方法はとても簡単です。デフォルト設定のままでもそれなりの動作をしてくれますので、インストールするだけでも良いのかもしれません。もし好みの表示にならない場合には少し設定をいじる必要があります。

【手順1】「Related Posts for WordPress」をインストール

[プラグイン]-[新規追加]より「Related Posts for WordPress」を検索しインストールを実施してください。インストールが完了しましたら有効化を実施。

【手順2】「Related Posts for WordPress」の設定

[設定]-[Related Posts]より下記画面が表示されます。下図の赤枠部分がを好みの設定に変更。「Amount of Posts」は関連記事の表示数、「Heading text」は関連記事を表示する際のタイトルとなります。また「Excerpt length」も「0」とした方が良いかもしれません。実際にどのように表示されるかを見てみて設定してみましょう。

実際の表示例

実際の表示例は下図のようになります。赤枠部分が関連記事のエリアとなります。下図は「Excerpt length」を「0」とした例となります。

まとめ

関連記事を表示したい場合、テーマに関連記事を表示する機能がなければプラグインを利用すれば簡単に表示させることが可能となります。今回は「Related Posts for WordPress」というプラグインを紹介させて頂きましたが、他にも有名なプラグインがあります。好みに応じてプラグインを選択してください。

WordPressの使い方や開発に関するサイト運営をしている場合、プログラミングのコードをWordPressの記事上に表示することが良くあるかと思います。このプログラミングのコードですがサイトによって色々と工夫しながら表示しています。

当サイトに関して言えば極力シンプルに表現したかった為、<pre>タグを使用してscroll指定して利用しておりました。

しかし、問題が。

Gutenbergの登場で全記事をブロックエディタ対応したら、何故かプログラミングコードを表示させている部分だけ思うような動作をしなくなってしまいました。

一番は横スクロールバーが表示されなくなったんですね。

これはプログラミングコードの見栄えが良くなく、分かりずらい感じとなってしまうんですね。そしてもう一点が、preタグに囲っていたところは背景色が灰色だったんですが、背景色が無くなってしまいました。

その為、余計分かりずらくなってしまったんですね。

以前からソースコードをプラグインを利用して埋め込みしようか迷っていたので良い機会となりました。そこでどのプラグインが良いか探しました！

Enlighter – Customizable Syntax Highlighterについて

何故このプラグインを選んだのかを簡単に説明します。

恐らくWordPressの記事にソースコードを表示するプラグインで一番有名なのは「Crayon Syntax Highlighter」ではないかと思うのです。私もこのプラグインを利用しようと思っていたのですが、このプラグインの最終更新が5年前（2021年1月時点）になっているじゃないですか。

5年と言えばWordPressがブロックエディタ（Gutenberg）に変更されております。その対応がされているのかが不明なので使うの辞めました。

そこで発見したのが「Enlighter – Customizable Syntax Highlighter」です。ダウンロード実績も十分あり更新もされている模様。

Enlighterのインストール

【手順1】[プラグイン]ー[新規追加]をクリック

【手順2】プラグインの検索キーに「Enlighter」を入力し検索

【手順3】[今すぐインストール]をクリック

【手順4】[有効化]をクリック

これでインストールは完了です。次に設定

最低限やっておきたい設定

メニューより[Enlighter]をクリックすると下記の設定画面が表示されます。[Appearance]が表示されています。

この画面の中で[Theme]と[Text overflow]を最低限設定しておけば良いかと思います。

• [Theme]はお好みで。私はとりあえずデフォルトのままです。
• [Text overflow]は「Add Scrollbar」が良いと思います

Enlighterの使い方

【手順1】[Enlighter Sourcecode]ブロックの追加

記事作成画面にてブロック追加で下記の画面が表示されましたら、[Enlighter Sourcecode]をクリック

【手順2】ソースコードの記述

下記の入力ブロックが記事編集画面に挿入されましたら[Insert Sourcecode]部分に任意のソースコードを記述すればOKです

【手順3】完成

実際にソースコードを入力した例が下図になります。

どうでしょうか？

プラグインを利用するだけで、こんなに簡単にソースコードを記事に埋め込みできるんですね。

実際に見てみると

下図のように表示されます。なかなか見やすいかと思います。

まとめると

クラシックエディタではpreタグで何とかソースコードを表示させていました。preタグの場合、文字色を個別に指定出来ていたのが少し便利でした。しかし美しく綺麗にソースコードを表示するとなるとプラグインの利用が一番簡単に出来るのはないかと思います。

「Enlighter」はソースコードを綺麗に見せたいという要望に応えてくれる素晴らしいプラグインです。

ブログにソースコードを埋め込みたい方は是非試してみては如何でしょうか？

他のサイトでのお話ですが、たまたまRSS配信が必要となりRSSのテストをしていると何故か不安定な動作をするので悩んでしまいました。

確かにRSSのURL（サイトURL / ?feed=rss2）と指定するとRSSの中身が見れるので問題ないと思っていました。

しかし何故か連携サイトによってうまく動作しなかったりしたんです。

何で？

色々調べてみましたよ。しかし中々今回の私のケースに当てはまるものがありませんでした。

良い経験をさせてもらったので、他の人の参考になるかもしれないので記録しておきます。

RSS配信を正常にするまで

まずRSS配信が正常に出来ているかを以下のサイトでチェックしました。

• https://berss.com/feed/Find.aspx
• https://validator.w3.org/feed/

上記のようにエラーとなりました。

このエラーをみて何故検出しないのかをHTMLを見てみると。。。

フィードURLが正しく出力されてない！

headタグに記載されているRSSの指定が下記のようになっていました。

<link rel="alternate" type="application/rss+xml" title="サイトタイトル &raquo; フィード" href="サイトURL" />
<link rel="alternate" type="application/rss+xml" title="サイトタイトル &raquo; コメントフィード" href="サイトURL/?feed=comments-rss2" />

これ分かります？おかしい部分。

コメントフィードに関しては「サイトURL / ?feed=comments-rss2」と指定されていて正しいです。

しかし、フィードは何故か「サイトURL」しか指定されていないんですね。

これは通常ですと「サイトURL / ?feed=rss2」となるわけなんですね。

そこで試してみたのが次のことです。

フィードURL出力をfunctions.phpへ指定する

WordPressではフィードURLが出力されるようにfunction.phpへ明示的に指定した方良いそうです。その内容は下記となります。

<?php
　add_theme_support( 'automatic-feed-links' );
?>

試してみましたがダメ・・・・。

次に試してみたことは

キャッシュ系の動作の確認

RSS動作がおかしい場合にプラグインだったりサーバー側のキャッシュ系の設定が悪さをしていることがあるような説明をされているサイトが結構ありました。

しかし今回の事象とは何か違うような気がしたのですが一応見直しました。

プラグインに関しては全く利用していなかったので問題なしです。「Autoptimize」というプラグインが悪さをすることがあるようですが、今回の事象とは異なるようです。

サーバーはロリポップなのですが「ロリポップ！アクセラレータ」がキャッシュ系の機能となります。そこで下図のように「初期設定」から「[css][js][ico]・・・・・」に変更しました。

下図のような感じです。

ここまで試しましたが。。。。

うまくいかない。。。

そこでネットで発見したのが

パーマリンク設定が「基本」はNG？

次のサイトに今回の事象と同じ悩みで質問されている方がいました。そしてその回答の中にヒントが。

https://teratail.com/questions/297576

下記の条件のどちらかを満たした場合に、RSSのURLが正常に出力されない事象が発生することが分かったとのこと。

・WordPress5.5以上
・パーマリンク設定が「基本」

よってバージョンを5.4.2に下げることで解決しました。

引用：teratail「https://teratail.com/questions/297576」

今回の事象ですがWordPress5.5以上も当てはまるのですが、パーマリンク設定が「基本」も当てはまっています。

WordPressは5.6なのでとりあえずそのままとし、パーマリンク設定を「基本」をやめることにしました。

「基本」から「カスタム構造」に変更し「/?p=%post_id%」を指定しました。このように指定すれば「基本」と同じURLとなります。

パーマリンク設定を変えた結果

headタグ内のRSSのURLが正しく出力されるようになりました。コレってどうなんですかね。

WordPressのバージョンアップすると知らないうちにRSS配信が出来なくなってしまっているサイトもあるかもしれませんね。

ま、RSS配信を必要としないサイトも増えてきているので何とも言えません。

ただRSSを配信する場合は悩ましい問題でした。

WordPressサイトを複数運営している場合に限りですが、Aと言うWordpressサイトで作成した記事をBと言うWordpressサイトへ移行したい場合どのようにしていますか？

記事が一つだけであればコピー＆ペーストで移行しても良いのですが、複数の記事を一気に移行したい場合はコピー＆ペーストですと大変です。また画像は個別に登録し直すのも大変です。

こんな時にとても良いプラグインがあるのはご存じでしょうか？

「DeMomentSomTres Export」と言う便利なプラグインがあります。

今回はこの「DeMomentSomTres Export」の使い方を説明したいと思います。

「DeMomentSomTres Export」の使い方

このプラグインはWordpress上の記事データをエクスポートする為のツールとなります。使い方も難しくはなく、どちらかと言うと簡単です。

今回は記事データを移行するためのツールとして紹介いたしますが、記事データのバックアップにも使用することが可能かと思われます。

便利なツールですので、各個人で使用してみてはどうでしょうか？

「DeMomentSomTres Export」利用手順

このプラグインをインストールするところから記事を移行するところまでの手順を紹介します。

【手順1】「DeMomentSomTres Export」をインストール

記事の移行元のWordpressへインストールします。

[プラグイン]ー[新規追加]－[プラグイン検索]よりプラグインを検索し「今すぐインストール」を実行する。

【手順2】「DeMomentSomTres Export」を有効化

「有効化」を実行する

【手順3】「DeMomentSomTres Export」を起動

下図のメニューを選択

【手順4】エクスポートの実行

下図の画面が表示されたら移行したい内容を選択して「エクスポートファイルをダウンロード」を実行

XMLファイルは任意の場所を指定してください。

【手順5】インポートの実行

記事の移行先のWordpressにて[ツール]－[インポート]を実行

※「EWWW Image Optimizer」プラグインをインストールし有効化している場合はインポート作業時のみ無効化しておくこと

【手順6】WordPressー[今すぐインストール]を実行

下図のような画面が表示された場合にはWordPress部分の「今すぐインストール」を実行

【手順7】インポーターの実行

下図の画面になりましたらWordPress部分の「インポーターの実行」を実行

【手順8】インポートファイルを選択

手順4でエクスポートしたファイルを「ファイルを選択」より選択

【手順9】インポートの実行

「ファイルをアップロードしてインポート」を実行する

【手順10】インポートされたか確認する

手順4でエクスポートした記事が正しくインポートされているかを確認する。

まとめると

「DeMomentSomTres Export」の使用方法は以上になるのですが、記事のみをバックアップしておくことも可能です。アイキャッチ画像やカテゴリと言った部分も移行対象となるので、Wordpress間で記事を移行する場合にはとても活躍するツールではないかと思います。

　Amazonアソシエイトで提供されていた「Product Advertising API」が2020年3月9日より、v4からv5へ完全移行されました。移行されてから半年以上経過したのですが、今更本サイトでどのような対応をしたのかを記事にしたいと思います。

本サイトでは商品の紹介をする際にはブログ開設時より「AmazonJS」と言うプラグインを使用してAmazonで販売されている商品を紹介してきました。この「AmazonJS」ですが、アマゾンの商品をショートコードの埋め込みから商品リンクを表示してくれるものです。見映えがとても良く、記事に表示されていても商品を売ってやろうって言うような強い主張がないのが気に入っておりました。何となく表示されているとクリックしちゃいそうな。。。。

このサイトに関しましては商品を掲載する場合にはAmazonのものしか取り扱わないので、とても重宝していたプラグインだったんですが、AmazonのAPIバージョンアップによって本サイトにおいても利用出来なくなってしまいました。利用に当たって色々な制約が発生したんですね。恐らくAmazonのサーバーに今まで負荷が掛かっていたんでしょうね。Amazonの方針転換なので仕方ありません。

そこで色々探したのですが。

AmazonJSに代わるものを探した結果

一番最初に見つけたのが丁度APIバージョンアップに伴い「amazlet」が「amachazl」へバージョンアップしたツールを見つけました。

これ見栄えも結構良いし使いやすかったので、本サイトではAmazonJSのショートコードを「amachazl」を使って商品リンクへ切り替えました。本サイトもかなりの記事数となっており、「amachazl」で作り直して記事修正をするのはかなりの手間が掛かりました。

それでも一通り修正もして間もない頃。。。。

まさかの「amachazl」アソシエイトアカウント強制閉鎖

　これは「amachazl」作者のAmazonアソシエイトアカウントがAPIの利用規約に違反してたのか分かりませんが、Amazon側から強制閉鎖されたのです。それにより「amachazl」の利用が出来なくなってしまいました。

とても良いツールだったのでとても残念でした。AmazonのAPIバージョンアップによりこれ以上大変な思いをするのは嫌だと思い、半年以上ほったらかしにしました。

そして最近、API問題も落ち着いた頃ですので再度探し始めたんです。良いツールを。

「kattene」というプラグイン

　AmazonJS同様のプラグインでAmazon商品リンクが表示できるkatteneを見つけました。AmazonJSとの大きな違いは記事作成画面で直接商品検索は出来ません。AmazonJSは記事作成の中で商品検索して埋め込み出来たのですが、コレは出来ません。AmazonJSの場合は記事を表示する際にAPIで商品情報をAmazonのサーバーから取得し、それを元に商品リンクを作成する仕組みです。

　しかしkatteneは商品のURL等はあらかじめショートコードに埋め込みしておく使用です。記事表示の際にAmazonのサーバーに接続することはなく、ショートコードに埋め込まれている情報のみで商品リンクを作成する仕組みとなっています。その為、そのショートコードを作成するのが少し面倒であるのと、AmazonJSで表示できていた価格やランキング等の情報を表示することができません。

個人的にAmazonJSの表示が気に入っており、色々探した結果katteneが雰囲気が少し似ているからコレにしたんですかね。

AmazonJS利用者の多くはツール選択に悩んだはず

恐らく多くのアフィリエイターが悩んだんだと思うんですよ。今でもAmazonJSが健在に動いているサイトを見ることもあります。恐らくキャッシュに残っているモノが表示されているのか、毎月売り上げがそれなりにありAPIがキチンと利用出来ているのかは分かりません。しかし私も売り上げあってもキチンと動かなかったりするのでよく分かりませんでした。。。。

また、AmazonJSで埋め込みしたショートコードがそのまま表示されているサイトも良く見かけます。

AmazonのPA-API v5への移行の影響は大きかったのではないかと思うのです。

AmazonJSから他のツールを検討の方、katteneはおススメですよ！

こんな出来ことがあるとAPIを利用しない方法の方が良いような気がしてくるのですが。。。