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の標準テーマ「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の導入については下記の記事にもう少し詳しく記載してありますので、必要な方はご参照ください。

サイトを守るためにhttps化する方法。ロリポップでhttps化は無料で簡単！

サイトを充実させる

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

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

WordPress入門から上級者向けカスタマイズまで徹底解説！

【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を利用しない方法の方が良いような気がしてくるのですが。。。

　WordPressの公式テーマ「Twenty Twenty-One」が2020年12月9日に正式リリースされました。WordPressで標準で用意されている外観テンプレートは適時バージョンアップされる可能性があります。バージョンアップされると、せっかく変更したデザインが元に戻ってしまう可能性があります。そうならないように子テーマというものを作成しておき、その子テーマを有効化にしておきます。

　カスタマイズは子テーマにしていくことが望ましいです。ある日知らないうちにデザインが変更されているなんてことにならないように、この設定も必ずやりましょう。今回は「Twenty Twenty-One」で子テーマを作成する方法について記載したいと思います。

子テーマの作成の手順について

次のことを実施します。

1. 「WordPressインストールディレクトリ / wp-content / themes」の中にどのような名前でも良いのですがフォルダを作成します。筆者の場合は「twentytwentyone-child」という名称のフォルダを作成しました。
2. 「functions.php」と「style.css」というファイルを上記で作成したフォルダに作成します。この二つのファイル中身については下記にて説明します。
3. WordPressの「外観」メニューにて「Twenty Twenty-One-child」が出来ているはずですので、これを有効化します。

１、２の手順についてはFTPソフトを利用するか、もしくはロリポップ！
であればロリポップのユーザ専用画面であれば、[WEBツール]－[ロリポップ！FTP]というものがあるので、それを利用しても良いでしょう。

「functions.php」は何を記載すれば良いのか？

最低限、次の内容を記載します。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );
}
?>

たったこれだけです。

勿論、このファイルには他にも色々なことをさせるときに関数を作成することはありますが、とりあえずは上記の内容だけで問題ありません。

「style.css」は何を記載すれば良いのか？

最低限、次の内容を記載します。

/*
Theme Name: Twenty Twenty-One-child
Template: twentytwentyone
Theme URI: https://wordpress.org/themes/twentytwentyone/
*/

たったこれだけです。一番下の行もなくても良いのですけどね。

子テーマの有効化

WordPressメニューの「外観」を選択すると次の画面が表示される。

すると「Twenty Twenty-One-child」というテーマが画像なしで表示されていると思うので、そこにカーソルを当て[有効化]ボタンを押して下さい。

すると子テーマが動作するようになり、子テーマにあるファイルを優先して動作するようになります。子テーマに作成したファイルは今回は２つでしたが、今後カスタマイズしていくと他のファイルも親テーマより子テーマにコピーしてカスタマイズしていくことになります。

子テーマと親テーマの動作時の優先順位

　WordPress標準や他テンプレートでも突然バージョンアップが予想されるものに関しては子テーマを作成しカスタマイズを行うのが良い。子テーマである「themes / twentytwentyone-child/」にファイルがあるものが優先動作され、無いものは「themes / twentytwentyone / 」の中にあるものが動作する。また、「themes /twentytwentyone-child /」直下に存在しているファイルについては、[外観]－[テーマの編集]よりファイルの中身の修正を行ことができます。

　ブロックエディター（Gutenberg）も2018年12月に登場して約2年が経過しました。ブロックエディターも進化し、WordPressのバージョンも変化してきました。その間、サイトの更新をほとんどせずにいたこともあり、ブロックエディターになって困ることは編集画面で「AmazonJS」のアイコンが動作しなくなったこと位なものでした。

しかしここ最近、ブログの過去記事を編集しようとしたら。。。

「ブロックへ変換」なるものが表示されるじゃないですか。

過去の記事をブロックエディターを使用して編集しようとするとこのようになるようで、どうしようか悩んでしまいました。これ恐らく変換すべきなんだと思います。

WordPress的にはブロックエディター（Gutenberg）に完全移行して貰いたいハズなので、「クラシック版の段落」のままにしておくのは余り得策ではないような気がします。今後ブロックエディタ－がどのように進化していくかはわかりませんが、クラシック版の段落がいずれ正しい動作をしないようなコトが発生するかもしれません。

今現在は旧エディターで作成された記事をブロックエディターで開いたタイミングでブロック変換できるような仕組みとなっているので、どうせなら変換しておいた方が今後のためではないかと私は考えております。

だからほぼ変換しちゃいました。

ブロックへ変換するに当たって

変換自体はハッキリ言って簡単です。

旧エディタで作成された記事をブロックエディタで開くと下図の様に「ブロックへ変換」と言う個所が表示されますので、ソレをクリックしてください。

「ブロックへ変換」をクリックすると

　基本的にブロックエディタで編集した記事のような構成に記事内全て変換されます。コレはとても便利なのですが、稀に正しく変換されません。

正しく変換されないケースがある為、変換後に必ずチェックする必要があります。

チェックして正しい変換がされなかった場合は、手動で直すしかない。

それが結構大変。

「ブロックへ変換」を実行して正しい変換が行われないケースって言うのは、意外と複雑なHTMLの箇所だったりする訳で。。。

変換が正しく行われなかったケース

私が変換していく中で正しく変換されなかったケースは

