ビジネス向けWEBサイトをつくる

テーマ変更広告・PR

テーマ移行とクラシックエディタからブロックエディタに変更する際の注意事項

本ページはプロモーションが含まれています

私の運営する6つのブログを全てブロックエディタ対応のテーマに移行しました。

テーマは全て異なるものを使用しています。

使用している6つのテーマ

元からブロックエディタを使用している「STORK19」と「Cocoon」以外は、クラシックエディタ用のテーマ「Simplicity2」から、テーマをそれぞれ入れ替えました。

しかし、テーマを入れ替えただけでは、古い記事は新しいブロックに変わってくれません。

ブロックエディタ対応のプラグインを使いたいといった場合はクラシックエディタの記事をブロックエディタに変更しましょう。

実際に変更してみると使用するテーマによっては、様々な不具合が生じる場合があります。

全てを新しいブロックエディタに対応させるためには、多くの時間がかかります。

このページでは、テーマの変更やクラシックエディタからブロックエディタに変更した場合の問題や手順をまとめます。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

クラシックエディタからブロックエディタに変更した場合の問題点

私が経験したのは「Simplicity2」から「SANGO」「JIN:R」「SWELL」「Arkhe」に変更した際の問題です。

以下のような問題がおこります。

問題点
  1. タイトルのスタイルが適用されない
  2. カード型のリンク（ブログカード）がただのURLに変わった
  3. 画像が横に100％で表示されない

これらは主にテーマを変更したことによるので、エディタの問題ではありません。

タイトルや画像幅の問題はCSSをあてるしかないと思います。

「Simplicity2」のカード型リンクについてはURLを記述する場合とリンク付きのURLを記述する場合があります。

リンク付きのURLはブロックエディタに変更すれば埋め込み型のリンクカードに変更されます。

結局、問題があるページをチェックしてブロックエディタに変更するしかないでしょう。

ページ数が多いサイトはかなり手間です。

しかし、いつまでも古いエディタで頑張るのでは、新しい機能が使えません。

どこかの時点で、新しいテーマに変更するしかないと思います。

比較的問題が少ないテーマ「SWELL」と「Arkhe」

「SWELL」や「Arkhe」はシンプルな作りなので、「Simplicity2」から変更しても、ブログカード以外は、あまり問題が出ませんでした。

「Arkhe」については、プログラミングやCSSが分かれば、ベストマッチだと思います。

関連記事「Simplicity2」を使ったブログのテーマを「Arkhe」に変更する。

「SWELL」の利用者が多いのは、この引っ越し問題もからんでいるのかもしれません。

完全移行までのCSS

「SANGO」や「JIN:R」の場合、ページを完全に移行するまではCSSでクラシックページとブロックページの統一をはかります。

正直言って、この2つのテーマは移行がめんどうです。

見出しについては「h2見出し」だけを対応しました。

「SANGO」は画像が小さくなったので、無理に大きくしています。

SANGO

.entry-content h2 {
    background-color: #e83565;
    border-color: #e83565;
    font-size: 1.2em;
    color:#fff;
}
.entry-content h2 {
    border-radius: 3px;
    margin-bottom: 1.5em;
    padding: 0.75em 0.65em;
    position: relative;
}
.entry-content h2 {
    display: block;
    font-weight: 700;
    line-height: 1.4;
}
.entry-content h2:after {
    border: 12px solid transparent;
    border-top-color: inherit;
    content: "";
    height: 0;
    left: 25px;
    position: absolute;
    top: 100%;
    top: calc(100% - 1px);
    width: 0;
}

.entry-content .size-full {
 width: 100% !important;
	height:auto !important;
}
.entry-content .size-large {
	width: 100% !important;
	height:auto !important;
}

JIN:R

