콘텐츠 폭 조절 관련 GeneratePress 사용팁 3가지

Updated on 2020-03-22 by

주말을 이용해 현재 적용중인 GeneratePress 테마를 최적화하고 있습니다. 오늘은 이 과정에서 알게된 콘텐츠 폭, 브래드크럼 폭, 그리고 검색어 입력 필드 조정의 GeneratePress 사용팁 3가지 를 알아보겠습니다.

계속 이야기하지만 GeneratePress 테마는 속도가 빠른대신 여러가지 튜닝이 필요합니다.

더우기 워드프레스 테마 자체가 서구인의 관점에서 설계되었기 때문에 한국인이 보기에는 조금 불편한 부문도 있기 때문에 대부분의 워드프레스 테마는 이런 어색한 부분을 조금씩 최적화하는 것이 필요합니다.

여기에서는 콘텐츠 폭을 조절하는 방법, 브랜드크럼(Breadcrum) 폭 조절, 그리고 검색어 입력 필드의 폭과 입력 위치를 조정하는 GeneratePress 사용팁을 알아봅니다.

워드프레스 테마 GeneratePress 사용팁 관련해 다음과 같은 글들도 참고하시면 좋을 것 같네요.

워드프레스 테마 GeneratePress에서 라이브 서치 구현하기

워드프레스 테마 GeneratePress 에서 발행일대신 수정일 표시 방법

워드프레스 테마 GeneratePress에서 플러그인없이 관련 글(Related Posts) 표시하는 방법

[워드프레스 테마] GeneratePress에서 브레드크럼(breadcrumb) 적용하기

GeneratePress 테마의 무한 스크롤(infinite scroll) 문제 및 해결

오랬동안 사용하던 뉴스페이퍼 테마를 버린 이유

1. 콘텐츠 폭 조정하기

뉴욕타임즈처럼 블로그 레이아웃을 이미지나 동영상과 같은 새로운 미디어를 강조하도록 텍스트 영역을 좁고, 멀티미어 영역은 넓게 배치하는 스타일을 적용할 수 있습니다.

이는 블로그나 신문등에서 가독성을 높이기 위해 사이드바를 제거한 레이아웃에서 테스트 영역을 좁고 이미지 등 멀티미디어 요소들을 넓게 또는 풀화면으로 베치하는 레이아웃을 말합니다.

뉴욕타임지 기사 사례_텍스트 부분은 좁고 이미지는 풀 화면 배치
뉴욕타임지 기사 사례_텍스트 부분은 좁고 이미지는 풀 화면 배치

GeneratePress를 비롯한 구텐베르그를 적용한 워드프레스에서는 아래와 같은 커스텀 CSS 코드를 사용해서 유사하게 구현할 수 있습니다.

.entry-content>*:not(img) {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}Code language: PHP (php)

위에서 설명한 코드는 블로그 포스트 뿐만이 아니라 페이지 설정까지도 변경되는데요.

페이지 폭도 750px로 줄어버리기 때문에 페이지에서 다양한 방법 또는 폭을 활용해 콘텐츠를 구성하려는 경우 다소 남감한 상황이 될 수 있겠죠.

이런 문제를 풀기위해서 페이지 콘텐츠 영역을 넓게하고, 포스트에서만 좁게 보이는 방법을 찾아볼 필요가 있습니다.

일반적으로 포스트에만 적용하려면 .single css 코드를 사용합니다. 제가 여러가지 시행착오 끝에 확인한 것은 페이지는 적용되지 않고 블러그 포스팅만 적용되는 것은 아래 코드에서 부여주는 것처럼 .single .inside-article 코드를 사용하는 것이었습니다.

.single .inside-article > *:not(.page-header-image-single) {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}Code language: PHP (php)

조금 더 자세한 내용을 아래 글을 참조하면 좋을 것 같네요.

브래드크럼(Breadcrum) 위치를 콘텐측 폭과 맞추기

워드프레스 테마 GeneratePress에서 Rank Math 플러그인이나 Yoast SEO 플러그인을 이용해 브래드크럼(Breadcrum)을 적용하면 기본적으로 헤더부분의 폭을 따라갑니다.

즉 헤더부분을 Full Width를 적용 시 브래드크럼(Breadcrum) 주소도 맨 왼쪽부터 시작합니다.

그러면 콘텐츠를 중앙으로 배치한 경우 브래드크럼(Breadcrum)과 콘텐츠간 위치가 달라 보기에도 좋지 않고 가독성도 떨어집니다.

이런 경우 콘텐츠 폭에 맞추어 브래드크럼(Breadcrum) 위치도 텍스트 콘텐츠가 시작하는 곳에서부터 보여지도록 조정해 균형을 맞출 수 있는데요.

GeneratePress 테마에서 브래드크럼(Breadcrum) 위치를 콘텐측 폭과 맞추기
GeneratePress 사용팁 – GeneratePress 테마에서 브래드크럼(Breadcrum) 위치를 텍스트 콘텐측 폭과 맞춘 모습

이를 위해서는 아래와 같은 커스텀 CSS 코드를 추가합니다.
아래는 SEO 플러그인으로 Rank Math 플러그인을 사용 시 적용 가능한 커스텀 CSS 코드입니다.

.rank-math-breadcrumb {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;Code language: PHP (php)

GeneratePress 사용팁. 검색 입력 커서를 중앙으로

GeneratePress 테마의 네비게이션에 제공되는 검색창으로 검색 진행 시 헤더 폭에 맞추어 검색 입력 폼이 보여집니다.

헤더 부분이 Full Width라면 검색 폼 위치도 Full Width로 보여지고, 자동으로 가장 왼쪽에 입력 커서가 자리 잡습니다.

이는 검색 입력찬이 메뉴 오른쪽에 있는데 입력 커서는 맨 왼쪽으로 급격히 변동되기 때문에 30인치 이상 대형 모니터에서는 상당히 부담스러운 사용 경험을 줍니다.

그렇기 때문에 검색 폭을 줄이고 입력 커서도 중앙에 위치해 사용성을 조금 더 부드럽게 만듭니다.

GeneratePress 테마에서 검색 필드를 콘텐측 폭과 맞추기
GeneratePress 테마에서 검색 필드를 콘텐측 폭과 맞추기

이를 위해서는 GeneratePress 테마에서는 검색 폼 위치 관련 navigation-search 클래스를 조정하고, 검색 입력 커서 위치를 조정하기 위해 search-field 클래서를 이용합니다.

제가 사용한 커스텀 CSS 코드는 아래와 같습니다.

.navigation-search {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.search-field {
    text-align: center;
}Code language: PHP (php)

새롭게 뉴스레터를 시작했습니다.

1️⃣ 주식 등 투자 정보 : 기업 분석, IB 투자의견 등 투자 관련 내용
..... 테슬라 실적 및 IB들의의 테슬라 투자의견
2️⃣ 사례 및 트렌드 : 사례연구와 트렌드 관련 괜찮은 내용
.....유튜브와 경쟁대신 구독 전환한 비디오 플래폼 비메오 사례

서울에 생긴 Vultr 서버 100$ 프로모션

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션입니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

우분투 20.04와 PHP 8 기반 워드프레스 설치 방법

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments