@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>

Вот результат
607fd3b46eb67541102527.png
607fd3bdc71e2322558894.png
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ответы на вопрос 2
@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>
Ответ написан
artzolin
@artzolin
php, WordPress разработка сайтов zolin.digital
Верстка, которую вы хотите сделать это костыль, потому что семантически правильно перемещаться между страницами с помощью тега <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
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы