CSS로 WordPress 테마를 사용자 정의하는 방법

WordPress 사이트를 실험하고 CSS로 모양을 변경할 수 있다는 것을 알고 계십니까? 약간의 미적 변화를 추가하거나, 색상을 추가하거나, 레이아웃을 변경하거나, WordPress 테마를 완전히 변경할 수도 있습니다.

웹사이트의 모양을 제어하면 원하는 방식으로 웹사이트를 만들 수 있습니다.

브랜드 웹사이트에 개인적인 터치를 추가하여 동일한 WordPress 테마를 사용하는 다른 사람이나 기업과 훨씬 다르게 만들 수 있습니다!

이 게시물에서는 CSS로 WordPress 테마를 사용자 정의하는 방법을 자세히 살펴보겠습니다.

CSS 란 무엇입니까?

CSS 또는 Cascading Style Sheets는 웹 페이지를 표시하는 데 사용되는 웹 언어입니다. CSS를 사용하면 레이아웃, 색상, 글꼴, 배경 및 사용자에게 웹 페이지를 표시할 수 있는 기타 요소를 설정할 수 있습니다. 이것이 사용자 측에서 실행되는 CSS 프론트엔드 클라이언트 측 언어를 호출하는 이유입니다. CSS는 HTML 및 Javascript와 함께 사용되어 웹사이트를 반응형으로 만듭니다. CSS를 배우고 구현하려면 하드코어 프로그래머가 되어야 한다고 생각한다면 그것은 사실이 아닙니다. 이전에 프로그래밍에 대한 지식이 없더라도 CSS를 쉽게 배우고 이를 사용하여 사이트의 프레젠테이션을 변경할 수 있습니다.

워드프레스란?

WordPress는 웹사이트나 블로그를 시작하는 가장 인기 있고 가장 쉬운 방법입니다. 기술적으로 말하면 WordPress는 오픈 소스 콘텐츠 관리 시스템입니다. 콘텐츠, 레이아웃, 보안 등과 같은 웹사이트의 모든 중요한 측면을 처리합니다. WordPress를 사용하여 모든 종류의 웹사이트를 만들 수 있습니다. 예를 들어 비즈니스 웹사이트, 전자상거래 웹사이트, 포트폴리오, 이력서, 소셜 네트워크 등 WordPress는 무료로 사용할 수 있으며 다양한 테마와 플러그인이 제공됩니다. CSS를 사용하여 WordPress 사이트의 모양과 느낌을 변경할 수 있습니다.

CSS와 워드프레스

WordPress 테마 편집을 시작하려면 먼저 템플릿 파일, 템플릿 태그 및 CSS 스타일시트와 같은 몇 가지 사항을 이해해야 합니다. 템플릿 파일은 WordPress 테마를 제어합니다. header.php, archive.php와 같은 다른 파일을 볼 수 있습니다. WordPress 테마를 제어하는 ​​템플릿 파일입니다. 템플릿 태그는 이러한 파일 및 기타 데이터베이스 요소를 제어하는 ​​데 사용됩니다. CSS 스타일시트 또는 style.css는 웹사이트의 모양을 변경하기 위해 찾아야 하는 파일입니다. style.css에서 코드를 편집하여 WordPress 테마를 사용자 정의합니다.

CSS로 WordPress 테마를 사용자 정의하는 방법

먼저 CSS로 WordPress 테마를 사용자 정의하려면 특정 코드를 추가하거나 이미 작성된 코드를 편집해야 한다는 점을 이해해야 합니다. 테마 편집을 시작하기 전에 최소한 CSS, HTML, JavaScript 및 PHP의 기본 사항을 배우는 것이 좋습니다.

