하위 테마 구성기

Child Theme Configurator는 빠르고 사용하기 쉬운 유틸리티로, 모든 테마의 일반적인 문제를 분석하고 하위 테마를 생성하며 커스터마이저 옵션 이상의 맞춤 설정을 가능하게 합니다. 하위 테마 스타일시트를 직접 커스터마이징하고자 하는 워드프레스 사용자를 위해 설계된 이 도구는 원하는 CSS 속성을 정확히 식별하고 재정의할 수 있게 해줍니다. 분석기는 렌더링된 테마를 스캔하여 하위 테마를 자동으로 구성합니다. 최적의 성능을 위해 테마 및 폰트 스타일시트를 올바르게 대기열에 추가하고 벤더별 구문을 처리하여, 상위 테마를 건드리지 않은 채 하위 테마의 외관과 느낌을 무제한으로 제어할 수 있게 합니다. 하위 테마 생성 방법 자세히 알아보기.

하위 테마 제어하기

Child Theme Configurator는 스타일시트를 분석하고 색인화하여 모든 CSS 미디어 쿼리, 선택자, 속성 및 값을 손쉽게 활용할 수 있게 합니다. 둘째, 하위 테마에 적용하기 전에 각 커스터마이징이 어떻게 표시될지 미리 보여줍니다. 마지막으로 작업 내용을 저장하여 편집 내용을 잃을 위험 없이 하위 테마에서 스타일을 커스터마이징할 수 있게 합니다.

기존 상위 테마로부터 원하는 수의 하위 테마를 생성할 수 있습니다. Child Theme Configurator를 사용하면 설치된 테마(기존 하위 테마 포함) 중에서 선택하여 결과를 테마 디렉터리에 저장할 수 있습니다.

준비가 되면 하위 테마를 활성화하기만 하면 워드프레스 사이트에 커스텀 스타일이 자동으로 적용됩니다.

왜 하위 테마를 만들고 하위 테마 구성기로 스타일을 커스터마이징해야 하나요?

1. 커스터마이저로 변경할 수 없는 항목이 있습니다.

2. 하위 테마를 사용하지 않으면 업데이트 시 템플릿과 스타일시트에 적용한 변경 사항이 모두 사라집니다.

3. 하위 테마 구성기는 사용 중인 테마를 기반으로 하위 테마 설정의 올바른 방식을 자동으로 결정합니다.

4. 테마가 사용하는 정확한 스타일 선택기를 찾아 속성을 빠르게 변경할 수 있습니다.

5. 관리자 화면에서 테마 템플릿을 찾아 복사하고 편집할 수 있습니다.

6. 기타 다수:

   • 사용자 지정 설정 유지하며 테마 업데이트
   • 스마트 테마 분석기가 올바른 설정 자동 판단
   • 거의 모든 상위 테마에서 발생하는 일반적인 하위 테마 문제 해결
   • 기존 위젯, 메뉴 및 커스터마이저 옵션을 하위 테마로 복사
   • 하위 테마에서 웹 폰트 사용
   • @import 대신 스타일시트 링크로 대기열 등록
   • 테마 CSS를 빠르게 찾아 편집할 수 있습니다.
   • 반응형 디자인을 위한 @media 쿼리 사용자 정의
   • 스펙트럼 색상 선택기를 사용하여 16진수, RGBA(투명) 및 명명된 색상 선택
   • 폴백 스타일 추가 (속성당 다중 값 지원)
   • 개발 시간 수 시간 절약
   • 멀티사이트 호환
   • 커스터마이저에서 수정 불가능하도록 설정
   • 하위 테마를 Zip 아카이브로 내보내기
   • 상위 테마의 정확한 선택자를 식별하고 재정의
   • 다른 요소를 변경하지 않고 특정 색상, 배경, 글꼴 스타일 등을 변경
   • 크로스 브라우저 및 벤더 접두사 속성, CSS 그라데이션 자동 생성
   • 적용 전 사용자 정의 스타일 미리보기
   • WP 파일 시스템 API 사용 – 제거할 수 없는 파일은 생성하지 않음

