다양한 플러그인, 다양한 스타일: WordPress로 일관된 사용자 경험 만들기

웹사이트에 WordPress 플러그인을 추가하면 모든 종류의 멋진 기능을 사용할 수 있습니다. 장바구니와 같은 고가 품목이든 관련 게시물 위젯과 같은 작은 개선 사항이든 무한한 가능성이 있습니다.

그러나 기능은 패키지의 일부일 뿐입니다. 많은 WordPress 플러그인에는 자체 CSS도 포함되어 있습니다. 때로는 이러한 스타일이 웹사이트의 프런트 엔드에서 눈에 띄게 나타납니다.

이론적으로 그것은 좋은 일이 될 수 있습니다. 그러나 이 CSS 중 일부는 매우 독단적입니다. 웹사이트에 이미 설정한 스타일과 상당히 다르게 보일 수 있습니다. 따라서 추가하는 플러그인이 많을수록 웹사이트의 모양이 일관성이 없어질 수 있습니다.

좋은 소식은 문제를 해결할 수 있는 몇 가지 다른 방법이 있다는 것입니다. 오늘은 플러그인의 CSS가 UX를 방해하지 않도록 하는 몇 가지 기술을 소개합니다.

테마에서 플러그인의 CSS 재정의

불량 플러그인 스타일을 처리하는 첫 번째 방법은 매우 간단합니다. 그러나 약간의 인내가 필요합니다. 여기에는 사이트의 UI와 일치하지 않는 특정 CSS 클래스 또는 ID를 찾는 작업이 포함됩니다.

적절한 CSS를 찾으려면 웹 브라우저의 개발자 도구에 대한 약간의 지식이 필요합니다. 페이지에서 요소를 마우스 오른쪽 버튼으로 클릭하고 " Inspect "(또는 Safari의 경우 " Inspect Element ")를 선택하면 관련 HTML 마크업 및 CSS가 표시됩니다.

거기에서 약간의 실험이 필요합니다. 예를 들어, 때때로 오른쪽 클릭한 요소가 스타일을 제어하는 ​​요소가 아닐 수도 있습니다. 이를 위해서는 인스펙터의 HTML 내에서 탐색하고 상위 컨테이너 또는 링크와 같은 항목을 클릭해야 합니다.

변경하려는 내용을 알고 있으면 도움이 됩니다. 예를 들어 CSS background-color 또는 font-size 속성은 다른 속성보다 더 쉽게 찾을 수 있습니다.

올바른 스타일을 찾으면 복사하여 테마의 style.css 파일에 붙여넣습니다. 또는 WordPress 사용자 정의 화면 내에서 추가 CSS 패널을 사용하고 거기에 코드를 붙여넣을 수도 있습니다(아래에서 다른 옵션에 대해 설명함). 그런 다음 원하는 대로 변경하고 업로드하거나 저장합니다.

힌트: 변경하려는 클래스 또는 ID 내에 CSS 속성만 포함하면 됩니다. 나머지는 모두 생략 가능합니다.

이 기술은 변경하려는 스타일의 수가 적은 상황에 유용합니다. 그러나 전면적으로 변경하려는 경우 번거로울 수 있습니다.

플러그인 스타일을 대기열에서 빼고 처음부터 시작

이 방법은 약간의 중급-고급 CSS 기술과 함께 시간 약속이 필요합니다. 그리고 플러그인의 스타일이 실제로 방해가 되는 상황을 위해 예약하고 싶을 수도 있습니다.

우리는 이전에 대기열에 넣은 스타일시트를 제거하는 WordPress wp_dequeue_style() 함수를 사용하는 것에 대해 이야기하고 있습니다. 플러그인과 관련된 모든 스타일시트를 효과적으로 끄는 데 사용할 수 있습니다.

스타일시트를 끈 후에는 플러그인의 스타일을 원하는 대로 편집할 수 있습니다. 그것은 큰 일이 될 수 있지만 스타일이 당신이 원하는 것과 정확히 일치하는지 확인하는 방법이기도 합니다.

WordPress 개발자 리소스 사이트에는 이것이 어떻게 수행되는지에 대한 훌륭한 예가 있습니다. 여기서 성공의 열쇠 중 하나는 스타일시트의 등록된 이름을 찾는 것입니다. 이것은 플러그인의 코드 내에서 찾을 수 있거나 스타일시트의 ID로 레이블이 지정된 프런트 엔드 페이지의 소스에서도 찾을 수 있습니다.

