List of terms in alphabetical order under the respective initial letter and within columns
-
21-04-2021 - |
문제
I am trying to print a listing of "brands" names in alphabetical order under the respective initial letter of the alphabet within columns. The problem is that I want to print three columns with three brands inside as seen in the attached image.
<?php
$list = '';
$groups = array();
$tags = get_terms('brand',$args);
if( $tags && is_array( $tags ) ) {
foreach( $tags as $tag ) {
$first_letter = strtoupper( $tag->name[0] );
$groups[ $first_letter ][] = $tag;
}
if( !empty( $groups ) ) {
foreach( $groups as $letter => $tags ) {
$list .= '<div><h3>' . $letter . '</h3>';
$counterCustom = 0; //
foreach( $tags as $tag ) {
if ($counterCustom == 0 ) { //
$list .= '<div class="container"><div class="row"><div class="col-lg-4"><ul><li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
}
if($counterCustom == 1) { //
$list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
} //
elseif($counterCustom == 2 ) { //
$list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
} //
elseif($counterCustom == 3 ) { //
$list .= '</ul></div><div class="col-lg-4"><ul><li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
} //
elseif($counterCustom == 4) { //
$list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
} //
elseif($counterCustom == 5) { //
$list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li></ul></div><div class="col-lg-4"><ul>';
} //
elseif($counterCustom == 6) { //
$list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
} //
elseif($counterCustom == 7) { //
$list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
} //
elseif($counterCustom == 8) { //
$list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li></ul></div></div></div>';
} //
$counterCustom++;
}
$list .='';
}
}
echo $list;
?>
This is what I want to do:
해결책
Let CSS handles the grid layout.
For example with markup like this:
<ul class="term-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
You can create that layout simply with this CSS:
.term-list {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
column-gap: 1rem;
grid-gap: 1rem;
}
So just abandon the custom counter and each loop only append the <li>
.
foreach( $groups as $letter => $tags ) {
$list .= '<div><h3>' . $letter . '</h3> <ul>';
foreach( $tags as $tag ) {
$list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
}
$list .= '</ul></div>';
}
제휴하지 않습니다 wordpress.stackexchange