워드프레스 사이드바 고정 및 사이즈 변경 - 썸네일 대표이미지 숨기기

워드프레스 사이드바 고정 및 사이즈 변경 - 썸네일 대표이미지 숨기기

홈페이지를 직접 만들어 웹사이트를 관리한다면 각각의 CSS와 HTML을 어느정도 알아두느것이 좋습니다. 특히 사이드바에 애드센스 광고를 설정하거나 카테고리등을 설정해서 마우스로  이동 시 사이드바 고정시키고 싶거나 사이드바 고정폭 사이즈로 높이나 넓이등을 변경하는 방법과  썸네일 및 대표이미지를 워드프레스의 웹사이트 및 개별 포스팅에서 CSS 수정방법을 알아보겠습니다.

워드프레스 사이드바 고정방법

테마 CSS 수정 

우선 웹사이트의 CSS 수정을 변경하기 위해서는 style.css 파일을 편집하거나 워드프레스의 경우 워드프레스 테마편집기에 있는 CSS 편집을 통해 테마에서 원하는 CSS를 추가하면 됩니다.

워드프레스 관리자계정으로 로그인합니다.

테마 -> 사용자 정의하기 -> 추가CSS를 선택해 아래와 같이 CSS 추가합니다.

/* 제너레이트 테마 사이드바 고정 */
/* Sticky Sidebar in GeneratePress */

@media (min-width: 769px) {
#right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 0;
}
}

만약 현재사용하는 테마설정에서 사이드바 고정하는 기능이 있다면 옵션을 체크하는 방법도 있으나 유료테마가 아닌 무료버전을 사용한다면 대부분 지원하지 않습니다.

#sidebar {
  width: 250px; /* 원하는 사이드바 크기로 변경하세요 */
}

#container {
  margin-right: 270px; /* 사이드바 너비 + 20px 만큼으로 설정하세요 */
}

이때 사이드바의 폭이나 넓이등 위젯 사이즈에 맞게 크기를 변경하고 싶다면 위 CSS를 추가해줍니다.

/* 사이드바 크기 설정 */
#secondary {
  width: 300px; /* 원하는 사이드바 크기로 변경하세요 */
}

/* 사이드바 고정 */
#secondary {
  position: fixed;
  top: 50px; /* 고정할 위치를 원하는 값으로 변경하세요 */
}

위 코드에서 #secondary 부분은 사이드바를 의미하며, width 속성을 통해 원하는 사이드바 크기로 변경할 수 있습니다.

position: fixed 속성을 통해 사이드바를 고정하고, top 속성을 통해 고정할 위치를 설정해서 위치를 변경하거나 오른쪽 왼쪽 등 위치를 원하는 곳으로 변경이 가능합니다..

워드프레스 사이드바 고정 CSS

원하는 위치로 고정하려면 top 값으로 HTML 변경하면 됩니다.

WP Sticky Sidebar – Floating Sidebar On Scroll for Any Theme

해당방법이 어렵다면 워드프레스 플러그인 중 WP STICKY SIDEBAR - Floating 사용하면 별도의 CSS 편집없이 워드프레스 사이드바 고정할 수 있습니다.

티스토리 사이드바 고정해제 사이즈 조절 태그

워드프레스 메인 및 포스팅 썸네일 이미지 없애기

워드프레스 대표 썸네일 이미지 숨기기

CSS를 편집하면서 워드프레스 썸네일 이미지로 포스팅 상단에 뜨는 이미지를 안보이게 표시하거나 메인페이지의 대표이미지를 안보이게 하고 싶다면 아래 CSS 추가로 추가해줍니다.

워드프레스 싱글페이지 대표이미지 숨기는방법