WordPressのAvadaのテーマでTabsが動作しない場合の対処方法

/WordPressのAvadaのテーマでTabsが動作しない場合の対処方法

WordPressのAvadaのテーマでTabsが動作しない場合の対処方法

あれっ、Tabが切り替わらない?

Avadaは4.0から5.0へのバージョンアップで大幅に変わったので、ページに対しても自動変換が必要になります。Shortcodeの名前が変更になっているので、古いままのページでは動作しません。手順の詳細は「Avada 5.0.1へ4.0.3から確実に更新する方法:: WordPress + Avadaでウェブサイト構築」に書きましたが、変換後にページがうまく表示されないこともあります。今回はその中でもタブ(Tabs)について記載します。5.0になってTabsの記載方法が変更になったせいか、自動変換をしてもうまく移行できませんでした。具体的にはページが崩れてしまい、フラットなページになってしまいました。このような場合は次の手順で対処すると良いでしょう。

  1. タブの内容ごとに1ページにして確認
  2. 全体をまとめて1ページにして確認
  3. 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」などでは発見できませんでした。

サイト移行やステージング環境構築のご相談

WordPressサイトの(への)移行やステージングサーバー環境構築をお手伝いします。
お気軽にお問合せください。ご一緒にサイト運用の負担を減らす工夫をさせていただきます。(価格表)
 確認ページはありません。内容をご確認のうえ左にチェックを入れて「送付」ボタンを押してください。

対象サイトのURL メールアドレス
2017-10-25T15:03:01+00:002017/10/23 |Avada Theme, CMS, WordPress|