올해의 워드프레스 기본 테마 Twenty Fifteen: 사이드바를 오른쪽으로 이동시키기

Last Updated: 2015년 04월 20일 4개 댓글

올해의 워드프레스 기본 테마인 Twenty Fifteen는 블로그에 초점을 둔 깔끔한 디자인이 특징입니다. 이 테마를 설치하면 Twenty Fourteen 테마처럼 사이드바가 왼쪽에 위치해 있습니다. 그리고 외모 > 사용자 정의하기에서 색상 옵션이 추가되어 있어 기본, 어두움, 노랑, 분홍, 보라, 파랑 중에서 사전 설정된 색상(Preset colors)을 선택할 수 있다는 점이 마음에 드네요.
Twenty Fifteen Color option WordPress
물론 CSS를 통해 색상 변경이 가능하지만 사전 설정된 색상 설정을 제공하여 사용자 편의를 고려한 점에 좋은 점수를 주고 싶습니다.

위에서 언급했듯이 이 테마의 특징 중 하나는 사이드바가 왼쪽에 위치해 있다는 점입니다. 사이드바를 오른쪽 이동하려면 다음과 같은 CSS 코드를 스타일시트(style.css)에 추가하면 됩니다. (사용자 CSS 코드를 스타일시트에 추가하는 방법은 여기를 참고하시기 바랍니다.)

@media screen and (min-width: 955px) {
    .site-content {
        float: left;
        margin-left: 0px;
        width: 70.5882%;
    }   
    .sidebar {
        float: right;
        right:0;
        margin-right: 0px;
        max-width: 413px;
        width: 29.4118%;
    }   
    body:before {
        right: 0;
        left:auto;
    }       
    .site-footer {
        margin: 0 0 0 6.1%;
    }
}
(Reference: http://wordpress.stackexchange.com/)

그러면 다음 샘플 화면과 같이 사이드바가 오른쪽으로 이동합니다. (일부에서는 잘 작동하지 않는다고도 하는데, 제 사이트에서는 잘 작동하네요...)
Move sidebar to the right in WordPress twenty fifteen theme

이상으로 간단한 CSS를 사용하여 Twenty Fifteen(2015) 테마에서 사이드바를 오른쪽으로 이동하는 방법을 살펴보았습니다.


4 개 댓글

Leave a Comment

  1. 또는 다음과 같은 CSS 코드를 사용하여 워드프레스 Twenty Fifteen 테마에서 사이드바를 오른쪽으로 이동시킬 수 있습니다.

    body:before {
    right: 0;
    left: auto;
    direction: ltr;
    }
    .sidebar {
    float: right;
    margin-right: auto;
    margin-left: -100%;
    direction: ltr;
    }
    .site-content {
    float: right;
    margin-right: 29.4118%;
    margin-left: auto;
    direction: ltr;
    }
    .site-footer {
    float: right;
    margin: 0 35.2941% 0 0;
    direction: ltr;
    }
    // Source: http://wpguru.co.uk/2015/10/how-to-move-the-sidebar-to-the-right-in-twentyfifteen/

    또 다른 방법으로 사이드바를 오른쪽으로 이동시킨 차일드 테마를 이용할 수 있습니다(https://www.tipsandtricks-hq.com/wordpress-twenty-fifteen-2015-child-theme-with-right-sidebar-7732 )

    응답