WordPress 웹 사이트에 맞는 사용자 정의 홈페이지 디자인

WordPress는 웹의 많은 사이트에서 사용됩니다. 다양한 유형의 사이트를 만들 수 있지만 모든 웹 사이트의 가장 중요한 구성 요소 중 하나는 항상 홈페이지입니다. 완벽한 방문 페이지는 바운스 요금을 줄이고 트래픽 및 고객을 높이는 데 도움이됩니다. 이 기사에서는 WordPress 웹 사이트의 사용자 정의 홈페이지 (또는 방문 페이지)를 만드는 방법을 다룰 것입니다. 이 목표를 달성하는 방법에는 여러 가지가 있습니다. 이것은 단지

일방적 인 방법

입니다. 이 기사에서 우리가 다룰 내용에 대한 개요

먼저, 우리는이 기본 단계를 완료합니다 :

WordPress의 인덱스 페이지에 슬라이더를 표시하십시오 제품에 대한 설명을 표시하기위한 3 개의 패널을 표시합니다. 이미지와 텍스트가 포함 된 제품에 대한 세부 정보가 포함 된 두 행을 표시합니다. 팀원을 보여주는 패널 그러면 다음과 같은 고급 주제를 살펴 보겠습니다

다른 페이지에서 콘텐츠를 가져 오기 (예 : 미국 정보 페이지에서). 첫 페이지에만 사이드 바를 만드는 것 가장 중요한 측면은 슬라이더의 이미지를 'WordPress Customizer'옵션에서 변경할 수 있다는 것입니다. 슬라이더를 추가하거나 이미지 슬라이드 쇼를 만들기 위해 플러그인이 필요하지 않습니다.

우리가 필요로하는 것들

테마에 대한 옵션을 제공하기위한 Kirki Toolkit 슬라이더 옵션을 제공하기위한 FlexSlider

Maria Antonietta Perna는 이전 기사에서 Kirki를 다루었습니다. 주제에 대한 좋은 소개를 찾고 있다면. 키 테이크 아웃

추가 플러그인없이 슬라이더 및 사이드 바와 같은 요소를 쉽게 수정하여 WordPress Customizer를 사용하여 WordPress 홈페이지를 최적화하십시오. Kirki 툴킷을 활용하여 WordPress Customizer의 기능을 향상시켜 최소한의 코딩으로 고급 사용자 정의가 가능합니다. 더 나은 관리 및 모듈성을 위해 '라이브러리'폴더 내에서 테마 파일을 구성하여 설계 프로세스를 간소화하십시오. 홈페이지에 주요 제품 또는 기능을 보여주기 위해 FlexsLider를 사용하여 시각적으로 매력적인 제품 슬라이더를 만들어 주 테마에 직접 통합되었습니다. 주 인덱스 파일을 변경하지 않고 다른 페이지와 구별되는 고유 한 레이아웃을 유지하기 위해 홈페이지에 맞춤형 템플릿을 사용하십시오. Kirki의 힘을 활용하여 커스터마이저 내의 패널, 섹션 및 필드와 같은 UI 구성 요소를 추가하고 관리하여 사용자 상호 작용 및 경험을 향상시킵니다.

팀 쇼케이스, 세부 제품 설명 및 대화식 슬라이더와 같은 동적 요소를 포함하여 홈페이지가 유익하고 호소력이 있는지 확인하십시오.

