CSS로 WordPress 테마 사용자 지정

테마는 WordPress의 가장 큰 판매 포인트 중 하나입니다. 올바른 테마는 웹 사이트를 정말 돋보이게 만들 수 있습니다. 그러나 일반적으로 모든 것을 제대로 하려면 사용하는 테마에 대해 최소한 몇 가지 사용자 지정 변경을 수행하는 것이 좋습니다.

대부분의 경우 CSS(Cascading Style Sheets)를 사용하여 테마 스타일을 사용자 지정해야 합니다. 워드프레스에서는 이를 수행할 수 있는 몇 가지 방법이 있습니다. 코드를 다루는 경험이 없더라도 WordPress 테마에 자신만의 CSS 조정을 쉽게 추가할 수 있습니다.

이 가이드에서는 WordPress에서 사용자 지정 CSS를 추가하고 편집하는 데 사용할 수 있는 세 가지 방법을 살펴보겠습니다. 전체 프로세스를 안내하고 각 기술을 사용하는 것이 적합한 경우에 대해 이야기합니다. 시작하자!

Theme Customizer로 사용자 정의 CSS 추가

경험 수준: 초심자

WordPress Customizer를 사용하면 웹사이트 디자인을 변경하고 실시간으로 미리 볼 수 있습니다. 액세스하려면 WordPress 대시보드에 로그인하고 모양 > 사용자 지정 탭으로 이동합니다.

여기에서 놀 수 있는 많은 설정이 있습니다. 그러나 바로 지금 추가 CSS 탭을 찾으십시오. 클릭하면 사용자 지정 CSS를 추가할 수 있는 필드가 있는 새 섹션이 열립니다.

CSS를 처음 사용하는 경우 공식 Codex에서 WordPress와 함께 CSS를 사용하는 방법에 대해 자세히 알아볼 수 있습니다. CSS의 기초에 대한 다른 훌륭한 리소스도 많이 있으며 그 중 몇 가지를 확인하는 것이 좋습니다.

CSS는 다소 복잡할 수 있지만 기본 사항만 알면 달성할 수 있는 것이 많습니다. 워드프레스 커스터마이저 사용의 가장 좋은 점은 CSS를 사용하여 변경한 사항을 즉시 미리 볼 수 있다는 것입니다. 즉, 이 접근 방식은 CSS 작동 방식을 학습하는 데 적합합니다.

참고 : 테마를 변경하면 사용자 지정 프로그램을 사용하여 변경한 내용이 유지되지 않습니다. 또한 현재 테마를 업데이트하면 맞춤 CSS가 지워질 수 있습니다. 따라서 테마 옵션을 많이 변경하거나 중간에 변경하려는 경우에는 이 방법을 권장하지 않습니다.

플러그인으로 사용자 지정 CSS 추가

경험 수준: 초급 ~ 중급

위의 방법은 잘 작동하지만 플러그인을 사용하여 옵션을 확장할 수 있습니다. 다음 섹션에서는 WordPress 테마를 사용자 지정할 수 있는 세 가지 플러그인을 살펴보겠습니다.

참고 : 플러그인을 사용하여 WordPress CSS를 편집하는 경험 수준은 사용하는 도구에 따라 다릅니다. 모두 테스트해보고 어느 것이 가장 편안한지 확인하는 것이 좋습니다.

고급 CSS 편집기

WordPress Customizer 사용을 좋아하지만 더 많은 옵션을 제공하고 싶다면 이 플러그인을 살펴볼 가치가 있습니다. 고급 CSS 편집기를 사용하면 데스크톱, 휴대폰 및 태블릿용 사용자 지정 CSS를 추가할 수 있습니다. 이렇게 하면 각 유형의 장치에서 웹 사이트가 표시되는 방식을 미세 조정할 수 있습니다.

WordPress 플러그인을 설치한 후 대시보드에서 Appearance > Customizer 탭으로 이동합니다. 각 장치 유형에 대한 여러 편집기에 대한 액세스를 제공하는 새로운 고급 CSS 편집기 옵션이 표시되어야 합니다.

