Нужно сделать поиск по тегам в виде выпадающего списка?

Question

[bugs__2703]

Задача состоит в том чтобы вывести выпадающий список всех тегов и повесить на каждый выведенный тег ссылку, полученную с помощью get_tag_link();

<?php wp_dropdown_categories($args = array(
	'show_option_all'    => 'Search by topic',
	'taxonomy'	=> 'post_tag',
));?>

Список я вывожу с помощью кода указанного выше, далее, я так понимаю мне нужно написать цикл, где каждому элементу будет добавляться атрибут value c ссылкой, но, что-то я не совсем понимаю как мне это реализовать, или есть какой-то другой вариант?

Итак, спустя какое-то время, у меня получился вот такой вариант, все работает, думаю, что можно смело брать на вооружение.

<div class="categoty-list">
     <div class="selectlink">
          <div class="selectlink-control">Search by topic</div>
	  <?php 
                     $tags = get_tags();
		     $html = '<ul>';
		     foreach ($tags as $tag){
    		          $tag_link = get_tag_link($tag->term_id);
			  $html .= "<li><a href='{$tag_link}' title='{$tag->name} Tag' class='categ {$tag->slug}'>";
			  $html .= "{$tag->name}</a></li>";
		      }
		      $html .= '<ul>';
		       echo $html;
         ?>
     </div>
</div>

Добавим немного css

.selectlink {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: left;  
}

.selectlink-control {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-family: Hind;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.5);
}

.selectlink-control:after {
  content: "";
  border: 5px solid transparent;
  border-top: 5px solid #999;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
}

.selectlink ul {
  display: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  max-height: 200px;
  position: absolute;
  top: 80%;
  left: 0px;
  border-top: none;
  border-radius: 0 0 10px 10px ; 
  background: #fff;
  z-index: 40;
  overflow: auto;
  -webkit-user-select: none;
          user-select: none;
}

.selectlink li {
  display: block;
  margin: 0;
  padding: 0;
}

.selectlink li a {
  position: relative;
  display: block;
  margin: 0;
  padding: 4px 0px 4px 10px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  font-family: Hind;
  font-weight: 500;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.5);
  transition: 0.1s;

}

.selectlink li a:hover {
  background: rgba(47, 196, 196, 0.6);
  color: #fff;
  transition: 0.1s;
}

@media screen and (max-width: 700px) {
  .body_pointer {
    cursor: pointer;
  }
}

А теперь Js

<script type="text/javascript">
	$(function() {
	$(".selectlink-control").click(function(){
		var $menu_popup = $(this).next();
		$menu_popup.slideToggle(200, function(){
			$('.selectlink ul').not($menu_popup).slideUp(200);
			if ($menu_popup.is(':hidden')) {
				$('body').removeClass('body_pointer');
			} else {
				$('body').addClass('body_pointer');
			}					
		});  
		return false;
	});			
 
	$(document).on('click', function(e){
		if (!$(e.target).closest('.selectlink').length){
			$('body').removeClass('body_pointer');
			$('.selectlink ul').slideUp(200);
		}
	});
});
</script>

Вот результат

Answer 1

[KingAnton]

<select name="" id="">
    
<?php $tags = get_tags(); ?>

<?php foreach ($tags as $tag) : ?>

    <option value="<?php echo get_tag_link( $tag->term_id ); ?>"><?php echo $tag->name; ?></option>
  
<?php endforeach; ?>

</select>

Answer 2

[Артем Золин]

Верстка, которую вы хотите сделать это костыль, потому что семантически правильно перемещаться между страницами с помощью тега <a href="#">, а вы не можете его вставить в тег <option> напрямую

Решения описаны здесь: https://stackoverflow.com/questions/2000656/using-...

Я бы посоветовал сделать обычный запрос get_terms() и выводить любой нужной вам версткой. Вот пример вывода тегов обычным списком с ссылками

$tags = get_terms( [
	'taxonomy' => 'post_tag',
	'hide_empty' => false,
] );

if ( $tags ) {
	echo '<ul class="tag-list">';
	foreach ( $tags as $key => $tag ) {
		echo '<li class="tag-list__item"><a class="tag-list__link" href="' . esc_url( get_term_link( $tag->term_id ) ) . '">' . esc_html( $tag->name ) . '</a></li>';
	}
	echo '</ul>';
}

А если вам нужен именно выпадающий список, то вы можете найти решение, например на bootstrap, codepen или написать свое собственное на javascipt