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

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

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

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

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

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

ちなみに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ではどうにも出来ません。（多分）

上のテーブルの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 
  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()」は使い方次第で色々出来そうです。