WordPress 사용자가 익숙해지는 한 가지는 테마 사용자 정의 옵션이 필요하지 않습니다. 아이디어는 : 테마를 다운로드하고 테마 패널에서 활성화하고, 사용자 정의 패널에 액세스하고, 마우스 클릭만으로 테마의 색상, 레이아웃, 글꼴 등을 조정하기 시작합니다.
<theme> WordPress는 테마 개발자에게 Customizer API를 제공합니다. 이것은 일관된 커스터마이징 인터페이스의 생성을 용이하게하는 깨끗하고 객체 지향적 인 메소드 세트입니다. 사용자 정의 패널에서 사용자는 PHP 또는 CSS 코드를 엉망으로 만들지 않고도 쉽게 변경하고 라이브 리뷰를 할 수 있습니다.
<options> Customizer API를 사용하여 테마 옵션을 개발하는 것은 간단하고 논리적 프로세스이지만 일정량의 반복적 인 코드를 작성하는 것이 포함됩니다. 기능 및 안전한 커스터마이저 옵션을 구축하는 데 필요한 일부 단계를 줄이기 위해 Aristeides Stathopoulos는 무료 및 오픈 소스 플러그인 Kirki를 개발하고 있습니다. </options></theme></press></p>
<i>이 게시물에서는 Kirki를 WordPress 테마에 통합하는 방법과 몇 가지 커스터마이저 옵션을 구축하는 방법을 보여 드리겠습니다.
<ea> 키 테이크 아웃
<p>
<enh> Kirki는 더 간단한 구문 및 고급 기능을 제공하여 WordPress Customizer API를 향상시켜 개발자가 코드를 적게 쓸 수 있도록합니다.
<it> 툴킷은 끊임없이 발전하고 있으며 사용자는 Github의 개발에 기여하도록 권장됩니다. </it></enh></p>
<can> Kirki는 플러그인 또는 테마 내의 라이브러리로 WordPress 테마에 쉽게 통합 될 수 있으며, 사용 방법에 대한 유연성을 제공합니다.
<provides> Kirki는 컬러 피커, 라디오 이미지 및 TextAreas와 같은 다양한 컨트롤을 제공하며, 최종 사용자가 관리하기 쉬운 사용자 정의 가능한 테마 옵션을 작성하는 데 사용할 수 있습니다.
<it> 툴킷은 AJAX를 사용하여 실시간 미리보기를 지원하여 페이지 재 장전없이 변경 사항에 대한 즉각적인 피드백을 허용하여 사용자 경험을 향상시킵니다.
<p>
<irk> Kirki 란 무엇입니까? </irk></p>
<what> Kirki가 그 뒤에있는 개발자로부터 무엇인지 들어 봅시다 : <p>
</p>
<is> Kirki는 프레임 워크가 아닙니다. WordPress 개발자가 커스터마이저를 사용하고 코드를 추상화하고 모든 사람이 아름답고 의미있는 사용자 경험을보다 쉽게 만들 수 있도록 고급 기능과 유연성을 활용할 수 있도록 툴킷입니다. <p>.
<document document> Kirki 문서
</document></p>
<to>이 툴킷에 대해 두 가지 점을 집으로 몰아 넣고 싶습니다. <h2>
<ul>
<does> Kirki는 WordPress Customizer API를 대체하지 않습니다. "기본 WordPress 메소드에 대한 래퍼를 만들고 구문을 단순화하고 더 적은 코드로 더 많이 쓸 수 있습니다". Kirki API와 함께 기본 사용자 정의 방법을 사용할 수 있습니다. 더 좋은 점은 Kirki에 접근하기 전에 Customizer API에 익숙해지는 것이 좋습니다. Customizer 객체에 대한 유용한 소개를 찾고 있다면 Narayan Prusty의 WordPress 테마 커스터마이징 API로 시작하십시오.
Kirki는 WordPress Customizer 자체와 달리 지속적인 진화와 개선 상태에 있습니다. 따라서 모든 버그 보고서 또는 새로운 기능 요청은 Github Repo에 자리 잡고 있으며 플러그인의 개발 버전을 다운로드하고 개발에 기여할 수 있습니다.
<li>
<to> 이제 Kirki가 행동하는 것을 볼 차례입니다. 따라 가려면 WordPress 테마를 준비 하거나이 게시물에서 논의 된 모든 코드를 포함하는 Superminimal 데모 테마를 가져옵니다.
<k> 테마에 kirki를 포함시키는 방법
<is> Kirki는 WordPress 플러그인으로 포장되었습니다. 따라서 WordPress.org 플러그인 저장소에서 또는 WordPress 설치의 백엔드에서 직접 다운로드하여 압축을 풀고 활성화 할 수 있습니다.
<to> 테마에 Kirki를 도서관으로 포함시키려는 경우 아래에 요약 된 단계를 따르십시오. </to></is></k></to>
</li>
<li>
</li> Kirki 디렉토리를 테마의 폴더에 복사하십시오. </does>
</ul>
</h2>
<p>
이 기사의 데모 테마에서 Kirki 파일은 inc라는 디렉토리 안에 있습니다. </p>
<h2> functions.php 에이 줄을 추가하여 Kirki와의 테마를 '토크'하십시오 (테마의 파일 구조에 맞게 Kirki 폴더의 경로를 조정하십시오). </h2>
<p>
</p>
<p>
</p> Kirki 구성 옵션을 포함하도록 함수를 추가하고 Kirki/Config 필터에 연결하십시오. 이 기능에 추가하고 싶은 것은 당신에게 달려 있습니다. 이 게시물의 경우 Kirki가 새로운 위치, 즉 플러그인 폴더 대신 테마의 폴더를 '알리기 위해'코드를 추가하여 최소한으로 유지합시다.
<ul>
<this>이 구성 함수 내부에있어 테마와 일치하도록 WordPress Customizer의 모양과 느낌을 제어 할 수 있습니다. 가장 중요한 것은 여기에서 플러그인에서 사용하는 모든 문자열을 테마 내에서 번역 할 수 있도록하는 데 필요한 코드를 추가하는 것입니다. 이를 달성하는 방법에 대한 지침은 Superminimal Demo 테마 또는 Kirki 문서 페이지를 살펴보십시오. <li>
<add> 옵션 추가를 시작하겠습니다
<is> Kirki는 이제 몇 가지 커스터마이저 옵션을 구축 할 수 있도록 도와 줄 준비가되었습니다. functions.php를 사용하거나 작업을 위해 전용 파일을 만들 수 있습니다. <p><live live> 커스터마이저 옵션은 선택적으로 패널 내부에 위치한 섹션 내부에 살아 있습니다. 이 기사의 데모 프로젝트 I에서는 네이티브 커스터마이저 메서드를 사용하여 전용 패널 내부의 모든 섹션을 그룹화합니다.
<p>
<section> 다음, 이전 add_panel customizer 메소드 바로 아래 에이 코드를 배치하여 사이트 텍스트 색상, 사이트 레이아웃 및 바닥 글 텍스트 옵션에 대한 섹션을 각각 추가하십시오. </section></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>if ( ! class_exists( 'Kirki' ) ) {
</span> <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
이제 첫 번째 Kirki 기반 옵션을 추가 할 준비가되었습니다
텍스트 색상 옵션
모든 옵션 관련 코드는 함수 내부에 배치해야합니다. 그런 다음이 기능은 Kirki/Fields 필터를 통해 필터링됩니다.
<span>function superminimal_customizer_config() {
</span> <span>$args = array(
</span> <span>// Only use this if you are bundling the plugin with your theme
</span> <span>'url_path' => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
<span>);
</span> <span>return $args;
</span> <span>}
</span> <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>
로그인 후 복사
로그인 후 복사
로그인 후 복사
WordPress 테마 사용자에게 텍스트 색상을 쉽게 변경할 수있는 방법을 제공하겠습니다. 이것은 Kirki로 빠르게 이루어집니다. return $ 필드 바로 위의 Superminimal_demo_fields () 함수 내부에 다음 코드 스 니펫을 추가하십시오. 성명.
Kirki는 한 번에 설정과 관련 제어를 추가하기 위해 응축 된 구문을 제공합니다.
$ fields [] 배열을 분해하겠습니다
유형은 사용자가 선택한 옵션의 값,이 경우 색상 제어의 값을 입력하는 특정 컨트롤을 나타냅니다.
설정 설정은 커스터마이저 객체의 라이브 예정식, 저장 및 살균을 처리하는 커스터마이저 설정의 ID를 나타냅니다.
레이블 및 설명은 사용자와 의사 소통 할 수 있습니다. 레이블은 옵션에 대한 제목을 표시하고 설명은 옵션이하는 일에 대한 표시를 제공합니다.
섹션은이 특정 색상 제어를 호스팅하는 섹션의 ID를 나타냅니다.
우선 순위는 동일한 섹션 내의 다른 컨트롤과 관련 하여이 특정 색상 제어의 위치를 나타냅니다.
다음, 테마 사용자에게 사이트 레이아웃을 사용자 정의 할 수있는 옵션을 제공합시다.
이와 관련하여 Kirki는 무엇을 제공 했습니까? Kirki API는 필요한 매개 변수를 사용하여 다른 컨트롤의 값에 따라 커스터마이저의 컨트롤을 숨기거나 표시합니다.
예를 들어 의 경우, 사용자가 확인란을 확인한 경우에만 바닥 글 텍스트를 수정할 수 있도록 TextArea를 표시한다고 가정 해 봅시다. 이를 달성하려면 Superminimal_Footer_Text 컨트롤에 다음 코드를 추가하십시오.
<span>function superminimal_customizer_config() {
</span> <span>$args = array(
</span> <span>// Only use this if you are bundling the plugin with your theme
</span> <span>'url_path' => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
<span>);
</span> <span>return $args;
</span> <span>}
</span> <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>
로그인 후 복사
로그인 후 복사
로그인 후 복사
TextArea Control 코드에 위의 스 니펫을 추가하면 TextRea Control이 사용자 정의기에 표시되기 전에 Superminimal_Reveal_Footer_Text Control의 값이 1과 동일하도록합니다. superminimal_demo_fields () 함수에 superminimal_reveal_footer_text 컨트롤을 추가하겠습니다.
superminimal_reveal_footer_text 컨트롤은 기본적으로 기본적으로 0으로 설정된 확인란입니다. 즉, 확인되지 않았습니다. 이것은 Textarea가 표시되는 것을 방지합니다.
는 확인란을 확인한 후에 만, 즉 값을 0에서 1으로 변경함으로써 Textarea가 커스터마이저에 나타납니다.
라이브 미리보기 향상
커스터마이저에는 강력한 JavaScript API가 제공되어 미리보기 영역에 Ajax 기능을 추가합니다. 이 향상을 통해 사용자는 전체 Customizer 미리보기 페이지가 새로 고침 될 때까지 실시간으로 수정 사항을 확인할 수 있습니다.
우리는 $ fields [] 배열에 몇 가지 편리한 매개 변수를 추가하여 Kirki와 동일한 결과를 달성 할 수 있습니다.
예를 들어 ajaxified 라이브 미리보기를 superminimal_body_color 설정에 추가하려면 다음 스 니펫을 적절한 $ Fields [] 배열에 추가하십시오.
위의 코드가 무엇을하는지 설명하겠습니다.
먼저, 위의 코드는 전송 메소드를 새로 고침 (기본값)에서 postmessage로 변경합니다. 이것은 라이브 미리보기에 JavaScript를 사용해야한다는 커스터마이저의 신호입니다.
다음으로, JS_VARS 매개 변수 값은 본문과 P 요소가 CSS 색상 특성을 사용하여 수정되어야 함을 나타냅니다.
Kirki는 함수 매개 변수에 대해 사전 정의 된 두 가지 값을 제공합니다. 배경색, 색상, 글꼴 크기 등과 같은 매장을 추가하는 설정이 추가되는 경우 CSS 값을 사용하십시오.
html 값을 사용하는 방법의 예는 바닥 글 텍스트의 변경 사항을 관리하는 설정에 Ajax 라이브 미리보기 기능을 추가하겠습니다. Superminimal_Footer_Text 설정이 포함 된 $ fields [] 배열 끝에이 스 니펫을 추가하십시오.
그게 다야, 가서 Superminimal_Footer_Text 섹션 내부의 TextRea에서 무언가를 쓰십시오. 완전한 페이지 재 장전없이 미리보기 화면의 해당 바닥 글 텍스트가 그에 따라 변경됩니다. 시원한!
무선 이미지 컨트롤이있는 ajax 라이브 미리보기
CSS 나 HTML이 Ajax Live 미리보기를 가능하게하는 함수 매개 변수에 적합하지 않은 경우가있을 수 있습니다. 예점도는 사이트 레이아웃을 변경하기위한 설정입니다. CSS를 함수 매개 변수의 값으로 사용하는 것은 해당 설정이 CSS 속성 값을 저장하지 않기 때문에 그리 의미가 없습니다. 마찬가지로, HTML을 사용해도 절단되는 것은 아닙니다. 실제로 fullwidth
,
사이드 바리-왼쪽
또는
사이드 바로 오이트 를 뱉어 내게됩니다. 제어 버튼이 선택되었습니다. 그러나 이것은 당신이 성취하고자하는 것이 될 수 없습니다.
좋은 소식은 기능 매개 변수의 값으로 사용자 정의 JavaScript 함수 이름을 연결할 수 있다는 것입니다.
<span>function superminimal_customizer_config() {
</span> <span>$args = array(
</span> <span>// Only use this if you are bundling the plugin with your theme
</span> <span>'url_path' => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
<span>);
</span> <span>return $args;
</span> <span>}
</span> <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>
로그인 후 복사
로그인 후 복사
로그인 후 복사
사용자 정의 기능이있는 위치에 JavaScript 파일을 큐를 잡고 Customize_preview_init Action Hook에 연결해야합니다.
마지막으로, 기본 커스터마이저 JavaScript API를 사용하여 라이브 미리보기를 처리하는 JavaScript 함수를 작성하십시오.
Kirki의 가장 큰 장점은 WordPress Customizer API 대신에 함께 사용할 수 있다는 것입니다. 따라서 상황에 필요한 경우 두 API 사이를 쉽게 전환 할 수 있습니다.
자원
더 많은 배가 고프다? 훌륭한 자료가 있습니다.
Kirki 툴킷 문서.
Aristeides Stathopoulos의 Kirki Customizer를 사용하여 WordPress 테마 구축.
테마 옵션 - WordPress.org 테마 핸드북의 Customizer API.
결론
Kirki 툴킷을 WordPress 테마에 통합하는 방법을 보여주었습니다.
Kirki는 적극적으로 개발되고 지원되고 있습니다. API 및 사용자 정의 컨트롤은 이미 Customizer 테마 옵션을 개발하는 데 걸리는 시간을 크게 최적화합니다. WordPress.org 테마 저장소에 테마를 나열하려는 경우 특히 중요합니다. 실제로 사용자 정의 옵션을 제공하는 테마는 사용자 정의 옵션 페이지가 아닌 커스터마이저를 통해 그렇게해야합니다.
이 게시물에서 논의 된 코드의 세부 사항을 탐구하려면 Github에서 Superminimal 데모 테마를 자유롭게 다운로드하십시오.
나는 당신의 의견을 기대합니다!
kirki
를 사용한 빠른 WordPress Customizer 옵션 개발에 대한 자주 묻는 질문
Kirki 란 무엇이며 WordPress 개발에 어떻게 도움이됩니까?
Kirki는 WordPress의 테마를 개발하는 프로세스를 단순화하도록 설계된 툴킷입니다. WordPress 테마를보다 쉽게 작성, 사용자 정의 및 관리 할 수있는 다양한 기능을 제공합니다. 여기에는 실시간으로 변경 사항을 미리 볼 수있는 커스터마이저, 다양한 유형의 컨텐츠에 대한 다양한 컨트롤 및 필요한 기능 만 포함 할 수있는 모듈 식 구조가 포함됩니다. Kirki를 사용하면 개발자가 시간과 노력을 절약하고보다 강력하고 유연한 테마를 만들 수 있습니다.
WordPress 용 Kirki를 설치하고 설정하는 방법
Kirki 설치는 간단합니다. WordPress 플러그인 디렉토리에서 다운로드하여 다른 플러그인과 마찬가지로 설치할 수 있습니다. 일단 설치되면 WordPress Customizer를 통해 Kirki의 기능에 액세스 할 수 있습니다. Kirki를 설정하려면 테마에 대한 구성을 추가해야합니다. 여기에는 테마 functions.php 파일에 몇 줄의 코드를 추가하는 것이 포함됩니다. 구성은 테마의 옵션과 설정을 지정합니다.
Kirki는 어떤 유형의 컨트롤을 제공합니까?
Kirki는 다양한 유형의 컨트롤에 대한 광범위한 컨트롤을 제공합니다. 여기에는 텍스트, 확인란 및 라디오 버튼과 같은 기본 컨트롤과 컬러 피커, 이미지 업 로더 및 타이포그래피 선택기와 같은 고급 컨트롤이 포함됩니다. 각 컨트롤에는 자체 옵션 및 설정 세트가 제공되므로 요구에 맞게 컨트롤을 사용자 정의 할 수 있습니다.
위 내용은 Kirki의 빠른 WordPress Customizer 옵션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
