링크의 백그라운드를 누르더라도 이동하게 하시려면

기존의 CSS 코드를 아래의 CSS 코드로 교체해보시겠어요?

.cosmosfarm-members-account-links { overflow: hidden; padding: 5px; width: 315px; background-color: gray; }
.cosmosfarm-members-account-links a { color: white; }
.cosmosfarm-members-account-links .cosmosfarm-members-register-link { float: left; }
.cosmosfarm-members-account-links .cosmosfarm-members-account-link { float: left; }
.cosmosfarm-members-account-links .cosmosfarm-members-loginout-link { float: left; }
.cosmosfarm-members-account-links .cosmosfarm-members-register-link a { display: block; margin-right: 5px; padding: 5px 10px; width: 150px; background-color: blue; text-align: center; }
.cosmosfarm-members-account-links .cosmosfarm-members-account-link a { display: block; margin-right: 5px; padding: 5px 10px; width: 150px; background-color: blue; text-align: center; }
.cosmosfarm-members-account-links .cosmosfarm-members-loginout-link a { display: block; padding: 5px 10px; width: 150px; background-color: red; text-align: center; }

hover 선택자는 아래의 코드를 활용해보세요.

.cosmosfarm-members-account-links .cosmosfarm-members-register-link a:hover { opacity: 0.7; }
.cosmosfarm-members-account-links .cosmosfarm-members-account-link a:hover { opacity: 0.7; }
.cosmosfarm-members-account-links .cosmosfarm-members-loginout-link a:hover { opacity: 0.7; }

레이아웃 편집 시 HTML과 CSS 코드를 알면 도움이 됩니다.

고맙습니다.

다만 글씨에만 링크화가 되있어서 백그라운드 색상이입혀있는곳을 클릭하면 이동이 되질않네요 버튼의 호버설정도 못하구요 ㅜㅜ..

답변 감사합니다!

account-links.php 파일을 수정하지 않고도 CSS 코드를 활용해서

올려주신 이미지처럼 적용할 수 있을 듯합니다.

코드는 기존의 상태로 복구하신 후

워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

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

.cosmosfarm-members-account-links { overflow: hidden; padding: 5px; width: 315px; background-color: gray; }
.cosmosfarm-members-account-links a { color: white; }
.cosmosfarm-members-account-links .cosmosfarm-members-register-link { float: left; margin-right: 5px; padding: 5px 10px; width: 150px; background-color: blue; text-align: center; }
.cosmosfarm-members-account-links .cosmosfarm-members-account-link { float: left; margin-right: 5px; padding: 5px 10px; width: 150px; background-color: blue; text-align: center; }
.cosmosfarm-members-account-links .cosmosfarm-members-loginout-link { float: left; padding: 5px 10px; width: 150px; background-color: red; text-align: center; }

위의 코드에서 픽셀 및 색상은 적절하게 수정해보시겠어요?

고맙습니다.

위와같이 저런식으로 만들고싶습니다.

저 버튼의 코드는 테마에디터로 만든거기때문에 간단하게 클릭몇번으로 만든겁니다.

지금 아래코드는 임시적으로 작동이 되는지 안되는지 알아보기 위해 게시판 버튼 코드를 가져온것뿐이구요 새롭게 회원관리 만의 버튼 css를 만들어보고싶습니다.

<div class="right" style="color: red;">
 <button type="submit" class="kboard-first-contents-mall-button-small" style="color: red;">
  <?php echo wp_loginout($_SERVER['REQUEST_URI'], false)?>
 </button>
</div>

혹시 맨 상단 이미지처럼 저렇게 만들려면 방법이 있을까요?

수정하신 코드에서 글자 색상을 변경하시려면

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

.cosmosfarm-members-account-links .kboard-first-contents-mall-button-small a { color: red; }

크롬 브라우저의 개발자 도구(F12)를 사용하시면

CSS 속성을 쉽게 찾을 수 있고 테스트해보실 수 있습니다.

회원정보(버튼, 왼쪽정렬, 길이100%, 오른쪽마진 5px)

로그아웃(버튼, 오른쪽정렬, 길이100%) 부분은 이미지 첨부가 가능하시다면

어떻게 하고 싶으신 건지 imgur에 업로드한 뒤 링크 걸어주시겠어요?

CSS 코드로 적용 가능할지 확인해보겠습니다.

수정하신 account-links.php 파일 쪽 코드도 모두 올려주시겠어요?

고맙습니다.

버튼화는 되는데 글자색 변경이 전혀안되는데 혹시 방법이있을까요?

제가 변경하고자하는 형식은 아래와같습니다.

회원정보(버튼, 왼쪽정렬, 길이100%, 오른쪽마진 5px)                로그아웃(버튼, 오른쪽정렬, 길이100%)

<div class="right" style="color: red;">
 <button type="submit" class="kboard-first-contents-mall-button-small" style="color: red;">
  <?php echo wp_loginout($_SERVER['REQUEST_URI'], false)?>
 </button>
</div>

둥근 모양으로 표시되는 건 사용 중이신 테마 쪽의 CSS 코드가 적용된 듯합니다.

비회원으로도 확인 가능한 페이지 주소 알려주시면

CSS 코드로 수정이 가능할지 살펴보겠습니다.

고맙습니다.

같은라인에 표시하는건 가능한거같은데 버튼으로 변환하는건 어떤 코드가 필요할까요?

ex) 둥근모양이 아닌 사각형모양의 폭이 100%이고 색상은 로그인버튼과 동일한 파랑색으로 하고싶은데 어떤 코드를 추가해야될지 모르겠습니다.

올려주신 숏코드는

FTP로 접속해서 /wp-content/plugins/cosmosfarm-members/skin/사용중인스킨/account-links.php 파일입니다.

한 줄에 표시하시려면

워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

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

.cosmosfarm-members-account-links { overflow: hidden; }
.cosmosfarm-members-register-link { float: left; margin-right: 10px; }
.cosmosfarm-members-account-link { float: left; margin-right: 10px; }
.cosmosfarm-members-loginout-link { float: left; }

위의 코드에서 margin-right 부분은 메뉴 간 여백입니다.

수치를 적절히 조절해보세요.

위의 코드로도 적용이 되지 않는다면 실제 확인 가능한 페이지 주소 알려주시겠어요?

고맙습니다.

[cosmosfarm_members_account_links]

위의 숏코드를 사용하면

회원정보
로그아웃

이런식으로 뜨게되는데 이걸 버튼으로 한줄에 나란히 회원정보와 로그아웃을 만들수는 없을까요?

디자인 경로를 못찾겠네요

올려주신 숏코드 link 값에는 논스값이 없어서 문제가 생기는 듯합니다.

다른 숏코드를 사용하거나 wp_logout_url 함수를 사용해서 직접 링크를 생성하셔야할 듯합니다.

https://codex.wordpress.org/Function_Reference/wp_logout_url

고맙습니다.

워드프레스 로그아웃 주소 부분에 _wpnonce 코드가 추가되어 있어야 하고 계속 바뀌어야 합니다.

또, 보안 때문에 자동으로 생성되어야만 합니다.

그렇기 때문에 올려주신 숏코드처럼 _wpnonce 코가 추가되어 있지 않거나

특정 값으로 고정되어있다면 원하지 않는 결과가 나타날 수도 있습니다.

코스모스팜 회원관리를 사용 중이시라면 아래의 숏코드를 활용해보시겠어요?

[cosmosfarm_members_account_links]

고맙습니다.