WordPress 웹 사이트를 사용자 정의하는 최고의 CSS 코드

게시 됨: 2022-03-15

WordPress를 사용자 정의하는 데 가장 적합한 CSS 코드를 찾고 있습니까? 그렇다면 WordPress 웹 사이트를 편집하는 데 사용할 수 있는 가장 많이 사용되는 CSS 스크립트를 보여드리겠습니다.

플러그인, 테마 옵션 및 기본 설정으로 WordPress를 사용자 정의할 수 있는 옵션이 많이 있다는 것을 알고 있습니다. 그러나 CSS 코드를 사용하여 웹사이트의 다양한 영역을 편집할 수도 있습니다. 먼저 웹 사이트를 사용자 정의하는 데 필요한 이유를 살펴 보겠습니다.

WordPress에서 웹 사이트를 사용자 정의하기 위해 CSS 코드를 사용하는 이유는 무엇입니까?

CSS 스크립트 또는 코드는 WordPress에서 웹사이트의 시각적 모양을 변경하는 데 사용됩니다. 테마 옵션 또는 기본 WordPress 설정에 포함되지 않은 특정 디자인 변경 을 수행하려는 경우 CSS 스크립트가 매우 유용할 수 있습니다.

사용자 정의를 위해 WordPress 플러그인을 설치할 수 있지만 플러그인은 웹사이트 프레임워크에 특정 가중치를 추가하여 속도를 저하시킬 수 있습니다. 플러그인을 사용하여 웹 사이트의 모양을 약간만 변경해도 성능이 저하될 가치는 없습니다. 따라서 코딩에 대한 기본 지식이 있는 경우 CSS 코드를 사용하는 것이 가장 좋습니다.

시각적 수정을 하는 동안 웹사이트 속도를 잃지 않으려면 CSS 코드를 사용하여 WordPress 웹사이트를 사용자 지정하는 것이 좋습니다. 게다가 때때로 웹사이트에 구현하고 싶은 독특한 디자인 이 있을 수 있습니다. 그리고 빌드된 사용자 정의 플러그인이 없는 경우 CSS 스크립트가 유일한 옵션입니다.

WordPress 웹 사이트를 사용자 정의하는 최고의 CSS 코드

워드프레스 웹사이트를 맞춤화하기 위한 많은 CSS 코드가 있지만, 우리는 우리가 찾은 최고의 CSS 스크립트를 제공할 것입니다. WordPress 웹 사이트의 프런트 엔드에서 작업할 때 모든 종류의 문제를 분류하고 뛰어난 디자인을 달성하는 데 가장 많이 사용되는 코드 중 일부입니다.

그러나 다음 스크립트 목록은 데모용이며 사용된 선택기 가 샘플 웹 사이트와 관련이 있기 때문에 웹 사이트에서 작동하지 않을 수 있습니다. 대부분의 경우 선택기를 편집해야 하므로 이러한 스크립트를 웹사이트에 적용하려면 CSS에 대한 기본 지식이 필요합니다 . 개발자 도구를 사용하여 WP 웹사이트에 CSS 스크립트를 적용하는 방법에 대해 자세히 알아보려면 이 게시물을 확인하세요.

또한 마지막에 세 가지 다른 방법으로 CSS 스크립트를 WordPress에 적용하는 방법을 배우는 추가 섹션을 찾을 수 있습니다. 이제 스크립트를 살펴보겠습니다.

1. 요소 숨기기

이것은 아마도 가장 널리 사용되는 CSS 규칙일 것입니다. 프런트 엔드 또는 백 엔드에서 요소를 제거해야 할 때 매우 유용합니다.

1.1. 헤더 숨기기:

 헤더{
    디스플레이:없음;
}

1.2. "장바구니에 추가" 버튼 숨기기

 .single_add_to_cart_button.button{
    디스플레이:없음;
}

1.3. 탐색경로 숨기기

 .woocommerce-breadcrumb{
    디스플레이:없음;
}

