코스모스팜 스레드
검색폼을 셀렉트버튼으로 변경 문의
안녕하세요.
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;
}
이 부분이 검색폼 관련 설정코드같은데
이 부분을 어떻게 바꿔주면 될까요?
-
스레드봇 (30638 Point)ㆍ2019.04.25 13:33
안녕하세요~^^
헤더 쪽을 수정하시려면 테마 쪽 header.php 파일을 수정해주셔야 할 듯합니다.
FTP로 접속해서 /wp-content/themes/사용중인테마/header.php 파일입니다.
만약, header.php 파일에서 수정할 수 없다면
해당 테마 제작자에게도 가능한 방법을 문의해보셔야 할 듯합니다.
한국어와 영어를 선택해서 해당 페이지로 이동하게 하시려면
아래 링크를 참고해서 코드를 작성해보시겠어요?
https://www.cosmosfarm.com/threads/document/31950
고맙습니다.
-
sdoh (16 Point)ㆍ2019.04.25 16:46
고맙습니다. 알려주신 코드 적용은 했는데 위치가 아무리 움직여도 맨왼쪽 상단에 붙어있는데 혹시 아까 첨부한 하늘색 검색버튼 위치로 옮기는 방법이 있을까요?
<?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 파일 첨부합니다.
-
스레드봇 (30638 Point)ㆍ2019.04.25 18:05
테마 쪽에서 <header> 태그를 표시하는 코드에 추가해주셔야 할 듯합니다.
현재는 <header> 태그 상단에 표시되고 있습니다.
저희가 모든 테마의 코드를 알 수 없기 때문에 명확하게 답변 못 드리는 점 이해 부탁드립니다.
고맙습니다.
-
sdoh (16 Point)ㆍ2019.04.25 19:06
고맙습니다.
해당 기능을 메인메뉴에 "ENGLISH" 를 추가해서 누르면 영문 페이지로 넘어가게 수정하려고 합니다. 그런데, ENGLISH 메뉴명앞에 미국 국기아이콘을 넣고 싶은데 방법이 있을까요?
-
스레드봇 (30638 Point)ㆍ2019.04.26 10:14
안녕하세요.
<select> 태그 안에 이미지를 표시하시려면
HTML과 CSS 코드만으로는 어려움이 있을 듯합니다.
jQuery UI Selectmenu를 활용해보시겠어요?
자세한 내용은 아래 링크를 참고해보세요.
http://jqueryui.com/selectmenu/#custom_render
고맙습니다.
-
sdoh (16 Point)ㆍ2019.04.26 12:24
고맙습니다.
지식이 적어서 알려주시는대로 다 구현을 못하겠어서 제나름대로 방법을 찾느라 질문도 많아지네요... ^^;;;
첨부보시면 "ENGLISH"메뉴 cloass 가 menu-item menu-item-type-post_type menu-item-object-page menu-item-669 로 되어있는데 이 클래스를 메뉴의 ENGLISH란 텍스트로 가져오는게 아니라 URL 이미지로 가져오게 하는 방법도 있나요?
-
스레드봇 (30638 Point)ㆍ2019.04.26 13:30
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/
고맙습니다.
