WordPress 블로그에 사용자 지정 CSS 코드를 추가하는 방법은 여러 가지가 있습니다.

오늘 저는 여러분에게 제안하는 두 가지 방법의 강점과 약점을 설명하여 가장 적합한 방법을 선택할 수 있도록하겠습니다.

그러나 이전에 WordPress discover를 설치 한 적이 없다면 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면 

그런 다음 왜 우리가 여기 있는지 다시 돌아옵니다.

사용자 정의하려는 항목을 찾는 방법

일단 당신이 부분을 분리 변경하려는 워드 프레스 테마 (예를 들어 기사 제목), 당신은해야합니다 CSS 속성 결정 적절한 변경을 할 수 있도록 적용됩니다. 다행히이 프로세스는 복잡하지 않습니다.

CSS는 선택기를 사용하여 다른 특정 변경이 발생할 요소를 결정합니다. 일반적으로이 작업은 " 클래스 "요소 (또는 DOM 요소). 그러나 CSS를 사용하여 전체 요소의 레이아웃을 정의 할 수도 있습니다 (예를 들어 " ") 또는 태그 식별자를 사용합니다.

다행히도 널리 사용되는 브라우저를 사용하면 몇 번의 클릭만으로 페이지 요소에 적용되는 다양한 선택기와 선언을 볼 수 있습니다. 예를 들어 Google 크롬에서는 다음 예와 같이 문서의 특정 부분을 강조 표시 한 다음 마우스 오른쪽 버튼을 클릭하기 만하면됩니다.

클릭하여 요소 검사 드롭 다운 메뉴가 표시되면 오른쪽 창에 검사 된 항목이 강조 표시된 새 창에 페이지의 HTML 코드가 표시됩니다 (이하). 아래 예를 볼 수 있습니다.

이 요소의 텍스트 (또는 속성) 빨간색으로 강조 표시하면 코드를 검사하여 강조 표시 한 항목에 적용 할 수있는 다양한 특정 스타일이 표시됩니다.

읽기 : 어떻게 비주얼 편집기에서 CSS와의 드롭 다운 메뉴를 추가하는 방법

예를 들어 " 폰트 크기 강조 표시된 항목에 표시되는 글꼴의 크기가 13 픽셀임을 나타냅니다. 디스크립터는 중괄호로 묶고 선택기가 앞에옵니다. 해당 스타일 시트 파일의 이름은 선택기의 오른쪽에 표시됩니다.

