「あれっ、Tabが切り替わらない？」
Avadaは4.0から5.0へのバージョンアップで大幅に変わったので、ページに対しても自動変換が必要になります。Shortcodeの名前が変更になっているので、古いままのページでは動作しません。手順の詳細は「Avada 5.0.1へ4.0.3から確実に更新する方法:: WordPress + Avadaでウェブサイト構築」に書きましたが、変換後にページがうまく表示されないこともあります。今回はその中でもタブ（Tabs）について記載します。5.0になってTabsの記載方法が変更になったせいか、自動変換をしてもうまく移行できませんでした。具体的にはページが崩れてしまい、フラットなページになってしまいました。このような場合は次の手順で対処すると良いでしょう。
- タブの内容ごとに1ページにして確認
- 全体をまとめて1ページにして確認
- Shortcodeのタグやdivタグなどの開閉タグの対応を確認
タブは一般的には1ページに多くの情報を網羅したい場合に使用します。したがって、ページの構造は少し複雑です。そのため、まずタブの内容ごとに1ページにして、正しく表示できるかを確認します。タブの中にもShortcodeは記載できます。タブの数だけページを作成したら、「プレビュー」などで確認します。確認が終わったら、新しいページでTabsのElementを選択して、編集からTabの数だけページを追加します。その際にfusion_builder_container、fusion_builder_row、fusion_builder_columnなどが重複しないように注意します。これで動作すれば普通はOKです。
ただし私の担当したケースでは、それで最初のタブとそのコンテンツは表示されたのですが、どのタブをクリックしてもコンテンツは変わらないという現象でした。そのため更に問題解決を行う必要がありました。具体的にはShortcodeやdivタグが、開タグと閉タグが対になっているかをエディターのテキスト画面で地道に目で追う作業です。それには、左上の「Use Default Editor」クリック後、右上の「テキスト」タブをクリックして確認します。ローカルPC上の高機能エディターに読み込んで、構造上のエラーを色別で発見したほうが速い場合もあります。結局私の場合はdivの閉じタグがShortcodeのタグをまたいでいたのが原因でした。これを修正すると、タブは切り替わるようになりました。このようにコードに論理的なエラーがある場合には、タブが切り替わらなという現象になることがありますので注意が必要です。このエラーは残念ながらブラウザーの「検証>Console」などでは発見できませんでした。
Kindle本のご案内
連載していた【軽量Linux活用ガイド2021】を中心に加筆、再構成して一冊のKindle本にまとめました。インストールやセットアップなどの手順、各種アプリケーションのインストールと日本語化、軽量Linuxベスト３、SSDの換装などを一度に読みたい方はご利用ください。Kindle Unlimitedなら無料です。書き込みをする場合はA4サイズで読みやすいペーパーバック版（オンデマンド印刷）もあります。
