목차
먼저 게시물 ID를 가져와야합니다. WordPress에서 get_the_id () 함수를 사용하여이를 수행 할 수 있습니다. 이 함수는 루프에서 현재 게시물의 ID를 리턴합니다.
CMS 튜토리얼 Word누르다 처음부터 WordPress 테마를 구축하는 방법 : 최종 단계

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

Feb 09, 2025 am 09:42 AM

처음부터 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

WordPress 블로그 시작 방법 : 초보자를위한 단계별 안내서 WordPress 블로그 시작 방법 : 초보자를위한 단계별 안내서 Apr 17, 2025 am 08:25 AM

블로그는 사람들이 자신의 의견, 의견 및 의견을 온라인으로 표현할 수있는 이상적인 플랫폼입니다. 많은 초보자들은 자체 웹 사이트를 구축하기를 간절히 원하지만 기술적 장벽이나 비용 문제에 대해 걱정하는 것을 주저합니다. 그러나 플랫폼이 초보자의 기능과 요구를 충족시키기 위해 계속 발전함에 따라 이제 그 어느 때보 다 쉬워지기 시작했습니다. 이 기사에서는 테마 선택에서 플러그인 사용, 보안 및 성능 향상에 이르기까지 WordPress 블로그를 작성하는 방법을 단계별로 안내하여 자신의 웹 사이트를 쉽게 만들 수 있습니다. 블로그 주제와 방향을 선택하십시오 도메인 이름을 구매하거나 호스트를 등록하기 전에 다루려는 주제를 식별하는 것이 가장 좋습니다. 개인 웹 사이트는 여행, 요리, 제품 리뷰, 음악 또는 귀하의 관심사를 불러 일으키는 취미와 관련하여 회전 할 수 있습니다. 진정으로 관심이있는 영역에 중점을두면 지속적인 글쓰기를 장려 할 수 있습니다.

WordPress 기사 목록을 조정하는 방법 WordPress 기사 목록을 조정하는 방법 Apr 20, 2025 am 10:48 AM

WordPress 기사 목록을 조정하는 4 가지 방법이 있습니다. 테마 옵션 사용, 플러그인 사용 (예 : Post Type Order, WP Post List, Boxy Sitture), 코드 사용 (Functions.php 파일의 설정 추가) 또는 WordPress 데이터베이스를 직접 수정하십시오.

개인화 된 결과를 위해 WordPress에서 사용자 정보에 로그인하는 방법 개인화 된 결과를 위해 WordPress에서 사용자 정보에 로그인하는 방법 Apr 19, 2025 pm 11:57 PM

최근에 사용자가 개인화 된 라이브러리에 좋아하는 게시물을 저장할 수 있도록하여 사용자가 개인화 된 경험을 만드는 방법을 보여주었습니다. 어떤 곳에서 이름을 사용하여 개인화 된 결과를 다른 수준으로 가져갈 수 있습니다 (예 : 환영 화면). 다행히 WordPress를 사용하면 로그인 한 사용자에 대한 정보를 쉽게 얻을 수 있습니다. 이 기사에서는 현재 로그인 한 사용자와 관련된 정보를 검색하는 방법을 보여줍니다. get_currentuserinfo ()를 사용합니다.  기능. 테마의 어느 곳에서나 사용할 수 있습니다 (헤더, 바닥 글, 사이드 바, 페이지 템플릿 등). 작동하려면 사용자에게 로그인해야합니다. 따라서 사용해야합니다.

부모 카테고리의 아카이브 페이지에 자식 카테고리를 표시하는 방법 부모 카테고리의 아카이브 페이지에 자식 카테고리를 표시하는 방법 Apr 19, 2025 pm 11:54 PM

