How to add Custom CSS to WordPress (the RIGHT way! – Step by Step)

안녕! 이것은 WinningWP가있는 Topher입니다 이 비디오에서 우리는 한 번 살펴볼 것입니다

WordPress에 맞춤 CSS를 추가하는 방법 원하는 순간을 상상해보십시오 사이트의 모양이 약간 변경되었습니다 당신은 Google 조금 주위에 CSS의 작은 조각을 찾으십시오 그들은 이렇게 말합니다 "이걸 당신의 사이트에 넣으십시오

" 그러나 당신은 어디에 그것을 두는가? 그리고 그것이 올바른 방법으로 이루어 졌다는 것을 어떻게 알 수 있습니까? 보여 드리죠 먼저 CSS가 무엇인지 판단해야합니다 실제로는 두 가지 영역 만 있습니다 CSS를 적용 할 수 있습니다 하나는 일반 사이트 디자인을위한 것입니다

레이아웃 및 색상 등 다른 하나는 콘텐츠 디자인입니다 귀하의 특정 콘텐츠가 보이는 : 이미지 치료, 블록 쿼트 크기 등 앞으로 사이트 디자인을 변경하고 싶을 수 있습니다 전체적으로 새로운 주제를 얻으십시오 그럼에도 불구하고 당신이 만든 작은 비틀기를 유지하십시오 귀하의 콘텐츠가 어떻게 보이는지

내 말 뜻을 보여 드리죠 여기에는 아주 간단한 사이트가 있습니다 레이아웃을 쉽게 설명 할 수 있습니다 상단에 검색 창이 있습니다 헤더 막대, 내용 영역 및보기 힘들다

비어 있기 때문에 여기에 사이드 바가 있습니다 배경은 모두 흰색, 바닥 글은 회색입니다 검색 창은 검은 색입니다 이것들은 당신이 바꿀만한 것들입니다 귀하의 주제와 관련이 있습니다

여기서 우리는 우리의 내용을 가지고 있으며, 우리는 일정량의 이미지와 캡션의 오른쪽에있는 패딩은 기울임 꼴로 표시됩니다 그것들은 내용과 관련된 변화 일 것이며, 두 가지 방법을 살펴 보겠습니다 사이트 디자인 변경 사항은 다음과 관련되어 있습니다 당신의 주제가 말이됩니다 앞으로 테마를 변경하면 당신은 CSS를 유지하고 싶지 않다

어떻게 보이는지에 관한 전부이기 때문입니다 그래서 우리는 현재 테마를 바꾸고 싶습니다 그 주제를 없애 버리면 사라지게하십시오 두 가지 선택 사항이 있습니다 하나는 맞춤 설정 도구입니다

다른 하나는 stylecss를 편집하고 있습니다 어느 쪽도 매우 어렵지 않다 그러나 Customizer는 진정으로 가장 쉽습니다 내 말 뜻을 보여 드리죠

내 사이트의 헤더를 빨간색으로 변경하고 싶습니다 그래서 제가 할 일은 그 이름을 찾는 것입니다 Chrome에서 마우스 오른쪽 버튼을 클릭하여 검사합니다 그리고 바로 여기에 site-header-main이 있습니다 그래서 그것은 내가 바꾸고 싶은 것입니다

이제 여기 내 사이트의 맨 위에있는 사용자 지정 단추가 있습니다 사용자 정의 프로그램의 맨 아래로 스크롤하면 추가 CSS를 클릭 할 수 있습니다 그것을 사용하는 방법에 대한 약간의 지침이 있습니다 닫기를 클릭하면 바로 여기에 나타납니다 그래서 나는 site-header-main을 입력 할 것입니다

배경색은 적색으로 표시되는 중괄호로 표시됩니다 이제는 반드시 알 필요가 없습니다 내가 한 것처럼 검사관을 사용하는 법 f00이 빨간색임을 알 필요가 없습니다 어딘가에서 웹 사이트에서이 코드를 얻을 수 있습니다 그건 괜찮아

너는 할 필요 없어 직접 찾아내는 법을 알아야합니다 너 한테 어떻게 넣는 지 보여줄거야 이제는 게시 할 수 있습니다 이제이 탭을 닫을 수 있습니다

그리고 지금 나는 빨간 머리글을 가지고있다 원하는만큼 CSS를 넣을 수 있습니다 당신은 완전히 변경할 수 있습니다 원하는 경우 사이트의 전체 디자인 하지만 이제는 CSS를 편집하는 다른 방법을 보여 드리고자합니다

이전에 넣은 코드는 제거 할 것입니다 저장하고 이제 우리는 테마의 stylecss 파일을 편집하십시오 모양, 테마에서 대시 보드로 이동합니다 이제 활성 테마가 항상 왼쪽 상단에 있습니다

너는 단지 이것을하고 싶다 하위 테마를 사용하는 경우 특정 방법입니다 당신은 여기에서 볼 수 있습니다 하지만 내 활발한 테마는 메이크업 테마입니다 이렇게하면 make가 업데이트를하면 내 사용자 정의를 지우지 않습니다

내 아이를 주제로 할거야 내 자식 테마는 결코 업데이트되지 않습니다 아동 주제가 업데이트되지 않기 때문입니다 자녀 테마를 사용하고 있음을 확인할 수 있다면 다음 메뉴는 편집기 링크입니다 그리고 바로 여기 그들이 당신에게 말할 것입니다

