찾다

집 >CMS 튜토리얼 >Word누르다 >처음부터 WordPress 테마를 구축하는 방법 : 최종 단계

처음부터 WordPress 테마를 구축하는 방법 : 최종 단계

Christopher Nolan
Christopher Nolan원래의
2025-02-09 09:42:13860검색

처음부터 WordPress 테마를 구축하는 방법 : 최종 단계 이 기사에서는 템플릿을 수정하고 메타 정보 추가, 포스트 썸네일, 사이드 바, 사용자 친화적 인 컨트롤 등에 중점을 둔 WordPress 테마를 처음부터 구축하는 데 도움이됩니다.

. 이것은 WordPress 테마 구축에 대한 WordPress 시리즈의 세 번째이자 마지막 부분입니다. 1 부에서는 WordPress 테마를 소개했으며 2 부에서는 기본 테마를 만들었습니다. 우리는 startbootstrap의 깨끗한 블로그 템플릿을 사용하여 WordPress 테마에 스타일을 추가했습니다. 지금까지 작성한 코드는 Github에서 사용할 수 있습니다.

우리는 지금까지 Single.php, page.php, archive.php 및 index.php 템플릿을 추가했지만이 부분에 대해이를 마무리하는 작업을 남겼습니다. 우리는 functions.php를 도입했습니다. WordPress가 테마에 특정한 기능을 자동으로 포함하는 데 사용하는 파일을 소개했으며 기능을 추가했습니다. Header.php에 동적 헤더 기능을 추가했으며 해당 기능을 Functions.php로 분리했습니다. 이상적으로, 이것은 물건을 깨끗하게 유지하기 위해 별도의 파일 (테마 내부의 Inc 폴더)으로 구성되어야합니다. 파트 2에서는 부분적으로 도입했습니다 - footer.php 및 header.php. 키 테이크 아웃