또한 플러그인과 연결된 CSS가 필요합니다. 다시 말하지만 플러그인의 폴더로 들어가 필요한 파일을 찾고 싶을 것입니다. 콘텐츠는 복사하여 테마의 style.css 에 붙여넣고 필요에 맞게 변경해야 합니다.

그래도 스타일이 많은 플러그인이 있습니다. WooCommerce가 대표적인 예입니다. 상당한 양의 CSS와 함께 제공됩니다. 스타일은 충분히 잘 작동하지만 때로는 테마와 충돌할 수 있습니다.

전체 또는 특정 WooCommerce 스타일시트만 대기열에서 빼려는 경우 해당 문서에서 프로세스를 안내할 수 있습니다.

추가 팁 및 문제 해결

플러그인의 CSS를 원하는 대로 구부리는 것은 까다로울 수 있습니다. 처음에 원하는 대로 일이 항상 진행되는 것은 아닙니다. 이를 염두에 두고 고려해야 할 몇 가지 다른 팁과 문제 해결 아이디어는 다음과 같습니다.

플러그인 문서 확인

어떤 경우에는 플러그인 문서가 스타일 사용자 정의 구현에 대한 확실한 조언을 제공할 수 있습니다. 위에서 언급한 방법 외에도 백엔드 설정 또는 플러그인별 테마와 같은 다른 옵션이 있을 수 있습니다.

또한 지원 포럼을 확인하십시오. 누군가가 사용자 정의 스타일에 관해 이미 질문을 했을 가능성이 있습니다. 그 과정에서 도움이 되는 귀중한 정보가 있을 수 있습니다.

브라우저의 개발자 도구에서 실험

재정의하려는 스타일을 찾는 데 브라우저의 개발자 도구가 얼마나 중요한지 이미 언급했습니다. 일이 의도한 대로 작동하지 않을 때 문제를 해결하는 것만큼이나 중요합니다.

예를 들어, 인스펙터 도구는 사용자 정의 스타일이 캐스케이드 내에서 어디에 속하는지 결정하는 데 도움이 될 수 있습니다. 다른 스타일이 우선시되고 있거나 페이지의 캐시된 버전을 보고 있을 수 있습니다.

더 좋은 점은 인스펙터 내에서 바로 스타일을 편집하고 결과를 즉시 볼 수 있다는 것입니다. 이렇게 하면 배포하기 전에 변경 사항이 어떻게 보이는지 확인할 수 있습니다.

이러한 도구는 버그를 제거하는 데 가장 친한 친구가 될 수 있습니다. 그들에 대해 알아보세요!

지속 가능한 방식으로 변경 구현

플러그인의 스타일을 사용자 정의하는 데 시간을 할애하려는 경우 지속 가능하게 구현되었는지 확인하고 싶을 것입니다. 즉, 삭제되거나 실수로 변경되지 않는 안전한 위치에 저장해야 합니다.

테마의 기본 스타일시트에 스타일을 배치하는 것은 괜찮습니다. 테마 업데이트 후에 스타일이 손실되지 않는다는 것을 알고 있다면 말입니다. 자식 테마는 이를 방지할 수 있는 좋은 방법입니다.

일을 더 잘 정리하려면 모든 사용자 정의 스타일을 별도의 스타일시트에 넣는 것이 좋습니다. 이렇게 하면 변경해야 할 때 항상 특정 스타일을 찾을 수 있습니다.

또한 플러그인 변경 로그를 주시하십시오. 스타일은 진화하며 오늘 사용자 지정하는 것이 영원히 작동한다고 보장할 수는 없습니다.

워드프레스 웹사이트를 매끄럽게 만들어보세요

일반적으로 WordPress 플러그인은 훌륭합니다. 그러나 관련 스타일을 웹사이트의 나머지 부분에 맞추는 것은 어려울 수 있습니다. 그래도 조금만 파고들면 갈 수 있다.

웹 브라우저의 개발자 도구를 사용하여 변경하려는 CSS 클래스와 ID를 찾을 수 있습니다. 그런 다음 사용자의 요구에 가장 적합한 방식으로 이러한 변경 사항을 적용하는 것이 중요합니다.

예리한 눈이 필요하지만 노력은 실제로 배당금을 지불할 수 있습니다. 웹사이트의 모든 측면이 일관되게 보이고 느껴지면 방문자가 훨씬 쉽게 탐색할 수 있습니다. 또한 콘텐츠는 자연스러운 흐름을 발전시킵니다. 덕분에 사용자 경험이 훨씬 더 좋아질 것입니다.