• テーブルの中でセルの結合をしているケース
• 画像が複雑に複数あるケース

この2点だけでした。画像のケースは1回だけでしたので殆ど発生しないのではないかと考えます。テーブルのセル結合がダメだのは複数記事で発生しました。このケースは見え方が全然変わってしまう為、手で直しました。また一部の記事では直すのが余りにも大変そうだったので、ほっといたものもあります。最悪はその記事は削除でも良いかなって思っています。

殆どの記事を変換完了

とりあえず殆どの記事を変換しましたので、今後過去記事を修正する場合はブロックエディタでの編集で問題ありません。コレを機に旧エディタを使用するのを卒業しようと思います。

まだブロックへ変換をしていないWordPressブロガーの方は是非やっておいた方が良いです。

え？

これっておかしくないですか？

インターネット全体的に高速化されていく中で、サイトも進化させないと高速化の波に取り残されていくと言うことなのでしょうか？

去年の契約更新の時点でもどうしようか悩んだのですが、面倒になってやめちゃったんですね。だけど今年こそは何とかせねばと思いまして考えてみました。

まずはエックスサーバーを検討してみました。昔から速度が評判の良いサーバーとなります。私も以前から気になっていたのですが、なかなか乗り換えるまでには至らなかったのですが今回も検討対象としました。しかし思わぬ展開に。。。。

ロリポップに新プランがラインナップされているじゃないですか？

ハイスピードプラン

昨年の9月から提供されていたみたいですね。現在はスタンダードプランを契約しているのでグレードアップということになるのでしょうか。速度を追究しているのでSSD搭載サーバーですね。利用料金はスタンダードプランの2倍。逆にこのようなプランが提供されたとなるとスタンダードプランとハイスピードプランとの差別化が必要となってくるわけで、速度差は出てきても仕方ないのかな。あんまり考えたくはありませんが、ハイスピードプランリリースによりスタンダードプランの速度に影響が出ているなんてことないですよね？

ハイスピードプランはサーバーを強化したことによる爆速仕様な筈だから、スタンダードプランは何も変わってはいないと思うんですけどね。ただ思うに高スペックサーバーを使用したサイトが多くなってくると、通常サーバーのサイトが遅く感じるようになるのは仕方がないことです。勿論Wordpressも進化してます。大容量高速インターネットの時代です。サイト運営も時代に対応していかないといけないのかもしれませんね。

当サイトも数年前に速度改善のため色々試してPageSpeed Insightsを使用して速度を計測して客観的に分析したことありますが、その当時の数値よりも今計測した方が圧倒的に遅くなっております。

なんでだろうね？

ロリポップ　ハイスピードプランについて

エックスサーバーとロリポップのハイスピードプランで悩んでみて、結局ハイスピードプランを選択しました。この理由はエックスサーバーへの乗り換えが少し大変そうな感じがしたんです。ロリポップのスタンダードプランを使用していてエックスサーバーへ乗り換えした人のレビュー等もあり、参考にするサイトも多いので比較的難しくなく乗り換えは可能だと思われます。しかし、少し心配になってしまったんですね。乗り換えでデータ移行やWordpress環境の再構築が必要となるため、全く何もなく上手くいくように思えませんでした。それであればロリポップのままでプラン変更の方がリスクが少なく、サーバーパワーアップが出来ると思いました。

以前はスタンダードプランの上位プランはエンタープライズしかなかったのですが、この間のプランとしてハイスピードが登場したんですね。これはサイトのアクセス数によってプランをステップアップしていくのに丁度良くなりました。何せエンタープライズですと利用料金が少し高額となります。スタンダードプランが安価に設定されているのもあるんですけどね。

ハイスピードプランへ変更するにあたってやったこと

ロリポップのスタンダードプランからハイスピードプランへ変更する場合、少しばかり注意する点があるようです。phpのバージョンとSSLの設定です。

phpのバージョンは既にハイスピードプランで動作させるバージョンと同じであったので確認で済みました。またSSLの設定はロリポップの独自SSLを既に設定していたため、問題なしと判断しました。

私のサイトの場合、特別なことをすることなく契約変更だけすればハイスピードプランで動作してしまうようでした。コレってラッキーですね。

もしphpバージョンが異なる場合には、スタンダードプランのままでphpバージョンを変更して動作確認しておく必要があるみたいです。また独自SSLは無料で利用可能ですので、サイトをSSL化していない場合には是非やってみてください。

特に問題なしと判断してから、実際に契約変更してみました。

契約変更して1週間くらいほっといてたらロリポップからプラン変更のお知らせメールが来ました。メール確認後にサイトの確認をしてみましたよ。とても期待をしながら。

表示速度の変化を検証

プラン変更前のモバイルとパソコンの表示速度

プラン変更後のモバイルとパソコンの表示速度

どうですか？

プラン変更前と変更後でモバイルとパソコンともに表示速度が上昇していることが分かります。モバイルが＋13、パソコンが＋16。数値的にはまだまだ速度を上げる必要がある微妙な結果となっていますが、プラン変更だけでコレだけ結果に変化があり、プラン変更した甲斐がありました。

どうですか？この結果は？

もしロリポップユーザでサイトの表示速度改善に悩まれていましたら、一つの解決策として採用してみるのもアリかもしれません。

WordPressを使うならロリポップ！
簡単インストール完備で楽々スタート！

年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─

