【WordPress】PCとスマホでのテーブル表示を変更する方法(colspanなど)【Cocoon】

【WordPress】PCとスマホでのテーブル表示を変更する方法(colspanなど)【Cocoon】
スポンサーリンク
2022.08.29

PCとスマホの分け方は「is_mobile()」を使います。
WordPressでは「wp_is_mobile()」ですが、このコードだとタブレットもスマホと見なされてしまいます。

本来であれば下記のサイトにあるように、functions.phpにコードを書かなければいけないようですが、Cocoonでは最初からコードが書かれているので問題ありません。(lib/utils.php)

テーブルのレイアウトを1列に変更するだけであればCSSだけで出来ます。

パソコン
名前 山田太郎
年齢 20歳
電話番号 123-456-7890
スマホ
名前 山田太郎
年齢 20歳
電話番号 123-456-7890

CSSがコチラです。
(「text-align: left;」は好みによります)

CSS
@media screen and (max-width: 480px){
  table th, table td {
    width: auto;
    display: block;
    text-align: left;
  }
}

ちなみにHTMLがコチラ。

HTML
<table>
  <tr>
    <th>名前</th>
    <td>山田太郎</td>
  </tr>
  <tr>
    <th>年齢</th>
    <td>20歳</td>
  </tr>
  <tr>
    <th>電話番号</th>
    <td>123-456-7890</td>
  </tr>
</table>

しかし、テーブルにcolspanを使って結合している場合はCSSではどうにも出来ません。(多分)

パソコン
名前 山田太郎 やまだたろう
年齢 20歳
電話番号 123-456-7890
スマホ
名前 山田太郎 やまだたろう
年齢 20歳
電話番号 123-456-7890

上のテーブルのHTMLがコチラ。

HTML
<table>
  <tr>
    <th>名前</th>
    <td>山田太郎</td>
    <td>やまだたろう</td>
  </tr>
  <tr>
    <th>年齢</th>
    <td colspan="2">20歳</td>
  </tr>
  <tr>
    <th>電話番号</th>
    <td colspan="2">123-456-7890</td>
  </tr>
</table>

やり方は色々あるとは思いますが、私は以下のようにしています。

ふりがなのセルを消す場合(ついでにcolspanも消す)

PHP
<?php 
  if( is_mobile() ) {
    //スマホの場合
    $tb_colspan = '';
  } else {
    //PCの場合
    $tb_colspan = ' colspan="2"';
  }
?>
<table>
  <tr>
    <th>名前</th>
    <td>山田太郎</td>
    <?php if( !is_mobile() ) { ?>
    <td>やまだたろう</td>
    <?php } ?>
  </tr>
  <tr>
    <th>年齢</th>
    <td<?php echo $tb_colspan; ?>>20歳</td>
  </tr>
  <tr>
    <th>電話番号</th>
    <td<?php echo $tb_colspan; ?>>123-456-7890</td>
  </tr>
</table>

消すだけならTDにクラスを付けてCSSの「display:none;」で消せますが、colspanも変更となると上記のコードが良いかもしれません。

昨今はモバイルファーストと言われているので、「is_mobile()」は使い方次第で色々出来そうです。

個人ブログ

ページ・ナビゲーション

コメント

タイトルとURLをコピーしました