如何显示循环前帖子中的所有标签？

Question

I have a structure like this in my wordpress search.php:

<div class="tags">
   <!-- show all tags from posts in here -->
</div>


<div class="posts">
   <!-- Wordpress Query loop here -->
   <!-- get_the_tags() for each posts -->
   <!-- End loop -->
</div>

I'm able to show inside the loop the list of tags for all the posts. But I need to show them on the div with the class "tags" that is outside the loop.

I know that if I want to show them after the loop is easy, I just have to use a global php variable and show them afterwards. But the only way I think I can add those tags before the loop is inserting them on the HTML DOM with javascript.

Is there any other method to do this more easily?.

Full code as requested:

<?php 
global $global_tags;
?>

<div class="col-left">
<div class="tags">
    <div class="placeholder-tags"></div>   
</div>

</div>
<div class="col-right">

<div class="profile-wrapper">
<?php 

$tag = single_tag_title( '', false );


$args = array (
'pagination'=> true,
'posts_per_page' => '8',
'post_type' => 'profile',
'tag_slug__in' =>array($tag)

);

$the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>

<!-- pagination here -->

<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <div class="profile">
    <a href="<?php echo get_permalink(); ?>">

        <?php $current_profile = get_field("profile_personal")[0]; ?>


        <div class="profile-image">
        <img alt="" src="<?php echo  $current_profile["profile_image"]['sizes']['thumbnail'];  ?>"/><br>
        </div>
        <div class="profile-name">
        <?php echo  $current_profile["profile_name"] . ' ' .  $current_profile["profile_surname"];  ?>
        </div>
        <div class="profile-country">
        <?php echo $current_profile["profile_country"];  ?><br>
        </div>

        <?php

        $list_tags = get_the_tags();
        foreach ( $list_tags   as $single_tag) {
        $global_tags[] = $single_tag->slug;
        }               
        ?>

        <?php if ( has_category("bolaber",$post->ID) ) { ?>
        <div class="worked-with-us">
            &#x25cf;
        </div>
        <?php } ?>

    </a>
    </div>

<?php endwhile; ?>
<!-- end of the loop -->

<?php wp_reset_postdata(); ?>

<?php else : ?>
<p><?php _e( 'default Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Answer 1

I came up with a not very elegant or efficient solution, but it works perfectly, I added another loop on the tags placeholder with the same query loop parameters, but without showing anything but the tags.

<?php 
global $global_tags;
?>

<div class="col-left">

<div class="tags">


    <?php 

    $tag = single_tag_title( '', false );


    $args = array (
    'pagination'=> true,
    'posts_per_page' => '8',
    'post_type' => 'profile',
    'tag_slug__in' =>array($tag)

    );

    $the_query = new WP_Query( $args ); ?>

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

        $list_tags = get_the_tags();
        foreach ( $list_tags   as $single_tag) {
        $global_tags[] = $single_tag->slug;
        }               
        ?>
    <?php endwhile; ?>


    <pre>
        <?php
        if ( $global_tags ) {

        $global_tags = array_unique($global_tags);


        foreach ($global_tags as $value) {
            echo '</br><a href="'. site_url() .'/tag/'. $value . '">#'. $value  .'</a>';
        }
        }


        ?>

    </pre>

    <?php wp_reset_postdata(); ?>    
    <?php else : ?>
    <?php endif; ?>


</div>

</div>
<div class="col-right">

<div class="profile-wrapper">
<?php 

$tag = single_tag_title( '', false );


$args = array (
'pagination'=> true,
'posts_per_page' => '8',
'post_type' => 'profile',
'tag_slug__in' =>array($tag)

);

$the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>

<!-- pagination here -->

<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <div class="profile">
    <a href="<?php echo get_permalink(); ?>">

        <?php $current_profile = get_field("profile_personal")[0]; ?>


        <div class="profile-image">
        <img alt="" src="<?php echo  $current_profile["profile_image"]['sizes']['thumbnail'];  ?>"/><br>
        </div>
        <div class="profile-name">
        <?php echo  $current_profile["profile_name"] . ' ' .  $current_profile["profile_surname"];  ?>
        </div>
        <div class="profile-country">
        <?php echo $current_profile["profile_country"];  ?><br>
        </div>

        <?php

        $list_tags = get_the_tags();
        foreach ( $list_tags   as $single_tag) {
        $global_tags[] = $single_tag->slug;
        }               
        ?>

        <?php if ( has_category("bolaber",$post->ID) ) { ?>
        <div class="worked-with-us">
            &#x25cf;
        </div>
        <?php } ?>

    </a>
    </div>

<?php endwhile; ?>
<!-- end of the loop -->

<?php wp_reset_postdata(); ?>

<?php else : ?>
<p><?php _e( 'default Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>