WordPressで標準で用意されている外観テンプレートは適時バージョンアップされる可能性があります。バージョンアップされると、せっかく変更したデザインが元に戻ってしまう可能性があります。そのようにならないように子テーマというものを作成しておき、その子テーマを有効化にしておきます。そして、その子テーマをカスタマイズしていくことが望ましいです。ある日知らないうちにデザインが変更されているなんてことにならないように、この設定も必ずやりましょう。今回は「Twenty Nineteen」で子テーマを作成する方法について記載したいと思います。

子テーマの作成はとても簡単

やることは次のことです。

1. 「WordPressインストールディレクトリ / wp-content / themes」の中にどのような名前でも良いのですがフォルダを作成します。筆者の場合は「twentynineteenｰchild」という名称のフォルダを作成しました。
2. 「functions.php」と「style.css」というファイルを上記で作成したフォルダに作成します。この二つのファイル中身については下記にて説明します。
3. WordPressの「外観」メニューにて「twentynineteenｰchild」が出来ているはずですので、これを有効化します。

１、２の手順についてはFTPソフトを利用するか、もしくはロリポップ！
であればロリポップのユーザ専用画面であれば、[WEBツール]－[ロリポップ！FTP]というものがあるので、それを利用しても良いでしょう。

「functions.php」には何を記載すれば良いのか？

最低限、次の内容を記載します。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );
}
?>

たったこれだけです。

勿論、このファイルには他にも色々なことをさせるときに関数を作成することはありますが、とりあえずは上記の内容だけで問題ありません。

「style.css」は何を記載すれば良いのか？

最低限、次の内容を記載します。

/*
Theme Name: twentynineteen-child
Template:   twentynineteen
Theme URI:  https://wordpress.org/themes/twentynineteen/
*/

たったこれだけです。一番下の行もなくても良いのですけどね。

子テーマの有効化

WordPressメニューの「外観」を選択すると次の画面が表示される。

すると「twentynineteen-child」というテーマが画像なしで表示されていると思うので、そこにカーソルを当て[有効化]ボタンを押して下さい。

すると子テーマが動作するようになり、子テーマにあるファイルを優先して動作するようになります。子テーマに作成したファイルは今回は２つでしたが、今後カスタマイズしていくと他のファイルも親テーマより子テーマにコピーしてカスタマイズしていくことになります。

まとめ

WordPress標準や他テンプレートでも突然バージョンアップが予想されるものに関しては子テーマを作成しカスタマイズを行うのが良い。「Twenty Nineteen」から変更点が多かったようで、「themes / twentynineteen / template-parts /」の中にあるものも子テーマフォルダへ持ってきて、カスタマイズする必要がある場合もある。どちらにせよ子テーマである「themes / twentynineteenｰchild /」にファイルがあるものが優先動作され、無いものは「themes / twentynineteen / 」の中にあるものが動作する。また、「themes / twentynineteenｰchild /」直下に存在しているファイルについては、[外観]－[テーマの編集]よりファイルの中身の修正を行ことができます。

何やらWordPressがメジャーバージョンアップするのでしょうか？WordPressのダッシュボードに「今日から新しいエディターを試しましょう」と表示されているではありませんか。

「Gutenberg をプラグインとしてインストールすることで公式リリース前にテスト実行し、必要であればフィードバックできます。 テスト、バグ報告、GitHub リポジトリ上でのコントリビューションを通じて手伝うことができます。」

何か公式リリース前に触ることが出来るなんて面白そうなので、インストールと有効化をして実際に利用してみました。

ん～なんだろうな？

個人的には新しい編集画面は好きです。慣れの問題もありますが、今までの編集画面とは少し違い実際のプレビューに近い雰囲気のエディターとなっているような気がします。

しかし私が利用している「AmazonJS」と言うプラグインがまだ利用できないのはしょうがないのでしょうか？

「TinyMCE Advanced」と「AddQuicktag」は有効なんですがね。

コレはバグと言うよりも「AmazonJS」側の問題なのでしょうか？

Gutenbergプラグインを使ってみよう！

公式リリース前ですが簡単に利用可能です。2018年8月4日時点ではダッシュボードにインストールすることを促しております。

手順は次のように行います。

1. 「Gutenbergをインストール」ボタンをクリック
   

   ---

2. 「Gutenbergを有効化」をクリック

たったコレだけです！しかし私が上記の操作を実施した際にはエラーが発生しました。下図です！

こんなエラーが発生したら大丈夫？っと思ってしまいますが、何も問題なく新エディターが利用出来ます。

新エディタの概要！

まずは新エディタの全体像は下図です！

ちょっとモダンな感じがしませんか？ただ一見すると今までと全く違う感じがするのですが、文章中をクリックするとエディタツールが表示されます。それが下図ですね。

ここが少し分かりずらいのですが「TinyMCE Advanced」と「AddQuicktag」を利用されている場合は一番右のアイコンをクリックすると・・・。

何故「続きを読む」ボタンをクリックすると拡張してあるアイコンが表示されるのかは不明ですが・・・。ま、コレで一通りの編集ツールが利用できるので記事を作成するだけであれば困ることはありません。

画像がエディタ画面でアップロード可能！

操作方法は次の様になります。

新エディタ画面を使っていて一番素晴らしいと思った機能はエディタ画面上で画像ファイルをアップロードできる点です。

1. 下図のように編集画面左側に「＋（ブロックの追加）」ボタンが表示されましたらクリックして下さい！

   ---