내가 방금 어린이 주제에 대해 말한 모든 것 그러니 계속 클릭하고 이해하십시오를 클릭하십시오 당신이 자식 테마를 사용한다면 첫 번째 파일은 stylecss입니다

그것은 항상 그렇게 될 것입니다 그리고이 모든 텍스트는 당신의 주제에 대한 정보입니다 아무런주의를 기울일 필요가 없습니다 오른쪽 아래로 가라 너는 내가 여기에있는 것을 보게 될 것이다

"아래에 맞춤 스타일을 추가하십시오" 이 파일에서 편집하기 전에 나는 당신이 그것을 백업하는 것이 좋습니다 싶습니다 그리고 그것은 정말로 간단합니다 우리는 단지 복사해서 붙여 넣기 만 할거야 그것은 다른 파일 어딘가에

Windows에 있다면 Control + A를 할 수 있습니다 또는 Mac에서 Command + A를 할 수 있습니다 모든 것을 강조 표시합니다 Control 또는 Command + C를 눌러 복사합니다 텍스트를 저장할 수있는 다른 파일에도 붙여 넣을 수 있습니다

당신은 영구히 그것을 지킬 필요가 없습니다 너는 이걸 편집하는 동안 너만 지키고있어 이게 완벽하게되면 일단 끝나면 백업을 삭제하기 만하면됩니다 그러나이 하나가 고장 나고 길을 잃으면 간단히 이 파일을 지우고 복사 한 내용을 붙여 넣습니다 그래서 똑같은 코드를 붙여 넣을거야

내가 사용자 정의 프로그램을 사용하여 파일 업데이트를 클릭합니다 그리고 내 사이트를 다시로드하십시오 그리고 우리가 있습니다, 그것은 또한 빨간색입니다 이제 사용자 정의 프로그램이 아주 쉽다면, 왜 당신은 당신의 stylecss 파일을 넣고 싶습니까? 그 이유는 style

css 파일 사용자 정의 프로그램보다 훨씬 빨리로드됩니다 따라서 사용자 정의 프로그램을 사용하여 작업 한 경우 페이지가있는 인스턴스를 얻을 수 있습니다 완전히로드되고, 초 단위로 보입니다 그런 다음 빨간색으로 깜박입니다 그러나 style

css에 넣으면 그렇게하지 않습니다 내가 사랑했던 것들 중 또 다른 하나 맞춤 설정 도구에 대해 볼 수 있습니다 입력 한대로 변경 사항이 적용됩니다 따라서 나를위한 공통 워크 플로는 커스텀 마이저에 모든 CSS 작성하기 그런 다음 stylecss에 복사하여 붙여 넣으십시오

당신은 그렇게 할 필요가 없습니다 맞춤 설정 도구에 모든 것을 남겨 둘 수 있습니다 그리고 그것은 영원히 발견 될뿐입니다 방금 내 추천을 시작했다면 사용자 지정자 만 수행한다는 것입니다 빠르고 쉽고 쉽습니다

네거티브는 매우 작습니다 실험하고 발을 조금 젖히고 싶다면 WordPress의 내부 동작 그러면 stylecss 파일을 편집하십시오 이제 당신이 원하는 다른 종류의 CSS 함께 일하는 것은 귀하의 콘텐츠를 관리하기위한 것입니다 이제 이것을 위해 테마에 묶기를 원하지 않습니다

테마를 바꾸더라도 붙이기를 원합니다 항상 이미지 캡션을 원할 수 있습니다 당신이 사용하고있는 테마에 상관없이 이탤릭체로 나타내지는 않을 것입니다 이 경우 플러그인을 사용하려고합니다 Simple Custom CSS라는이 플러그인을 사용하고 있습니다

그런 다음 모양 아래에 사용자 정의 CSS 메뉴 항목이 있습니다 그리고 여기에 CSS를 간단히 입력 할 수 있습니다 그래서이 캡션의 이름을 알아낼 것입니다 마우스 오른쪽 버튼으로 클릭하고 검사합니다 그리고 wp-caption-text라고합니다

그래서 여기에 wp-caption-text를 입력 할 수 있습니다 글꼴 스타일 : 일반; 사용자 정의 CSS 업데이트를 클릭합니다 그런 다음 우리 페이지를 새로 고침 할 것입니다 그리고 더 이상 이탤릭체가 아닌 것을 볼 수 있습니다

이제 저는 2015 년까지 테마를 바꾸려고합니다 내 이미지 캡션이 여전히 기울임 꼴로 표시되지 않는 것을 볼 수 있습니다 아직 빨간 머리글의 전체 개념은 사라졌습니다 그 모든 코드가 다른 테마에 묶여 있기 때문입니다 검토를 위해 테마를 관리하려면 사용자 정의 프로그램을 사용하거나 또는 모양에서 편집기로 이동하여 스타일 시트를 편집하십시오

콘텐츠 용 CSS를 관리하려는 경우 그럼 당신은 유지 플러그인을 원한다 귀하의 CSS는 테마와 분리되어 있습니다 맞춤 CSS와 같은 것 WordPress에 대해 더 자세히 알고 싶다면 wwwwinningwp

com을 확인하십시오