원하는 사용자 지정 CSS를 추가하고 올바르게 작동하는지 테스트한 다음 변경 사항을 테마에 저장하기만 하면 됩니다.

장점:

• 웹사이트가 모든 장치에서 어떻게 보이는지 완전히 제어할 수 있습니다.
• 여전히 사용자 정의 프로그램을 통해 테마를 편집할 수 있습니다.

단점:

• 여러 유형의 장치에 대한 사용자 정의 CSS를 추가하는 것은 많은 작업이 될 수 있습니다.

평균 평점: 4.5/5

참고: 이 플러그인에는 사이트 로딩 시간을 줄이는 데 도움이 되는 CSS 축소 옵션도 포함되어 있습니다.

모듈식 맞춤 CSS

Modular Custom CSS를 사용하면 WordPress Customizer를 통해 테마에 CSS를 추가할 수 있습니다. 그러나 기본 CSS 편집기에 매우 유용한 몇 가지 기능도 추가합니다. 더 구체적으로 말하자면, 이 플러그인을 사용하면 개별 테마에 대한 사용자 정의 CSS를 생성하고 설정한 모든 테마에서 지속되는 전역 변경을 수행할 수 있습니다.

이러한 필드에 액세스하려면 모양 > 사용자 정의 > 추가 CSS 섹션으로 돌아가야 합니다. 일단 거기에 있으면 변경을 시작할 수 있습니다.

장점:

• 특정 테마에 대해서만 사용자 지정 CSS를 추가하고 테마를 전환하더라도 지속되는 변경 사항을 적용할 수 있습니다.

단점:

• '전역' CSS는 모든 테마에서 제대로 재생되지 않을 수 있으므로 새 테마로 전환할 때 주의해야 합니다.

평균 평점: 5/5

사이트 원본 CSS

SiteOrigin CSS는 지금까지 이야기한 플러그인과 다릅니다. Customizer에 새로운 기능을 추가하는 대신 독립 실행형 WordPress CSS 편집기를 제공합니다. 플러그인을 설치한 후 Appearance > Custom CSS 탭으로 이동하여 이 새 편집기에 액세스할 수 있습니다.

언뜻 보기에 이 CSS 편집기는 그다지 좋아 보이지 않습니다. 그러나 눈 아이콘을 클릭하면 비주얼 편집기가 실행됩니다. 여기에서 테마의 모든 요소를 ​​클릭하고 CSS를 사용하여 쉽게 편집할 수 있습니다.

SiteOrigin CSS 플러그인은 처음에는 약간 압도적일 수 있습니다. 그러나 올바른 선택자를 찾을 필요가 없기 때문에 많은 시간을 절약할 수도 있습니다. 수정할 요소를 클릭한 다음 원하는 CSS 코드를 추가하기만 하면 됩니다.

장점:

• 웹사이트에서 원하는 요소를 클릭하여 편집할 수 있습니다.
• 이 플러그인을 사용하면 글꼴과 같은 CSS를 사용하지 않고도 테마의 일부 간단한 측면을 변경할 수 있습니다.

단점:

• 여러 요소를 조정하는 경우 테마에 추가하는 모든 사용자 지정 CSS를 추적하기 어려울 수 있습니다.

평균 평점: 4.9/5

하위 테마 스타일시트로 CSS 편집

경험 수준: 고급

자식 테마는 기존 테마('부모'라고 함)의 복사본입니다. 하위 테마를 사용하면 WordPress 웹사이트를 안전하게 변경할 수 있습니다. 맞춤 CSS 조정을 잃지 않고 상위 테마를 계속 업데이트할 수 있기 때문입니다. 또한 사이트에 부정적인 영향을 미치는 CSS를 추가하는 경우 간단히 하위 테마를 비활성화할 수 있습니다.