.single #postContent h2,
.page #postContent h2 {
	position: relative !important;
    padding: 18px clamp(18px, 3vw, 27px) !important;
    background: linear-gradient(-45deg, transparent 25%, #f3f3f3 25%, #f3f3f3 50%, transparent 50%, transparent 75%, #f3f3f3 75%, #f3f3f3) !important;
    background-size: 6px 6px !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    font-size: clamp(1.3em, 3.5vw, 1.65em) !important;
}
.single #postContent h2::before,
.page #postContent h2::before {
    border-top-color: #4466ce!important;
}
.single #postContent h2::before,
.page #postContent h2::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -10px;
    border-width: 16px 16px 0 16px;
    border-style: solid;
    border-color: transparent;
    transform: rotate(135deg);
}
@media (min-width: 552px) {
	.single #postContent h2,
	.page #postContent h2 {
	    font-weight: 400;
	}
	.single #postContent h2::before,
	.page #postContent h2::before {
	    left: -15px;
	    border-width: 20px 20px 0 20px;
	}
	.single #postContent h2,
	.page #postContent h2 {
	    margin-bottom: 3.3rem;
	    margin-top: 6.9rem;
	}
}

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定（絵文字読み込み・コード最適化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

クラシックエディタとブロックエディタを切り替える

ブロックエディターに変更してしまうと「AmazonJS」などの便利な機能が使用出来なくなります。

そこで、クラシックエディターとブロックエディターの両方が使えるように設定します。

STEP

プラグイン「Classic Editor」をインストールし有効にします。

Classic Editor
STEP

投稿設定でエディタの切り替えを許可します。

投稿設定
STEP

投稿編集画面でエディターが切り替え可能になります。

投稿編集画面はクラシックエディタのままですが、サイドバーに「ブロックエディターに切り替え」スイッチが表示されます。

これをクリックするとブロックエディターになります。

クラシックエディタ
STEP

クラシックエディターに戻すことも可能になります。

オプションボタンを押せば「旧エディターに切り替え」ボタンが表示されます。

ブロックエディタ

クラシックエディタでしか使えない「AmazonJS」のようなプラグインはクラシックエディタのページを作り、そこでHTMLコードを取得し、ブロックエディターの「HTMLブロック」にします。

めんどうなのですが、クラシックエディタからブロックエディタに変更した際に問題が起きる場合があるので、HTMLとして扱った方が安全です。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

クラシックエディタで作成したページをブロックエディタで修正する

クラシックエディタで制作したページをブロックエディタで修正できるようにしてみましょう。

クラシックエディタから、はじめてブロックエディターに変換すると、いくつかの問題が起こります。

クラシックエディタで作ったページの問題点
  • 画像サイズが「サムネイル」表示になっている
  • AmazonJSで作った画像の高さと幅が消える

いずれの問題も、そのままにしておくとLCPの問題になりそうです。

では、実際に修正してみます。

画像サイズを修正

STEP

クラシックエディタで制作した記事をブロックエディタでオープンする

「クラシック」というバーが表示されます。
これをクリックします。

ブロックエディタ
STEP

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

クラシックバーの上にブロックへ変換のバーがでます。
これをクリックします。

ブロック変換
STEP

ブロックエディタに変換完了

変換が完了しました。
画像サイズが「サムネイル」になっています。

画像サイズ
STEP

画像サイズを変更

画像サイズを「フルサイズ」に変更します。
全ての画像をチェックして修正します。

画像サイズ変更
STEP

「更新」ボタンを押して修正完了

画像サイズの問題を解決する際、メディア設定によっては大サイズで良いかもしれません。

私の場合は「Simplicity2」を使っていた際、大サイズを横幅ギリギリの680pxにしていたため、フルサイズを設定するしかありませんでした。

ブログカードはブロックエディタに変更するだけで埋め込みURLとして認識されますので変更しなくても大丈夫です。

外部リンクカードにしたい場合は変更してください。

「SANGO」の場合は、見出しを全て「SANGO」のテーマ独自の見出しに変更した方が良いのですが、めんどうなので、前のセクションで示したCSSで対応します。

「SANGO」の見出しの豊富さが、テーマの引っ越し作業では邪魔になります。

AmazonJS画像を修正

性能テストをやって分かったのですが、AmazonJSで貼り付けてあった画像は、ブロックエディタに変換することで、widthとheightが外れてしまうことがあります。

通常は以下のような形式です。