2. 追加可能なモノがアイコン表示されます。ここでは下図の赤丸で囲んだ「画像」をクリックして下さい。

   ---

   

   ---

3. アップロードをクリックし画像ファイルを選択すれば、画像が直接記事に貼付きます。

この機能はとても便利です。今まではわざわざ「メディア－新規追加」から画像ファイルをライブラリ登録してからでないと記事に画像を表示することが出来ませんでしたが、画面を変えなくても直接出来るのは大変便利です。

「AmazonJS」プラグインはどうした？

恐らくGutenbergが公式リリースされないと「AmazonJS」は正式対応しないような気がしますね。何せメニュー上部にあった「メディア追加」ボタンも無くなってしまったのですから。

ここら辺はとりあえず旧エディターで利用すれば良いかな？

って私的には思っております。

もしかして何か裏技でアイコンを表示するようにしないといけないのでしょうか？そこら辺は正式リリース後にどうなるかを見守ってからにしましょう。どうしても不自由になってしまった時は何か手を考えないといけないかもしれません。

旧エディターも使用可能！

2018年8月4日時点においては、まだ正式リリース前ですので旧エディターも利用可能です。正式リリースされても旧エディターが利用出来るのかは不明ですが、慣れるまでの間は併用利用すれば良いのではないでしょうか？

きっといずれは新エディターへ一本化されるような気がしますけどね。

投稿一覧画面で見た時に「旧エディター」で編集することが出来るようになっております。

これなら問題ないでしょ？

最後にまとめると

新エディターGutenbergですが、個人的には感触が良いです。しかしブロックと言う考え方編集していきます。この考え方で困ってしまったのはリストの中に画像を入れたい場合です。

もしかしてリストの中に画像は入れられない？

何となく今の状況はそのようにしか見えないのですが・・・。HTML的にリストの中に画像は良くない記述なのでしょうか？

私が気になったのはこの点位でしょうか。ブロックの考え方は悪くはないのですが、画像等を挟み込むと別ブロックと言う考え方になっているような気がします。そこが気に入らなかったのでこの記事は最終的に旧エディターで完成させてしまいました・・・。

きっとここから完成度が高まっていくような気がしますけどね。

本サイトで利用しているレンタルサーバー「ロリポップ！」から4月5日に「【スタンダードプランで提供開始！】WEBサイト表示を高速・安定化するコンテンツキャッシュ機能【ロリポップ！】」というタイトルのメールを頂きました。

下記がそのメール内容です。恐らく私同様にスタンダードプラン契約者には同じお知らせが通知されているのではないかと思います。

お？WEBサイト表示の高速化？

本サイトは「ロリポップ！」のスタンダードプランで運営しております。そして有難いことに1日1万PV近くアクセスして頂ける日があることも出てきており、今後どうしようか悩んでおりました。

あと少しで1年の契約期間が終了してしまうんですね。

速度が速いと評判の「エックスサーバー」に移行しようか？「ロリポップ！」で同じプランで継続するか悩んでいたところに舞い込んできたお知らせです。

契約更新よりも新規契約の方が価格も安いんですよね。((´∀｀*))

でもサイトの移行作業が結構面倒です。そして正直な話、「ロリポップ！」で困ったことがないんですね。Googleアナティスクで瞬間アクセス数が100を超えて時も耐えてましたよ。「ロリポップ！」の同時アクセス数制限履歴を見ても制限に引っ掛かるまで到達したことはありません。

高性能なレンタルサーバーも魅力的ですが、まだまだ「ロリポップ！」で十分じゃないですか。そして今回の「コンテンツキャッシュ機能」のサービス提供。

タイミングが良すぎます！早速、「コンテンツキャッシュ機能」の設定をしてみましたよ。

コンテンツキャッシュ機能について

「ロリポップ！」によるとコンテンツキャッシュ機能をWordPressで制作しているサイトの場合で24倍のパフォーマンス改善が見られるとのこと。

24倍って凄くないですか？

ちょろっと設定変更するだけで24倍パフォーマンス改善されるんですよ。コレは利用しないのは勿体無いと思います。

私も本日設定しましたのでメリットの恩恵を受けることしか考えていないのですが、もしかしたら何かに悪影響を及ぼす可能性があることも頭の片隅にでも入れておいた方が良いかもしれません。

キャッシュ機能とは実体データとは別に一時的にキャッシュしておくことで、データアクセスを早めるための機能です。だから記事を更新した時にスグにサイト反映されない可能性も出てきます。一度キャッシュした表示内容は10分程度保持するようです。それ位なら許容範囲かな？っと私は思っています。

コンテンツキャッシュ機能設定方法

「ロリポップ！」でのコンテンツキャッシュ機能の設定はとても簡単です。ただ条件があります。説明ではWordPressのバージョンが4.9.4でのパフォーマンス比較されていました。

1. ロリポップユーザー専用ページにログイン
2. 下図の赤枠部分である「サーバーの管理・設定」－「コンテンツキャッシュ」をクリックします。
   

   ---

3. 下図の画面が表示されましたらコンテンツキャッシュ機能を利用したいドメインに対して赤枠部分の「OFF」から「WP」もしくは「静的」に変更します。WordPressサイトの場合は「WP」となります。

たったコレだけで設定完了です。設定反映までには最大5分掛かるとのこと。

設定完了後は動作確認してみよう！