상위 카테고리 아카이브 페이지에 자식 카테고리를 표시하는 방법을 알고 싶습니까? 분류 아카이브 페이지를 사용자 정의 할 때 방문자에게 더 유용하기 위해이를 수행해야 할 수도 있습니다. 이 기사에서는 부모 카테고리 아카이브 페이지에 자식 카테고리를 쉽게 표시하는 방법을 보여줍니다. 하위 범주가 부모 카테고리 아카이브 페이지에 나타나는 이유는 무엇입니까? 부모 카테고리 아카이브 페이지에 모든 자식 카테고리를 표시하면 방문자에게 덜 일반적이고 유용 할 수 있습니다. 예를 들어, 책에 대한 WordPress 블로그를 실행하고 "테마"라는 분류법을 가지고 있다면 독자가 할 수 있도록 "소설", "논픽션"과 같은 하위 세포 체질을 추가 할 수 있습니다.

WordPress에서 만료 후 날짜별로 게시물을 정렬하는 방법 WordPress에서 만료 후 날짜별로 게시물을 정렬하는 방법 Apr 19, 2025 pm 11:48 PM

과거에는 Postexpirator 플러그인을 사용하여 WordPress에서 게시물을 만료하는 방법을 공유했습니다. 활동 목록 웹 사이트를 만들 때이 플러그인이 매우 유용하다는 것을 알았습니다. 만료 된 활동 목록을 쉽게 삭제할 수 있습니다. 둘째,이 플러그인 덕분에 만료 후 날짜에 따라 게시물을 정렬하는 것도 매우 쉽습니다. 이 기사에서는 WordPress에서 만료일로 게시물을 정렬하는 방법을 보여줍니다. 사용자 정의 필드 이름을 변경하기 위해 플러그인의 변경 사항을 반영하도록 업데이트 된 코드. 의견에 알려 주신 Tajim에게 감사드립니다. 특정 프로젝트에서는 이벤트를 사용자 정의 게시물 유형으로 사용합니다. 지금

WordPress에 쿼리 카운트 및 페이지로드 시간을 표시하는 방법 WordPress에 쿼리 카운트 및 페이지로드 시간을 표시하는 방법 Apr 19, 2025 pm 11:51 PM

사용자 중 한 명이 다른 웹 사이트에 바닥 글에 쿼리 수와 페이지로드 시간을 표시하는 방법을 물었습니다. 당신은 종종 웹 사이트의 바닥 글에서 이것을 볼 수 있으며, "1.248 초 만에 64 쿼리"와 같은 것을 표시 할 수 있습니다. 이 기사에서는 WordPress에 쿼리 수와 페이지로드 시간을 표시하는 방법을 보여줍니다. 테마 파일 (예 : footer.php)에서 원하는 곳에서 다음 코드를 붙여 넣으십시오. 쿼리 신

IFTTT (및 기타)로 WordPress 및 소셜 미디어를 자동화하는 방법 IFTTT (및 기타)로 WordPress 및 소셜 미디어를 자동화하는 방법 Apr 18, 2025 am 11:27 AM

WordPress 웹 사이트 및 소셜 미디어 계정을 자동화하는 방법을 찾고 계십니까? 자동화를 사용하면 Facebook, Twitter, LinkedIn, Instagram 등에서 WordPress 블로그 게시물 또는 업데이트를 자동으로 공유 할 수 있습니다. 이 기사에서는 IFTTT, Zapier 및 Uncanny Automator를 사용하여 WordPress 및 소셜 미디어를 쉽게 자동화하는 방법을 보여 드리겠습니다. WordPress 및 소셜 미디어를 자동화하는 이유는 무엇입니까? WordPre를 자동화하십시오

WordPress 호스트를위한 웹 사이트를 구축하는 방법 WordPress 호스트를위한 웹 사이트를 구축하는 방법 Apr 20, 2025 am 11:12 AM

WordPress 호스트를 사용하여 웹 사이트를 구축하려면 다음과 같이 필요합니다. 신뢰할 수있는 호스팅 제공 업체를 선택하십시오. 도메인 이름을 구입하십시오. WordPress 호스팅 계정을 설정하십시오. 주제를 선택하십시오. 페이지와 기사를 추가하십시오. 플러그인을 설치하십시오. 웹 사이트를 사용자 정의하십시오. 귀하의 웹 사이트를 게시하십시오.

See all articles