콘텐츠
워드프레스 에디터 도구모음 툴바 상단에서 스크롤 시 사라짐 문제 발생
요즘 워드프레스 블로그를 열심히 운영 중에 있는데 한가지 문제를 발견 했습니다. 바로 모바일 환경에서 도구모음 툴바가 상단에서 고정 되지 않는 현상 입니다. 처음에는 모바일 환경에선 도구모음이 표시되지 않는 오류 인 줄 알았습니다. 그런데 알고보니까 상단에 생성은 되는데 이게 스크롤 시 계속 사라지는 것. 모바일 환경이라는 것은 그냥 브라우저 가로폭을 줄이면 동일하게 버그가 생겨서 창을 두개 이상 키고 포스팅 할 때 여간 불편한게 아니였습니다 ㅡ,ㅡ
* 제 블로그는 일단 카페24를 통해 워드프레스를 설치 한 상태고 테마는 pen 테마 라는 것을 사용 중인 환경 입니다.
지금 이 이미지를 보시면 상단의 도구모임이 유지되지 못하고 스크롤 시 계속 위로 사라지는 모습을 볼 수 있습니다.
워드프레스 에디터 도구모음 툴바 고정 안됨 원인 분석
구글링을 해보았는데 오히려 지금 워드프레스의 기본 에디터인 블록 에디터 말고 과거 클래식 에디터가 해당 문제들이 발생했던 모양 입니다. 그래서 지금 이 오류를 질문한 사람도 해결방법을 알려준 사람도 찾지 못했어요 😇 전체화면 모드를 사용하거나 스크롤해서 수정해도 되지만 이러면 모바일 환경에서 블로그 글 쓰는 것이 불편해 잘 안할 것 같았습니다.
그래서 이를 직접 해결해 보려고 이것저것 시도하다 원인을 찾았습니다. 바로 CSS 문제 였습니다.
해당 툴바를 우클릭해서 브라우저 개발자 도구(저는 Edge 브라우저로 진행 했습니다.)로 검사해보면 다음과 같은 CSS를 볼 수 있습니다.
우클릭시 출력되는 <div role=”toolbar”… 가 바로 해당 도구모음의 요소 입니다. 이에 대한 CSS를 보면 position이 sticky로 되어 있음을 알 수 있어요. 이 CSS는 어떤 요소를 스크롤 해도 사라지지 않고 계속 나타나도록 해주는 position 입니다. 예전엔 fixed를 이용해 이런 툴바들을 만들었지만 스크롤 시 사라지기 전까진 같이 이동하다가 영역 밖으로 나가게 될 때 유지가 되는 것이죠. 아무튼, 이와 관련된 자세한 정보는 따로 다루겠습니다.
아무튼, 원래라면 이 position 이 동작했어야 하는데… 지금 오류가 발생한 이유는 바로 상위 div가 overflow 속성을 지니고 있어 발생한 문제 입니다. 구글에서 확인해보니 상위요소가 overflow 속성을 지닌 경우 sticky positon 이 작동하지 않는다는 것. 개발자도구에서 이를 제거하면 정상적으로 유지 되는것이 확인 가능 합니다!!
근데 문제가 있습니다. 도대체 이 속성을 어떻게 수정 하느냐 하는 문제죠. 저는 워드프레스 초보라 어디를 어떻게 바꿔야 할지 잘 모르겠더군요. 하지만 노가다는 늘 답을 냅니다. 이것저것 건드려 보면서 해결할 수 있었습니다.
워드프레스 에디터 CSS 수정으로 도구모음 상단 고정 안됨 현상 해결
방금 저희가 발견한 요소의 검사 요소의 CSS 내용 중 오른쪽 하이퍼 링크들은 지금 이 CSS가 어떤 경로에서 적용 되었는지를 나타냅니다. style.css 란 파일을 통해 적용 되었군요. 이 파일의 위치는 하이퍼 링크에 마우스를 올려두면 표시가 됩니다.
이 파일의 위치로 워드프레스 FTP를 통해 접속이 가능한데 이 파일을 수정하면 됩니다.
※ FTP로의 파일 수정은 워드프레스 블로그 자체에 문제가 생길 수 있습니다. 반드시 백업 후 진행해 주세요.
마무리
사실 별것 아닌 것 일수 있지만 저는 이런걸 참지 못하는 데다가 해결까지 해서 너무나 기분이 좋고 뿌듯한 상태 입니다. 저와 같은 문제로 스트레스 받으시는 분들께 좋은 해결책이 되었길 바랍니다 👍