하위 테마 구성기 프로

웹사이트에 설치된 모든 워드프레스 플러그인에 Child Theme Configurator의 CSS 커스터마이징 기능을 적용하세요. Child Theme Configurator 프로는 플러그인을 스캔하여 스타일시트를 커스터마이징할 수 있게 합니다. 프로 버전으로 스타일 커스터마이징을 더 빠르고 쉽게 할 수 있는 기능을 추가했습니다.

자세한 내용은 http://www.childthemeplugin.com/child-theme-configurator-pro에서 확인하세요.

단일 플러그인으로 무제한 위젯 콘텐츠 구현

IntelliWidget은 맞춤형 페이지 메뉴, 추천 게시물, 슬라이더 및 기타 동적 콘텐츠 기능을 결합하여 여러 플러그인의 역할을 수행하는 다목적 위젯 관리자입니다. 이러한 기능은 페이지별 또는 사이트 전체 기준으로 표시될 수 있습니다.

자세한 내용은 https://www.lilaeamedia.com/plugins/intelliwidget 에서 확인하세요.

Hook Highlighter

Hook Highlighter는 웹사이트의 모든 프론트 페이지에서 활성화 시 관리자에게 워드프레스 내부 프로그램 흐름에 대한 통찰력을 제공합니다.

현재 페이지에 대한 액션 및 필터 후크, 프로그램 파일, 백트레이스 정보를 인라인으로 표시합니다.

자세한 내용은 https://www.lilaeamedia.com/product/hook-highlighter 에서 확인하세요.

쿼리/선택기 탭

기본(상위) 스타일을 식별하고 사용자 정의하는 방법에는 두 가지가 있습니다. 하위 테마 구성기에서는 CSS 선택자와 속성별로 스타일을 검색할 수 있습니다. 특정 CSS 선택자(예: h1)를 맞춤 설정하려면 “쿼리/선택자” 탭을 사용하세요. 사이트 전체에 적용할 특정 CSS 값(예: 텍스트 색상)을 맞춤 설정하려면 “속성/값” 탭을 사용하세요.

쿼리/선택기 탭에서는 특정 CSS 선택기를 찾아 편집할 수 있습니다. 먼저, 편집하려는 CSS 선택기가 포함된 쿼리를 쿼리 자동 선택 상자에 입력하여 찾습니다. 마우스로 클릭하거나 “Enter” 또는 “Tab” 키를 눌러 선택합니다. CSS 선택기는 기본적으로 기본 쿼리에 포함됩니다. 다음으로 “선택기” 자동 선택 상자에 입력하여 CSS 선택기를 찾습니다. 마우스로 클릭하거나 “Enter” 또는 “Tab” 키를 눌러 선택합니다.

해당 CSS 선택자에 대한 모든 속성이 로드되며, 왼쪽에는 원본 값이, 오른쪽에는 하위 테마 값 입력란이 표시됩니다. 기존 하위 테마 값은 자동으로 채워집니다. 또한 상위 테마와 하위 테마의 오버라이드 조합을 보여주는 샘플 미리보기도 제공됩니다. 테두리(border)와 배경 이미지(background-image)는 특별히 다르게 처리된다는 점에 유의하십시오.

“순서” 필드에는 상위 테마 스타일시트에서 CSS 선택자의 원래 순서가 포함됩니다. “순서” 필드에 더 낮은 또는 더 높은 숫자를 입력하여 CSS 선택자 순서를 변경할 수 있습니다. 각 입력 옆의 “!” 상자를 선택하여 스타일 재정의(소위 “!important” 플래그)를 강제할 수도 있습니다. 신중하게 사용하십시오.

‘’저장’’을 클릭하면 하위 테마 스타일시트가 업데이트되고 변경 사항이 워드프레스 관리자에 저장됩니다.