動作確認と言ってもサイトを表示させてみるだけです。

キチンと表示されるか？

とても大切なことです。あとは使っていて不具合が出てこないか？は数日間利用してみないと分かりませんね。もしかしたら使用しているプラグインやアフィリエイト広告の表示等に影響が出る可能性も否定は出来ません。

もし不具合が出たらコンテンツキャッシュ機能をOFFにして「キャッシュ削除」すれば良いんですよ。設定もスグに元に戻せるので安心です。

まとめると

コンテンツキャッシュ機能が利用できることは、「ロリポップ！」でスタンダードプランで契約されている方には朗報としか言いようがありません。

ちょっと設定変更するだけでWordPress4.9.4なら24倍のパフォーマンス改善。

サイトの表示速度で悩みがありましたら是非利用してみて下さい。もしかしたらあなたのサイトもパフォーマンス改善されるかもしれません。ちなみに本サイトは若干速度が速くなったような気がしています。

「エックスサーバー」も魅力的ですが、「ロリポップ！」で限界を感じてからでも遅くないのではないでしょうか？

本サイトは現在「Twenty Seventeen」をベースにして運営しています。私自身「Twenty Seventeen」以外のテーマを利用してサイト運営したことはありません。

WordPressを始めた時に標準でインストールされているテーマで最新かつ斬新的なテーマ「Twenty Seventeen」を迷わず選択しました。確かにSEO対策されている野良テーマの導入を一時は考えたこともありましたが、個人的にはWordPress公式テーマを利用する方がメリットが大きいような気がします。

ここら辺は運営者それぞれの考え方によるので、野良テーマ・公式テーマ関係なく自分が好きなテーマを使えば良いと思います。

野良テーマのメリットは間違いなくSEO対策がされており、テーマの改良に無駄な労力を必要としないことが挙げられます。WordPress公式テーマは高機能すぎると承認されないのです。もう少し掘り下げるとテーマがプラグインの領域までの機能を搭載しているとNGです。

そんな阿保な？

と思われる方も多いと思いますが、ソコが一つの重要な点です！恐らくWordPress本体そのものがテーマとプラグインを組み合わせながら自分オリジナルのサイトを作ることを目的にしているのでしょう。だからテーマを乗り換えたい場合に公式テーマ間であればある程度スムーズに行える可能性は高くなります。

しかし野良テーマを導入してしまうと、テーマを全く別のモノに替えてしまうと労力が必要なんではないかと感じます。

そんな理由から私は公式テーマを利用することを基本的に薦めています！しかし公式テーマも沢山あるんですね。どれを選んだらよいかハッキリ言ってわかりません。そんな私が「Twenty Seventeen」以外のテーマで導入しても良いかな？と思った公式テーマが幾つかあります。

その中の一つを今回紹介したいと思います！

WordPress公式テーマ「Astrid (アストリッド)」

私も数にして100テーマ位でしょうか？公式テーマと野良テーマを別のサイトでインストールし簡単な設定変更してプレビューしてみた結果。利用しても良いかな？と思えたテーマは5以下しかありませんでした。

その中でも一番気になったテーマが「Astrid (アストリッド)」です！

意外と公式テーマでも無料で利用できる範囲が決まっているようなテーマもあります。要はテーマを最高パフォーマンスにする為にはお金が掛かる。完全に無料に拘ると良さげなテーマが激減します。その中でも完全無料でシンプルかつ最新化されているテーマです！

このテーマですが「WordPress公式テーマ（人気）」の上位に位置するテーマとなり世界中で利用している人も多いテーマかと思います。

「Astrid」のテーマ概要説明

実際に公式サイトで「Astrid」について下記のように説明されています！

Astrid (アストリッド) は立派なビジネスサイトをすばやく作成するのを手助けしてくれます。このビジネステーマには、カラーオプション、フォント、全幅ヘッダー画像、カスタムウィジェット、ブログオプション、その他多くの面白くて便利なオプションなどの必要な機能が含まれています

引用元：wordpress.org日本語

ちょっと説明がカッコ良くないですか？

「ビジネス」良い言葉ですね。本当にサイトで説明されている通りです。正直な話、「Twenty Seventeen」よりもカスタマイズ性は高いような気がしています。カスタマイズと言うよりも設定で済んでしまうと考えた方が良いかもしれません。

誰でも簡単に素晴らしいサイトに仕上がります！

このテーマの凄いところですが、正直「Twenty Seventeen」よりも自分のイメージしているサイトに近づけることが簡単に出来ると思います。

作りがシンプルで日本語対応されているので設定も苦ではありません。特にカラーオプションとヘッダー画像関連については自由度が高いです。わざわざスタイルシート「style.css」に修正を加えなくても設定だけで良い雰囲気のサイトに仕上がります。

このテーマハッキリって只者ではありません。このテーマを利用している日本のサイトもあるようですね。このテーマのカスタマイズについて触れている方も実際にいますね。

ただカスタマイズがコレ必要なのだろうか？と感じてしまうテーマです。基本的に設定だけでほぼ完成してしまいます。

あとはプラグインだけでしょうか？

決定的な点はサイドバーの幅

実は公式テーマを幾つもインストールしてプレビューするとわかるのですが、ページ幅とサイドバー幅が意外と気になります。

本サイトもサイドバーにTwitterのフォローボタンを「著者情報」に設置しているのですが、フォロワー数の吹き出しが途中で切れてしまうテーマが多いです。