참고: 브라우저 콘솔에 대한 기본적인 이해가 있으면 숨겨진 요소가 표시될 수 있으므로 경우에 따라 권장하지 않습니다. 예를 들어 사용자가 양식을 채울 수 없도록 양식을 제거해야 할 수 있습니다. 그런 다음 CSS 스크립트로 이 작업을 수행하고 싶지 않습니다. CSS 스크립트에 대한 기본 지식이 있는 사람은 누구나 CSS 스크립트를 표시하고 어쨌든 양식을 보낼 수 있기 때문입니다.

그러나 스타일링이나 디자인 문제에 대한 빠르고 쉬운 솔루션을 제공하며 여전히 문제 없이 사용할 수 있습니다.

장바구니에 추가 버튼을 숨기고 제거하는 방법에 대한 추가 도움말이 필요한 경우 이에 대한 자세한 가이드도 있습니다. 마찬가지로 필요한 경우 WordPress에서 헤더 및 이동 경로를 편집하는 방법에 대한 자세한 정보는 블로그에서 찾을 수 있습니다.

2. 요소 이동

페이지 디자인을 조정하기 위해 일부 요소를 이동해야 하는 경우 다음과 같이 사용하여 원하는 방향으로 쉽게 이동할 수 있습니다.

 #qlwapp{
    하단:45px;
    왼쪽:25픽셀;
    위치:상대적;
}

요소가 이전에 배치된 경우 경우에 따라 position:relative 를 설정해야 할 수도 있습니다.

참고: 이는 사소한 조정에만 유용하며 요소를 컨테이너 외부로 이동하면 안 됩니다. top, right, bottom, left를 사용하고 각각에 값을 부여할 수 있습니다.

3. 모바일 모드용 CSS 코드

모바일 기기에만 CSS를 적용할 수도 있습니다. 미디어 쿼리를 사용하여 그렇게 할 수 있습니다.

그들은 조건문처럼 작동합니다. 미디어 쿼리 내의 모든 CSS 규칙은 화면 크기가 768px 미만인 경우에만 적용됩니다.

주어진 화면 너비는 768px인 모바일 장치에 대해 허용된 표준에서 가져옵니다. 이 값을 편집하여 화면 크기가 더 크거나 작은 장치에 적용할 수 있습니다.

 @미디어 전용 화면 및 (최대 너비:768픽셀){
    div.마스트헤드{
        디스플레이: 인라인 블록;
        너비: 50%;
        여백:자동;
    }
}

4. 텍스트 편집

CSS Pseudo 선택기는 WordPress 웹사이트를 사용자 지정하는 데 유용한 리소스입니다. 그리고 그것들을 현명하게 사용하면 웹사이트에서도 많은 수정을 할 수 있습니다. 따라서 이러한 CSS 코드를 사용하여 WordPress 웹사이트의 텍스트를 사용자 지정할 수도 있습니다.

:before 및 :after 의사 선택기를 사용하면 다른 HTML 요소 바로 앞이나 뒤에 "의사 요소"를 삽입할 수 있습니다. 이런 식으로 텍스트를 숨기고 다른 텍스트로 바꿀 수 있습니다.

 p.text{
    가시성:숨김;
}
p.text::before{
    가시성:가시성;
    내용: '여기에 새 텍스트';
    디스플레이:블록;
}

5. CSS 코드를 사용한 번역

:lang() 의사 클래스를 사용하면 페이지 언어에 따라 CSS 규칙을 적용할 수 있습니다. WPML 또는 Polylang과 같은 번역 플러그인 중 하나로 번역되더라도 현재 lang 속성은 항상 웹사이트 HTML 출력의 <html> 기본 태그에 있습니다.

WordPress를 위한 최고의 CSS 스크립트

따라서 이전 샘플 스크립트에서 본 것처럼 :before 의사 선택기를 :lang() 의사 클래스와 함께 사용하면 웹사이트의 모든 문자열을 번역할 수 있습니다.

이것은 다국어 웹사이트에서도 작동합니다.

 p.text:lang(ko){
    가시성:숨김; 
} 
p.text:lang(ko)::before{ 
    가시성:가시성;
    내용: '번역된 텍스트';
    디스플레이:블록; 
}

