작성자별로 Divi 블로그 게시물 색상을 지정하는 방법

Divi의 주요 목표 중 하나는 웹사이트의 모든 요소가 보기 좋게 보이도록 하는 것이며 블로그 게시물도 예외는 아닙니다. 그러나 항상 개선의 여지가 있으며 작성자별로 블로그 게시물을 색상으로 구분하면 사용자가 콘텐츠를 보다 효율적으로 탐색할 수 있고 좋아하는 작성자를 식별할 수 있습니다.

이 기사에서는 Divi 블로그 게시물에 색상 코드를 지정해야 하는 이유와 간단한 두 단계로 수행하는 방법에 대해 자세히 설명합니다. 새로운 페인트 칠할 시간입니다!

Divi 블로그 게시물의 색상 코딩을 고려해야 하는 이유

더 진행하기 전에 Divi 블로그 게시물의 색상 코딩이 의미하는 바를 명확히 합시다. 다음 섹션에서는 각 작성자가 자신의 게시물 배경으로 표시할 색상을 지정하는 방법을 알려 드리겠습니다. 이 예에서 나는 매우 인상적인 연한 파란색으로 내 자신의 게시물을 ( author1로) 할당했습니다.

효과 자체는 비교적 간단하지만 작가를 차별화하는 효과적인 방법을 제공합니다. 사용자는 좋아하는 작가의 신작을 한 눈에 쉽게 알아볼 수 있습니다. 물론 작가의 이름을 더 돋보이게 하는 것도 같은 효과를 낼 수 있지만 시각적으로 눈에 띄지 않을 수 있습니다.

이것에 대한 유일한 관심사는 색상 선택입니다. 이 섹션의 시작 부분에 있는 스크린샷을 예로 들어 보겠습니다. Divi 블로그 색인은 흰색 배경을 사용하므로 작성자의 게시물에 밝은 파스텔 색상을 사용하기로 결정했습니다. 다른 색 구성표를 선택하면 어떻게 되는지 봅시다.

물론 그것은 극단적인 예이지만 우리의 요점을 설명하는 데 도움이 됩니다. 게시물에 색상 코드를 지정하려면 필요한 경우 적절한 도구를 사용하여 팔레트를 신중하게 고려해야 합니다. 대비되는 색상을 사용하여 각 게시물의 차이점을 강조하면 사용자가 작성자를 빠르게 식별하는 데 도움이 될 수 있지만 블로그 스타일을 혼란스럽게 만들고 콘텐츠를 읽기 어렵게 만들 수도 있습니다.

작성자별로 Divi 블로그 게시물에 색상을 지정하는 방법(2단계)

이제 이론을 다루었으므로 Divi 블로그 게시물에 실제로 색상을 지정하는 방법으로 넘어갈 차례입니다. 이 기능을 활성화하려면 두 단계만 거치면 되지만 시작하기 전에 고려해야 할 몇 가지 사항이 있습니다 .

우선 WordPress 사이트를 백업하고 싶을 것입니다. 이는 변경할 때 항상 좋은 생각입니다. 둘째, Divi 하위 테마를 만들고 싶을 것이므로 테마가 업데이트된 후에도 수정 사항이 유지됩니다.

마지막으로 1단계에서 FTP 클라이언트를 사용해야 합니다. 우리는 FileZilla를 사용할 것이지만 선호하는 다른 도구가 있다면 그것을 사용하십시오.

1단계: 자녀 테마의 functions.php 파일에 코드 조각 추가

이렇게 하려면 FTP 클라이언트를 열고 사이트 서버에 로그인해야 합니다. 거기에서 public_html / wp-content/themes/ 디렉토리로 이동한 다음 하위 테마의 폴더를 찾으십시오. public_html 또는 루트 폴더는 호스트에 따라 www 또는 사이트 도메인 이름을 따서 명명될 수 있습니다.

자식 테마의 폴더를 찾았으면 폴더를 열고 그 안에 있는 functions.php 파일을 찾으세요. 이제 마우스 오른쪽 버튼으로 클릭하고 보기/편집 옵션을 누르 십시오 .

