현재 사용 중인 Magspot 테마는 포스트 페이지 여백width을 널널하게 주지 못하는 단점이 있다.
이는 사이드바를 기본적으로 제공하고 있는 테마들이 기본적으로 가지고 있는 문제점이기도 하고 입맛에 맞게 사용하는 HTML 작업이 그렇게 어려운 작업도 아니기에 강제로 여백들을 조절해서 사용하고 있었다.
하지만 모바일 환경에서 불편한 상황이 연출 되었는데 모바일에서는 해상도 문제 때문에 사이드바를 자동으로 아래로 내려버리기 때문에 포스트 페이지 > 사이드바 > 푸터 순으로 보기 불편할 정도로 스크롤이 길게 늘어나 버리고 있었다. 거기에 푸터에도 카테고리와 태그, 최근게시물 등 사이드바의 역할을 하고 있기 때문에 모바일에서는 사이드바가 필요가 없겠다 싶었다.
그래서 테마를 구입한 probloggertemplates에 홈 메인에서만 사이드바를 표시하고 그 외에는 사이드바를 숨길 수 있는 방법에 대해 문의를 해보았다.
이새끼들은 진짜 도움이 안된다. 전에는 날짜 표기를 yy/mm/dd 로 수정할 수 있는 방법에 대해 문의를 했을 때도 이따위 매크로 답변을 날리더니 이번에도 마찬가지다. 정말로 방법이 없나 싶어서 고민하다 페이지가 main-wrapper 와 sidebar-wrapper 로 나누어져 있으니 sidebar-wrapper 를 숨기는 자바스크립트를 사용하면 되지 않을까 싶어 바로 chatGPT 에게 물어보니 역시 명쾌하게 대답을 해준다.
<script>
window.onload = function() {
// sidebar-wrapper 요소를 찾아서 숨깁니다.
var sidebarWrapper = document.getElementById('sidebar-wrapper');
if (sidebarWrapper) {
sidebarWrapper.style.display = 'none';
}
};
</script>우선 제대로 작동하는지 확인해보았고 결과는 성공적이었다. sidebar-wrapper 를 숨김 처리 display=none 하니 사이드바가 사라진걸 확인하였으니 이제 몇가지 조건 if 을 넣어 보았다. 내가 원하는 조건은 아래와 같았다.
- 모바일 환경에서는 사이드바를 항상 숨김
- 데스크톱 환경에서는 창의 너비가 768px 초과하고 특정 URL 으로 시작하지 않는 페이지에서는 사이드바 표시
- 데스크톱 환경에서는 특정 URL 으로 시작하는 페이지에서는 사이드바 숨김
- 사이드바가 숨겨질 경우 main-wrapper 의 위치를 가운데로 옮기고 여백 n%
여러번의 시행 착오 끝에 정상적인 코드를 얻었고 다행히 제대로 작동하는 걸 확인하였다.
<script>
window.onload = function() {
// 현재 페이지의 URL을 가져옵니다.
var currentURL = window.location.href;
// 모바일 환경에서는 모든 페이지에서 사이드바를 숨기고 width를 n%로 설정합니다.
if (window.innerWidth <= 768) {
var sidebarWrapper = document.getElementById('sidebar-wrapper');
if (sidebarWrapper) {
sidebarWrapper.style.display = 'none';
}
var mainWrapper = document.getElementById('main-wrapper');
if (mainWrapper) {
mainWrapper.style.width = 'n%';
mainWrapper.style.margin = '0 auto';
}
}
// 데스크톱 환경에서는 특정URL 으로 시작하지 않는 모든 페이지에서 사이드바를 표시합니다.
if (window.innerWidth > 768 && !currentURL.startsWith('siteURL')) {
var sidebarWrapper = document.getElementById('sidebar-wrapper');
if (sidebarWrapper) {
sidebarWrapper.style.display = 'block';
}
}
// 특정URL 으로 시작하는 페이지에서는 사이드바를 숨기고, 메인 콘텐츠의 너비를 n%로 설정합니다.
if (currentURL.startsWith('siteURL')) {
var sidebarWrapper = document.getElementById('sidebar-wrapper');
if (sidebarWrapper) {
sidebarWrapper.style.display = 'none';
}
var mainWrapper = document.getElementById('main-wrapper');
if (mainWrapper) {
mainWrapper.style.width = 'n%';
mainWrapper.style.margin = '0 auto';
}
}
};
</script>완벽한 코드는 아니겠지만 그래도 만족스러운 결과를 얻었다. 이제는 날짜 표기를 수정하는 방법을 알아봐야겠다.
3/29일 추가.
모바일에서 여백이 자꾸 원하는 값으로 나오지 않고 PC를 따라가길래 조건을 조금 더 걸어서 수정해주었다. chatGPT 로 코드를 만들 때는 각 조건마다 세부적으로 작성해야 하나보다.
<script>
window.onload = function() {
// 현재 페이지의 URL을 가져옵니다.
var currentURL = window.location.href;
// 모바일 환경에서는 모든 페이지에서 사이드바를 숨기고 너비를 100%로 설정합니다.
if (window.innerWidth <= 768) {
var sidebarWrapper = document.getElementById('sidebar-wrapper');
if (sidebarWrapper) {
sidebarWrapper.style.display = 'none';
}
var mainWrapper = document.getElementById('main-wrapper');
if (mainWrapper) {
mainWrapper.style.width = '100%';
mainWrapper.style.margin = '0 auto';
}
var blogPosts = document.getElementById('blog-posts');
if (blogPosts) {
blogPosts.style.width = '100%';
blogPosts.style.margin = '0 auto';
}
}
// PC 환경에서는 모든 페이지에서 사이드바를 표시하지만 특정 URL 으로 시작하는 페이지에서는 사이드바를 숨기고 너비를 85%로 설정합니다.
if (window.innerWidth > 768) {
var sidebarWrapper = document.getElementById('sidebar-wrapper');
if (sidebarWrapper) {
sidebarWrapper.style.display = currentURL.startsWith('siteURL') ? 'none' : 'block';
}
var mainWrapper = document.getElementById('main-wrapper');
if (mainWrapper) {
mainWrapper.style.width = currentURL.startsWith('siteURL0') ? '85%' : '100%';
mainWrapper.style.margin = '0 auto';
}
var blogPosts = document.getElementById('blog-posts');
if (blogPosts) {
blogPosts.style.width = currentURL.startsWith('siteURL') ? '85%' : '100%';
blogPosts.style.margin = '0 auto';
}
}
};
</script>