※形式的には同じなのですが、念のためコードを変えてあります。

<a rel="noopener nofollow" target="_blank" title="商品名" href="https://www.amazon.co.jp/012314568?tag=aaaaaaaa-55&amp;linkCode=aaa&amp;aaa&amp;aaaa">
<img decoding="async" loading="lazy" src="https://amazon.com/images/a/12345678-aaaa._aaaaaa_.jpg" alt="商品名" width="160" height="160"/></a>

ところが、ブロックエディタに変換したデータは以下のようになることがあります。

<a rel="noopener nofollow" target="_blank" title="商品名" href="https://www.amazon.co.jp/012314568?tag=aaaaaaaa-55&amp;linkCode=aaa&amp;aaa&amp;aaaa">
<img decoding="async" loading="lazy" src="https://amazon.com/images/a/12345678-aaaa._aaaaaa_.jpg" alt="商品名"/></a>

「width=”160″ height=”160″」が無くなってしまってます。

原因はハッキリしません。無くならない場合もあるようです。

この問題に対応するためには、画像をHTMLで埋めこみます。

■通常は画像として埋めこみ

AmazonJS

■HTMLにして埋め込み

AmazonJS

下書きでクラシックエディタの投稿を作って、AmazonJSのHTMLコードを取得し、コピー・ペーストします。

まとめ

以上のように、テーマを移行しクラシックエディタで作成した投稿をブロックエディタに変換していく作業は簡単ではありません。

私にしても、まだまだ作業途中です。（実は2700以上の投稿があります。）

しかし、ブロックエディタ対応で、利用可能になった重要なプラグインがあります。

また、ブログのサイトとしての表現も最近のテーマなら実現可能です。

今でもクラシックエディタを使っている方がいるとしたら、早くテーマを変更するとことをオススメします。

WordPressはブロックエディタあってこそのWordPressになったのです。

テーマも新しい人気のテーマがたくさんあります。

テーマを変えて楽しくブログを書きましょう。

最後に私が一番満足度の高かったテーマを書いておきます。

私にとっては「Arkhe 」が最高でした。（※Arkhe Pro Packを購入）

プログラミングやCSSが必要です。それさえできれば、独自のデザインで楽しくブログを書くことができると思います。

私もまだまだですが、WordPressは面白いです。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。
詳しくはこちら

3件のコメント

困っていることがありまして、よかったら教えてください。
Simplicity2からSWELLにし、ブロックエディタを試してみました。
既存のページをブロックに変換後、キャプションボックスやふきだしを使うと、編集画面では正常に表示されていても、プレビューした際に表示されません（まれに表示されるページもあります）。
ステップボックスは、レイアウトが別物になって崩れて表示されます。

新規投稿から作成した場合は、どれも問題なく表示されます。
新規投稿ページに、既存の記事をコピペした場合も、ステップボックスなど正しく反映されます。

既存記事の中身を全部削除してそこにステップボックスだけ入れても、やはり正しく表示されません。
記事の中身自体の問題ではなく、Simplicity2の時に作成したページの設定自体に問題がありそうなのですが、何か分かりますでしょうか？

よろしくお願いいたします。

返信

ももさん、お書き込みありがとうございます。
このあたりのことはテストして見ないと、なんともお答えのしようがありません。
現在、とても多忙となっておりまして、申し訳ありませんが、テストする時間がとれない状況です。

私の場合、Simplicity2からの移行で上手くいかなかったページは新しいテーマSWELLで作り直したかもしれません。
いずれにしてもかなりの作業が発生したように思います。

ただ、sangoやJIN:RなどよりSWELLやArkheは問題が少なかったように記憶しています。
少し、時間が経過したので、確証ありませんが…

返信

御多忙のところご回答いただきありがとうございます。
移行で上手くいかなかったページもあるのですね。

いろいろ試してみたところ、なんとなく原因が分かってきました。
もう少しいろいろ試してみます。
ありがとうございました。

返信

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

13 − 10 =

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
プロフィールはこちら
お問い合わせはこちら
※以下は私が活動している企業情報にリンクしています。