6. 스크롤 바 추가

목록, 이미지 갤러리 또는 섹션과 같은 대규모 콘텐츠가 있는 경우 스크롤 막대를 사용하면 웹 사이트에서 사용자 경험을 향상시킬 수 있습니다. 또한 과도한 길이 없이 게시물과 페이지를 유지하는 데 도움이 됩니다.

이는 사이드바 또는 기타 위젯 영역에서 사용하는 데 특히 유용합니다. 또한 높이가 사용 가능한 크기를 초과할 때 누락되거나 잘린 위젯 문제를 해결하는 데 도움이 될 수 있습니다.

게시물과 페이지에 스크롤 막대를 삽입할 수도 있습니다.

이 스크립트는 목록에 스크롤 막대를 추가하여 모든 문서를 훨씬 더 짧게 만듭니다.

 울 {
    높이:370px;
    overflow-y:스크롤;
}

WordPress를 위한 최고의 CSS 스크립트

7. 이미지를 아이콘으로 사용하는 CSS 코드

CSS 스크립트를 사용하여 모든 유형의 이미지를 추가할 수 있으며 몇 가지 방법으로 추가할 수 있습니다. 그러나 의사 선택자 :before 를 사용하여 이미지를 추가하고 아이콘처럼 보이도록 만들 수 있습니다.
미디어 라이브러리에 이미지를 업로드하고 이미지의 퍼머링크를 url('image-link-here')

 .entry-content > p:nth-child(3)::before{
    내용:url('http://localhost/Sampler/wp-content/uploads/2022/03/fish-icon.png');
}

또는 동일한 선택기를 사용하여 실제 아이콘을 사용할 수도 있습니다.

 .entry-content > p:nth-child(3)::before{
	font-family: "Font Awesome 5 Free"; 
        글꼴 두께: 400; 
        내용: "\f0f3";
}

실제 아이콘을 사용하기 위해 이 예제에서는 아이콘의 링크 HTML 태그를 font Awesome 5 Free로 설정했습니다. 웹 페이지의 <head> 섹션에 로드해야 합니다.

8. 글꼴 변경

CSS 코드로 WordPress 웹사이트의 글꼴을 사용자 정의할 수도 있습니다. 아이콘과 마찬가지로 글꼴도 테마 헤더에 로드해야 사용할 수 있습니다. 페이지의 <head> 섹션을 보면 글꼴 집합이 사용 가능한지 확인할 수 있습니다.

여기에 Google 글꼴 링크가 이미 PHP 스크립트의 도움으로 추가되었습니다.

WordPress를 위한 최고의 CSS 스크립트

사용하고자 하는 아이콘이나 폰트 세트가 <head> HTML 섹션에 이미 로드되어 있는 것을 확인하신 후, 전체 웹사이트에서 자유롭게 사용하실 수 있습니다.

 h1,h2,h3,p,a,li{
    font-family: 'Hubballi', 필기체;
}

보너스: CSS를 WordPress 웹사이트에 적용하는 3가지 방법

WordPress 웹 사이트를 사용자 정의하는 데 가장 많이 사용되는 CSS 코드를 제공했습니다. 그러나 웹사이트에 추가하는 방법도 알아야 합니다. 이를 위해 이 기사에서 보너스로 간단한 자습서도 보여줍니다.

따라서 WordPress 웹 사이트에 CSS를 적용하는 3가지 일반적인 방법은 다음과 같습니다.

1. 테마 커스터마이저

테마 커스터마이저를 통해 CSS 스크립트를 추가하려면 테마 커스터마이저에 CSS 스크립트를 붙여넣기만 하면 됩니다. 일반적으로 작은 사용자 정의 또는 수정에 적용할 수 있습니다.

모양 > 사용자 정의 > 추가 CSS 로 이동하여 스타일 편집기를 엽니다. 그런 다음 여기에 CSS 스크립트를 붙여넣습니다.

WordPress를 위한 최고의 CSS 스크립트

여기의 스크립트는 " 게시 " 버튼을 누른 후 데이터베이스에 저장됩니다. 웹사이트를 미리 본 후 웹사이트의 변경 사항을 확인할 수 있습니다.