주목해야 할 또 다른 사항은 WordPress 테마의 스타일시트를 변경하려는 경우 테마가 업데이트되면 이러한 변경 사항이 제거된다는 것입니다. 따라서 하위 테마에 대해 배우고 style.css, functions.php 또는 기타 테마 템플릿 파일을 사용하여 변경하려면 하위 테마를 사용해야 합니다. 나는 이 기사의 뒷부분에서 자식 테마에 대해 이야기했습니다.

테마에 CSS를 편집하거나 추가하는 두 가지 방법이 있습니다.

#1 대시보드 사용

이렇게 하면 WordPress 대시보드의 CSS 스타일시트를 사용하여 WordPress 테마를 직접 편집할 수 있습니다. 그러나 여기에서 수행된 큰 변경 사항은 되돌리기 어려울 수 있다는 점에 유의해야 합니다. 따라서 WordPress 테마의 원본 CSS를 백업한 다음 변경하는 것이 좋습니다. 또한 귀하의 사이트에 대한 하위 테마를 만드는 것이 좋습니다. 그것이 무엇인지 모르는 경우 다음 섹션을 읽고 다시 돌아오십시오.

하위 테마를 만든 다음 해당 하위 테마에서 모양으로 이동한 다음 테마 편집기로 이동합니다. 하위 테마를 사용하면 팝업이 표시되지만 걱정할 필요는 없습니다. ' 이해 했습니다'를 클릭하면 스타일시트가 입력됩니다. header.php, functions.php 등과 같은 템플릿 파일을 변경하려면 먼저 PHP를 배우고 코딩 기술을 시도해야 합니다. 그렇지 않으면 스타일시트 편집을 계속하십시오.

WordPress의 하위 테마는 무엇입니까?

하위 테마는 원래 테마(상위 테마라고도 함)의 복제본입니다. 자식 테마에는 부모 테마의 기능과 스타일이 포함됩니다. 사이트 디자인을 수정하면서 원본 코드를 그대로 유지하려면 자식 테마를 사용하는 것이 좋습니다. 따라서 자식 테마에서 새롭고 더 나은 디자인을 만들고 부모 테마의 기능을 유지할 수 있습니다. 하위 테마를 사용하면 다음과 같은 몇 가지 이점이 있습니다.

• 상위 테마는 안전하고 편집되지 않으므로 원본 코드를 엉망으로 만드는 것에 대해 걱정할 필요가 없습니다.
• 코딩을 사용하여 상위 테마의 기능을 확장하고 실험하고 새로운 것을 만들 수 있습니다.
• 처음부터 테마를 만들 필요가 없습니다. 우연히 특정 기능을 잊어버린 경우 상위 테마의 코드가 있습니다.

그러나 자식 테마를 사용할 때는 매우 주의해야 합니다. 그 이유 중 하나는 코딩 기술과 경험이 필요하기 때문입니다. CSS, HTML, JavaScript 및 PHP를 처음 사용하는 경우 먼저 시간을 내어 전문가가 되십시오. 그렇지 않으면 학습 곡선이 상당히 높을 수 있습니다.

하위 테마를 사용할 때 주의해야 할 또 다른 사항은 업데이트를 먼저 확인해야 한다는 것입니다. 부모 테마가 원하지 않는 기능으로 업데이트된 경우 자녀의 테마에 반영되므로 WordPress 테마를 업데이트하면 안 됩니다. 경우에 따라 기능 중 하나가 기본 테마에 삭제되고 업데이트하면 하위 테마가 영향을 받을 수 있습니다. 따라서 코딩 작업을 늘리십시오.

#2 FTP 서버 사용하기

테마 대시보드에 직접 액세스할 수 없는 경우가 있습니다. 때때로 플러그인을 사용하면 해당 기능이 비활성화됩니다. 따라서 FTP 또는 파일 전송 프로토콜을 사용하여 사이트 파일에 원격으로 액세스해야 합니다. FTP 클라이언트 응용 프로그램을 다운로드하여 시작하십시오. 호스트에게 연락하여 FTP 자격 증명을 요청하십시오.

