bayfmやかずさエフエムやラジオ成田や市川うららFMやSKYWAVE FMの番組表を見ると月曜日から日曜日までのタブで各曜日の番組に切り替わるようになってる。通常はiframeやJavascriptを使って切り替えるのだろうけど、どちらも使わずにCSSだけで切り替えられそうなので試してみて、次のサイトを参考にして作ってみた。
ソースは別のブログの方に書いておいた。
idやclassをシンプルな名前にしたかったのだけど、WordPressのカスタムHTMLにソースを埋め込んでも全く表示されなくて、WordPressのテーマが他で使っている名前と被ってしまったのだろうから、オリジナルになるように変更してようやく表示されるようになった。
でも、tableタグのスタイルもWordPressのテーマで決められちゃっているようで変更しようと試行錯誤したのだけど、なかなか変えられず、使っているテーマによってCSSが変わっちゃうようなら他では使えなくなりそうなことに気付き、さらにカスタムHTMLを使っていると、テキスト部分を書き換える時にミスってタブを変更しちゃう可能性もあって、HTMLソースやCSSの編集ができない人が修正するのは難しいし、避けたがるだろうということに気付いたので、せっかく作ったけれど役立たずだと思った。
改めて、WordPressで容易にタブ切り替えのブロックが作れたり編集できるようなプラグインがないか検索したら、良さそうなのを一つ見つけた。

WordPressのタブプラグインを作りました-Useful Tab Block
どうも!初めましての方は初めまして、初心者のWebサイト勉強のとみーです! WordPress で記事を作成していると、読者にとって どれか1つしか当てはまらない情報 を扱うことってしばしばありますよね。 例えばパソコンの設定に関する記事を

Useful Tab Block – レスポンシブ & AMP-Compatible
Useful Tab Block adds responsive and AMP-compatible tab blocks to your Gutenberg editor.
さっそく試してみようとしたら、このWordPressはPHPのバージョンが古くて使えなかった。必要なPHPバージョンは「7.4またはそれ以降」で、XFREEから私に提供されたサーバーのPHPバージョンは7.1.2まで。残念。
コメント