노트 모듈 식을 위해, 나는 Library라는 폴더를 만들고 모든 기능 파일을 그 안에 넣어 필요한 구성 요소 만 쉽게 편집 할 수 있도록합니다. Github에서 내 테마를 자유롭게 포크하십시오. 이 테마에서는 functions.php 파일에서 라이브러리 폴더 내부의 모든 파일을 호출했습니다. 이 테마에 Foundation CSS 프레임 워크를 사용했습니다 이 튜토리얼에서 가장 많이 편집 할 라이브러리 폴더 내부에서 chore-options.php라는 파일을 찾을 수 있습니다. 좋아하는 텍스트 편집기에서 해당 파일을 열고 손을 더럽 힐 준비를하십시오!
• Kirki
Kirki는 프레임 워크가 아닙니다. WordPress 개발자가 커스터마이저를 사용하고 코드를 추상화하고 모든 사람이 아름답고 의미있는 사용자 경험을보다 쉽게 ​​만들 수 있도록 고급 기능과 유연성을 활용할 수 있도록 툴킷입니다.
• . 우리는 Kirki를 사용하여 커스터마이저에 구성, 필드, 섹션 및 패널을 추가 할 수 있습니다. WordPress Customizer API를 대체하지 않습니다. Kirki의 API는 단순히 기본 WordPress 메소드의 래퍼이며 구문을 단순화하고 코드를 적게 쓰고 가장 고급 기능 중 일부를 활용할 수 있습니다. > github에서 kirki 파일을 다운로드하여 테마 폴더 내부의 'Kirki'라는 폴더에 넣습니다. 먼저 새 구성을 만들어야합니다. 구성에는 고유 ID가 있으며 동일한 config_id를 사용하는 모든 필드는 해당 구성의 속성을 상속합니다. 구성을 추가하면 패널, 섹션 및 필드를 추가 할 수 있습니다. 필드를 추가하려면 커스터마이저에 하나 이상의 섹션이 있어야합니다. 필드는‘고아’가 될 수 없으며 섹션에서 그룹화되어야합니다.
구성 Kirki를 사용하면 플러그인 또는 테마에 대한 구성을 만들어 ID로 그룹화 할 수 있습니다. 그러면 해당 ID에 연결된 모든 필드는 구성 속성을 상속합니다.
기능 : 유효한 WordPress 기능. 자세한 내용은 WordPress Codex를 참조하십시오.

옵션 _type : 옵션 또는 테마_mod 옵션 _name : 테마 모드 대신 옵션을 사용하는 경우이를 사용하여 옵션 이름을 지정할 수 있습니다. 모든 필드는 WordPress 데이터베이스의 해당 옵션에 따라 배열로 저장됩니다.

<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>

패널 패널은 섹션의 포장지이며 여러 섹션을 함께 그룹화하는 방법입니다.
• 섹션 섹션은 여러 필드를 함께 그룹화하는 방법 인 필드를위한 포장지입니다. 모든 필드는 섹션에 속해야하며, 필드는 고아가 될 수 없습니다.
• 필드 필드는 사용자가 그 내부에 사용자 정의 텍스트를 입력 할 수 있도록 제공되는 텍스트 상자 및 확인란과 같은 옵션입니다. 각 필드는 특정 섹션과 만 연관되어야합니다.
• 충분한 소개. 이제 테마를 사용자 정의해 봅시다!
kirki를 우리의 테마와 통합 가장 먼저해야 할 일은 Kirki를 테마와 통합하는 것입니다. 이렇게하려면 라이브러리 폴더에서 찾을 수있는 테마-options.php 파일을 열고 다음 코드를 추가하십시오.
위의 코드는 Kirki 파일을 테마와 연결합니다. 앞에서 언급했듯이 GitHub 소스에서 다운로드 한 파일은 테마 폴더 내부의 'Kirki'라는 폴더에 배치해야합니다. 구성 생성 앞에서 언급했듯이 옵션에서 사용할 수있는 구성을 만들어야합니다. Theme-Options.php 파일에 다음 코드를 추가하십시오 <h4> <fully> 우리는 테마에 대한 구성을 성공적으로 만들었습니다. 이제 우리는 옵션에서 MC를 옵션 _name으로 사용할 것입니다. </fully> </h4> <p> 디자인 <look> 이제 방문 페이지의 디자인을 살펴 보겠습니다. 우리의 홈페이지는 다음으로 구성됩니다 </look></p> 제품 슬라이더 (제품 페이지의 슬라이드 쇼를 표시). 설명 상자 (회사에 대한 정보를 보여주기 위해) <for for> 제품 세부 사항 (제품에 대한 세부 정보를 보여주기 위해) 팀 쇼케이스 (팀원에 대한 세부 정보를 보여주기 위해) <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> 우리는이 지점을 홈페이지에 대해 하나씩 수행하는 방법을 다룰 것입니다.