자격 증명을 입력하면 style.css에 액세스할 수 있습니다. 이제 파일을 수정하고 변경 사항을 저장하고 서버에 다시 업로드하십시오. 이것은 사이트에 CSS를 추가하는 매우 바쁜 방법일 수 있으므로 대시보드에 액세스할 수 없는 경우에만 사용하십시오.

WordPress 사이트에 CSS를 추가하는 쉬운 방법

WordPress 사이트에 CSS를 추가할 수 있는 두 가지 쉬운 방법이 있습니다. 여기에는 WordPress 사용자 지정 프로그램 또는 플러그인 사용이 포함됩니다. 이러한 방법을 사용하여 CSS 코드를 추가하는 것이 훨씬 쉬울 것입니다. WordPress Customiser 또는 플러그인을 사용하여 CSS를 추가해도 테마가 업데이트되면 코드가 사라지지 않습니다. 그러나 의도하지 않은 일이 발생할 경우를 대비하여 웹사이트의 원본 코드를 백업해 두는 것이 좋습니다. 이제 WordPress 사이트에 CSS를 추가하는 두 가지 쉬운 방법을 확인해 보겠습니다.

#1 워드프레스 커스터마이저를 통한 편집

WordPress 백엔드에 로그인하기만 하면 됩니다. 모양 을 클릭한 다음 사용자 정의 를 클릭하십시오 . 사용자 정의 화면이 열립니다. 이 화면은 그 순간에 웹사이트의 미리보기를 보여주고 화면 왼쪽에는 색상, 메뉴 또는 기타 위젯과 같은 요소를 사용자 정의할 수 있는 몇 가지 옵션이 있습니다.

화면 왼쪽에 추가 CSS라는 옵션이 표시됩니다. 여기에서 마법을 뿌려야 합니다. 추가 CSS를 클릭하면 웹사이트 코드가 있는 새 페이지가 열립니다. 이제 코드를 변경할 수 있으며 올바르게 작성했다면(오류 없음!) 변경 사항이 미리보기에 반영된 것을 볼 수 있습니다.

여기에 작성하는 CSS 코드는 테마가 업데이트되면 변경되거나 사라지지 않습니다! 하지만 새로운 테마로 이동하면 여기에 쓰여진 코드가 지워집니다. 따라서 테마를 변경하기 전에 CSS를 백업하는 것이 좋습니다.

#2 플러그인 사용

이 섹션에서는 WordPress 테마의 CSS를 편집하는 데 사용할 수 있는 네 가지 플러그인( Advanced CSS Editor , Modular Custom CSS , SiteOrigin CSS 및 CSS Hero )에 대해 설명합니다. 모르는 경우 WordPress 플러그인은 WordPress에 연결하여 기능을 확장할 수 있는 작은 소프트웨어입니다. 일부 플러그인은 무료로 사용할 수 있지만 일부 플러그인은 WordPress 사이트에 추가하려면 약간의 비용을 지불해야 합니다. 플러그인을 사용하면 몇 번의 클릭만으로 WordPress 사이트에 CSS를 편집하거나 추가할 수 있습니다!

고급 CSS 편집기 플러그인 사용

제가 추천하는 첫 번째 플러그인은 Advanced CSS Editor입니다. 이 플러그인을 사용하면 데스크톱, 태블릿 및 휴대전화에서 웹사이트가 어떻게 보이는지 CSS를 추가할 수 있습니다. 이렇게 하면 모든 장치에 맞게 웹사이트를 미세 조정할 수 있습니다. 편집을 시작하려면 플러그인을 설치하세요. WordPress 대시보드로 이동하여 모양을 클릭한 다음 사용자 지정 을 클릭합니다. 고급 CSS 편집기라는 새 옵션이 표시됩니다. 원하는 사용자 정의 CSS를 추가하고 변경 사항을 저장하십시오.

