워드프레스 OnePress 테마: 로고 옆에 사이트 제목 표시하기

워드프레스 OnePress 테마에서 사이트 제목을 표시하면 로고 아래에 표시됩니다. 사이트 로고 아래에 표시되는 사이트 이름을 로고 옆으로 이동하는 방법에 대한 질문이 네이버 카페에 올라온 적이 있습니다.

워드프레스 관리자 페이지 » 디자인 » 사용자 정의하기 » 사이트 아이덴티티에서 사이트 제목 감추기 옵션을 비활성화하면 로고와 함께 사이트 제목이 표시됩니다. 보통 로고를 제고하고 사이트 제목을 표시할 수 있습니다. OnePress 테마에서 로고와 사이트 제목을 함께 표시하면 아래 그림과 같이 로고 아래에 사이트 제목이 표시됩니다.

워드프레스 OnePress 테마: 로고 옆에 사이트 제목 표시하기

로고와 사이트 이름을 함께 표시하는 경우, 로고 옆으로 사이트 이름을 이동하고 싶은 경우 간단한 CSS로 가능합니다.

디자인 » 추가 CSS로 이동하여 다음과 같은 CSS 코드를 추가합니다.

/* OnePress 테마에서 사이트 제목을 로고 옆으로 이동하기 */
.site-brand-inner > * {
 display: inline; 
}

.site-branding .site-logo-div {
    padding-right: 5px;
}

상단의 공개 버튼을 클릭하면 아래 그림과 비슷하게 로고 옆으로 사이트 제목이 이동하게 됩니다.

PC와 모바일에 대하여 다르게 레이아웃을 꾸미고 싶은 경우에는 CSS 미디어쿼리를 사용할 수 있습니다. 기기 해상도에 따른 미디어 쿼리는 테마마다 조금씩 다를 수 있습니다. 예를 들어, GeneratePress 테마에서 사용되는 미디어 쿼리는 다음 글에서 확인할 수 있습니다.

워드프레스 GeneratePress 테마 CSS 미디어 쿼리 반응형 분기점 - 워드프레스 정보꾸러미

원프레스 테마의 경우 CSS 쿼리에 대하여 검색해 보니 관련 설명서가 없는 것 같습니다. 위의 글에서 제시된 미디어 쿼리를 사용해도 무방하리라 생각합니다.

OnePress 테마는 제공되는 그대로 사용하기에는 좋은 테마 같습니다. 하지만 워드프레스 표준과는 다른 방식으로 커스텀할 수 있기 때문에 사용법을 별도로 익혀야 할 수 있습니다. 블로그를 운영하는 경우, GeneratePress 테마나 Newspaper 테마가 많이 사용되고 있습니다.

참고

https://avada.tistory.com/3301

워드프레스 OnePress 테마 데모 설치하기

https://avada.tistory.com/3196

워드프레스 OnePress 테마: 요약글 제거하기

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교