`functions.php`를 사용하여 테마 별 기능을 추가하고 클리너 구조를 위해 별도의 파일로 코드를 구성하십시오. `single.php` 및`index.php`. `add_theme_support ( 'post-shumbnails')를 사용하여 WordPress 테마에서 포스트 썸네일을 활성화하고 관리합니다. WordPress 위젯을 통해 동적 컨텐츠 관리를 허용하려면`functions.php`를 통해 여러 사이드 바 및 위젯 영역을 등록하십시오. WordPress Customizer API를 사용하여 사이트 모양 및 레이아웃을 맞춤화하여 배경 이미지 등을위한 사용자 친화적 인 컨트롤을 가능하게합니다. 템플릿 계층 구조 원칙을 사용하여 단일 게시물 및 페이지 사용자 정의를 확장하고 구조화되고 특정 컨텐츠 디스플레이의 경우`get_template_part`

템플릿을 정제합니다

이전 기사에서는 태그 인 Opening One을 Header.php로 분리하고 php body_class ()를 추가했습니다. ?> 그것에. 이것은 우리가 페이지에 있는지, 게시물, 로그인했는지 여부 등을 알려주는 시맨틱 클래스를 신체에 추가합니다. 방문한 페이지 등에 따라 웹 사이트의 다른 요소를 스타일링 할 수 있습니다. 사물. <..> 우리가 홈페이지를 방문하여 브라우저 콘솔을 열면이 클래스를 검사하면 이러한 클래스간에 현재 템플릿 정보가 부족한 것을 알 수 있습니다.

WordPress가 표시하는 것을 변경하려면 사용중인 파일을 알아야합니다. 이 경우 Index.php는 기본 폴백 템플릿으로 사용됩니다. 이 인포 그래픽은 사용 된 템플릿의 계층 구조를 보여줍니다. 테마를 재정의하거나 만들 때 매우 편리 할 수 ​​있습니다.

이전 기사에서는 Archive.php 루프를 수정하고 메타 정보를 추가하고 썸네일을 출력 된 기사에 추가하기 시작했습니다. 해당 루프를 별도의 파일로 분리하고 archive.php 및 index.php에 포함시키고 정제를 완료합니다. 먼저, 우리는 부분 파일을 요청하는 단일 줄로

사이의 내용

를 교체 할 것입니다.

일단 그렇게하면 Archive.php에 교체 한 컨텐츠를 partials/content.php 파일로 배치합니다 :

이 변경 사항을 서버에 업로드하면 게시물 목록의 각 게시물에 미래 페이지가 메타 정보가 있음을 알 수 있습니다. 이것은 우리의 부분적으로 작동한다는 것을 의미합니다. 게시물 썸네일 우리는 우리의 가짜 게시물 중 일반적으로 이미지가 없으며,

가 특징적인 이미지가 없음을 알 수 있습니다. WordPress 대시 보드로 이동하여 
<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>
추천 이미지 를 게시물/페이지에 추가하려고하면 가장 오른쪽 사이드 바에 파일 업로드 필드가 없음을 알 수 있습니다. (WordPress에 익숙하지 않은 사람들의 경우이 기능에 대한 자세한 내용은 여기에서 읽을 수 있습니다.)

포스트 썸네일은 기본적으로 WordPress 테마에서 활성화되지 않습니다. 새로운 테마로 특별히 켜야하는 기능입니다. 대부분의 테마에는 활성화되어 있습니다. 
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>
이렇게하려면 add_theme_support ( 'post-thumbnails')를 포함합니다. 우리의 functions.php 이제 썸네일이 활성화되었습니다 이제 WP-CLI 명령 WP 사이트를 사용하여 모든 컨텐츠의 WordPress 설치를 비울 수 있습니다 (또는 WordPress 대시 보드에서 수동으로 수행 할 수 있음). 인터넷에서 가져 오는 주요 이미지로 게시물과 페이지를 채워야합니다. (이전과 같이 상단 메뉴를 재현하고 페이지와 게시물을 할당해야합니다.) . 하나의 팁 : 판매용 테마를 구축하거나 일반적으로 더 많은 청중에게 공개 될 테마를 구축하는 경우 AutomAtt에서 제공 한

테마 단위 테스트 데이터

를 사용하여 제공 할 수 있습니다. 더 넓은 사례 및 테마 세부 사항을 테스트하기위한 내용.

우리는 이미지 크기를 fakerpress에 지정할 수 있지만, 그럴 가능성은 여전히 ​​지저분한 모습을 초래할 것입니다. 처음부터 WordPress 테마를 구축하는 방법 : 최종 단계. 우리가 테마를 만들 때, 세련되고 표준화 된 모양을 달성하는 데 사용되는 기술 중 하나는

썸네일 크기

를 지정하는 것입니다. 표준 크기 WordPress는 업로드 된 모든 이미지를 크기로 조정합니다. 우리는 WordPress add_image_size () 함수를 사용하여 테마가 사용할 몇 가지 이미지 크기를 추가합니다 : .

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>
그러면 컨텐츠에서 the_post_thumbnail () 를 사용하여 형식화 된 이미지 중 하나를 출력합니다.

발신 를 달성하려면 아카이브 또는 블로그 목록에서 글꼴 크기를 증가시킬 것이지만 이렇게하려면 the_excerpt ()로 출력 된 단어 수를 줄입니다. :

이미지 (방금 언급 한 썸네일)를 떠올리려면 발췌 한 결과 CSS의 부모 요소 선택기에 다음을 추가합니다. 
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>
(우리는 여기서 테마 자체에 중요하지 않은 작은 스타일 조정을 다루지 않습니다.)

이제, 우리는 글꼴 크기를 늘리고 이미지를 떠 다니면서 (부모 요소와 함께) 이미지 주위에 발췌 한 내용을 가질 수 있습니다. 우리는 또한 단일 게시물/페이지에서 Post_thumbnails를 사용합니다 테마 사이드 바 테마 사이드 바는 테마의 위젯 영역입니다. 이 영역에 다른 위젯을 배치 할 수 있도록 WordPress 시스템에 등록해야합니다. 이렇게하면 템플릿 파일에 이러한 위젯을 인쇄하거나 출력합니다. 우리는 테마의 GitHub 저장소에서 볼 수있는 테마에 여러 사이드 바를 등록 할 것입니다. 우리는 다음 코드를 functions.php : 에 추가하여이를 수행합니다. 여기, 우리는 두 개의 사이드 바를 등록하는 방법을 보여줍니다. register_sidebar () 함수에 대한 자세한 내용은 WordPress.org에서 확인할 수 있습니다. 우리는 11 개의 사이드 바를 등록하지만 모든 페이지 템플릿이나 웹 사이트 위치에서 이러한 모든 것을 출력 할 필요는 없습니다. 현재 사용자 정의 된 페이지에서 출력되면 위젯 아래 Customizer 에서 액세스 할 수 있습니다. 

<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>
다음은 바닥 글의 사이드 바 또는 위젯 영역의 실제 출력 예입니다.

여기서 우리는 위의 바닥 _center_sidebar에 register_sidebar 함수에 사용한 사이드 바 ID를 사용합니다. 우리는 또한 활성 위젯이있는 사이드 바가 있는지 여부에 따라 홈페이지의 중앙 컨텐츠 컨테이너의 너비를 조절했습니다 (is_active_sidebar ()) :

우리는 이러한 조건에 따라 부트 스트랩 클래스를 출력하여 
<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>the_post_thumbnail( 'small-list-thumb-1');
</span></span><span>    <span>?></span>
</span><span><span><span></a</span>></span>
</span>
home

. 우리가 위젯과 이미지 로이 위젯 영역을 채우면 이것이 우리가 얻는 것입니다.

테마는 멋지게 형성되고 있습니다. 물론 독자들은 스타일링을 좋아하는 데 적응할 것입니다.

Customizer API

스타일에 대해 이야기 할 때 Customizer API를 언급하고 헤더의 배경 이미지를 사용자 친화적으로 제어하는 ​​방법을 보여줍니다. 다음은 우리가 새로운 패널

, 섹션 및 제어를 만드는 방법의 예입니다. 여기서 가장 중요한 것은 customize_register 후크와 $ wp_customize 메소드의 순서입니다 (add_panel, add_section, add_setting, add_control. 주문 문제. WordPress Codex는 Customizer API에 대한 자세한 참조를 가지고 있습니다. functions.php에 설정 및 컨트롤을 추가하면 BSIMPLE_SCRIPTS () 기능의 하단에 다음 코드를 추가하여 스크립트와 스타일을 수용하기 위해 만든 기능을 추가합니다. 우리는 헤더 컨테이너에 Phome, pfront 및 pglobal 클래스를 추가했습니다. 이제 우리는 wp_add_inline_style () 를 사용하고 처음에 기본 테마 스타일을 큐에 넣는 데 사용한 bsimple 스타일 핸들-방금 만든 커스터마이저 설정을 출력합니다. 우리는 get_theme_mod ()를 사용하여 등록한 각 설정을 얻습니다 이 방법으로, 우리는 가이드의 part 2 에서 dynamic_header () 함수로 분리 한 헤더에 대한 이미지를 설정할 수 있습니다 : . 단일 페이지 및 게시물 WordPress 템플릿 계층 구조는 방문시로드 된 정확한 URL과 게시물을 타겟팅하는 데 도움이되므로 각각의 HTML 출력을 원자 적으로 설계 할 수 있습니다. 여러 번, 우리는 모든 템플릿을 만들 필요가 없습니다.

모든 게시물이나 페이지에 일반적인 배경 이미지를 추가해도 의미가 없습니다. 따라서 우리의 Customizer 전략은 아카이브, 블로그 게시물 목록, 첫 페이지 및 용어에 대해서도 작동합니다. 그러나 특정 페이지와 게시물의 경우 이미지를 개별적으로 설정하고 싶을 것입니다. 
<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>
우리는 어떻게해야합니까? dynamic_header () 함수에서 pages 에 대한 헤더를 정확히 지적 했으므로 이제 인라인 스타일과 get_the_the_post_thumbnail_url () 함수를 사용하여 페이지를 설정하여 '

추천 이미지

헤더 배경으로 :

이제 사용자는 모든 페이지마다 헤더 이미지를 설정할 수 있습니다. IS_SILLE () 케이스에 대해 동일한 작업을 수행 할 수 있습니다.이 경우는 사용자 정의 게시물 유형을 포함하여 모든 게시물에 동일한 솔루션을 적용합니다. 이 줄은 사용자가 Subtitle_이라는 모든 페이지에 사용자 정의 필드를 추가 할 수 있으며 Page 헤더로 출력됩니다 : 
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>

사용자 정의 필드 섹션이 표시되지 않으면 편집 화면의 오른쪽 모서리에서

화면 옵션을 통해 활성화 할 수 있습니다.

이 작업이 완료된 후 Subtitle_ Meta 필드가 단일 페이지의 페이지 제목 아래에 표시됩니다.

이 모든 것들과 스타일 - 
<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>
게시물 에도 적용 할 수 있습니다. 이제 출력을 Single.php 및 Page.php에서도 포맷해야합니다.이 안내서의 공간 제약으로 인해이 두 템플릿에서 사용할 컨텐츠를 만들지 만, 구조는 독자가 필요한 경우 더 구체적으로 이러한 템플릿을 조정하고 사용자 정의 할 수있게 해줍니다.

여기서 우리는 MX-AUTO 클래스를 중심으로 한 단일 열 레이아웃의 10/12 레이아웃을 사용하고 있습니다. 우리는 부분 컨텐츠 -single.php를 사용하여 실제 컨텐츠를 출력합니다.

이 부분에서는 <span><span><?php </span></span><span><span>/** </span></span><span><span> * <span>@package Botega_Scratch_Theme </span></span></span><span><span> */ </span></span><span> </span><span><span>get_header(); ?></span> </span> <span><span><?php </span></span><span> <span>if ( have_posts() ) : while ( have_posts() ): the_post(); </span></span><span> </span><span> <span>get_template_part( 'partials/content', get_post_type() ); </span></span><span> </span><span> <span>endwhile; </span></span><span> <span>endif; </span></span><span> <span>?></span> </span> <span><span><?php get_footer(); ?></span> </span> 이제 단일 페이지와 게시물의 기본 최소값이 있지만 WordPress 함수를 사용하여 더 많은 것을 추가 할 수 있습니다. 우리는 단일 게시물, 단일 페이지 및 특정 범주 등에 속하는 페이지에서 WordPress가 원하는 세부 정보를 자동으로 지정할 수 있습니다. 글로벌 위젯 및 바닥 글 우리는 바닥 글을 위해 3 개의 위젯 (사이드 바) 영역을 만들었고 출력을 족지에 추가했습니다. 또한 바닥 글 태그 바로 위의 섹션 또는 위젯 영역을 추가했습니다. 이 위젯은 홈페이지, 페이지 또는 아카이브에만 국한되지 않지만 다소 글로벌입니다. 위젯을 할당하면 사이트 전체에 표시됩니다 :

우리가 얻는 것은 우리가 위젯으로 채울 수있는 간단한 바닥과 바닥 글 부분입니다.

우리는 이제 컨텐츠를 표시하는 데 사용할 수있는 최소한의 기능적 테마를 가지고 있습니다. 
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>
이 가이드는 여기서 멈출 것이지만, 다음에 예상 테마 빌더가하고 싶은 일은 모든 사용 사례가 다루고 테마가 100% 완전한 기능을 갖도록하는 것입니다. 이렇게하려면 테마 검사 플러그인을 설치하여 테마가 부족한 것을 검사하고 모든 것이 표준에 달려 있는지 확인하십시오.

결론 이 안내서는 WordPress 테마 빌딩에 대한 철저한 소개를 목표로했습니다. 희망적으로 모든 기본 WordPress 테마 빌딩 개념을 소개하고 어떻게 결합하는지 보여주었습니다.

. 그러나 여전히 배울 것들이 있습니다. 댓글 부분, 저자 템플릿, 404 페이지 및 우리 가이 주제로 더 전문적으로 가고 싶다면 다루어야 할 다른 작은 세부 사항과 같이. 이 시리즈의 초기 코드는 여기 GitHub에서 사용할 수 있으며이 안내서에서 작성한 테마의 최종 버전은 여기에서 사용할 수 있습니다. 이 기초에서 포괄적 인 WordPress Codex의 도움으로 훨씬 더 많은 것을 구축 할 수 있습니다.

이 시리즈에는 WordPress 테마를 처음부터 구축하는 데있어 세 가지 기사가 있습니다.

테마의 구조를 감정 <span>add_image_size( 'list-thumb-1', 730, 400, true); </span><span>add_image_size( 'small-list-thumb-1', 400, 200, true); </span><span>add_image_size( 'small-list-thumb-2', 300, 200, true); </span><span>add_image_size( 'small-list-thumb-3', 220, 140, true); </span> 테마 기본 사항 테마를 정제합니다

스 처음부터 WordPress 테마 구축에 대해 자주 묻는 질문

WordPress에서 처음부터 WordPress 테마를 구축하는 방법 : 최종 단계

래퍼없이 주어진 페이지 ID에 대한 내용을 어떻게 표시 할 수 있습니까?

WordPress에서 주어진 페이지 ID의 내용은 일반적으로

에 래핑됩니다.스타일링 목적으로 태그. 그러나

래퍼없이 컨텐츠를 표시하려면 'The_Content'필터를 사용할 수 있습니다. 이 필터를 사용하면 데이터베이스에서 검색된 후에는 화면에 인쇄되기 전에 게시물의 내용을 수정할 수 있습니다. 다음은이 필터를 사용하여

태그를 제거하는 방법에 대한 간단한 예입니다. ;

}

add_filter ( 'the_content', 'remok_p_tags');

이 코드는 게시물 내용에서 모든
태그를 제거합니다. 이것은 모든 게시물에 영향을 미치므로 조심스럽게 사용하십시오.

왜 내 첫 페이지가 WordPress에로드되지 않습니까?
첫 페이지가 WordPress에로드되지 않는 이유는 몇 가지가있을 수 있습니다. . 다음은 몇 가지 일반적인 문제와 해당 솔루션입니다. 잘못된 설정 : 설정 아래에서 WordPress 설정을 확인하고 올바른 페이지가 첫 페이지로 설정되어 있는지 확인하십시오. 테마 문제 : 문제는 테마와 관련이 있습니다. 기본 WordPress 테마로 전환하고 문제가 지속되는지 확인하십시오. 플러그인 충돌 : 때로는 플러그인이 서로 또는 테마와 충돌하여 첫 페이지가로드되지 않습니다. 모든 플러그인을 비활성화 한 다음 문제가되는 플러그인을 식별하기 위해 하나씩 다시 활성화하십시오. 손상된 .htaccess 파일 : 손상된 .htaccess 파일 도이 문제를 일으킬 수 있습니다. .htaccess 파일을 .htaccess_old와 같은 것으로 바꾸고 문제가 해결되는지 확인하십시오.
이러한 솔루션 중 어느 것도 작동하지 않으면 호스팅 제공 업체 또는 WordPress 전문가에게 추가 지원을 위해 문의하는 것이 좋습니다. .

WordPress에서 팝업에 컨텐츠를 표시하기 위해 Post ID를 얻을 수 있습니까?

팝업에 게시물의 콘텐츠를 표시하는 것은 WordPress 기능과 JavaScript의 조합을 사용하여 달성 할 수 있습니다. 다음은이 작업을 수행 할 수있는 방법에 대한 기본 예입니다.

먼저 게시물 ID를 가져와야합니다. WordPress에서 get_the_id () 함수를 사용하여이를 수행 할 수 있습니다. 이 함수는 루프에서 현재 게시물의 ID를 리턴합니다.

$ post_id = get_the_id ();

다음은 게시물의 내용을 가져와야합니다. get_post_field () 함수를 사용하여이를 수행 할 수 있습니다. 이 함수는 게시물에서 특정 필드의 값을 검색합니다. 이 경우 'post_content'필드를 얻으려고합니다.

$ post_content = get_post_field ( 'post_content', $ post_id);
마지막으로 JavaScript를 사용 하여이 내용을 표시 할 수 있습니다. 팝업. 다음은 alert () 함수를 사용하는 간단한 예입니다.
alert ( ' php echo $ post_content;?>');

이것은 매우 기본적인 예이며 그렇지 않을 수 있습니다. 모든 상황에서 완벽하게 작동합니다. 보다 강력한 솔루션의 경우 팝업을 만들기 위해 플러그인 또는 고급 JavaScript 라이브러리를 사용하는 것을 고려할 수 있습니다.

위 내용은 처음부터 WordPress 테마를 구축하는 방법 : 최종 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript css bootstrap html echo print Float if for while date format include try Filter auto register using class finally Generic console number function default this alert display background column github idea database issue everything WordPress Other
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Yootheme Pro로 WordPress 웹 사이트 속도를 높이십시오다음 기사：Yootheme Pro로 WordPress 웹 사이트 속도를 높이십시오

관련 기사

더보기