ワードプレスでカテゴリーを二つ並べて表示したい。

Question

前提・実現したいこと

ワードプレスでテーマを作成しています。
その時に各記事にカテゴリーを付けれるようにしたのですが、このように一つの枠内にカテゴリーが入ってしまいます。
それを二つに分けれるようにしたいです。

カテゴリー内でまたループ？みたいのを使うのでしょうか？？
お手数おかけしますが回答お待ちしております。（ ; ; ）

足りない情報などありましたら教えていただければありがたいです。。。

該当のソースコード

<ul class="col col2 col_sp_full">

			<?php
				$args = array(
					'post_type' => 'ceo',
					'posts_per_page' => 12
				);
				$query = new WP_Query( $args );
			?>

			<?php if ( $query->have_posts() ) : ?>
			<?php while ( $query->have_posts() ) : $query->the_post();?>

				<li class="article">
					<a href="<?php the_permalink(); ?>">
					<?php if( get_the_post_thumbnail() ) { ?>
							<div class="post-thumbnail">
								<?php the_post_thumbnail(array(360,240)); ?>
							</div>
						<?php }else{ ?>
							<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg">
						<?php } ?>
						<div class="child">
							<span class="tag">
								<?php
									if ($terms = get_the_terms($post->ID, 'ceo_category')) {
										foreach ( $terms as $term ) {
											echo esc_html($term->name);
										}
									}
								?>
							</span>
						<span class="date"><?php the_time( 'Y.m.d' ); ?></span></div>
						<h4><?php
									if(mb_strlen($post->post_title, 'UTF-8')>30){
										$title= mb_substr($post->post_title, 0, 30, 'UTF-8');
										echo $title.'…';
									}else{
										echo $post->post_title;
									}
								?>
						</h4>
					</a>
				</li>
				<?php endwhile; ?>
				<?php endif; wp_reset_postdata(); ?>
			</ul>

add_action( 'init', 'create_post_type_ceo' );
function create_post_type_ceo() {
register_post_type( 'ceo', //カスタム投稿タイプ名
array(
'labels' => array(
'name' => __( '社長のブログ' ),
'all_items' => __( '社長のブログ一覧' ),

),
'public' => true,
'has_archive' => true, //アーカイブページを持つ
'menu_position' =>5, //管理画面のメニュー順位
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'custom-fields' ,'comments' ),
)
);
/* カテゴリーの設定 */
register_taxonomy(
'ceo_category', //カテゴリーの名前
'ceo', //使うカスタム投稿タイプ名
array(
'hierarchical' => true, //trueで親子関係使用
'update_count_callback' => '_update_post_term_count',
'label' => 'カテゴリー',
'singular_label' => 'カテゴリー',
'public' => true,
'show_ui' => true
)
);
/* タグを設定 */
register_taxonomy(
'ceo_tag', //タグの名前
'ceo', //使うカスタム投稿タイプ名
array(
'hierarchical' => false,
'update_count_callback' => '_update_post_term_count',
'label' => 'タグ',
'singular_label' => 'タグ',
'public' => true,
'show_ui' => true
)
);
}

ul.col {
  display: flex;
  flex-flow: row wrap; }
  ul.col > li {
    flex: 0 0 50%;
    width: 50%;
    /* before Android4.3 iOS6:Safari */
    max-width: 50%;
    /* IE11*/
    height: auto; }

ul.col2 > li {
  flex: 0 0 48%;
  width: 48%;
  /* before Android4.3 iOS6:Safari */
  max-width: 48%;
  /* IE11*/
  height: auto;
  margin-right: 4%;
  margin-bottom: 5%; }
  ul.col2 > li:nth-child(2n) {
    margin-right: 0; }


.child {
  margin: 20px 0; }
  .child .tag {
    border: 1px solid #0088c4;
    color: #0088c4;
    font-size: 1rem;
    padding: 2px 8px;
    text-align: center;
    border-radius: 30px; }
    @media screen and (max-width: 767px) {
      .child .tag {
        font-size: 1rem;
        width: 9rem; } }
  .child .date {
    color: #999;
    font-size: 1rem; }

.tag {
  display: inline-block;
  align-items: center;
  margin: 0 10px 0 0; }
  .tag span {
    border: 1px solid #0088c4;
    color: #0088c4;
    font-size: 1.2rem;
    padding: 4px 8px;
    text-align: center;
    border-radius: 30px; }
    @media screen and (max-width: 767px) {
      .tag span {
        font-size: 1rem;
        width: 9rem; } }

Comments

[CHERRY]

赤字で書かれたように　複数のカテゴリーを表示したいという質問であれば、テーマの表示部分の問題です。

お使いのテーマは何でしょうか？

あと、PHPのコード以外に　関連する部分の CSS を質問に追記していただけないでしょうか？

[UKYO9311]

コメントありがとうございます！！！テーマはオリジナルで作っております。
cssの追記を致しました！！

[kei344]

質問タイトルの「WP_Queryで」は意味がおかしいので不要です。

[UKYO9311]

いつもコメントありがとうございます。
タイトル修正致しました！！

Answer 1

WordPressをカスタマイズするにはPHPの基礎知識とHTML/CSSの基礎知識が必須です。それぞれ入門書でも買いましょう。

    <?php
        if ($terms = get_the_terms($post->ID, 'ceo_category')) {
            foreach ( $terms as $term ) {
    ?>
<span class="tag"><?php echo esc_html($term->name); ?></span>
    <?php
            }
        }
    ?>

Comments

[UKYO9311]

できました（ ; ; ）ありがとうございます。。。
そうですね。。。もっと修行します(>_<)