입니다.
테마에 대한 옵션을 제공하기위한 Kirki Toolkit 슬라이더 옵션을 제공하기위한 FlexSlider
팀 쇼케이스, 세부 제품 설명 및 대화식 슬라이더와 같은 동적 요소를 포함하여 홈페이지가 유익하고 호소력이 있는지 확인하십시오.
이 파일 내부에 슬라이더를 보여주기 위해 코드를 추가합니다.
<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
축하합니다! 당신은 당신의 테마로 Flexslider 파일을 성공적으로 que습니다. 페이지 소스를 확인하여 Enqueue가 성공했는지 확인할 수 있습니다. 페이지를 마우스 오른쪽 버튼으로 클릭하고 페이지보기 소스를 클릭하여 페이지 소스를 확인할 수 있습니다. FlexsLider를 검색하면 JS 및 CSS 파일이 성공적으로 흡수되었음을 알게 될 것입니다.
노트
<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
이 줄은 슬라이드 내부의 이미지가 존재하는지 여부를 확인합니다. 이미지가 존재하면 FlexSlider가 호출됩니다. 이제 아래 코드를 사용하여 각 슬라이드의 이미지를 반영합니다.
<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
<span>Kirki<span>::</span>add_section( 'section_id', array( </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span> <span>'panel' => '', // Not typically needed. </span> <span>'priority' => 160, </span> <span>'capability' => 'edit_theme_options', </span> <span>'theme_supports' => '', // Rarely needed. </span><span>) );</span>
그런 다음 다음 코드를 교체하십시오
다음 코드와 함께
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>function my_custom_text_settings( $fields ) {
</span>
<span>// Add the controls
</span> <span>$fields[] = array(
</span> <span>'label' => __( 'My custom control', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting',
</span> <span>'type' => 'text',
</span> <span>'priority' => 10,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>$fields[] = array(
</span> <span>'label' => __( 'My custom control 2', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting_2',
</span> <span>'type' => 'text',
</span> <span>'priority' => 20,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span></pre><div class="contentsignin">로그인 후 복사</div></div>
설명 상자
<can> 설명 상자는 제품에 대한 유용한 설명을 제공 할 수 있습니다. 이 상자는 슬라이더 바로 아래에 위치하여 방문자의 관심을 끌 수 있습니다. 이 상자는 제품에 대한 세부 정보를 보여 주려면 도움이됩니다. 일반적으로 3 ~ 4 개의 상자 (또는 패널)가있을 수 있지만 원하는 경우 더 많은 것을 가질 수 있습니다. <h4>.
<orial>이 튜토리얼에서는 3 개의 상자를 생성하고 있으며 Foundation CSS 프레임 워크의 데이터 평등 속성을 사용하여 각 패널에 균일 한 높이를 제공합니다.
<to> 일하러 가자! </to></orial>
</h4>
패널 생성
<we> 처음에는 설명 상자를 보여주기위한 별도의 패널을 만들 것입니다. 또한 동일한 패널 아래에서 모든 옵션을 제공 할 수 있지만 (첫 번째 패널에서) 나중에 사용하기 위해 물건을 분리하는 것은 좋은 습관입니다.
<add> 테마-options.php 파일 안에 다음 코드를 추가해야합니다.
<p>
섹션 생성
<create> 이제 제품 설명을 위해 두 섹션을 생성합니다. 한 섹션에 이미지를 업로드하고 다른 섹션에 설명을 추가합니다. </create></p>
<a> 먼저, 다음 코드를 사용하여 이미지의 섹션을 만듭니다.
<p>
그런 다음 설명을위한 섹션을 만듭니다
</p>
<iel> 필드 생성
<need> 다음, 이미지 입력을 위해 3 개의 필드 (3 개의 상자와 3 개의 이미지가 있기 때문에)를 만들어야하며 그 후 제품 설명을위한 3 개의 필드를 만들 것입니다. 코드는 다음과 같습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span></pre><div class="contentsignin">로그인 후 복사</div></div>
<p>
</p>
<out> 출력 표시
<need> 이제 다음 코드를 사용하여 사용자 정의 템플릿에 출력을 표시해야합니다.<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;"><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>Kirki<span>::</span>add_config( 'my_theme', array(
</span> <span>'capability' => 'edit_theme_options',
</span> <span>'option_type' => 'option',
</span> <span>'option_name' => 'my_theme',
</span><span>) );</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<the> 이것은 첫 번째 상자의 출력을 표시합니다. 마찬가지로, 우리는 다른 두 상자에 대해서도 똑같이 할 것입니다. <p>
</p>
<your> 이제 커스터마이저로 이동하여 이미지와 설명을 추가하면 입력을 표시하는 페이지가 표시됩니다!
<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;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span> <span>'priority' => 10,
</span> <span>'title' => __( 'My Title', 'textdomain' ),
</span> <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
제품 세부 사항
이 부분에는 한쪽에 이미지가 있고 다른쪽에는 설명이있는 두 개의 행이 포함되어 있습니다. 이 페이지 의이 부분이나 섹션은 방문자에게 제품의 가장 중요한 측면을위한 시각적으로 사용될 수 있습니다.
패널 생성
<a> 먼저 패널을 만들어 봅시다. 우리는 그것을 제품 세부 사항이라고 부를 것입니다. <p>
</p>
섹션 생성
</a><a> 아래 코드를 사용하여 필드에 대한 섹션을 만들 것입니다.
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173959528083203.png" class="lazy" alt="WordPress 웹 사이트에 맞는 사용자 정의 홈페이지 디자인" >
<iel> 필드 생성
<prev> 이전에 다루는 개념과 유사하게 아래 코드를 사용하여 두 개의 이미지 필드와 2 개의 텍스트 영역 필드를 생성합니다.
<h3>
</h3>
<put> 출력 표시
<show> 사용자 정의 홈페이지 템플릿의 출력을 표시해야합니다. HomePage.php 파일을 열고 다음 코드를 추가하십시오.
<p>
<same> 단지 다른 행에 대해서도 똑같이합니다. 그런 다음 커스터마이저로 가서 새로 고침하십시오. </same></p>
<h4>
팀 쇼케이스
<the>이 페이지 의이 섹션은 팀에 대한 정보를 제공하는 데 사용됩니다. 이 섹션은 방문자가 누구와 함께 일할 것인지 알 수있게되므로 유용합니다.
<this> 일반적 으로이 섹션은 많은 팀원으로 구성 될 수 있습니다. 이 예에서는 3 명의 회원에게만 옵션을 제공하지만 필요에 따라 확장 할 수 있습니다.
패널 생성
<a> 우리는 새로운 패널을 만들어 팀 쇼케이스라고 부릅니다.
</a></this></the>
</h4>
섹션 생성
다음으로 팀 쇼케이스를위한 옵션이있는 섹션을 만들 것입니다. <p>
</p>
<iel> 필드 생성
<a> 아바타의 3 개의 이미지 필드와 멤버의 이름을위한 3 개의 텍스트 필드로 구성된 총 6 개의 필드가 있습니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>Kirki<span>::</span>add_section( 'section_id', array(
</span> <span>'title' => __( 'My Title', 'textdomain' ),
</span> <span>'description' => __( 'My Description', 'textdomain' ),
</span> <span>'panel' => '', // Not typically needed.
</span> <span>'priority' => 160,
</span> <span>'capability' => 'edit_theme_options',
</span> <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span></pre><div class="contentsignin">로그인 후 복사</div></div>
<put> 출력 표시
<display> 이제 우리는 커스텀 홈페이지 템플릿에 팀의 세 멤버의 이미지와 이름을 표시합니다. HomePage.php를 열고 다음을 삽입하십시오
<store> 먼저 변수에 이미지와 텍스트의 값을 저장합시다.
<h4>
그런 다음 아래 코드를 사용하여 각 멤버를 표시 할 수 있습니다.<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;"><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>Kirki<span>::</span>add_config( 'my_theme', array(
</span> <span>'capability' => 'edit_theme_options',
</span> <span>'option_type' => 'option',
</span> <span>'option_name' => 'my_theme',
</span><span>) );</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173959530851931.png" class="lazy" alt="WordPress 웹 사이트에 맞는 사용자 정의 홈페이지 디자인" >
<ics> 고급 주제
<the> 다른 페이지에서 컨텐츠를 가져 오기
<f> 우리는 다른 페이지의 내용을 홈페이지에 가져올 수도 있습니다. 회사에 대한 정보를 보여주고 이미 미국 정보 페이지가있는 경우 특히 유용합니다. 동일한 콘텐츠를 다시 쓰지 않아도됩니다. Kirki를 사용하여 해당 콘텐츠를 가져올 수 있습니다
<a> 우리는이 옵션을 제공하기 위해 별도의 패널을 만들 수 있습니다.
<code> 다음은 패널의 코드입니다 :
<the> 그리고 다음은 섹션의 코드입니다
<h4>
<ll> 다음은 관리자가 첫 페이지에 표시 할 페이지를 선택할 수있는 곳에서 드롭 다운을 표시합니다. Kirki의 드롭 다운 페이지 옵션을 사용할 수 있습니다
<the> 다음을 사용하여 필드를 추가 할 수 있습니다
</the></ll>
</h4>
이를 통해 WordPress Customizer 내부의 옵션이 가능합니다. 이제 HomePage.php 파일을 편집하여 컨텐츠를 표시 할 수 있습니다. 해당 파일을 열고이 콘텐츠를 표시하려는 다음 코드를 복사하십시오.
<p>
<b> 프론트 페이지에 대한 사이드 바를 만듭니다
<b> WordPress Codex를 따르는 경우 테마의 사이드 바를 만드는 것은 간단합니다. 여기서 너무 많은 세부 사항을 사용하지 않고 라이브러리/위젯-아레스 (widget-areas.php 파일) 내부의 다음 코드를 사용 하여이 테마에 사이드 바를 추가합니다.
<get> 위젯-areas.php를 열고 다음을 추가하십시오
</get></b></b></p>
<p> 노트
라이브러리 폴더 내부에 위치한 위젯-areas.php 파일에는이 테마의 모든 위젯 영역이 포함되어 있으므로 사이드 바 코드를 추가했습니다.
<just> 그런 다음 해당 페이지 에이 위젯 영역을 표시하려면 HomePage.php 파일을 편집하면됩니다. HomePage.php를 열고 다음 코드를 추가하십시오
</just></p>
<p>
<you> 이제이 사이드 바에 위젯을 추가하면 프론트 페이지에만 표시됩니다. </you></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;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span> <span>'priority' => 10,
</span> <span>'title' => __( 'My Title', 'textdomain' ),
</span> <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<up> 포장
<orial>이 튜토리얼에서는 Kirki 툴킷을 사용하여 WordPress 웹 사이트의 방문 페이지를 만드는 방법을 설명했습니다. CSS로 이것을 장식하고 원하는 방식으로 사용자 정의 할 수 있습니다. 이 툴킷을 구현하는 것에 대한 멋진 아이디어가 있고 아래의 의견 섹션에서 알려주십시오. 문제가 발생하거나 질문이 있으시면 알려 주시면 기꺼이 도와 드리겠습니다. .<questions> WordPress 웹 사이트의 사용자 정의 홈 페이지 디자인에 대한 자주 질문
<create> WordPress에서 정적 프론트 페이지를 만드는 방법? <h3> WordPress에서 정적 첫 페이지를 만드는 것은 매우 간단합니다. 먼저 WordPress 대시 보드에 로그인해야합니다. 그런 다음‘페이지’로 가서‘새 추가’를 클릭하십시오. 이 새로운 페이지 '홈'또는 원하는 다른 이름의 이름을 지정하십시오. 그런 다음 새로운 페이지를 만들어 '블로그'또는 '게시물'으로 지정하십시오. 이 두 페이지를 만들면‘설정’으로 이동 한 다음‘읽기’로 이동하십시오. ‘홈페이지 디스플레이’에서‘정적 페이지’를 선택하십시오. 드롭 다운 메뉴에서 '홈페이지'를 홈 용 페이지로 설정하고 블로그 나 게시물을 위해 만든 페이지로 '게시물 페이지'를 설정하십시오. 설정을 마무리하려면 '변경 사항 저장'을 클릭하십시오. </h3> <p> WordPress 홈페이지를 사용자 정의 할 수있는 방법 </p> <h3> WordPress는 홈페이지를 사용자 정의 할 수있는 다양한 방법을 제공합니다. WordPress Customizer를 사용하여 실시간으로 변경 사항을 미리 볼 수 있습니다. 액세스하려면‘외관’으로 이동 한 다음‘사용자 정의’로 이동하십시오. 여기에서 사이트의 신원, 색상, 배경 이미지, 메뉴, 위젯 등을 변경할 수 있습니다. 또는 Elementor 또는 Beaver Builder와 같은 페이지 빌더 플러그인을 사용할 수 있습니다. 이 플러그인은 홈페이지를 쉽게 설계 할 수있는 드래그 앤 드롭 인터페이스를 제공합니다. WordPress 홈페이지, 청중과 목적을 명심하는 것이 중요합니다. 홈페이지가 자신이 누구이며 무엇을하는지 명확하게 전달하십시오. 고품질의 이미지와 강력한 헤드 라인을 사용하여 방문자의 관심을 끌 수 있습니다. 방문자가 사이트를 쉽게 탐색 할 수 있도록 디자인을 깨끗하고 간단하게 유지하십시오. 또한 웹 트래픽의 대다수가 모바일 장치에서 나오기 때문에 사이트가 모바일 친화적인지 확인하십시오. </h3> 내 WordPress 홈페이지에 사용자 정의 헤더를 추가 할 수 있습니까? <p> </p> WordPress 홈페이지에 맞춤 헤더, '외관'으로 이동 한 다음 'Customize'로 이동하십시오. 테마에 따라‘헤더’또는‘헤더 이미지’를 클릭하십시오. 여기에서 새 이미지를 업로드하고 원하는 크기로 자르고 원하는 텍스트 나 링크를 추가 할 수 있습니다. 완료되면 '저장 및 게시'를 클릭하십시오. <h3> 내 WordPress 홈페이지에 사용자 정의 바닥 글을 추가하려면 어떻게해야합니까? </h3> <p> WordPress 홈페이지에 사용자 정의 바닥 글을 추가하는 것은 사용자 정의 추가와 유사합니다. 헤더. ‘외관’으로 가서‘사용자 정의’. 테마에 따라 '바닥'또는 '바닥 글 설정'을 클릭하십시오. 여기서 바닥 글 텍스트를 사용자 정의하고 위젯을 추가하며 레이아웃을 변경할 수 있습니다. 완료되면 '저장 및 게시'를 클릭하십시오<add> 내 WordPress 홈페이지에 슬라이더를 추가하려면 WordPress 홈페이지에 슬라이더를 추가하려면 슬라이더 혁명 또는 스마트 슬라이더와 같은 슬라이더 플러그인이 필요합니다. 선택한 플러그인을 활성화하면 새 슬라이더를 만들고 이미지 추가 및 설정을 사용자 정의 할 수 있습니다. 그런 다음 플러그인에 따라 단축 코드, 위젯 또는 템플릿 태그를 사용하여 홈페이지에 슬라이더를 추가 할 수 있습니다. <h3> 내 WordPress 홈페이지에 블로그 섹션을 추가 할 수 있습니까? WordPress 홈페이지에 블로그 섹션을 추가하십시오. 먼저 블로그 게시물에 대한 별도의 페이지를 만들었습니다. 그런 다음‘외관’으로 가서‘사용자 정의’. ‘홈페이지 설정’을 클릭하고‘홈페이지 디스플레이’에서‘최신 게시물’을 선택하십시오. 이것은 홈페이지에 가장 최근의 블로그 게시물을 표시합니다. </h3> <p> 내 WordPress 홈페이지에 소셜 미디어 아이콘을 추가하려면 어떻게해야합니까? </p> <h3> WordPress 홈페이지에 소셜 미디어 아이콘을 추가하려면 A를 사용할 수 있습니다. 소셜 미디어 위젯 또는 간단한 소셜 아이콘과 같은 소셜 미디어 플러그인. 선택한 플러그인을 설치하고 활성화 한 후에는 소셜 미디어 링크를 추가하고 선호하는 아이콘 스타일과 크기를 선택할 수 있습니다. 그런 다음 위젯을 사용하여 홈페이지에 소셜 미디어 아이콘을 추가 할 수 있습니다. </h3>
<p> WordPress 홈페이지 Seo 친화적 인 방법을 어떻게 만들 수 있습니까? </p>
<h3> WordPress 홈페이지 Seo 친화적으로 만들 수 있습니다. 깨끗하고 반응이 좋은 테마를 선택합니다. Yoast SEO와 같은 SEO 플러그인을 사용하여 제목 태그 및 메타 설명을 최적화하십시오. 콘텐츠에 관련 키워드를 포함 시키지만 키워드를 피하십시오. 헤더 태그를 사용하여 컨텐츠를 구성하고 읽기 쉽도록하십시오. 또한 페이지 속도가 순위 요인이므로 사이트가 빠르게로드되도록하십시오. </h3> WordPress 홈페이지에 연락처 양식을 추가하려면 WordPress 홈페이지에 연락처 양식을 추가하려면 어떻게해야합니까? 연락처 양식 7 또는 WPForms와 같은 연락처 양식 플러그인이 필요합니다. 선택한 플러그인을 설치하고 활성화 한 후에는 새로운 연락처 양식을 작성하고 필요에 따라 필드를 사용자 정의 할 수 있습니다. 그런 다음 바로가 코드를 사용하여 홈페이지에 연락처 양식을 추가 할 수 있습니다. <p></p></add></p></create></questions></orial></up></the>위 내용은 WordPress 웹 사이트에 맞는 사용자 정의 홈페이지 디자인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
