코스모스팜 스레드
회원가입 양식 필드 수정 방법을 알고 싶습니다.
1. 정확한 제품 또는 플러그인 이름
Wp-members
2. 상세 내용
https://blog.naver.com/PostView.nhn?blogId=chan2rrj&logNo=221245839574
이 내용 중 에서 개별로 편집할 수 있는 필터인 wpmem_register_form_rows을 이용해서 자식테마의 functions.php에 아래 코드를 입력했습니다.
add_filter('wpmem_register_form_rows', 'my_register_form_rows_filter', 10, 2);
function my_register_form_rows_filter($rows, $toggle){
// 이렇게 기존 입력필드 정보를 새로 작성할 수 있습니다.
$rows['meta_key'] = array (
'order' => 1,
'type' => 'text',
'value' => '',
'row_before' => '',
'label' => '<label for="confirm_password" class="text">비밀번호 확인_f</label>',
'field_before' => '<div class="div_text">',
'field' => '<input name="confirm_password" type="password" id="confirm_password" value="" class="textbox"/>',
'field_after' => '</div>',
'row_after' => ''
);
return $rows;
}
CSS로 디자인을 수정하고 싶어. 'field' => '<input name="confirm_password" type="password" id="confirm_password" value="" class="textbox"/>', 이 부분의 ID값인 confirm_password 를 가지고
자식테마의 style.css에 #confirm_password{width:50%;}를 입력하고 저장했으나 적용이 안되더라구요.
재가 해본 방법이 잘못된건지 모르겠네요. 테마의 Quick CSS 부분에 입력해서 해봐도 적용이 안되는데. 어떻게 하면 CSS를 가지고 수정을 할 수 있을까요?
# 새로 적용한 입력필드 값이 변경되는지 확인하기 위해서 라벨을 "비밀번호 확인_f"로 변경했는데 "비밀번호 확인"으로 보이더라구요. 캐시도 지우고 확인했는데요. 어떤 것을 확인해보면 될까요?
3. 확인 가능한 상세 페이지 주소
4. 수정한 코드 내역 (있다면)
-
스레드봇 (32148 Point)ㆍ2025.10.20 09:47
안녕하세요~^^
문의주신 내용으로만으로는
어떤 내용인지 파악하기 어렵습니다.
더 자세히 작성해주시겠어요?
댓글 내용에 관련된 이미지도 같이 남겨주시겠어요?
아래 참고할만한 링크를 남겨드릴테니 기존 필드 수정도 아래 링크들은 참고해보시겠어요?
https://www.cosmosfarm.com/threads/document/52739
https://www.cosmosfarm.com/threads/document/63289
고맙습니다.
-
오타쟁이 (88 Point)ㆍ2025.10.19 23:55
맨 아래에 필드가 나와 있었는데 확인을 못했습니다.
근데 관리자의 WP-Members/ 필드에는 추가한 필드가 보이지 않는데. 기존의 필드 CSS를 수정해서 디자인을 변경하는 방법은 없을까요?
-
스레드봇 AI 2025.10.19 23:01
AI에 의해 자동 생성된 답변이에요 😀
코스모스팜 회원가입 양식 필드 수정 시 CSS가 적용되지 않는 문제로 어려움을 겪고 계시는군요. `wpmem_register_form_rows` 필터를 사용하여 필드를 추가하고 CSS를 적용하려 했지만 적용되지 않는 상황으로 이해했습니다.
CSS가 적용되지 않는 몇 가지 일반적인 원인과 해결 방법을 안내해 드릴게요.
1. **CSS 선택자 우선순위 문제**: 워드프레스 테마나 다른 플러그인에서 이미 해당 요소에 더 높은 우선순위의 CSS 스타일이 적용되어 있을 수 있습니다. 이 경우, `!important`를 사용하여 스타일의 우선순위를 높여볼 수 있습니다.
```css
#confirm_password {
width: 50% !important;
}
```
하지만 `!important`의 과도한 사용은 코드 관리를 어렵게 할 수 있으므로, 가능한 한 구체적인 선택자를 사용하는 것이 좋습니다.
2. **CSS 파일 로드 순서**: 자식 테마의 `style.css` 파일이 부모 테마나 다른 플러그인의 CSS 파일보다 먼저 로드될 경우, 나중에 로드되는 CSS에 의해 스타일이 덮어씌워질 수 있습니다. 워드프레스에서 CSS 파일을 올바른 순서로 로드하는 방법은 `wp_enqueue_style` 함수를 사용하는 것입니다. 자식 테마의 `functions.php` 파일에 다음과 같이 추가하여 부모 테마의 스타일시트 이후에 자식 테마의 스타일시트가 로드되도록 할 수 있습니다.
```php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // 부모 테마의 스타일시트 핸들
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
```
만약 `wp-members` 플러그인의 CSS가 나중에 로드되어 스타일을 덮어쓴다면, `wp_enqueue_style` 함수의 마지막 인자인 `$deps` (의존성) 배열에 `wp-members` 플러그인의 스타일시트 핸들을 추가하여 `wp-members` 스타일시트 이후에 자식 테마의 스타일시트가 로드되도록 조정할 수도 있습니다.
3. **캐시 문제**: 워드프레스 캐시 플러그인이나 서버 캐시 때문에 변경된 CSS가 즉시 반영되지 않을 수 있습니다. CSS를 수정한 후에는 반드시 캐시를 삭제하고 브라우저 캐시도 지워보세요. (Ctrl+F5 또는 Shift+F5)
4. **HTML 구조 확인**: 개발자 도구(F12)를 열어 해당 `input` 요소의 실제 HTML 구조와 적용된 CSS를 확인해 보세요. `confirm_password` ID가 정확히 적용되었는지, 다른 CSS 규칙이 우선순위를 가지고 있는지 등을 파악할 수 있습니다.
이 방법들을 시도해 보시고, 여전히 문제가 해결되지 않는다면 개발자 도구에서 확인되는 구체적인 CSS 적용 상태나 오류 메시지를 알려주시면 더 자세히 도움을 드릴 수 있을 것 같습니다.
↓ 아래 버튼을 눌러서 피드백해주세요.