자식 테마에 추가하는 사용자 정의 CSS는 부모의 스타일을 재정의합니다. 그러나 이것이 작동하려면 먼저 자식 테마를 만드는 방법을 알아야 합니다. '자식'이 준비되면 FileZilla와 같은 FTP 클라이언트를 사용하여 해당 파일에 액세스할 수 있습니다.

FTP를 통해 웹 사이트에 연결한 후에는 종종 public_html 또는 www 라고 하거나 웹 사이트 이름을 따서 명명된 루트 폴더를 찾고 싶을 것입니다.

다음으로 wp-content/themes 디렉토리로 이동합니다. 여기에서 설정한 하위 항목을 포함하여 모든 테마에 대한 개별 폴더를 찾을 수 있습니다. 하위 테마의 폴더를 열고 다음에서 style.css 파일을 찾습니다.

테마 파일을 마우스 오른쪽 버튼으로 클릭하고 보기/편집 옵션을 선택합니다. 이렇게 하면 기본 텍스트 편집기를 사용하여 파일이 열리므로 변경할 수 있습니다. 즉, 사용자 지정 CSS를 테마에 추가할 수 있으며 이제 WordPress 사용자 지정 프로그램 대신 전체 텍스트 편집기를 사용하고 있습니다.

완료되면 변경 사항을 파일에 저장하고 편집기를 닫습니다. 그런 다음 웹사이트를 방문하여 변경한 내용이 의도한 대로 작동하는지 확인할 수 있습니다. 그렇지 않은 경우 style.css 파일로 돌아가서 CSS를 계속 조정할 수 있습니다.

참고: 이것은 높은 수준의 개요이며 자식 테마를 설정하고 사용하는 데 더 많은 내용이 있습니다. 이 프로세스를 처음 사용하는 경우 신중하게 진행하는 것이 좋습니다.

테마 사용자 정의 기능이 있는 사용자 정의 CSS vs. CSS 플러그인 vs. 하위 테마 스타일시트

보시다시피 WordPress에 사용자 정의 CSS를 추가할 때 많은 옵션이 있습니다. 그러나 올바른 접근 방식을 선택하는 것은 어려울 수 있습니다. 플랫폼 및 일반적으로 CSS에 대한 경험 수준에 따라 선택 사항을 분류해 보겠습니다.

• WordPress를 처음 사용하고 CSS 사용에 익숙하지 않습니다. 이 시나리오에서 가장 좋은 방법은 WordPress Customizer를 사용하는 것입니다. 이를 통해 변경 사항을 즉시 미리 보고 CSS 사용에 익숙해질 수 있습니다.
• WordPress 및 CSS에 대한 경험이 있습니다. 이 단계에서는 기본 사용자 정의 프로그램이 제공하는 것보다 더 많은 옵션이 필요합니다. 따라서 WordPress에서 사용자 지정 CSS를 편집하려면 기능을 개선하는 플러그인을 사용하는 것이 좋습니다.
• 당신은 CSS 사용에 익숙한 WordPress 베테랑입니다. CSS와 코드 스니펫이 부담스럽지 않다면 자식 테마를 설정하고 해당 스타일시트를 수동으로 편집하고 싶을 것입니다.

이것은 단지 지침일 뿐이며 가장 편안하다고 느끼는 접근 방식을 자유롭게 사용해야 한다는 점을 명심하십시오.

훌륭한 디자인 및 최고의 호스팅으로 디지털 경험 향상

웹사이트의 디자인은 방문자가 웹사이트에 대해 어떻게 생각하는지에 중요한 역할을 합니다. WordPress를 사용하면 수천 개의 테마에 액세스할 수 있으며 사용자 지정 CSS를 사용하여 테마를 편집할 수 있습니다.

그러나 성공적인 웹사이트를 운영하는 것은 단지 외모에 관한 것이 아닙니다. 또한 뛰어난 성능, 보안 및 지원을 제공하는 WordPress 웹 호스팅이 필요합니다. WP 엔진을 사용하면 모든 플랜에서 이러한 모든 기능에 액세스할 수 있습니다!