이 플러그인을 사용하면 다양한 장치에서 웹사이트가 어떻게 보이는지 제어할 수 있다는 큰 이점이 있습니다. 또한 1번 항목에서 말한 기술을 사용하여 WordPress 테마를 편집할 수 있습니다. 그러나 코딩에 익숙하지 않은 일부 사람들에게는 모든 유형의 장치를 변경하는 것이 많은 작업이 될 수 있습니다. 그들은 먼저 모든 장치 유형에 대해 CSS를 작성하는 방법을 배워야 합니다.

모듈식 사용자 정의 CSS 플러그인 사용

제가 추천하고 싶은 두 번째 플러그인은 Modular Custom CSS입니다. 이 플러그인을 사용하면 WordPress 사이트 테마를 변경할 수 있습니다. 예를 들어, 현재 하나의 테마를 사용 중이고 Modular Custom CSS를 사용하여 해당 테마를 변경하는 경우입니다. 그런 다음 사이트에 대한 다른 테마를 선택하기로 결정합니다. 따라서 첫 번째 테마의 변경 사항은 삭제되지 않습니다. 이 플러그인에서는 그대로 유지됩니다. 이 플러그인을 사용하여 전역 CSS를 추가할 수도 있습니다. 해당 CSS는 테마 변경에도 불구하고 동일하게 유지됩니다.

이 플러그인을 사용하려면 먼저 플러그인을 다운로드하여 WordPress 사이트에 추가하십시오. 그런 다음 모양 -> 사용자 지정 -> 추가 CSS 를 클릭합니다. 이 방법에서 찾을 수 있는 유일한 단점은 전역 CSS를 추가하는 것이 항상 최선의 아이디어는 아닐 수도 있다는 것입니다. 때로는 전역 CSS가 테마와 함께 작동하지 않아 엉망이 될 수 있습니다.

SiteOrigin CSS 플러그인 사용

제가 추천하는 세 번째 플러그인은 SiteOrigin CSS입니다. 이 플러그인은 실시간으로 사이트의 모양과 느낌을 편집할 수 있는 시각적 컨트롤을 제공합니다. 이 플러그인은 초보자와 고급 CSS 사용자 모두에게 적합합니다. 실시간 미리보기 및 시각적 컨트롤은 초보자에게 도움이 되며 고급 사용자는 이 플러그인의 코드 자동 완성 기능을 사용하여 빠르게 코딩할 수 있습니다.

이 플러그인은 WordPress용 독립 실행형 CSS 편집기를 엽니다. 이 플러그인에 액세스하려면 먼저 플러그인을 다운로드하고 WordPress 사이트에 추가하십시오. 그런 다음 모양 -> 사용자 정의 CSS 를 클릭합니다. 이 플러그인의 가장 큰 특징은 웹사이트의 모든 요소를 ​​클릭하기만 하면 편집할 수 있다는 것입니다. CSS를 사용하지 않고 테마의 일부 간단한 요소를 변경할 수 있습니다. 그러나 이러한 기능의 한 가지 단점은 테마의 여러 ​​다른 요소를 변경하는 경우 해당 요소를 추적하기 어려울 수 있다는 것입니다.

CSS Hero 플러그인 사용

자, 이것은 흥미로운 것입니다. 세 번째 플러그인 권장 사항에는 끌어서 놓기를 사용하여 WordPress 사이트에서 CSS를 편집하는 데 도움이 되는 플러그인이 포함되어 있습니다. CSS 영웅으로 알려져 있습니다. 이 플러그인을 사용하여 CSS를 편집하려면 변경하려는 요소 위에 마우스를 놓고 클릭하기만 하면 됩니다. 그런 다음 원하는 대로 조정할 수 있습니다. 다음은 이 플러그인의 몇 가지 놀라운 기능입니다.