これ恐らくですが、「Twenty Twelve」をベースにテーマ作成したものがそのようになっているのではないかと勝手に私は推測しています。「Twenty Twelve」ですが2012年WordPress公式テーマです。このテーマは非常にシンプルでカスタマイズを本気でしたい人向けのテーマなのかな？と感じます。

しかし最新テーマという点で考えるとやはり選択肢から外れてしまうのですかね？正直WordPress本体バージョンに合わせて作られたテーマの方が良いのかな？なんて思う事もあります。

そこら辺も加味すると「Astrid」はキチンと最新化されている使いやすいテーマの一つに挙げられると思います。勿論「Twenty Seventeen」もサイドバーでそのような現象は発生しません。

結構シビアな観点から見ています。サイドバーの幅だけでベーステーマが何となくわかってしまう。きっと今でも「Twenty Twelve」の魅力に惹かれている人が多い証なんですかね。

最後にまとめると

私も今、他のサイトで別のテーマを利用するか悩んでいるところです。多数のテーマを見て実際に簡単な設定してみて厳選したテーマの一つが「Astrid (アストリッド)」です。

実際にコレを利用するかはまだ検討中なのですが、実際に使っても良いかな？と思わせたテーマは一握りです。厳選した結果にこのテーマが含まれている。

恐らくWordPressを始めて利用される方は「Twenty Seventeen」よりもコチラのテーマの方が自分のイメージに近いサイトになるような気がします。

しかも簡単な設定だけで。

このテーマ、ハッキリ言っておススメです！

公式完全無料テーマは素晴らしい！

WordPress公式テーマ「TwentySeventeen」においてはSVGアイコンによるソーシャルリンクボタンがフッターに表示できる仕様となっています。少し日本仕様になっていないという問題はありますが、ページ全体のアイコンとしては利用するに値するものだと感じています。

この標準ソーシャルリンクアイコンなのですが何故かフッターにしか出力しない仕様になっているんですね。

以前に「WordPress【twenty seventeen】標準のソーシャルリンクメニューをサイドバーに実装する方法」でサイドバー実装する方法を記事にしたことがあります。

しかしこの方法ですと自由な位置に配置することが出来ないと言った残念なカスタマイズになってしまっているんですね。サイドバーの一番上か一番下にしか配置することができない。ちょっと汎用性に欠けてしまいます。

サイトの何処の位置にでも配置したい場合、ウィジェット化すると一番汎用性が高い使い勝手が出来るのではないか？

こんな疑問からウィジェットを自作してみました。

ウィジットの自作は意外と簡単！

本当なら「テキストウィジット」にPHPコードが記述出来れば良いのですが、コレ気を付けた方が良いですよ。そんなことが可能になるプラグインもあるようですがセキュリティ面では不安があります。

ウィジット自作と言うと難しいと感じる方も多いと思いますが、今回のウィジット自作については非常に簡単です。フッターに表示出来ている下図のアイコンをウィジット化するだけですから。

無駄を完全排除した作りにしてあります。TwentySeventeenの標準ソーシャルアイコンをサイドバーに搭載出来た方であれば、同じ感覚で出来ます！

完成イメージ次のようになります！

下の赤枠部分の「SNSウィジェット」と言うのが今回作成するウィジェットです。

え？ココに表示されるモノって自作できるの？って思われた方もいるのではないでしょうか。

因みに「TwentySeventeen」のフッターでは下図のようなソーシャルリンクアイコンが表示できるはずです。

ウィジット作成には基本形があります！

今回はココでは詳しく説明はしませんが、ウィジット作成には基本形という物があります。コレに関してはネットで調べると色々出てくるのですが、中には現在では使わない方が良い関数を使用しているケースも出てきますので注意が必要です。

WordPressもPHPも常に進化しています。可能な限り新しい関数で対応していくのが良いです。廃止の方向にある関数は可能な限り使わない！

ウィジットの基本形なのですが、クラスをオーバーライド（継承）して使用するものなので、基本形で定義すべき関数を全て記述する必要はありません。

「テキストウィジット」のように「タイトル」「内容」「テキスト」を入力するようなウィジットであればそのような設定する関数を定義する必要があります。しかし今回はウィジットを配置出来れば良いだけのモノなので一番シンプルなウィジット定義で作成することができます。

ソーシャルリンクアイコンのウィジェット化

先にお断りを入れておくと、今回はあくまでも「TwentySeventeen」の標準ソーシャルリンクメニューを利用してフッターに出力出来ているSNSアイコンを表示するためのウィジェット化です。応用は可能ですが自己責任の範囲でお願いします。

ウィジェット化コードは「function.php」ファイルを編集します！作業の前には必ず「function.php」ファイルのバックアップしておいてください。最悪の場合はサイト自体が開かなくなりますので、その時はバックアップしていた「function.php」ファイルをアップロードしてください。

WordPress4.9よりテーマ編集機能が強化されWordPressの画面上で修正がしやすくなったように感じます。今回は下記のコードを「function.php」に追記して下さい。