이 정보를 염두에두면 스타일을 쉽게 변경할 수 있습니다. 예를 들어, 글꼴을 13px에서 14px로 변경하려면 강조 표시된 항목 중 하나에 해당하는 선택기 인 스타일 시트 파일을 찾으십시오. 일반적으로 다음 형식으로되어 있습니다. (« # .block - 플러그인 - 콘텐츠 정보"). 그런 다음 속성의 다른 값을 수정할 수 있습니다.

Firefox에서도 같은 작업을 수행 할 수 있습니다. 페이지의 특정 부분을 강조 표시하고 항목을 마우스 오른쪽 버튼으로 클릭 한 다음 " 요소 검사 메뉴가 나타납니다.

어떻게 워드 프레스와 CSS 함께 작동

라는 사실이다 워드 프레스 테마 다르게 생성됩니다. 따라서 귀하의 워드 프레스 테마 다음 섹션에서 읽은 내용과 100% 일치하지 않을 수 있습니다.

즉, 귀하의 WordPress 블로그에 사용 된 CSS가 " style.css " 이것은 WordPress뿐만 아니라 모든 유형의 웹 사이트에 대한 스타일 시트의 일반적인 이름입니다.

참조 : 워드 프레스 이미지 Gravatar에 크기를 조정하는 방법

이제 다른 편집 프로세스를 수행 할 차례입니다.

방법 번호 1 : WordPress 테마의 스타일 파일 편집

테마의 style.css 파일에 액세스하는 방법에는 두 가지가 있습니다.

첫 번째는 WordPress 대시 보드에서 수행하는 것입니다. 왼쪽 메뉴에서 " apparence "그리고 그때" 발행자 ".

편집기 페이지에 있으면 페이지 오른쪽의 수직 막대에 파일 목록이 표시됩니다. 파일 목록을 스크롤하십시오. ""라는 파일이 표시됩니다. 스타일 시트 style.css 페이지 하단에 있습니다.

이 파일의 이름을 클릭하면 중간에 편집기에 파일이로드되어 표시됩니다. 이 화면을 사용하여 파일을 편집 할 수 있습니다.

스타일시트를 찾는 다른 방법은 호스팅 제공업체의 운영 체제를 탐색하고 파일을 찾는 것입니다. 워드 프레스 테마 (FTP 클라이언트 사용). 정확한 위치는 호스팅 제공업체에 따라 다릅니다. 아래 표시된 예에서 웹사이트 이름(우리의 경우 thecare에서)이 public_html이 폴더 아래의 폴더입니다.

WordPress가 설치되어 있으므로 "thecare"에서 wp-content 폴더를 볼 수 있습니다. wp-content 하위 폴더는 " WP-테마", 그것은 모든 워드 프레스 테마 설치됩니다.

이 웹 사이트에서 " MMCC 뉴스레터 », 스타일 파일« style.css "폴더에 있습니다 부모 뉴스 ".

방법 # 2 : 플러그인을 사용하여 CSS 수정

WordPress 블로그의 CSS를 편집하는 가장 편리한 방법은 플러그인 사용.

플러그인 사용의 주요 장점 중 하나는 하위 테마의 장점과 유사합니다. 예 당신은 워드 프레스 테마를 업데이트, 변경 사항은 테마 파일이 아닌 별도로 저장되므로 덮어 쓰지 않습니다. 물론 다른 장점은 자식 테마를 만들 필요가 없다는 것입니다.

다음은 CSS 코드를 수정하는 데 사용할 수 있는 프리미엄 플러그인입니다. 워드 프레스 테마 :

1. 노란 연필 : 비주얼 CSS 스타일 편집기

Yellow Pencil은 모든 테마와 함께 사용하여 몇 분 만에 웹 사이트를 개인화 할 수있는 비주얼 스타일 편집기입니다 (글꼴, 색상, 애니메이션 등…).

Ce 워드 프레스 플러그인 프리미엄은 다음과 같은 방법으로 CSS 스타일을 생성합니다. 배경 마치 게임처럼 색상을 가지고 놀면서 초보자와 숙련 된 사용자 모두를 위해 설계되었습니다.

또한 우리의 발견 5 플러그인 워드프레스(WordPress) 알림을 표시

코딩 지식이 필요하지 않습니다. 그러나, 그 워드 프레스 플러그인 코딩을 좋아하는 사람들을 위한 좋은 CSS 편집기가 있습니다. 이 편집기를 사용하여 실시간으로 코딩하고 CSS를 사용자 지정할 수 있습니다.

다운로드 | 데모 | 웹 호스팅

2. Gutenberg 용 사용자 정의 JS 및 CSS

Le 워드 프레스 플러그인 프리미엄 사용자 정의 JS 및 CSS 구텐베르크 WordPress 게시물 및 페이지에 대한 WYSIWYG 편집기에 무제한의 사용자 정의 스타일을 추가 할 수 있습니다. 구텐베르크 버전의 WordPress와 완벽하게 호환됩니다.

사용하기 쉬운 CSS 편집기로 새로운 스타일을 만들 수 있습니다. 이 워드 프레스 플러그인의 기능을 확장 맞춤 입력란 다이나믹하고 강력한 개인화 모듈로 사용자 정의 필드를 수정할 수있는 기능을 제공합니다. 그리고 기능 실시간 미리보기 이 WordPress 플러그인은 매우 편안하고 사용자 친화적입니다.

다운로드 | 데모 | 웹 호스팅

3. SiteOrigin CSS

이 목록에서 가장 많은 옵션을 제공하는 것은 WordPress 플러그인입니다. 후자의 가장 놀라운 점은 무료라는 것입니다. 이 WordPress 플러그인은 커 스터 마이저에서 찾을 수없는 유일한 플러그인입니다.

플러그인을 설치하고 활성화한 후 다음 위치로 이동해야 합니다. 모양> 사용자 정의 CSS 플러그인의 CSS 에디션에 액세스합니다. 이 페이지에서 실시간 미리보기를 제공하지 않는 텍스트 편집기를 볼 수 있습니다. 

에 대한 기사를 읽으십시오 10 WordPress 플러그인은 귀하의 웹 사이트 판매를 향상시킵니다.

후자에 액세스하려면 편집기 바로 위에있는 왼쪽에 나타나는 두 개의 버튼 중 하나를 클릭해야합니다. 눈 모양 아이콘이있는 버튼은 애호가가 좋아할 시각적 CSS 코드 편집기를 표시합니다. 확장 화살표가있는 아이콘은 CSS 코드의 숙달을 의미하는 텍스트 편집기를 표시합니다.

다운로드 | 데모 | 웹 호스팅

4. 간단한 사용자 정의 CSS

간단한 사용자 정의 CSS 가장 인기있는 플러그인 중 하나입니다.

또한 우리의 발견 블로그를 빠르게 만드는 방법 : CSS 및 JS 파일 관리.

100 만회 이상 설치되었으며 별 000 개 등급을 받았습니다.

다운로드 | 데모 | 웹 호스팅

5. 사용자 정의 CSS를 추가 WP

WP 사용자 정의 CSS 추가 당신이 할 수있는 플러그인입니다 워드 프레스 블로그의 레이아웃 변경 전체 또는 개별 기사. 항목을 사용자 정의 할 때 유연성을 원하는 경우이 옵션이 좋습니다.

플러그인은 10.000 회 이상 다운로드되었으며 현재 4,3 개의 별 등급을 받고 있습니다.

다운로드 | 데모 | 웹 호스팅

6. 테마 마약 중독자 사용자 정의 CSS

변경 사항에 대한 실시간 미리보기를 제공하는 솔루션을 찾고 있다면 테마 마약 중독자 사용자 정의 CSS. 

이 솔루션은 대시 보드에 사용자 정의 CSS 관리자를 추가하여 자신 만의 스타일을 추가 할 수 있습니다. 또한 대안을 제공합니다 어린이 테마 사용.

다운로드 | 데모 | 웹 호스팅

다른 추천 자료

또한 귀하의 웹 사이트 및 블로그에 대한 이해와 통제를 위해 아래 자료를 참조하십시오.

• 소셜 네트워크에서 공유하는 10 WordPress 플러그인
• 워드 프레스에 루프 밖으로 사용자 정의 필드를 표시하는 방법
• 5 WordPress 플러그인으로 광고로 블로그에서 수익을 창출하십시오.
• 블로그 콘텐츠 스크레이퍼를 보호하는 방법

결론

여기! 이 튜토리얼을 마치겠습니다. WordPress 블로그에 사용자 정의 CSS 코드를 두 가지 방법으로 추가 할 수 있기를 바랍니다. commentaires 또는 제안 사항이 있으시면 주저하지 말고 해당 섹션을 예약하십시오.

그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

이 기사를 좋아한다면 n망설이지 마 좋아하는 소셜 네트워크에서 공유. 

...