노트 모든 옵션은 WordPress Customizer 옵션을 통해 사용자 정의 할 수 있습니다. 이 옵션을 사용자 정의하려면 외관> WordPress 관리자 패널 내부의 옵션을 사용자 정의해야합니다. 첫 페이지 에 대한 사용자 정의 템플릿 만들기 우리는 첫 페이지에 대한 사용자 정의 템플릿을 만들 수 있기 때문에 Index.php 파일을 변경하고 싶지 않습니다. 이 사용자 정의 템플릿에서는 사용자 정의 된 첫 페이지를 표시하도록 코드를 추가합니다. 따라서 첫 페이지에 내용이 표시되는 사용자 정의 템플릿을 만듭니다. homepage.php라는 테마 폴더 안에 새 파일을 만들고 다음을 추가하십시오.

이 파일 내부에 슬라이더를 보여주기 위해 코드를 추가합니다.

우리는 이것을 정적 첫 페이지로 설정해야합니다. 그러나 처음에는이 템플릿을 사용할 페이지가 없습니다. 이 템플릿을 사용하는 새 페이지를 만들어야합니다. 다음 단계를 따르십시오 :

새 페이지를 만듭니다 (** pages> 새 ** 추가) 페이지에 제목을 추가합니다 (예 : ** 내 커스텀 홈페이지 **).

** 템플릿에서 ** 템플릿 ** 드롭 다운 ** 페이지 속성 **에서 ** 사용자 정의 홈페이지 **를 선택하십시오. **. ** 게시 ** 버튼을 클릭하십시오.

<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>

이제 WordPress Customizer 내부의 정적 프론트 페이지 옵션을 정적 페이지로 설정하고 내 사용자 정의 홈페이지를 선택하십시오 (또는 페이지의 다른 이름을 사용한 경우 아래 드롭 다운에서 하나를 선택하십시오). >

커스터마이저의 저장 및 게시 버튼을 클릭하는 것을 잊지 마십시오.

homePage.php 파일에 코드를 추가하지 않았으므로 Customizer 내부에는 아직 눈에 띄는 변경 사항이 표시되지 않습니다. HomePage.php를 열고 코드를 추가하기 시작하겠습니다! 다음 코드를 추가하겠습니다

위의 코드에는 현재 테마 디렉토리의 header.php 및 footer.php 파일이 포함됩니다. 지금 커스터마이저를 새로 고치면 내비게이션과 바닥 글 메뉴 만 볼 수 있습니다. . 제품 슬라이더 제품 슬라이더는 가장 창의적이거나 베스트셀러 제품을 보여줍니다. 이들은 방문자가 귀하의 웹 사이트에서 먼저 볼 수있는 제품입니다. 제품 슬라이더 생성에는 다음 단계가 필요합니다