2. 하위 테마 CSS 파일

이 단계에서는 시작하기 전에 프로그래밍 방식으로 또는 하위 테마 플러그인 중 하나를 사용하여 웹사이트의 하위 테마를 만들어야 합니다. 그런 다음 웹 사이트에 활성 하위 테마가 있는지 확인하고 style.css 파일에 CSS 코드를 추가합니다. 웹 사이트의 섬세한 핵심 파일을 수정하므로 전체 웹 사이트도 백업하는 것이 좋습니다.

코드 편집기를 열어 거기에 스크립트를 붙여넣거나 모양 > 테마 파일 편집기 에서 WP 내장 편집기를 사용하세요. 이제 Stylesheet 또는 자식 테마의 style.css 파일을 엽니다.

여기에 모든 사용자 정의 스크립트를 붙여넣어야 합니다. CSS 코드를 추가한 후 파일 업데이트 를 클릭합니다. 하지만 큰 파일로 바뀌면 새 파일이나 여러 개를 만드는 것이 좋습니다.

3. 자식 테마의 functions.php 파일

PHP 기능을 사용하여 CSS 스타일을 삽입할 수도 있습니다. 이렇게 적용된 모든 스타일은 전면에 인라인 스타일로 삽입됩니다.

이전 접근 방식과 마찬가지로 웹 사이트에 대해 하위 테마가 활성화되어 있는지 확인합니다. 그런 다음 테마 편집기에서 functions.php 파일을 열고 여기에 다음 코드를 붙여넣습니다.

 add_action('wp_head','QuadLayers_headlink');
함수 QuadLayers_headlink(){
	에코 '<스타일>
    .entry-content > p:nth-child(3)::before{
	    font-family: "Font Awesome 5 Free"; 
	    글꼴 두께: 400; 
	    내용: "\f0f3";
    }
    h1,h2,h3,p,a,li{
	    font-family: "Hubballi", 필기체;
    }</style>';
}

이 방법을 사용하는 가장 큰 장점은 WP 후크 및 함수의 모든 기능을 활용하여 PHP 조건을 적용할 수 있다는 것입니다.

웹사이트에 CSS를 적용하는 방법에 대해 자세히 알아보려면 WordPress에 CSS를 적용하는 방법에 대한 가이드도 참조하세요.

결론

다음은 WordPress 웹 사이트를 사용자 정의하는 데 가장 일반적으로 사용되는 CSS 코드 입니다. 웹 사이트의 시각적 모양을 변경하고 고유한 디자인을 추가할 수 있는 모든 인기 있는 스크립트를 보여 주었습니다. 요약하자면 CSS 스크립트를 사용하여 다음 수정 사항을 다뤘습니다.

요소 숨기기
요소 이동
모바일 장치용 CSS
텍스트 수정
번역
스크롤 막대 추가
이미지를 아이콘으로 사용
글꼴 변경

CSS 코드를 사용하여 WordPress 웹사이트의 이러한 요소를 쉽게 사용자 지정할 수 있습니다. 이를 돕기 위해 WordPress에서 CSS를 적용하는 몇 가지 방법도 보여주었습니다.

또한 WordPress의 CSS에 대해 배우고 싶다면 특정 페이지나 게시물에 CSS를 적용하는 방법도 다루었습니다. 마찬가지로 CSS 스크립트는 페이지 빌더와 함께 사용할 수도 있습니다. 가장 일반적인 예 중 하나는 CSS로 Divi 메뉴를 사용자 정의하는 것입니다.

그렇다면 WP 웹 사이트를 편집하는 CSS에 대해 어떻게 생각하십니까? 당신은 그들을 사용한 적이 있습니까? 도움이 되었나요? 의견에 알려주십시오.

그동안 관심을 가질 만한 기사가 몇 개 더 있습니다.

사용자 정의 WordPress 플러그인을 만드는 방법
WordPress 대시보드가 로드되지 않는 문제 수정
프로그래밍 방식으로 WordPress 사용자 정의 필드를 만드는 방법