merhaba,

https://codepen.io/SitePoint/pen/GQoVey

burada bulunan Tabs and Masonry kullanıyorum.

<main role="main" class="container">

  <div class="row">
    <div class="col-md">
      <div class="starter-template">
      
        
        <ul class="nav nav-tabs" id="myTab" role="tablist">
        
 <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
          </li>
        

        </ul>

bu alani wordpress'te sorunsuz yazdırıyorum.

  <ul class="nav nav-tabs" id="myTab" role="tablist">
    

                
            <?php
    $args = array(
        'type'                     => 'hizmetler',
        'parent'                   => '',
        'orderby'                  => 'id',
        'order'                    => 'ASC',
        'hide_empty'               => 1,
        'hierarchical'             => 1,  
        'taxonomy'                 => 'kategoriler'  /* custom post type texonomy name */
    );
    $cats = get_categories($args);
    foreach ($cats as $cat) {          
        $cat_id= $cat->term_id;
        $cat_name= $cat->name; ?>
        
                
                <li class="tag is-dark">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#<?php echo ''.$cat->term_id.''; ?>" role="tab" aria-controls="<?php echo ''.$cat->term_id.''; ?>" aria-selected="false">
                <?php echo ''.$cat->name.''; ?>
                </a></li>
            <?php wp_reset_postdata(); ?>

    <?php  } ?>    
        
        </ul>

ekran cıktım;
CPT olarak kategori adini, id'i ve link'i alabiliyorum.




problem burada başlıyor.

<div class="tab-content" id="myTabContent">
    
    
    

<div class="tab-pane masonry-container fade show active" id="home" role="tabpanel" aria-labelledby="1-tab">
              
              
       <div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>
    
    
    
          </div>

bu alanı nasıl donguye sokacagimi bilmiyorum.

donguye girecek alan

<div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>

fakat bu alanın bir üst div'i ilişkili kategori id'ini almasi lazim.

 id="home"

olmasi gereken;

<div class="tab-pane masonry-container fade show active" id="KATEGORİ-1" role="tabpanel" aria-labelledby="1-tab">
              
              
       <div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>

  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>

  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>
  
    
    
          </div>



<div class="tab-pane masonry-container fade show active" id="KATEGORİ-2" role="tabpanel" aria-labelledby="1-tab">
              
              
       <div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>

  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>

  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>
  
    
    
          </div>

yardımınız için teşekkürler.