【Cocoonカスタマイズ】「テーブル横スクロール」設定で「XO Event Calendar」が崩れる原因と対策

はじめに
原因
対策
さいごに

はじめに

表1の設定をオンにすると、図1に示すようにプラグイン「XO Event Calendar」のカレンダーは正しく表示されません。

この記事では、その原因と対策について説明します。

Cocoon設定

設定	大項目	項目	設定値
投稿	テーブル設定	横幅の広いテーブルは横スクロールする	オン

原因

表1の設定をオンとすると、<table>タグにライブラリ「ScrollHint」用の属性やクラスが追加されます。
この処理は無条件で適用されるため、「XO Event Calendar」のように複数の<table>タグで構成されたカレンダーは意図しない装飾が加わり、レイアウトが崩れてしまいます。

cocoon/lib/page-settings/content-funcs.php at 2cee2d2734cf53bca8745a180634d76d85ff91e3 · xserver-inc/cocoon

100％GPLの無料WordPressテーマです。開発中の開発バージョンです。安定版をダウンロードする場合は、Cocoon配布サイトからダウンロードしてください。 - xserver-inc/cocoon

対策

以下のコードをjavascript.jsに追加します。

「XO Event Calendar」内の該当テーブル要素から、CSSクラスscrollable-tableやscroll-hint、style属性を削除します。

jQuery(function ($) {
  $('.xo-event-calendar .scrollable-table.scroll-hint').removeClass('scrollable-table scroll-hint');
  $('.xo-event-calendar [style]').removeAttr('style');  
});

さいごに

今回紹介した方法を使えば、「XO Event Calendar」の表示崩れを防ぎつつ、テーブル横スクロール機能を併用できます。
プラグインとの相性による表示トラブルを避けるためにも、必要に応じてカスタマイズを行いましょう。