원시 CSS 추가

주어진 CSS 선택자에 추가 속성을 추가하려면 먼저 쿼리/선택기 탭에서 선택기를 불러옵니다. 그런 다음 새 속성 자동 선택 상자에 입력하여 재정의할 속성을 찾습니다. 마우스로 클릭하거나 “Enter” 또는 “Tab” 키를 눌러 선택합니다. 이렇게 하면 선택기 입력란에 새 입력 행이 추가됩니다.

완전히 새로운 CSS 선택자나 새로운 @media 쿼리를 추가하려면 “원시 CSS” 텍스트 영역에 자유 형식의 CSS를 입력할 수 있습니다. 파서가 새 사용자 정의 스타일을 로드하려면 구문이 올바르도록(예: 중괄호 균형 등) 주의해야 합니다. 저장 버튼 옆에 빨간색 “X”가 나타나면 유효하지 않다는 것을 알 수 있습니다.

하위 테마 구성기가 제공하는 입력 대신 속성과 값에 대한 약어 구문을 사용하려면 여기에 직접 입력할 수도 있습니다. 파서가 입력 내용을 자동으로 표준화된 CSS 코드로 변환합니다.

속성/값 탭

속성/값 탭에서는 특정 속성에 대한 값을 찾은 후, 해당 속성/값 조합을 사용하는 개별 CSS 선택자에 대해 해당 값을 편집할 수 있습니다. 먼저 속성 자동 선택 상자에 입력하여 재정의하려는 속성을 찾습니다. 마우스로 클릭하거나 “Enter” 또는 “Tab” 키를 눌러 선택합니다.

이렇게 하면 해당 속성에 대해 상위 테마 스타일시트에 존재하는 모든 고유 값이 해당 값에 대한 샘플 미리보기와 함께 로드됩니다. 하위 테마 스타일시트에 존재하지만 상위 스타일시트에는 없는 값이 있다면, 그것들도 함께 표시됩니다.

각 고유 값에 대해 “선택기” 링크를 클릭하면 해당 속성/값 조합을 사용하는 CSS 선택기 목록을 확인할 수 있습니다. 이 목록은 쿼리별로 그룹화되어 있으며, 값의 샘플 미리보기와 하위 테마 값 입력란이 함께 제공됩니다. 기존 하위 테마 값은 자동으로 채워집니다.

‘’저장’’을 클릭하면 하위 테마 스타일시트가 업데이트되고 변경 사항이 워드프레스 관리자에 저장됩니다.

CSS 선택기의 모든 속성을 편집하려면 “편집” 링크를 클릭하면 CSS 선택기가 자동으로 쿼리/선택기 탭에 로드됩니다.

웹 폰트 탭

웹 폰트 탭의 텍스트 영역에 @import 규칙을 입력하여 추가 스타일시트와 웹 폰트를 추가할 수 있습니다. 중요: 여기에서 상위 테마 스타일시트를 가져오지 마십시오. 상위/하위 탭의 “상위 스타일시트 처리” 옵션을 사용하세요.

파일 탭

상위 템플릿

상위 테마의 PHP 템플릿 파일을 선택하여 복사할 수 있습니다. “선택한 항목을 하위 테마에 복사”를 클릭하면 해당 템플릿이 하위 테마 디렉터리에 추가됩니다.

주의: 하위 테마가 활성화된 상태에서 파일을 복사하면 즉시 상위 테마 대신 하위 테마 버전의 파일이 사용됩니다. functions.php 파일은 별도로 생성되며 여기에서 복사할 수 없습니다.

하위 테마 파일

상위 테마에서 복사된 템플릿이 여기에 나열됩니다. 외관 메뉴의 테마 편집기로 편집할 수 있습니다. 하위 테마 이미지를 선택한 후 “선택한 항목 삭제”를 클릭하여 제거하세요.

하위 테마 이미지