// SVGアイコン利用のSNSアイコンボタン
class SNS_Button_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(false,'SNSウィジェット');
}
function widget($args, $instance) {
    if ( has_nav_menu( 'social' ) ) : ?>
        <nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
        <?php
            wp_nav_menu( array(
                'theme_location' => 'social',
                'menu_class' => 'social-links-menu',
                'depth' => 1,
                'link_before' => '<span class="screen-reader-text">',
                'link_after' => '</span>' . twentyseventeen_child_get_svg( array( 'icon' => 'chain' ) ),
            ) );
        ?>
        </nav><!-- .social-navigation -->
    <?php endif;
    }
}
add_action('widgets_init', function() {return register_widget("SNS_Button_Widget");});

たったコレだけです！

ウィジェット基本定義と表示部分しかコード記述していない最もシンプルな作りです。ウィジェット名や関数名は自分が好きなように定義して下さい！

完成したら実際にウィジェットをサイドバーに追加！

「function.php」ファイルが更新されたら、サイドバーにウィジェット追加してみて下さい。きっと追加する時に今回作成したウィジェットがあるはずです。

コレであればサイドバーの何処の位置にでも標準ソーシャルリンクアイコンを配置することが出来ることが分かると思います。

わざわざ「sidebar.php」の中に直接コード記載しなくても良く、こちらの方が汎用的に利用できるはずです。

あと「はてブ」のアイコンは何処にあるのか？疑問に思われた方は下の記事を読んで下さい！

WordPress【twenty seventeen】標準ソーシャルリンクメニューに「はてブ（はてなブックマーク）」アイコンを実装する方法

WordPressの自由度の高さは半端ないですね。自分でやれることが増えてくるとサイトに磨きがかかるような気がします。しかしまだ満足していないんですよね。「TwentySeventeen」でやるべきことはまだまだあるような気がします。

現在、本サイトにおいては「WP Social Bookmarking Light」を利用してSNS連携を行っています。このSNS連携はサイト運営には欠かせない重要なSEO対策の一つなのですが。

「WP Social Bookmarking Light」以外にも良いプラグインは無いのだろうか？

と疑問が湧いてきました！

と言うのも「WP Social Bookmarking Light」のSNSボタンは小さく少しインパクトに欠けていませんか？

SEO対策されているWordPressテーマ（WordPress非公式テーマ）なんかですとSNSボタンが標準装備されているモノもあるのですが、結構素晴らしいSNSボタンを見かけることが多いです。

そこで「はてなブックマーク」が対応しているプラグインで「AddToAny Share Buttons」というモノがあるので、他のサイトにて実際に利用した私見を述べたいと思います。

「AddToAny Share Buttons」について

このプラグインの素晴らしいところを挙げるとすれば、常にサイドにSNSボタンをフローティングさせることが可能な仕様となっています。

このフローティング機能は正直に言いますと、最初は「いいな～コレ！」とサイト運営者側からすると思いました。

実際に2週間程他のサイトで利用してみたのですが、パソコンから閲覧する分にはSNSボタンのフローティングは気にならなかったのですが、スマートフォンからサイトを閲覧した場合にはかなり煩わしい感じがしました。

このフローティング機能は使わないという選択肢も勿論あるのですが、その機能を利用しない場合のメリットがあるかが疑問を感じるところがありました。

メリット・デメリットの私見！

このプラグインですがやはりメリット・デメリットがあるのは仕方がない事だと思います。そもそも「はてなブックマーク」に対応しているSNS連携ボタンのプラグインは数少ないので、その中での比較となってしまいます。

人によっても捉え方が違ってくるコトですので、最終的には自分が気に入るプラグインを利用するのが良いということです。ただ、あくまでも私見ですので参考までに捉えて下さい！

【メリット】

• フローティング機能が利用可能
• SNSボタンの対応数が非常に多い
• ボタンがシンプルでわかりやすい
• 「その他（＋）」のボタンがある為に、世界中のSNSボタンが利用可能

【デメリット】

• フローティング機能はスマートフォンでは煩わしい
• 「いいね！」カウント数や「はてブ」カウント数がトータル表示しかされない

こういったところです。結局のところ私は【デメリット】で挙げたカウント数の問題が一番大きい理由であるため、「WP Social Bookmarking Light」を採用することにしました。もしかしたら今後良いモノがあれば利用したいと思っているのですが、「はてブ！」に対応しているプラグインは限定されてしまうのが痛いところです。

プラグインの設定は簡単です！

ハッキリ言ってこのプラグインの設定は非常に簡単です。インストールして有効化。その後にどのSNSボタンをどのように表示するか等を設定すれば完了です。かなりお手軽な設定となっています。

設定に関して言えば「WP Social Bookmarking Light」と比較しても難易度は変わりません。むしろ簡単かもしれませんね。多くのサイトで設定方法について述べられてますので、敢えて本サイトでは設定については取上げません。

まとめ

SNS連携ボタンをプラグイン利用する場合、「はてなブックマーク」に対応しているモノは限定されています。プラグイン利用で済ませたい場合、自分の好みに近いモノを選択する以外の方法はありません。

もしプラグインでお好みに合わない場合は、SNS連携ボタンの自作も視野に入れて検討が必要となります。「はてなブックマーク」に拘りが無ければ、プラグインの選択肢も増えるのですが、日本のサイト運営には「はてなブックマーク」は結構重要な存在であるのは確かです。

本サイトも「はてなブックマーク」から直接来るような閲覧者は少ないのは確かですが、ブックマークされることによるSEO効果は高いと判断しています。

たかがSNS連携ボタンですが、重要なボタンであるのは確かです。