슬라이더 세트 생성 (일반적으로 5) 슬라이더에 배경 이미지 추가 슬라이더에 캡션 추가
1. 슬라이더 세트 생성 앞에서 언급했듯이, 우리는 테마에 슬라이더를 보여주기 위해 Flexslider를 사용하고 있습니다. 따라서 먼저 Github에서 Flexslider를 다운로드해야합니다. jquery.flexslider.js, flexslider.css, bg_play_pause.png 및 fonts 폴더 만 사용하면됩니다. 이 리소스를 테마 폴더로 복사하십시오

   노트 내가 제공 한 테마와 함께 작업하는 경우 vendor 폴더 내부에 jquery.flexslider.js를 복사 할 수 있습니다. 이미지 폴더 및 Fonts 폴더의 내용 (FlexsLider의 GitHub 소스에서)은 이미 테마 폴더 내부에있는 Fonts 폴더 내부입니다. 이제 우리는이 파일을 테마로 받아 들여야합니다. 라이브러리 폴더 내부에있는 enqueue-scripts.php 파일에 다음 eNqueue 코드를 추가합니다.

   다음, 다음 코드를 사용하여 라이브러리 폴더 내부의 enqueue-style.php 내부의 CSS 파일을 흡수합니다.

   축하합니다! 당신은 당신의 테마로 Flexslider 파일을 성공적으로 que습니다. 페이지 소스를 확인하여 Enqueue가 성공했는지 확인할 수 있습니다. 페이지를 마우스 오른쪽 버튼으로 클릭하고 페이지보기 소스를 클릭하여 페이지 소스를 확인할 수 있습니다. FlexsLider를 검색하면 JS 및 CSS 파일이 성공적으로 흡수되었음을 알게 될 것입니다.

   노트 내가 제공 한 테마를 사용하지 않으면 다음 부분을 편집해야 할 수도 있습니다 : /js/vendor/jquery.flexslider.js 및 /css/flexslider.csss. 및 CSS 파일. 우선, 슬라이더의 이미지, 링크 및 캡션을 표시하는 WordPress Customizer 내부에 패널을 만들어 봅시다. 테마-옵션을 다시 열고 다음 코드를 추가하십시오.

   위의 코드는 제품 슬라이더 패널을 커스터마이저에 추가하지만이 패널이 없고이 패널과 관련된 섹션이 포함되어 있지 않으므로 표시되지 않습니다. 혼란 스럽습니까? 계속하면 더 명확해질 것입니다.

   <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>

   다음, 홈페이지 용 제품 슬라이더라는 섹션을 추가해야합니다. Theme-Options.php 파일에 다음 코드를 추가하여 수행 할 수 있습니다.

   위의 코드는 제품 슬라이더 패널 내부의 홈페이지 섹션 용 제품 슬라이더를 추가합니다. 다음, 우리는 이미지를 보여주기위한 필드를 추가합니다. 다음 코드를 사용하여 이미지 필드를 만들 수 있습니다.

   이제 커스터마이저를 새로 고침하면 제품 슬라이더 패널이 나타나는 것을 볼 수 있습니다.

   <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>

   이미지 필드를 통해 슬라이더에 표시 될 이미지를 추가 할 수 있습니다. 슬라이더에 대해 최소 5 개의 이미지를 가질 수 있도록 4 개의 더 유사한 필드를 만들 것입니다. 다음 코드는 4 개의 이미지 필드를 추가합니다 :

   우리는이 필드를 통해 이미지를 업로드 한 다음 방문 페이지에 표시 할 수 있습니다. 슬라이더에 배경 이미지를 추가 이제 제품 슬라이더에 대한 코드를 추가 할 예정입니다. php get_header () 옆에 다음 코드를 추가하십시오. ?> 내부 php 태그 :

   <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>

   다음, Flexslider가 작동하려면 JavaScript를 추가하면됩니다.

   슬라이더에 캡션을 추가합니다 슬라이드에 캡션을 추가 할 수도 있습니다. 우리는 각 슬라이드의 캡션 (텍스트)을 수락하고 반영 할 새로운 필드를 추가해야합니다. 먼저 필드를 추가 해 봅시다

   우리는 4 개의 다른 슬라이드에 대해 비슷한 일을 할 수 있습니다.

   <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>

   이제 Frontend에서 사용자 정의 홈페이지 템플릿 내부에서 이러한 캡션을 표시하려면 코드를 약간 편집해야합니다. 먼저 변수에 캡션을 저장해야합니다.

   그런 다음 다음 코드를 교체하십시오

   다음 코드와 함께 <pre class="brush:php;toolbar:false">&lt;span&gt;function my_custom_text_settings( $fields ) { &lt;/span&gt; &lt;span&gt;// Add the controls &lt;/span&gt; &lt;span&gt;$fields[] = array( &lt;/span&gt; &lt;span&gt;'label' =&gt; __( 'My custom control', 'translation_domain' ), &lt;/span&gt; &lt;span&gt;'section' =&gt; 'my_section', &lt;/span&gt; &lt;span&gt;'settings' =&gt; 'my_setting', &lt;/span&gt; &lt;span&gt;'type' =&gt; 'text', &lt;/span&gt; &lt;span&gt;'priority' =&gt; 10, &lt;/span&gt; &lt;span&gt;'option_type' =&gt; 'theme_mod', &lt;/span&gt; &lt;span&gt;'capability' =&gt; 'edit_theme_options', &lt;/span&gt; &lt;span&gt;); &lt;/span&gt; &lt;span&gt;$fields[] = array( &lt;/span&gt; &lt;span&gt;'label' =&gt; __( 'My custom control 2', 'translation_domain' ), &lt;/span&gt; &lt;span&gt;'section' =&gt; 'my_section', &lt;/span&gt; &lt;span&gt;'settings' =&gt; 'my_setting_2', &lt;/span&gt; &lt;span&gt;'type' =&gt; 'text', &lt;/span&gt; &lt;span&gt;'priority' =&gt; 20, &lt;/span&gt; &lt;span&gt;'option_type' =&gt; 'theme_mod', &lt;/span&gt; &lt;span&gt;'capability' =&gt; 'edit_theme_options', &lt;/span&gt; &lt;span&gt;); &lt;/span&gt; &lt;span&gt;return $fields; &lt;/span&gt; &lt;span&gt;} &lt;/span&gt;&lt;span&gt;add_filter( 'kirki/fields', 'my_custom_text_settings' );&lt;/span&gt;</pre> 설명 상자 <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 개의 필드를 만들 것입니다. 코드는 다음과 같습니다. <pre class="brush:php;toolbar:false">&lt;span&gt;// Integrating Kirki with our theme &lt;/span&gt;&lt;span&gt;include_once( get_template_directory() . '/kirki/kirki.php' );&lt;/span&gt;</pre> <p> </p> <out> 출력 표시 <need> 이제 다음 코드를 사용하여 사용자 정의 템플릿에 출력을 표시해야합니다.<pre class="brush:php;toolbar:false">&lt;span&gt;Kirki&lt;span&gt;::&lt;/span&gt;add_config( 'my_theme', array( &lt;/span&gt; &lt;span&gt;'capability' =&gt; 'edit_theme_options', &lt;/span&gt; &lt;span&gt;'option_type' =&gt; 'option', &lt;/span&gt; &lt;span&gt;'option_name' =&gt; 'my_theme', &lt;/span&gt;&lt;span&gt;) );&lt;/span&gt;</pre> <the> 이것은 첫 번째 상자의 출력을 표시합니다. 마찬가지로, 우리는 다른 두 상자에 대해서도 똑같이 할 것입니다. <p> </p> <your> 이제 커스터마이저로 이동하여 이미지와 설명을 추가하면 입력을 표시하는 페이지가 표시됩니다! <pre class="brush:php;toolbar:false">&lt;span&gt;Kirki&lt;span&gt;::&lt;/span&gt;add_panel( 'panel_id', array( &lt;/span&gt; &lt;span&gt;'priority' =&gt; 10, &lt;/span&gt; &lt;span&gt;'title' =&gt; __( 'My Title', 'textdomain' ), &lt;/span&gt; &lt;span&gt;'description' =&gt; __( 'My Description', 'textdomain' ), &lt;/span&gt;&lt;span&gt;) );&lt;/span&gt;</pre> 제품 세부 사항 이 부분에는 한쪽에 이미지가 있고 다른쪽에는 설명이있는 두 개의 행이 포함되어 있습니다. 이 페이지 의이 부분이나 섹션은 방문자에게 제품의 가장 중요한 측면을위한 시각적으로 사용될 수 있습니다. 패널 생성 <a> 먼저 패널을 만들어 봅시다. 우리는 그것을 제품 세부 사항이라고 부를 것입니다. <p> </p> 섹션 생성 </a><a> 아래 코드를 사용하여 필드에 대한 섹션을 만들 것입니다. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173959528083203.png?x-oss-process=image/resize,p_40" 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 개의 필드가 있습니다. <pre class="brush:php;toolbar:false">&lt;span&gt;Kirki&lt;span&gt;::&lt;/span&gt;add_section( 'section_id', array( &lt;/span&gt; &lt;span&gt;'title' =&gt; __( 'My Title', 'textdomain' ), &lt;/span&gt; &lt;span&gt;'description' =&gt; __( 'My Description', 'textdomain' ), &lt;/span&gt; &lt;span&gt;'panel' =&gt; '', // Not typically needed. &lt;/span&gt; &lt;span&gt;'priority' =&gt; 160, &lt;/span&gt; &lt;span&gt;'capability' =&gt; 'edit_theme_options', &lt;/span&gt; &lt;span&gt;'theme_supports' =&gt; '', // Rarely needed. &lt;/span&gt;&lt;span&gt;) );&lt;/span&gt;</pre> <put> 출력 표시 <display> 이제 우리는 커스텀 홈페이지 템플릿에 팀의 세 멤버의 이미지와 이름을 표시합니다. HomePage.php를 열고 다음을 삽입하십시오 <store> 먼저 변수에 이미지와 텍스트의 값을 저장합시다. <h4> 그런 다음 아래 코드를 사용하여 각 멤버를 표시 할 수 있습니다.<pre class="brush:php;toolbar:false">&lt;span&gt;Kirki&lt;span&gt;::&lt;/span&gt;add_config( 'my_theme', array( &lt;/span&gt; &lt;span&gt;'capability' =&gt; 'edit_theme_options', &lt;/span&gt; &lt;span&gt;'option_type' =&gt; 'option', &lt;/span&gt; &lt;span&gt;'option_name' =&gt; 'my_theme', &lt;/span&gt;&lt;span&gt;) );&lt;/span&gt;</pre> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173959530851931.png?x-oss-process=image/resize,p_40" 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> <pre class="brush:php;toolbar:false">&lt;span&gt;Kirki&lt;span&gt;::&lt;/span&gt;add_panel( 'panel_id', array( &lt;/span&gt; &lt;span&gt;'priority' =&gt; 10, &lt;/span&gt; &lt;span&gt;'title' =&gt; __( 'My Title', 'textdomain' ), &lt;/span&gt; &lt;span&gt;'description' =&gt; __( 'My Description', 'textdomain' ), &lt;/span&gt;&lt;span&gt;) );&lt;/span&gt;</pre> <up> 포장 <orial>이 튜토리얼에서는 Kirki 툴킷을 사용하여 WordPress 웹 사이트의 방문 페이지를 만드는 방법을 설명했습니다. CSS로 이것을 장식하고 원하는 방식으로 사용자 정의 할 수 있습니다. 이 툴킷을 구현하는 것에 대한 멋진 아이디어가 있고 아래의 의견 섹션에서 알려주십시오. 문제가 발생하거나 질문이 있으시면 알려 주시면 기꺼이 도와 드리겠습니다. .<questions> WordPress 웹 사이트의 사용자 정의 홈 페이지 디자인에 대한 자주 질문 <create> WordPress에서 정적 프론트 페이지를 만드는 방법? <h3 id="WordPress에서-정적-첫-페이지를-만드는-것은-매우-간단합니다-먼저-WordPress-대시-보드에-로그인해야합니다-그런-다음-페이지-로-가서-새-추가-를-클릭하십시오-이-새로운-페이지-홈-또는-원하는-다른-이름의-이름을-지정하십시오-그런-다음-새로운-페이지를-만들어-블로그-또는-게시물-으로-지정하십시오-이-두-페이지를-만들면-설정-으로-이동-한-다음-읽기-로-이동하십시오-홈페이지-디스플레이-에서-정적-페이지-를-선택하십시오-드롭-다운-메뉴에서-홈페이지-를-홈-용-페이지로-설정하고-블로그-나-게시물을-위해-만든-페이지로-게시물-페이지-를-설정하십시오-설정을-마무리하려면-변경-사항-저장-을-클릭하십시오"> WordPress에서 정적 첫 페이지를 만드는 것은 매우 간단합니다. 먼저 WordPress 대시 보드에 로그인해야합니다. 그런 다음‘페이지’로 가서‘새 추가’를 클릭하십시오. 이 새로운 페이지 '홈'또는 원하는 다른 이름의 이름을 지정하십시오. 그런 다음 새로운 페이지를 만들어 '블로그'또는 '게시물'으로 지정하십시오. 이 두 페이지를 만들면‘설정’으로 이동 한 다음‘읽기’로 이동하십시오. ‘홈페이지 디스플레이’에서‘정적 페이지’를 선택하십시오. 드롭 다운 메뉴에서 '홈페이지'를 홈 용 페이지로 설정하고 블로그 나 게시물을 위해 만든 페이지로 '게시물 페이지'를 설정하십시오. 설정을 마무리하려면 '변경 사항 저장'을 클릭하십시오. </h3> <p> WordPress 홈페이지를 사용자 정의 할 수있는 방법 </p> <h3 id="WordPress는-홈페이지를-사용자-정의-할-수있는-다양한-방법을-제공합니다-WordPress-Customizer를-사용하여-실시간으로-변경-사항을-미리-볼-수-있습니다-액세스하려면-외관-으로-이동-한-다음-사용자-정의-로-이동하십시오-여기에서-사이트의-신원-색상-배경-이미지-메뉴-위젯-등을-변경할-수-있습니다-또는-Elementor-또는-Beaver-Builder와-같은-페이지-빌더-플러그인을-사용할-수-있습니다-이-플러그인은-홈페이지를-쉽게-설계-할-수있는-드래그-앤-드롭-인터페이스를-제공합니다-WordPress-홈페이지-청중과-목적을-명심하는-것이-중요합니다-홈페이지가-자신이-누구이며-무엇을하는지-명확하게-전달하십시오-고품질의-이미지와-강력한-헤드-라인을-사용하여-방문자의-관심을-끌-수-있습니다-방문자가-사이트를-쉽게-탐색-할-수-있도록-디자인을-깨끗하고-간단하게-유지하십시오-또한-웹-트래픽의-대다수가-모바일-장치에서-나오기-때문에-사이트가-모바일-친화적인지-확인하십시오"> WordPress는 홈페이지를 사용자 정의 할 수있는 다양한 방법을 제공합니다. WordPress Customizer를 사용하여 실시간으로 변경 사항을 미리 볼 수 있습니다. 액세스하려면‘외관’으로 이동 한 다음‘사용자 정의’로 이동하십시오. 여기에서 사이트의 신원, 색상, 배경 이미지, 메뉴, 위젯 등을 변경할 수 있습니다. 또는 Elementor 또는 Beaver Builder와 같은 페이지 빌더 플러그인을 사용할 수 있습니다. 이 플러그인은 홈페이지를 쉽게 설계 할 수있는 드래그 앤 드롭 인터페이스를 제공합니다. WordPress 홈페이지, 청중과 목적을 명심하는 것이 중요합니다. 홈페이지가 자신이 누구이며 무엇을하는지 명확하게 전달하십시오. 고품질의 이미지와 강력한 헤드 라인을 사용하여 방문자의 관심을 끌 수 있습니다. 방문자가 사이트를 쉽게 탐색 할 수 있도록 디자인을 깨끗하고 간단하게 유지하십시오. 또한 웹 트래픽의 대다수가 모바일 장치에서 나오기 때문에 사이트가 모바일 친화적인지 확인하십시오. </h3> 내 WordPress 홈페이지에 사용자 정의 헤더를 추가 할 수 있습니까? <p> </p> WordPress 홈페이지에 맞춤 헤더, '외관'으로 이동 한 다음 'Customize'로 이동하십시오. 테마에 따라‘헤더’또는‘헤더 이미지’를 클릭하십시오. 여기에서 새 이미지를 업로드하고 원하는 크기로 자르고 원하는 텍스트 나 링크를 추가 할 수 있습니다. 완료되면 '저장 및 게시'를 클릭하십시오. <h3 id="내-WordPress-홈페이지에-사용자-정의-바닥-글을-추가하려면-어떻게해야합니까"> 내 WordPress 홈페이지에 사용자 정의 바닥 글을 추가하려면 어떻게해야합니까? </h3> <p> WordPress 홈페이지에 사용자 정의 바닥 글을 추가하는 것은 사용자 정의 추가와 유사합니다. 헤더. ‘외관’으로 가서‘사용자 정의’. 테마에 따라 '바닥'또는 '바닥 글 설정'을 클릭하십시오. 여기서 바닥 글 텍스트를 사용자 정의하고 위젯을 추가하며 레이아웃을 변경할 수 있습니다. 완료되면 '저장 및 게시'를 클릭하십시오<add> 내 WordPress 홈페이지에 슬라이더를 추가하려면 WordPress 홈페이지에 슬라이더를 추가하려면 슬라이더 혁명 또는 스마트 슬라이더와 같은 슬라이더 플러그인이 필요합니다. 선택한 플러그인을 활성화하면 새 슬라이더를 만들고 이미지 추가 및 설정을 사용자 정의 할 수 있습니다. 그런 다음 플러그인에 따라 단축 코드, 위젯 또는 템플릿 태그를 사용하여 홈페이지에 슬라이더를 추가 할 수 있습니다. <h3 id="내-WordPress-홈페이지에-블로그-섹션을-추가-할-수-있습니까-WordPress-홈페이지에-블로그-섹션을-추가하십시오-먼저-블로그-게시물에-대한-별도의-페이지를-만들었습니다-그런-다음-외관-으로-가서-사용자-정의-홈페이지-설정-을-클릭하고-홈페이지-디스플레이-에서-최신-게시물-을-선택하십시오-이것은-홈페이지에-가장-최근의-블로그-게시물을-표시합니다"> 내 WordPress 홈페이지에 블로그 섹션을 추가 할 수 있습니까? WordPress 홈페이지에 블로그 섹션을 추가하십시오. 먼저 블로그 게시물에 대한 별도의 페이지를 만들었습니다. 그런 다음‘외관’으로 가서‘사용자 정의’. ‘홈페이지 설정’을 클릭하고‘홈페이지 디스플레이’에서‘최신 게시물’을 선택하십시오. 이것은 홈페이지에 가장 최근의 블로그 게시물을 표시합니다. </h3> <p> 내 WordPress 홈페이지에 소셜 미디어 아이콘을 추가하려면 어떻게해야합니까? </p> <h3 id="WordPress-홈페이지에-소셜-미디어-아이콘을-추가하려면-A를-사용할-수-있습니다-소셜-미디어-위젯-또는-간단한-소셜-아이콘과-같은-소셜-미디어-플러그인-선택한-플러그인을-설치하고-활성화-한-후에는-소셜-미디어-링크를-추가하고-선호하는-아이콘-스타일과-크기를-선택할-수-있습니다-그런-다음-위젯을-사용하여-홈페이지에-소셜-미디어-아이콘을-추가-할-수-있습니다"> WordPress 홈페이지에 소셜 미디어 아이콘을 추가하려면 A를 사용할 수 있습니다. 소셜 미디어 위젯 또는 간단한 소셜 아이콘과 같은 소셜 미디어 플러그인. 선택한 플러그인을 설치하고 활성화 한 후에는 소셜 미디어 링크를 추가하고 선호하는 아이콘 스타일과 크기를 선택할 수 있습니다. 그런 다음 위젯을 사용하여 홈페이지에 소셜 미디어 아이콘을 추가 할 수 있습니다. </h3> <p> WordPress 홈페이지 Seo 친화적 인 방법을 어떻게 만들 수 있습니까? </p> <h3 id="WordPress-홈페이지-Seo-친화적으로-만들-수-있습니다-깨끗하고-반응이-좋은-테마를-선택합니다-Yoast-SEO와-같은-SEO-플러그인을-사용하여-제목-태그-및-메타-설명을-최적화하십시오-콘텐츠에-관련-키워드를-포함-시키지만-키워드를-피하십시오-헤더-태그를-사용하여-컨텐츠를-구성하고-읽기-쉽도록하십시오-또한-페이지-속도가-순위-요인이므로-사이트가-빠르게로드되도록하십시오"> WordPress 홈페이지 Seo 친화적으로 만들 수 있습니다. 깨끗하고 반응이 좋은 테마를 선택합니다. Yoast SEO와 같은 SEO 플러그인을 사용하여 제목 태그 및 메타 설명을 최적화하십시오. 콘텐츠에 관련 키워드를 포함 시키지만 키워드를 피하십시오. 헤더 태그를 사용하여 컨텐츠를 구성하고 읽기 쉽도록하십시오. 또한 페이지 속도가 순위 요인이므로 사이트가 빠르게로드되도록하십시오. </h3> WordPress 홈페이지에 연락처 양식을 추가하려면 WordPress 홈페이지에 연락처 양식을 추가하려면 어떻게해야합니까? 연락처 양식 7 또는 WPForms와 같은 연락처 양식 플러그인이 필요합니다. 선택한 플러그인을 설치하고 활성화 한 후에는 새로운 연락처 양식을 작성하고 필요에 따라 필드를 사용자 정의 할 수 있습니다. 그런 다음 바로가 코드를 사용하여 홈페이지에 연락처 양식을 추가 할 수 있습니다. <p></p></add></p></create></questions></orial></up></the>

위 내용은 WordPress 웹 사이트에 맞는 사용자 정의 홈페이지 디자인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!