기본 텍스트 편집기로 파일을 열라는 메시지가 표시됩니다. 우리는 자식 테마를 다루고 있기 때문에 여러분의 functions.php 파일은 부모의 기능을 대기열에 넣는 것 외에는 대부분 맨손이어야 합니다. 우리는 자동으로 author- 접두사와 저자의 각각에 대해 새로운 클래스를 생성하는 코드 조각을 추가 할 것입니다. 예를 들어 John이라는 WordPress 사용자가 있는 경우 author-john 클래스를 사용할 수 있습니다. 이렇게 하면 나중에 CSS 코드를 추가할 수 있습니다.

다음으로 // END ENQUEUE PARENT ACTION 라인 뒤에 다음 PHP 스니펫을 추가합니다.

function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );

return $classes;}

add_filter( 'post_class', 'et_set_author_class' );

이제 변경 사항을 저장하고 편집기를 닫으면 완료됩니다! 다루는 저자에 관계없이 클래스가 작동하려면 소문자를 사용해야 한다는 점을 명심하십시오. 이는 2단계에서 중요할 것입니다.

2단계: Divi의 사용자 정의 CSS 옵션을 사용하여 각 작성자의 색상 지정

이제 새로운 기능이 준비되었습니다. 다음 단계는 각 작성자의 색상을 설정하는 것입니다. Divi는 여기에 추가하는 모든 코드가 전체 테마에 영향을 미치기 때문에 사용자 정의 CSS 기능을 사용하여 이 작업을 수행할 수 있습니다. 그것을 찾으려면 WordPress 대시보드로 이동하여 Divi > 테마 옵션 탭으로 이동한 다음 페이지 끝에 있는 사용자 정의 CSS 상자까지 아래로 스크롤합니다.

각 작성자에 대해 이 필드에 새 CSS 줄을 추가해야 합니다. 예를 들어 사용자 이름이 author1 인 작성자가 있는 경우 특정 색상을 설정하는 방법은 다음과 같습니다.

.author-author1 {background-color: #C1F3FA !important;}

사용자 이름에 관계없이 클래스에 author- 접두사를 추가해야 함을 명심하십시오. 배경색을 표시한 후 코드가 !important 임을 선언해야 합니다. 간단히 말해서, 이것은 코드에 더 많은 가중치를 주고 발생할 수 있는 충돌을 무시합니다. 그렇지 않으면 이 기능이 작동하지 않습니다.

마지막으로 한 가지 예를 살펴보겠습니다. 여기서는 두 명의 작성자에게 다른 색상을 할당합니다. 다음은 Divi 사용자 정의 CSS 필드에 추가한 코드입니다.

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

이제 전면에서 보면 다음과 같습니다.

색상 선택을 제쳐두고 Divi 블로그 게시물에 적용할 수 있는 다른 조정이 있습니다. 예를 들어, 블로그 발췌 부분의 길이를 조정하거나 포스트 '카드'의 스타일을 여러 가지 방법으로 조정할 수 있습니다. 주요 목표는 자신의 블로그에 완벽한 스타일을 찾는 것이므로 Divi를 사용하여 무엇을 할 수 있는지 두려워하지 마십시오!

결론

작성자별로 블로그 게시물에 색상을 지정하는 것은 사용자가 콘텐츠를 훨씬 더 쉽게 탐색하는 데 도움이 되는 간단한 기능입니다(특히 광범위한 아카이브가 있는 경우). 또한 많은 사용자가 색상만으로 좋아하는 작성자의 게시물을 알아볼 수 있다는 사실에 감사할 것입니다.

파일 조정을 시작하기 전에 사이트를 백업하고 하위 테마를 설정해야 변경 사항이 나중에 유지됩니다. 완료되면 작성자별로 Divi 블로그 게시물의 색상을 지정하기 위해 따라야 하는 두 단계입니다.

1. 자식 테마의 functions.php 파일을 수정하세요.
2. Divi의 사용자 정의 CSS 옵션을 사용하여 각 작성자의 색상을 지정하십시오.

Divi 블로그 게시물을 작성자별로 색상 지정하는 방법에 대해 질문이 있습니까? 아래 댓글 섹션에서 문의하세요!

RaZZers/Shutterstock.com의 기사 축소판 이미지.