今サイトのテーマを変更するか悩んでいます。自分の他サイトで色々なテーマを試しに適用してみてどのテーマがサイトにとって良いのか？試行錯誤しています。WordPressでサイト運営を始めた時にタマタマ「twenty seventeen」のインパクトに惹かれ無料だから利用していましたが、本当にこのテーマがベストな選択なのか？少し疑問が湧いてきました。

WordPressのテーマをググるとSEO対策された無料テーマが有りますが、気になる点はWordPress公式で取扱われていないことが気になります。特に日本語対応の有名テーマはWordPress公式サイトにはない。

これ理由があるようです。WordPress公式で取扱われるテーマはプラグイン利用を考慮したテーマしか公開出来ないようです。日本の有名テーマはSEO対策がしっかりしておりSNS連携までも全て出来るような無料テーマが存在しているのですが、プラグインの領域までカバーしている為に公式公開出来ないようです。

なんか不思議ですね。(”ω”)

テーマの変更する際には全て見直す必要あり！

試しに幾つか公式・非公式関係なく色々なテーマを適用して試しているのですが、「コレだ！」っと思えるテーマに未だ辿り着いていない！

セキュリティ等のことを考慮すると作成者が「wordpressdotorg｣の物がベストであることは間違いないと感じています。今で言うと「twenty seventeen｣がそれに当たります。過去の経緯では1年に1回のペースで新しいテーマが公開されているのですが、｢twenty eighteen｣のリリース予定は未定のようです。毎年新しテーマを公開すること自体が良い事なのか？が疑問視されているようです。

しかし今の「twenty seventeen｣ですが少しカスタマイズ性に掛けているような気がしています。特にヘッダー部分に関しては本格的に触ろうと思うと相当な覚悟が必要です。もう少し融通が効くテーマが良いです。

私が気になっているのは「Twenty Twelve」が気になっています。このテーマは古いですが、過去のテーマの中でも一番シンプルな感じが良いです！あとは自分のカスタマイズ次第となります。ただ古いテーマであることは間違いない。

非公式テーマで気になったテーマもあったのですが、今の環境からすんなりテーマ変更という訳には行かないようです。

SEO対策テーマに変更する際は全設定を見直す覚悟が必要！

SEO対策やSNS連携を掲げているテーマは素晴らしい出来栄えだと思います。恐らく開発者の苦労が伺えるようなものになっていますね。ただ「twentyシリーズのテーマ」で完成させたサイトをそのようなテーマに変更する場合には、導入プラグインを全て見直す必要があることが分かりました。

プラグインを無効にして新テーマの設定をしていけば良いのですが、どうもその作業は時間が掛かりそうな気がしてなりません。全ての設定がどのような動きをするのかが理解できないと怖くて使えない・・・。

最初からそのようなテーマを選択していれば問題がないのでしょうが、一度作り込んでしまったサイトのテーマ変更には慎重に取組んだ方が良さそうです。

誰でも簡単にWordPressでSEO対策されたサイト運営が出来るように作り込みされているだけのことはあります。プログラム等が苦手な人に関してはそのようなテーマを最初から導入した方が間違いなく良い結果がでると思います。

WordPress公式サイト公開テーマであれば設定は特に気にしない！

逆にWordPress公式サイトからダウンロードして利用できるテーマに関しては、公開できる前提が決まっているので大きく設定変更する必要はないように思われます。但し、日本語対応されているテーマは少ないです。ココが一番の問題点です。

英語のモノでも良いのですが、良いな～って思うようなテーマはテーマ自体は無料ですが拡張機能を利用する場合には有料のモノが多いですね。上手くできています。無料で何でもかんでもヤレルようなテーマは結局「twentyシリーズのテーマ」に落ち着きそうです。

世の中上手く出来ています。

WordPress公式サイトにあるテーマの中でも少し表示速度がどうなの？って言うテーマが存在しているのも事実です。逆に非公式のモノでも良いものが沢山あります。結局、公式・非公式というのはそんなに気にすることは無さそうですが、今回のように「テーマ変更を一年に一度はしてみたい」と言うような事を考えているのであれば、公式テーマの方が良いと思います。恐らくテーマ移行がスムーズに行くと個人的には思っています。

｢twenty eighteen｣がリリースされたら良いのに！

個人的には｢twenty eighteen｣がリリースを待ち望んでいます。β版が出たら実験台になっても良いです。(〃艸〃)ﾑﾌｯ

結局はタダの新しいモノ好きなだけかも知れません。

しかし歴代の「twentyシリーズ」を全て見ましたが、本当に毎回特徴がありますね。個人的には「Twenty Twelve」のデザインで新機能を搭載すれば良いだけでは？と感じてしまうのですが・・・。

何か独特な特徴を毎回打ち出したいのでしょうね。開発者も大変です。

最後にまとめると

テーマによってどこまでの機能を搭載しているかによって導入するプラグインが変わってきます。SEO対策万全なテーマに移行する場合には注意が必要と思われます。SEO対策が重複する場合には逆効果になる可能性も否定できません。また、自分が作り込みした機能を新テーマで利用する場合に関してもキチンと動作するか検証する必要があります。安易に「function.php」をそのまま移行という訳にはいきません。

新しいサイトを立ち上げる際は気にすることはありませんが、既に作り込んでしまったサイトのテーマを変更する場合には注意が必要であるという事だけは頭に入れておいた方が良さそうです。