소셜 공유 버튼 By 코스모스팜

소셜 공유 버튼 설정 페이지에서 '표시할 버튼과 순서' 설정에서 

버튼 드래그가 안되실까요? 

표시할 버튼을 드래그해서 순서를 변경할 수 있습니다. 

다시 한번 확인해 보시겠어요? 

고맙습니다.

소셜 공유 버튼의 순서는 CSS 코드를 수정하여 변경할 수 있습니다. 다음 단계를 따라주세요:

1. **CSS 코드 수정 위치:**

* 워드프레스 관리자 페이지에서 **외모 > 사용자 정의하기 > 추가 CSS** 메뉴로 이동합니다.

* 또는 사용 중인 테마의 `style.css` 파일에 직접 코드를 추가할 수 있습니다. (테마 업데이트 시 코드가 사라질 수 있으므로 `추가 CSS` 사용을 권장합니다.)

2. **CSS 코드 예시:**

페이스북, 네이버, 카카오 순서로 변경하려면, 각 소셜 공유 버튼에 해당하는 CSS 선택자를 찾아 `order` 속성을 사용하여 순서를 지정할 수 있습니다. 정확한 선택자는 사용하시는 코스모스팜 소셜 공유 버튼 플러그인의 버전에 따라 다를 수 있으므로, 웹 브라우저의 개발자 도구(F12)를 사용하여 각 버튼의 클래스나 ID를 확인하는 것이 가장 정확합니다.

일반적으로 다음과 같은 방식으로 `order` 속성을 사용할 수 있습니다. (예시 코드는 실제 플러그인의 클래스와 다를 수 있습니다. 개발자 도구로 확인 후 수정해야 합니다.)

```css

/* 소셜 공유 버튼 컨테이너에 flexbox 적용 */

.cosmosfarm-social-share-buttons { /* 이 클래스는 실제 플러그인 컨테이너 클래스로 변경해야 합니다. */

display: flex;

flex-wrap: wrap; /* 버튼이 많을 경우 줄 바꿈 */

}

/* 페이스북 버튼 */

.cosmosfarm-social-share-buttons .facebook-share-button { /* 실제 페이스북 버튼 클래스로 변경 */

order: 1;

}

/* 네이버 버튼 */

.cosmosfarm-social-share-buttons .naver-share-button { /* 실제 네이버 버튼 클래스로 변경 */

order: 2;

}

/* 카카오 버튼 */

.cosmosfarm-social-share-buttons .kakao-share-button { /* 실제 카카오 버튼 클래스로 변경 */

order: 3;

}

/* 기타 다른 버튼들도 필요에 따라 order 속성을 지정 */

/* .cosmosfarm-social-share-buttons .other-share-button {

order: 4;

} */

```

**주의사항:**

* 위 `.cosmosfarm-social-share-buttons`, `.facebook-share-button`, `.naver-share-button`, `.kakao-share-button` 등은 예시 클래스명입니다. 실제 사용하시는 코스모스팜 소셜 공유 버튼의 HTML 구조를 개발자 도구로 확인하여 정확한 클래스 또는 ID를 사용해야 합니다.

* `display: flex;` 속성은 부모 컨테이너에 적용되어야 하며, 각 버튼에 `order` 속성을 적용하여 순서를 제어합니다.

이 방법으로 소셜 공유 버튼의 순서를 원하는 대로 변경하실 수 있습니다.