目次
目次

WordPressテーマ変更で起こる問題とは？知っておくべき重要ポイントを徹底説明！

Cocoonカスタマイズ集
この記事は約5分で読めます。
記事内に広告が含まれています。

はじめに

テーマをCocoonからAFFINGER６に変更したら、枠や吹き出しなど互換性がなく、修正が大変だったわ。

何痛いこと言ってんの？草
吹き出しとか修飾は、テーマごとにオリジナルのHTML、CSSで形を成しているだけ。
テーマ変更すれば、有料、無料に関わらず、修正が必要なんだよ！

テーマを変更すると表示が崩れることがあると指摘する方もいます。
その指摘にはテーマの基本的な理解が不足している可能性があります。

この記事では、テーマを変更する際に発生する可能性のある、以下の4点について、理由と具体例を示しながら説明します。

  1. デザインの不一致
  2. ウィジェットとメニューの設定のリセット
  3. カスタムコードやショートコードの非互換性
  4. SEOへの影響

デザインの不一致

ブロックや装飾の大半は、テーマ独自のHTMLやCSSで構成されています。
そのため、テーマを変更すると、前のテーマで使用していたCSSが適用されなくなり、表示が崩れることがあります。

ここではCocoonとSWELLの「吹き出しブロック」および「マーカー」を例に具体的な問題を説明します。

吹き出しブロック

<div class="swell-block-balloon">
  <div class="c-balloon -bln-left" data-col="yellow">
    <div class="c-balloon__icon -square"><img decoding="async" src="アイコン画像" data-src="アイコン画像" alt="" class="c-balloon__iconImg lazyloaded" width="80px" height="80px">
      <span class="c-balloon__iconName">名前</span>
    </div>
    <div class="c-balloon__body -speaking -border-none">
      <div class="c-balloon__text">
        <p>テキスト</p>
        <span class="c-balloon__shapes">
          <span class="c-balloon__before"></span>
          <span class="c-balloon__after"></span>
        </span>
      </div>
    </div>
  </div>
</div>
SWELLの「ふきだし」ブロックのHTML構造
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon">
  <div class="speech-person">
    <figure class="speech-icon">
      <img decoding="async" src="アイコン画像" alt="" class="speech-icon-image">
    </figure>
    <div class="speech-name">名前</div>
  </div>
  <div class="speech-balloon">
    <p>テキスト</p>
  </div>
</div>
Cocoonの「吹き出し」ブロックのHTML構造

これらの構造的な違いが原因で、テーマを変更する際にCSSが適用されなくなり、デザインの崩れが生じます。
「吹き出し」といったWordPressの共通仕様は存在しません。

マーカー

<span class="swl-marker mark_orange">テキスト</span>
SWELLの「マーカー」のHTML構造
<span class="marker-red">テキスト</span>
Cocoonの「マーカー」のHTML構造

マーカー1つ取ってみても、テーマによってHTMLの構造は異なります。

ウィジェットとメニューの設定のリセット

テーマには独自のウィジェットやメニューが含まれています。
そのため、テーマを変更すると、これらの設定がリセットされることがあります。
結果として、ウィジェットやメニューの配置が元に戻ったり、設定が失われたりする可能性があります。
このような状況では、再度設定を行う必要があるかもしれません。

カスタムコードやショートコードの非互換性

旧テーマで使用していたカスタムコードやショートコードは、新しいテーマでは正常に動作しないことがあります。
これは、テーマごとにコードの実装方法やショートコードの処理が異なるためです。
結果として、サイトの機能が正しく表示されなくなったり、意図しない動作を引き起こすことがあります。
こうした問題を避けるためには、新しいテーマに適応するための調整や修正が必要です。

SEOへの影響

テーマの変更によって、SEOに関連する設定やサイトの構造が変更されることがあります。
これにより、検索エンジンでのランキングに影響を及ぼす可能性があります。
特に、メタデータや内部リンク構造が変わると、検索エンジンの評価が変動することがあります。

さいごに

各テーマは独自のHTMLやCSSで装飾を施しており、テーマを変更すると、旧テーマのCSSが引き継がれないことがあります。また、新しいテーマの仕様に合わせてHTMLを調整しないと、表示が崩れることがあります。

例えば、SWELLにはテーマ変更をサポートするプラグインが用意されており、これを活用することでテーマ変更をスムーズに進めることができます。

他テーマからSWELLへの「乗り換えサポートプラグイン」一覧 | WordPressテーマ SWELL
テーマを乗り換える時、旧テーマの独自機能で文章の装飾などを使っていると 過去記事のデザインが一気に崩れてしまいます。 つまりテーマを途中で乗り換える場合、 過去記事を全てリライトして整えるか、ショートコードやCSSデータなどを自分で新テーマ
swell-theme.com

テーマ変更によってどのような問題が発生するのか、少しは理解できたかと思います。
テーマ変更に伴うレイアウトの崩れは、有料テーマや無料テーマに関係なく共通の問題です。
周囲の意見に惑わされず、本質を正しく理解することが重要です。

タイトルとURLをコピーしました