AFFINGER6からAFFINGER7へアップデートしてみた｜移行手順とデザイン調整の経緯

WordPressテーマ「AFFINGER7」がリリースされたため、AFFINGER6ユーザー向けの早期購入割引（7,000円）を利用してアップデートを行いました。　前回のAFFINGER5からAFFINGER6への移行では、デザイン崩れなどの修正に時間がかかりました。　しかし今回は、大きなトラブルはなく、一部のデザイン調整だけでスムーズに移行を完了できました。

この記事では、実際に行ったAFFINGER6からAFFINGER7への移行手順と、アップデート後に必要となったデザイン調整の方法を紹介します。
なお、筆者はクラシックエディタを使用しているため、本記事はクラシックエディタ環境を前提としており、ブロックエディタについては対象にしていません。

WordPress環境：
ロリポップサーバ：ハイスピードプラン
WordPress：Version 7.0.2
Affinger7:Version 20260707
WP Fastest Cache Premium：Version 1.7.7
All-in-One WP Migration UE：Version 2.86

AFFINGER7のダウンロードファイル構成

AFFINGER7をダウンロードすると、下記のファイルが展開されます。　
今回のアップデートで使用するファイルは、（親テーマ）affinger.zipと（子テーマ）affinger-child.zip の２つです。

 

AFFINGER6からAFFINGER7への移行・アップデート手順

「準備編」「テーマの入替え編」「デザインや機能の引継ぎ編」の３つに分けて手順を示します。

AFFINGER6からAFFINGER7へテーマを入替えます。

AFFINGER6の子テーマに追加したデザイン（CSS）や機能（function）をAFFINGER7の子テーマへ引継ぎます。

 

 

デザインの調整（見出しデザインなど）

AFFINGER7へのアップデートに伴い、AFFINGER6のデザインと比較して軽微な相違点が見られました。　WordPress管理のカスタマイザーなどで下記のデザイン調整を行いました。

以上の調整で、今まで使用していた、AFFINGER6のデザインと同等になりました。

 

AFFINGER7へアップデートして気づいた問題点

現時点ではAFFINGER7の不具合と断定はしていませんが、気づいた問題点をマトメました。　（AFFINGER6では発生しなかった現象なので、AFFINGER7への移行に伴うCSSの変更が関係している可能性があります。）

マイボックス（st-mybox）内にある文字列をタグのテキストパーツ内にある「流れる文字（st-marquee）」を指定すると、文字列が最後まで流れず、途中でリセットされる現象が発生しました。

使用したコードは以下のとおりです。　ブロックエディタの場合は、文字列にショートコード[st-mq]文字列[/st-mq]で囲むことで「流れる文字」を指定できます。

 html
[st-mybox title="ポイント" webicon="st-svg-check-circle" color="#FFD54F"〜中略〜 margin="25px 0 25px 0"]
<div class="st-marquee">
<p>マイボックス内に「流れる文字」が途中でリセットされ動作がおかしくなる</p>
</div>
[/st-mybox]

通常の場所では問題ありませんが、マイボックス（st-in-mybox）の中に配置すると、先頭の文字が左端に来たところでリセットされ、再び右側から流れ始めます。

対応策：子テーマのstyle.cssに以下のCSSを追加したところ、正常な動作に戻りました。

 CSS
.st-in-mybox .st-marquee {
width: 100%;
overflow: hidden;
}
.st-in-mybox .st-marquee p {
width: max-content;
white-space: nowrap;
}

特にwidth: max-content;を指定することで、文字列全体の幅が確保され、最後まで流れるようになりました。　

 

ボックスデザイン中に３つのpreボックス（pre、pre：terminal、pre：shortcode）パーツがあります。　AFFINGER７の仕様なのか？不明ですが、下に示す様に、夫々のデザインが変わってしまいました。　特に下の画像で示す様に、AFFINGER７では、背景色が黒に変わったので、過去の投稿ページも影響を受けて文字が見にくくなったページがあります。　AFFINGER７のアップデートに期待して今のところ様子を見ています。

 

 

まとめ｜AFFINGER7にして感じたこと

AFFINGER6からAFFINGER7へ移行して感じたのは、テーマの進化の方向がWordPressと歩調を合わせた「ブロックエディタ中心」へ大きくシフトしているということです。　AFFINGER7の目玉機能の一つである「AIサポート」プラグインもブロックエディタを前提としており、そのメリットを最大限に活かすにはブロックエディタの利用が欠かせません。

しかし、筆者のようにクラシックエディタ（旧エディタ）をメインに使っている環境では、AFFINGER7の基本機能は問題なく利用できるものの、新機能の恩恵を十分に受けられる場面は限られると感じました。

クラシックエディタの魅力は、CUI（character user interface）ベースのため多少のスキルは必要ですが、ブロック構造を意識することなく、ワープロ感覚で文章を書き進められる点にあります。
一方、現在のブロックエディタは、ブロック単位での編集やGUI（graphical user interface）操作の選択肢が多く、慣れるまでは戸惑う場面も少なくありません。私自身も、編集作業のたびに執筆の流れが途切れてしまうと感じています。そのため、現時点では本格的な移行をためらう理由の一つとなっています。

そこで、クラシックエディタをメインに利用するユーザーが、必要な場面だけブロックエディタの機能を無理なく取り入れられるような、柔軟な編集環境も提供してほしいと感じています。　執筆スタイルは人それぞれ異なるので、用途や好みに応じて編集方法を選べるようなWordPress、そしてAFFINGERとなることを期待しています。

 

以上、AFFINGER6からAFFINGER7へアップデートした移行手順とデザイン調整の経緯の紹介でした。