검색폼을 셀렉트버튼으로 변경 문의

안녕하세요.

https://imgur.com/a/Qk4KsRh 빨간원 안에 부분이 attitude 테마가 제공하는 검색폼입니다.

이 검색폼 대신에 셀렉트 버튼으로 한국어와 영어 선택해서 링크 페이지로 넘어가게 하고 싶습니다.

style.css 살펴보니까

/* Search Form */
input.s {
	background: url(images/search.png) no-repeat right 6px #fff;
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: width, background;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 400ms;
	-moz-transition-property: width, background;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 400ms;
	-o-transition-property: width, background;
	-o-transition-timing-function: ease;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	width: 0;
	padding: 3px 33px 3px 0;
	height: 22px;
	color: #bbb;
	font-style: italic;
	margin: 0;
	border-color: transparent;
	cursor: pointer;
	text-indent: 25px;
}
input.s:focus {
	width: 100px;
	padding-left: 10px;
	border-color: rgba(0, 0, 0, 0.15);
	text-indent: 0;
}
#branding .searchform {
	float: left;
}

이 부분이 검색폼 관련 설정코드같은데

이 부분을 어떻게 바꿔주면 될까요?

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    헤더 쪽을 수정하시려면 테마 쪽 header.php 파일을 수정해주셔야 할 듯합니다.

    FTP로 접속해서 /wp-content/themes/사용중인테마/header.php 파일입니다.

    만약, header.php 파일에서 수정할 수 없다면

    해당 테마 제작자에게도 가능한 방법을 문의해보셔야 할 듯합니다.

     

    한국어와 영어를 선택해서 해당 페이지로 이동하게 하시려면

    아래 링크를 참고해서 코드를 작성해보시겠어요?

    https://www.cosmosfarm.com/threads/document/31950

    고맙습니다.

  • 고맙습니다. 알려주신 코드 적용은 했는데 위치가 아무리 움직여도 맨왼쪽 상단에 붙어있는데 혹시 아까 첨부한 하늘색 검색버튼 위치로 옮기는 방법이 있을까요?

    <?php
    /**
     * Displays the header section of the theme.
     *
     * @package Theme Horse
     * @subpackage Attitude
     * @since Attitude 1.0
     */
    ?>
    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    
    	<?php		
    		/** 
    		 * attitude_title hook
    		 *
    		 * HOOKED_FUNCTION_NAME PRIORITY
    		 *
    		 * attitude_add_meta 5
    		 *
    		 */
    		do_action( 'attitude_title' );
    
    		/** 
    		 * attitude_meta hook
    		 */
    		do_action( 'attitude_meta' );
    
    		/** 
    		 * attitude_links hook
    		 *
    		 * HOOKED_FUNCTION_NAME PRIORITY
    		 *
    		 * attitude_add_links 10
    		 *
    		 */
    		do_action( 'attitude_links' );
    
    		/** 
    		 * This hook is important for wordpress plugins and other many things
    		 */
    		wp_head();
    	?>
    
    </head>
    
    <body <?php body_class(); ?>>
    	<?php
    		/** 
    		 * attitude_before hook
    		 */
    		do_action( 'attitude_before' );
    	?>
    
    	<div class="wrapper">
    		<?php
    			/** 
    			 * attitude_before_header hook
    			 */
    			do_action( 'attitude_before_header' );
    		?>
    		<script>
    function copyrtChgUrl(url){
    	if(url){
    		window.open(url);
    	}
    }
    </script>
    
    <select onchange="copyrtChgUrl(this.value)">
    	<option value=""> Language </option>
    		<option value="http://sdsol.net">English</option>
    	<option value="http://sdsol.net">?쒓뎅??/option>
    </select>
    		<header id="branding" >
    			<?php
    				/** 
    				 * attitude_header hook
    				 *
    				 * HOOKED_FUNCTION_NAME PRIORITY
    				 *
    				 * attitude_headerdetails 10
    				 */
    				do_action( 'attitude_header' );
    			?>
    		</header>
    		
    		<?php
    			/** 
    			 * attitude_after_header hook
    			 */
    			do_action( 'attitude_after_header' );
    		?>
    
    		<?php
    			/** 
    			 * attitude_before_main hook
    			 */
    			do_action( 'attitude_before_main' );
    		?>
    		<div id="main" class="container clearfix">

    참고로 header.php 파일 첨부합니다.

  • 테마 쪽에서 <header> 태그를 표시하는 코드에 추가해주셔야 할 듯합니다.

    현재는 <header> 태그 상단에 표시되고 있습니다.

    저희가 모든 테마의 코드를 알 수 없기 때문에 명확하게 답변 못 드리는 점 이해 부탁드립니다.

    고맙습니다.

  • 고맙습니다.

    해당 기능을 메인메뉴에 "ENGLISH" 를 추가해서 누르면 영문 페이지로 넘어가게 수정하려고 합니다. 그런데, ENGLISH 메뉴명앞에 미국 국기아이콘을 넣고 싶은데 방법이 있을까요?

  • 안녕하세요.

    <select> 태그 안에 이미지를 표시하시려면

    HTML과 CSS 코드만으로는 어려움이 있을 듯합니다.

     

    jQuery UI Selectmenu를 활용해보시겠어요?

    자세한 내용은 아래 링크를 참고해보세요.

    http://jqueryui.com/selectmenu/#custom_render

    고맙습니다.

  • 고맙습니다.

    지식이 적어서 알려주시는대로 다 구현을 못하겠어서 제나름대로 방법을 찾느라 질문도 많아지네요... ^^;;;

    https://imgur.com/a/MwZGSXx

    첨부보시면 "ENGLISH"메뉴 cloass 가 menu-item menu-item-type-post_type menu-item-object-page menu-item-669  로 되어있는데 이 클래스를 메뉴의 ENGLISH란 텍스트로 가져오는게 아니라 URL 이미지로 가져오게 하는 방법도 있나요?

  • wp_get_nav_menu_items 필터를 사용하시면 메뉴명을 편집하실 수 있습니다.

    워드프레스 관리자 -> 외모 -> 테마 편집기 페이지에서 functions.php 파일 하단에

    아래의 코드를 추가해보시겠어요?

    add_filter('wp_get_nav_menu_items', 'my_wp_get_nav_menu_items', 10, 3);
    function my_wp_get_nav_menu_items($items, $menu, $args){
    	if(!is_admin()){
    		foreach($items as $index=>$menu){
    			if($menu->title == 'ENGLISH'){
    				$items[$index]->title = '<img src="이미지주소">'.$items[$index]->title;
    			}
    		}
    	}
    	
    	return $items;
    }

    위의 코드에서 ENGLISH 부분은 실제 메뉴 이름입니다.

    이미지주소 부분은 실제 이미지 주소로 적용해서 확인해보시겠어요?

     

    아래의 링크들도 참고해보세요.

    https://www.thewordcracker.com/intermediate/how-to-replace-text-menu-items-with-images-in-wordpress/

    https://www.thewordcracker.com/intermediate/how-to-add-iconts-to-wordpress-menus-fontawesome/

    고맙습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기