테마 이미지는 하위 테마의 images 디렉토리에 위치하며 스타일시트 전용입니다. 콘텐츠 이미지는 미디어 갤러리를 사용하세요. 이미지 업로드 양식으로 새 이미지를 업로드할 수 있습니다.

하위 테마 스크린샷

하위 테마용 맞춤 스크린샷을 여기에 업로드할 수 있습니다. 테마 스크린샷은 4:3 비율(예: 880px x 660px)의 JPG, PNG 또는 GIF 파일이어야 합니다. 파일명은 “screenshot”으로 변경됩니다.

하위 테마를 Zip 아카이브로 내보내기

“내보내기”를 클릭하면 하위 테마를 다운로드하여 다른 워드프레스 사이트에서 사용할 수 있습니다.

미리보기 및 활성화

중요: 활성화 전에 하위 테마를 반드시 테스트하세요!

일부 테마(특히 상용 테마)는 상위 템플릿 파일을 올바르게 로드하지 않거나 하위 테마 스타일시트/PHP 파일을 자동으로 불러오지 않습니다.

최악의 경우 하위 테마를 활성화하면 웹사이트가 손상될 수 있습니다.

1. 워드프레스 관리 화면에서 외관 > 테마로 이동하세요. 이제 설치된 테마 중 하나로 새 하위 테마가 표시됩니다.
2. 새 하위 테마 아래의 “실시간 미리보기”(테마 커스터마이저)를 클릭하여 작동 상태를 확인하세요.
3. 하위 테마를 적용할 준비가 되면 “활성화”를 클릭하세요.

멀티사이트 사용자: 라이브 미리보기를 사용하려면 네트워크 활성화된 하위 테마가 필요합니다. 네트워크 관리자의 “테마”로 이동하세요.

주의사항

• 임의의 주석은 지원되지 않습니다. 사용자 정의 스타일을 미리 보고 수정할 수 있는 높은 수준의 유연성을 제공하려면 정교한 파싱 시스템이 필요합니다. 스타일시트 내 특정 요소에 바인딩된 주석을 유지하는 것은 그로 인해 추가되는 가치에 비해 지나치게 많은 비용이 듭니다. 향후 옵션으로 포함하기 위해 노력 중이지만, 현재 모든 주석은 하위 테마 스타일시트 코드에서 제거됩니다.
• @keyframes 또는 @font-face 규칙은 지원되지 않습니다. Child Theme Configurator는 @media 및 @import만 지원합니다. 다른 @rules가 필요한 경우 별도의 스타일시트에 작성하여 Child Theme 스타일시트에 임포트하십시오.
• 두 가지 색상만 사용 가능한 그라데이션. Child Theme Configurator는 강력하지만 그라데이션 인터페이스를 간소화했습니다. 중간 정지점 없이 두 가지 색상만 사용하면 원하는 그라데이션을 자유롭게 적용할 수 있습니다.
• CSS 속성은 자동으로 탐지됩니다. Child Theme Configurator는 상위 스타일시트에 존재하는 속성을 불러옵니다. “Raw CSS” 텍스트 영역을 사용하여 언제든지 새 속성을 추가할 수 있습니다.
• 레거시 그라디언트 구문은 지원되지 않습니다. Child Theme Configurator는 MS 필터 그라디언트나 레거시 웹킷 그라디언트를 지원하지 않습니다. 이러한 그라디언트는 상위 테마에서 사용될 경우 계속 작동하지만, 하위 테마 스타일시트에는 작성되지 않습니다. 수요가 있을 경우 향후 릴리스에서 추가할 수 있으나, 대부분의 사용자는 이미 업그레이드했을 것입니다.

문서

이동: http://www.childthemeplugin.com/

세르보크로아티아어 번역 제공: Borisa Djuraskovic borisad@webhostinghub.com http://www.webhostinghub.com

저작권: (C) 2014-2018 Lilaea Media