워드프레스 Onepress 테마에서는 사이드바를 왼쪽이나 오른쪽에 표시하거나 없음 중 선택할 수 있습니다. 하지만 특정 글에서만 사이드바를 없애는 옵션은 없습니다. 이 글에서는 워드프레스 Onepress 테마에서 원하는 페이지만 사이드바 숨기기에 대해 자세히 알아보겠습니다.
워드프레스 Onepress 테마에서 원하는 페이지만 사이드바 숨기기
1. 특정 페이지 사이드바를 없애기 위한 코드 작성
저의 블로그를 읽어보신 분들은 알겠지만, 블로그 화면 오른쪽에 사이드바가 표시되도록 설정되어 있습니다.
아래 그림의 왼쪽을 보시면 화면 오른쪽에 사이드바가 있는 것을 보실 수 있는 반면, 오른쪽 그림에는 사이드바가 없는 것을 확인하실 수 있습니다. 평상시에는 사이드바를 오른쪽에 표시하되, 필요시 전체 화면을 사용할 수 있도록 사이드바를 없애는 방법에 대해 상세히 설명드리도록 하겠습니다.
먼저 특정 페이지에서만 사이드바를 없애기 위해서는 아래 코드를 현재 사용하고 있는 테마 디렉토리에 추가해야 합니다. 윈도우에서 메모장을 열어 아래 코드를 삽입한 후 파일명을 page-full-width.php 로 저장합니다.
<?php
/*
Template Name: Full Width Template
*/
get_header();
?>
<div id="content" class="site-content" style="width: 100%; max-width: 100%; padding: 0; margin: 0;">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', 'page' );
endwhile;
?>
</main>
</div>
</div>
<?php get_footer(); ?>
다음으로 functions.php에 추가할 코드를 작성합니다. 아래 코드에서 array(5937, 5961, 5967, 5979, 6001) 부분을 여러분의 페이지 ID나 포스팅 글 ID로 변경합니다. 이 부분은 먼저 page-full-width.php를 적용해 보시고, 원하는 효과가 나타나지 않을 경우에만 진행하시면 됩니다.
function handle_full_width_pages($classes) {
// 전체 폭을 적용할 페이지 ID 목록
$full_width_pages = array(5937, 5961, 5967, 5979, 6001);
if (is_page($full_width_pages)) {
$classes[] = 'full-width-layout';
add_action('wp_head', function() {
echo '<style>
.full-width-layout #content,
.full-width-layout #primary {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
</style>';
});
}
return $classes;
}
add_filter('body_class', 'handle_full_width_pages');2. 페이지 ID와 포스팅 글 ID 확인하기
페이지 ID를 확인하는 방법은 어렵지 않습니다. 예를 들어 제 블로그에 있는 ‘글자수 카운트’의 페이지 ID를 확인해 보도록 하겠습니다.
워드프레스 관리자 화면에서 ‘페이지’ 또는 ‘글’을 클릭한 후 아래와 같이 페이지 ID를 확인할 글에 마우스를 올려놓습니다. 예를 들어 ‘글자수 카운트’의 ID를 확인하려면 마우스를 해당 글 위에 올려놓고 화면 아래 화살표가 가리키는 부분을 확인하면 됩니다. 이렇게 확인한 페이지 ID를 위의 소스에 적용합니다.
3. 작성한 파일 및 코드 서버에 적용하기
지금부터 위에서 작성한 page-full-width.php 파일을 서버에 업로드하고 functions.php 에 적용하도록 하겠습니다.
① page-full-width.php 서버에 업로드하기
제가 이용하고 있는 AWS Lightsail 서비스는 FTP로 현재 사용하고 있는 테마 디렉토리에 파일을 바로 업로드할 수 있는 쓰기 권한이 없습니다. 그래서 아래와 같이 홈 디렉토리에 파일을 먼저 업로드한 후 테마 디렉토리로 이동시켜야 합니다.
아래와 같이 FileZilla FTP로 page-full-width.php 를 서버로 업로드합니다. FileZilla FTP 사용법은 아래 글을 참고하세요.
FTP로 AWS Lightsail 서버에 파일 업로드하기
다음으로 SSH 터미널에서 아래 명령어를 실행하여 파일을 여러분이 사용하는 테마 디렉토리로 이동시키고 권한 및 그룹을 변경합니다. 저는 onepress-child 테마를 적용하고 있기 때문에 아래와 같이 명령어를 실행하였습니다. 다른 테마를 이용하고 계신다면 onepress-child를 여러분이 사용하는 테마명으로 변경하셔야 합니다.
sudo mv page-full-width.php ~/stack/wordpress/wp-content/themes/onepress-child
cd ~/stack/wordpress/wp-content/themes/onepress-child
chmod 775 page-full-width.php
chown daemon:daemon page-full-width.php
② functions.php 에 코드 적용하기
위에서 작성한 handle_full_width_pages 함수를 아래 그림과 같이 functions.php 에 붙여넣기 한 후 ‘파일 업데이트’를 클릭하여 적용시킵니다.
위에서도 말씀드렸지만, 이 부분은 page-full-width.php를 적용해 보시고, 원하는 효과가 나타나지 않을 경우에만 진행하시면 됩니다.
4. 페이지 적용 템플릿 변경하여 적용시키기
Onepress 테마에서 특정 페이지만 사이드바를 없애기 위한 모든 준비가 되었습니다. 아래 순서대로 템플릿을 변경합니다.
- 아래와 같이 사이드바를 없앨 페이지의 편집화면으로 들어간 후 오른쪽에 있는 ‘템플릿’을 클릭합니다.
- ‘기본 템플릿’으로 되어 있는 것을 서버에 업로드 한 ‘Full Width Template’로 변경합니다.
- ‘저장’ 버튼을 클릭합니다.
5. 적용결과 확인하기
지금까지 Full Width Template 템플릿 파일(page-full-width.php)을 서버에 업로드하고, functions.php에 코드를 추가한 후 편집 화면에서 템플릿 변경까지 완료하였습니다.
아래는 사이드바를 없앤 결과 화면입니다. 타이틀과 메뉴는 그대로이지만, 사이드바를 없애고 화면을 크게 쓸 수 있습니다.
오늘은 워드프레스 Onepress 테마에서 원하는 페이지만 사이드바 숨기기에 대해 자세히 알아보았습니다. 제 블로그의 상단 메뉴에서 ‘Tools’ 섹션을 클릭해 보시면, 사이드바가 없는 페이지를 확인할 수 있습니다. 이를 참고하셔서 여러분의 블로그에도 적용해 보시기 바랍니다.