• 이 플러그인에는 글꼴 스타일과 지형을 쉽게 편집할 수 있는 기능이 포함되어 있습니다. 플러그인은 Google 글꼴 및 TypeKit 글꼴을 지원합니다.
• 색상 선택기를 사용하고 라이브 색상 및 배경 변경을 실험할 수도 있습니다. 최근 사용한 색상을 쉽게 찾을 수 있습니다.
• 슬라이더를 끌어 여백이 어떻게 보이는지 확인할 수 있습니다.
• 플러그인은 그라디언트, 상자 그림자, 텍스트 그림자 및 기타 최신 CSS 속성과 같은 사이트 요소도 지원합니다.
• 이 플러그인으로 편집 스냅샷을 저장할 수 있습니다. 따라서 모든 것을 라이브로 만들 필요는 없습니다. 계속 작업하고 최종 버전을 게시하십시오.
• 이 플러그인은 테마 파일에 영향을 주지 않습니다. 따라서 변경 사항을 망치는 업데이트에 대해 걱정할 필요가 없습니다.

CSS로 WordPress 테마를 사용자 정의하는 다양한 방법 비교

그래서 오늘 우리는 CSS를 사용하여 WordPress 사이트를 사용자 정의하는 4가지 다른 방법에 대해 배웠습니다. 대시보드를 사용하여 CSS를 편집하거나 WordPress 테마에 추가하거나 FTP 애플리케이션을 사용할 수 있습니다. WordPress Customiser를 사용하여 CSS를 추가하거나 편집할 수 있습니다. 또는 마지막으로 일부 플러그인을 사용하여 CSS로 WordPress 테마를 사용자 정의할 수 있습니다.

• 워드프레스와 CSS가 처음이라면 워드프레스 커스터마이저를 사용하여 CSS를 편집하거나 추가하는 것이 좋습니다. 이렇게 하면 미리 보기에서 변경 사항을 확인할 수 있으며 테마가 업데이트되면 변경 사항이 제거되는 것에 대해 걱정할 필요가 없습니다.
• CSS 및 WordPress에 대한 경험이 있고 이전에 플러그인 작업을 한 적이 있다면 오늘 공유한 네 가지 플러그인 중 하나를 선택하는 것이 좋습니다. 플러그인은 사이트를 향상시킬 수 있는 더 나은 옵션과 범위를 제공합니다.
• CSS 베테랑이라면. 당신은 웹사이트를 만들고 CSS가 완벽하게 작동하는 노하우를 가지고 있습니다. 그런 다음 대시보드 또는 FTP를 사용하여 WordPress 스타일시트에서 직접 변경하는 것이 좋습니다.

웹사이트가 어떻게 보이는지 중요합니다

웹사이트의 디자인, 레이아웃, 색상, 글꼴 또는 테마는 매우 중요합니다. 사용자가 회사에 대해 갖고 싶은 느낌을 전달하는 데 도움이 됩니다. 고유한 브랜드 이미지를 구축하고 당신의 아이덴티티를 정의할 수 있습니다.

웹사이트의 디자인과 레이아웃도 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 디자인이 좋지 않거나 잘못된 위치에 광고를 배치했거나 웹사이트의 색상이 상당히 산만해지면 이 모든 것이 사용자 경험에 영향을 미칠 수 있습니다.

훌륭한 디자인과 레이아웃은 메시지가 사용자에게 전달되는 방식을 제어하는 ​​데 도움이 될 수 있습니다. 적시에 그들의 관심을 끌고 목표를 달성하는 길로 인도할 수 있습니다. 따라서 WordPress 사이트의 CSS를 변경, 추가 또는 편집하는 것은 책임의 문제입니다. 사용자를 위해 더 나은 웹사이트를 만드는 책임.

CSS로 WordPress 테마를 사용자 정의하는 이 팁과 트릭이 웹사이트에 개인화된 터치를 제공하는 데 도움이 되기를 바랍니다. 그 중 하나를 사용하거나 과거에 사용한 적이 있다면 댓글 섹션에서 경험을 공유하고 널리 알리십시오!