サポート » 使い方全般 » WordPressのカテゴリーをtableで出力する方法

  • 解決済 torasan

    (@torasan)


    お世話になります。

    スマホでnomad-saving.comというサイトの右上のメニューを押すと
    カテゴリー一覧が表示されるのですが、カテゴリー数が表示されているので、PHPで出力されているのではないかと思っています。

    このカテゴリー一覧はtableタグで出来ているのですが、一般的なリストタグでなくtableタグによる出力は可能なのでしょうか?
    直接、tableタグを書いているわけではないと思うのですが。。。

    以下のように書くと、当たり前ですが、ずらっとtdタグで出力されます。

    <table>
    <tbody>
    <tr>
    <?php
    	$args = array(
    		'orderby' => 'name'
    	);
    	$categories = get_categories( $args );
    	foreach ( $categories as $category ) {
    		$cat_link = get_category_link($category->cat_ID);
    		echo '<td><a href="' . $cat_link . '">' . $category->name . '</a></td>';
    	}
    ?>
    </tr>
    </tbody>
    </table>

    これを以下のように並べることは可能でしょうか?

    <table>
    <tr>
    <td>カテゴリ1</td>
    <td>カテゴリ2</td>
    </tr>
    <tr class="hoge">
    <td>カテゴリ3</td>
    <td>カテゴリ4</td>
    </tr>
    <tr>
    <td>カテゴリ5</td>
    <td>カテゴリ6</td>
    </tr>
    <tr class="hoge">
    <td>カテゴリ7</td>
    <td>カテゴリ9</td>
    </tr>
    </table>
    
7件の返信を表示中 - 1 - 7件目 (全7件中)
  • こんにちは

    そこまで出来ているのなら、あとは純粋にPHPのロジックをどう書くかという問題と思います。

    「tableタグ php」などで検索するとサンプルが沢山出てきますので、参考にして下さい。

    こんにちは

    array_chunk() を使うのもいいかもです。
    http://php.net/manual/ja/function.array-chunk.php#48268

    munyagu様、ishitaka様
    返信ありがとうございます。

    えー、頭が痛いです(^^;)

    要は<td>2行ごとに<tr>を出したいのですが、(出来れば<tr>と<tr class=”hoge”>を交互に)

    今のところ行き着いた先が、テーブル<TR></TR>の処理についてのページで、ちょっと情報が古いのかなと思っています。
    もう少し試行錯誤してみます。。。

    RICK

    (@rickaddison7634)

    見た目上カテゴリを2列で表示できるようにしたいだけで、
    特にtableを使うことににこだわりがないのならば、
    ul > lidisplay:flexを使用すれば
    下記のCSSに穴埋めする感じでデザインするのも手と思われます。

    ただ、この場合IEで問題が出る可能性があるのでCSS Flexible Box Layout Moduleはチェックしておきましょう。

    HTML

    <ul class="category-list">
    	<li>カテゴリ1</li>
    	<li>カテゴリ2</li>
    	(略)
    </ul>

    CSS

    .category-list{
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    
    .category-list > li{
    	width: 48%;
    }
    
    .category-list > li::nth-child(4n+1){
    
    }
    
    .category-list > li::nth-child(4n+2){
    
    }
    
    .category-list > li::nth-child(4n+3){
    
    }
    
    .category-list > li::nth-child(4n+4){
    
    }
    
    .category-list > li::nth-last-child(2){
    
    }
    
    .category-list > li::nth-last-child(1){
    
    }
    RICK

    (@rickaddison7634)

    tableにこだわるなら<?php ?>で囲まれた部分を

    
    $args       = array(
    	'orderby' => 'name',
    );
    $categories = get_categories( $args );
    $count      = 1;
    foreach ( $categories as $category ) {
    	$cat_link = get_category_link( $category->cat_ID );
    	if ( 1 === $count % 4 ) {
    		echo '<tr>';
    	}
    	if ( 3 === $count % 4 ) {
    		echo '<tr class="hoge">';
    	}
    	echo '<td><a href="' . esc_url( $cat_link ) . '">' . esc_html( $category->name ) . '</a></td>';
    	if ( 0 === $count % 2 ) {
    		echo '</tr>';
    	}
    	$count++;
    }
    

    としてみるのはいかがでしょうか?
    ひょっとしたらif ( 0 === ( $count % 2 ) )のようにカッコが必要になるかもしれません。

    ちなみに$a % $bはaをbで割ったあまりを返す演算子です。
    また、VSCode + WordPressコーディング規約の環境で編集しエラーが出なくするために
    esc_urlesc_htmlを付与しています。

    • この返信は2 ヶ月、 2 週間前に  RICK さんが編集しました。

    array_chunk() を使うのもいいかもです。

    $categories = get_categories( $args );
    foreach ( array_chunk( $categories, 2 ) as $key => $row ) {
    	echo ( $key % 2 == 0 ) ? '<tr>' : '<tr class="hoge">';
    	foreach ( $row as $category ) {
    		$cat_link = get_category_link( $category->cat_ID );
    		echo "<td>(省略)</td>";
    	}
    	echo '</tr>';
    }
    • この返信は2 ヶ月、 2 週間前に  ishitaka さんが編集しました。

    RICK様、ishitaka様、ご回答ありがとうございました。
    色々な方法があるものですね(^^;)

    RICK様は足し算による解決方法(countの値が一定の数に達した場合、タグを出力)、で
    ishitaka様はカテゴリ数を分割して2つカウントするごとにタグを出力する方法(でしょうか?)

    お二方には貴重な時間を割いて頂きまして本当にありがとうございました。
    フォーラムなのでベストアンサー機能がなく残念なのですが…トピックを閉じたいと思います。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。