제가 js와 php의 기본도 몰라서 html부터 공부하고 있습니다.
그런데 홈피를 먼저 만들다보니 급하게 바꾸고 싶은 부분이 생기네요.ㅠㅠ
WP-members의 플러그인을 이용하여 로그인 위젯을 만들고 3주를 고생하여(ㅎㅎㅎ) 우편번호 검색란은 functions.php에 카피하여 넣었습니다.
그런데 인터넷에 나온 php내용이 현재 업그레이드 된 WP-members는 항목이 없어서 버튼 만드는 것을 functions.php 맨 아래에 카피해서 넣었더니 우편번호 옆에 생기는게 아니라 도로명주소 앞에 만들어졌습니다.
어떻게 옮기는지 상세히 알려주시면 감사하겠습니다.
그리고 로그인, 회원가입, 우편번호검색 버튼 색깔을 바꾸고 싶습니다. 이 파일은 혹 어디에 들어가야 수정할 수 있는지요?
안녕하세요~^^
우편번호 검색 버튼은 어느 페이지에 추가하신 건지요?
1:1 게시판이 아닌 공개된 커뮤니티라 추가하신 코드가 있다면
어떤 코드를 추가하셨는지 에디터의 코드 스니펫 삽입 기능으로 코드를 올려주시면
보다 더 좋은 답변을 받으실 수 있습니다.
코스모스팜 회원관리 플러그인을 사용하시면
별도로 코드를 수정하지 않고 회원가입 페이지에서
우편번호/주소 검색 서비스를 추가하실 수 있습니다.
만약, 별도로 코드를 수정하신 경우라면 어떤 코드를 추가하셨는지 올려주시겠어요?
비회원으로도 확인 가능한 페이지 주소 알려주시면 로그인, 회원가입, 우편번호 검색 버튼 색상을
CSS 코드로 수정할 수 있을지 살펴보겠습니다.
고맙습니다.
최근에 주신 답변도 제가 이해를 못하고 있습니다.ㅠㅠ
제가 함수를 전혀 알지를 못합니다.ㅠㅠ
아이디 중복확인과 실명인증을 WP-member에서 할 수 있는지요?
할 수 있다면 어떻게 해야 하나요?
안녕하세요.
CSS 코드가 추가되어 있지 않은 듯합니다.
워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드 쪽에 추가해보시겠어요?
wp_enqueue_scripts 액션에 wp_enqueue_script 함수를 사용할 때
filename.js 부분은 실제 파일이 맞는지 확인해보셔야 할 듯합니다.
만약, 다른 경로에 있다면 올바른 경로로 설정을 해보세요.
고맙습니다.
죄송합니다.
아직 공부 중이긴 한데....
위의 답변을 주신 내용을 이해를 못했습니다, 글구 제가 서버에 뭘 잘못 넣었는지 색깔이 다시 원위치로 돌아왔습니다.ㅠㅠㅠ
안녕하세요.
올려주신 페이지 주소에서 우편번호 검색 버튼 클릭 시
크롬 브라우저 개발자 도구(F12) Console 창에
아래와 같은 에러 메시지가 표시됩니다.
"Uncaught ReferenceError: sample4_execDaumPostcode is not defined"
해당 문구가 표시되는 건
추가하신 sample4_execDaumPostcode 자바스크립트 함수를 인식하지 못하기 때문입니다.
워드프레스에서 스크립트를 추가하시려면
별도로 파일을 만드신 후 wp_enqueue_script 함수를 사용하시거나
wp_head 액션에 추가해서 사용해보시겠어요?
고맙습니다.
제가 질문드린대로 다 되었습니다. 친절한 답변에 감사드립니다.
제 컴에서는 바로 색깔이 바뀌지는 않고 다음날이 되어야 바뀌며 다른 이의 컴에서는 색깔이 바뀌었음을 확인할 수 있었습니다.^^
그런데 우편번호 검색키를 누르면 주소창이 떠야 하는데 안 뜨네요.ㅠㅠ
자꾸 귀찮게 드려서 죄송합니다.
이전 댓글에 올려주신 페이지 주소로 확인해보니
로그인, 회원가입 버튼은 검정색으로 색상이 정상적으로 변경된 듯합니다.
우편번호 검색 버튼에도 검정색 버튼으로 적용되게 하시려면
wpmem_register_form_rows 필터에 추가하신 태그에 zip-button 클래스를 추가해보시겠어요?
이전 댓글에 안내해드린 코드를 잘 확인해보셔야 할 듯합니다.
고맙습니다.
https://imgur.com/pt9w2ig
링크에 그림파일을 2개 올렸는데...
테마편집기안에 style.css 안에 붙여넣기 했습니다.
이전 댓글에 안내해주신 페이지 주소로 확인해보니
CSS 코드가 정상적으로 추가되어 있지 않은 듯합니다.
CSS 코드를 어떻게 추가하셨는지 알려주시겠어요?
고맙습니다.
제대로 했는지 모르겠네요???
색깔이 검정색으로 바꿔야 하는 것 같은데 안되네요.ㅠㅠ
코드를 올려주실 땐 반드시 에디터의 코드 스니펫 삽입 기능을 이용해주세요.
그렇지 않으면 이상한 코드로 바뀌거나 질의응답 시 의사소통에 문제가 있을 수도 있습니다.
wpmem_register_form_rows 필터를 활용해서 zip 필드에 버튼을 추가하실 때
row_after가 아닌 필드를 활용해보시겠어요?
기존의 코드 대신 아래의 코드를 활용해보세요.
add_filter('wpmem_register_form_rows', 'wpmem_register_form_rows_2020_04_17', 10, 2);
function wpmem_register_form_rows_2020_04_17($rows, $toggle){
$rows['zip']['field'] .= '<input type="button" class="zip-button" value="우편번호 검색" onclick="sample4_execDaumPostcode()">';
return $rows;
}
그 다음, 워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에
아래의 코드를 추가해보세요.
#wpmem_reg #zip { width: 70%; }
#wpmem_reg .zip-button { width: 30%; }
위와 같이 코드를 적용하신 후
사용자 정의하기 -> CSS 입력 필드에
아래의 코드를 추가하시면 각 버튼 색상을 변경하실 수 있습니다.
/* 위젯 로그인 버튼 색상 */
#wp-members .buttons { background: black; }
/* 회원가입 페이지 우편번호 검색 버튼 색상 */
#wpmem_reg .zip-button { background: black; }
/* 회원가입 페이지 회원가입 버튼 색상 */
#wpmem_reg input[type="submit"] { background: black; }
위의 코드에서 색상은 적절히 변경해주세요.
크롬 브라우저 개발자 도구(F12)를 활용하시면
CSS 속성을 쉽게 찾을 수 있고 미리 테스트해보실 수 있습니다.
고맙습니다.
add_filter( 'wpmem_register_form_rows', 'my_register_form_rows_filter', 10, 2 );
function my_register_form_rows_filter( $rows, $toggle ) {
$rows['zip']['row_after'] = '<input type="button" value="우편번호 검색" onclick="sample4_execDaumPostcode()">';
return $rows;
}
를 functions.php 에 삽입했습니다.
페이지 주소라 하심은 사이트 주소를 말씀하시는건지요?
joy25846.cafe24.com 입니다.
functions.php안에 js 폴더를 만들어
//본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
function sample4_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var roadAddr = data.roadAddress; // 도로명 주소 변수
var extraRoadAddr = ''; // 참고 항목 변수
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample4_postcode').value = data.zonecode;
document.getElementById("sample4_roadAddress").value = roadAddr;
document.getElementById("sample4_jibunAddress").value = data.jibunAddress;
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
if(roadAddr !== ''){
document.getElementById("sample4_extraAddress").value = extraRoadAddr;
} else {
document.getElementById("sample4_extraAddress").value = '';
}
var guideTextBox = document.getElementById("guide");
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
if(data.autoRoadAddress) {
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
guideTextBox.style.display = 'block';
} else if(data.autoJibunAddress) {
var expJibunAddr = data.autoJibunAddress;
guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
guideTextBox.style.display = 'block';
} else {
guideTextBox.innerHTML = '';
guideTextBox.style.display = 'none';
}
}
}).open();
}
</script>
zipcode.js 라는 파일이름으로 저장했습니다.
안녕하세요.
직접 별도의 코드를 추가하신 경우
저희 쪽에서 도움을 드리는 데 한계가 있습니다.
회원가입 시 필드 중복체크 및 SMS본인인증은
코스모스팜 회원관리 플러그인을 사용하시면 가능합니다.
워드프레스 관리자 -> 회원가입관리 -> 중복확인 설정 페이지에서
필드 중복 체크 설정을 하실 수 있습니다.
본인인증은
워드프레스 관리자 -> 회원가입관리 -> 본인인증 페이지에서 설정하실 수 있습니다.
실제 본인인증 기능을 사용하기 위해서 아임포트와 다날 가입이 필요합니다.
본인인증 서비스 가입은 아임포트에 문의하시면 상담받으실 수 있습니다.
https://www.iamport.kr/pgForm/danal
고맙습니다.