워드프레스에서 템플릿 태그란 무엇인가요?

개발자와 테마 디자이너 템플릿 태그입니다. 템플릿 태그가 무엇이고 어떻게 작동하는지 이해하면 웹페이지의 동적 콘텐츠를 구성하는 능력을 크게 향상시킬 수 있습니다.

초보 개발자든 숙련된 개발자든 상관없이, 이 가이드는 워드프레스의 템플릿 태그에 대해 알아야 할 모든 것을 간단하게 설명합니다.

템플릿 태그 소개

워드프레스에서 템플릿 태그는 PHP 함수로, 데이터를 동적으로 가져와 표시하는 데 사용됩니다. 사이트 제목이나 작성자 이름과 같은 값을 하드코딩하는 대신, 템플릿 태그를 사용하여 데이터베이스에서 해당 값을 가져와 필요한 위치에 표시할 수 있습니다.

템플릿 태그는 header.php, footer.php, index.php, single.php와 같은 WordPress 테마 파일 내에서 사용됩니다. 이러한 기능을 통해 코드를 여러 번 중복 작성하지 않고도 사이트의 구조를 정의할 수 있습니다.

템플릿 태그 vs. HTML<template> 요소

워드프레스 템플릿 태그와 HTML을 혼동하지 않는 것이 중요합니다.<template> 두 요소 모두 유용하지만, 목적은 매우 다릅니다.

• HTML ​ 페이지 로드 시 렌더링되지 않는 코드 조각을 저장합니다. 이 콘텐츠는 복제하여 나중에 JavaScript를 사용하여 삽입할 수 있습니다.

• 템플릿 태그는 게시물 제목이나 날짜와 같은 특정 콘텐츠 또는 정보를 페이지에 출력하는 PHP 함수입니다.

개념적으로는 매우 유사하지만, 하나는 주로 자바스크립트 기반 프런트엔드 렌더링에 사용되고, 다른 하나는 백엔드 PHP 템플릿 처리에 사용됩니다.

템플릿 태그의 구조

다음은 템플릿 태그의 간단한 예입니다

<?php the_title(); ?>

이 코드는 워드프레스 게시물의 제목을 표시합니다. 워드프레스.

대부분의 템플릿 태그는 비슷한 형식을 따릅니다

• PHP 함수
• 매개변수를 사용할 수 있습니다(선택 사항)
• 출력을 직접 표시하거나 값을 반환할 수 있습니다

에코 vs. 리턴

일부 태그는 내용을 직접 출력하는 반면, 다른 태그는 변수에 할당할 수 있는 값을 반환합니다. 예상되는 동작을 확인하려면 항상 WordPress 문서를 참조하세요.

자주 사용되는 템플릿 태그

WordPress에는 동적 콘텐츠를 쉽게 표시할 수 있도록 다양한 내장 템플릿 태그가 있습니다. 이러한 태그는 기능별로 그룹화되어 있으며 테마 파일 전반에서 널리 사용됩니다.

구조적 태그

구조적 템플릿 태그는 테마 레이아웃의 다양한 부분을 자동으로 포함합니다. 이를 통해 코드를 다시 작성하지 않고도 여러 페이지에서 일관성을 유지할 수 있습니다.

<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>

이러한 태그에는 header.php, footer.php, sidebar.php와 같은 다른 템플릿 파일도 포함됩니다.

더 알아보기: 헤더 태그 – 헤더 태그란 무엇이며 어떻게 사용하는가

콘텐츠 태그

콘텐츠 템플릿 태그는 웹 페이지에 동적인 게시물 데이터를 표시하는 데 필수적입니다. 이러한 태그는 제목, 본문, 요약과 같은 주요 콘텐츠 요소를 출력합니다.

<?php the_title(); ?>
<?php the_content(); ?>
<?php the_excerpt(); ?>

메타데이터 태그

메타데이터 태그를 사용하면 작성자 이름, 게시 날짜 또는 카테고리와 같은 게시물 관련 추가 정보를 가져올 수 있습니다. 이러한 정보는 콘텐츠에 적절한 맥락을 제공하여 콘텐츠를 더욱 풍부하게 만들어 줍니다.

<?php the_author(); ?>
<?php the_date(); ?>
<?php the_category(); ?>

이 태그들은 게시물이나 게시물을 작성한 사용자에 대한 메타데이터를 가져옵니다.

사이트 정보 태그

사이트 정보 태그는 WordPress 대시보드에서 정의된 설정 및 정보를 가져옵니다. 여기에는 사이트 이름, 설명 및 기본 URL이 포함될 수 있습니다.

<?php bloginfo(‘name’); ?>
<?php bloginfo(‘description’); ?>
<?php bloginfo(‘url’); ?>

이 태그들은 사이트 설정에서 데이터를 가져옵니다.

더 읽어보기: 메타 태그란 무엇인가요?

루프 내부의 템플릿 태그

WordPress 루프는 게시물을 처리하고 표시하는 PHP 코드 블록입니다. 대부분의 콘텐츠 관련 템플릿 태그는 이 루프 안에 배치할 때 가장 잘 작동합니다.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php endwhile; endif; ?>

Loop 내부에서 the_title() 또는 the_content()와 같은 태그는 현재 컨텍스트에 있는 게시물을 기반으로 작동합니다.

사용자 지정 템플릿 태그를 만드는 방법

때로는 기본 템플릿 태그가 필요한 모든 것을 충족하지 못할 수 있습니다. 바로 이럴 때 사용자 지정 템플릿 태그가 유용합니다.

이를 생성하려면 테마의 functions.php 파일 안에 사용자 지정 PHP 함수를 작성하면 됩니다

function mytheme_display_random_number() {
echo rand(1, 100);
}

그런 다음 테마 템플릿에서 다음과 같이 이 함수를 호출할 수 있습니다

<?php mytheme_display_random_number(); ?>

모범 사례

• 함수 이름에 항상 접두사를 붙여 이름 충돌을 방지하세요.
• 데이터를 출력하기 전에 정제하고 유효성을 검사하십시오.
• WordPress에서 제공하는 esc_html()과 같은 함수를 사용하여 안전한 출력을 보장하세요.

템플릿 태그는 언제 어디서 사용해야 할까요?

템플릿 태그를 언제 어디에 사용해야 하는지 알면 워드프레스 테마가 올바르게 작동하는 데 도움이 됩니다. 템플릿 태그는 주로 single.php, archive.php, page.php 또는 index.php와 같은 테마 파일에 배치되며, 배치 위치는 렌더링되는 콘텐츠 유형에 따라 달라집니다.

예를 들어:

• 반복문 안에서 the_title() 각 게시물의 제목을 표시합니다.
• 파일에서 page.php 또는 single.php 사용하여 일관된 사이드바를 삽입하세요 get_sidebar() 함수를.
• 에 사이트의 슬로건을 표시하려면 header.php사용하세요 bloginfo('description')을.

템플릿 구조를 이해하면 적절한 배치 위치를 파악하여 웹 페이지에서 동적 콘텐츠를 효율적으로 로드할 수 있습니다.

추가 정보: SEO 개선을 ​​위해 워드프레스에서 중복된 제목 태그를 수정하는 방법

템플릿 태그와 템플릿 파일의 차이점

초보자들은 워드프레스 테마 개발에서 서로 다른 역할을 하는 템플릿 태그와 템플릿 파일을 혼동하는 경우가 많습니다.

• 템플릿 파일은 home.php, single.php, 404.php와 같이 웹 페이지의 전체 레이아웃이나 구조를 정의하는 전체 PHP 파일입니다.

• 템플릿 태그 는 게시물 내용, 메타데이터 또는 사이트 정보와 같은 특정 데이터를 표시하기 위해 해당 파일 내에 작성된 함수입니다.

템플릿 파일은 컨테이너이고, 템플릿 태그는 그 컨테이너 안의 콘텐츠를 구성하는 개별 요소라고 생각하면 됩니다.

템플릿 태그와 함께 조건부 태그 사용하기

템플릿 태그와 워드프레스 조건부 태그를 결합하여 페이지에 콘텐츠가 표시되는 시점을 제어할 수 있습니다. 이를 통해 사이트가 상황에 따라 동적으로 작동하도록 할 수 있습니다.

예:

php

if ( is_single() ) {
the_title();
the_content();
}

이 코드는 게시물 제목과 내용이 단일 게시물 보기에서만 표시되도록 합니다. 템플릿 태그를 조건부로 사용하면 하드코딩 없이 웹 페이지 구조와 사용자 경험을 맞춤 설정할 수 있습니다.

성능 및 보안 팁

템플릿 태그는 올바르게 사용하지 않으면 성능과 보안에 영향을 미칠 수 있습니다.

• 출력 시 이스케이프 처리: 데이터를 출력할 때는 항상 esc_url() 및 esc_html()과 같은 함수를 사용하십시오.
• 캐시 데이터: 성능 향상을 위해 반복적인 쿼리를 임시 데이터에 저장합니다.
• 데이터베이스에 직접 접근하는 것을 피하세요. WordPress API 함수를 사용하여 데이터를 가져오세요.

관련 글: 타사 태그가 성능에 미치는 영향은 무엇일까요?

템플릿 태그 vs. 쇼트코드

템플릿 태그와 숏코드는 모두 동적 콘텐츠를 삽입하는 데 사용되지만, 사용 목적과 용도가 다릅니다.

• 템플릿 태그는 테마 PHP 파일에서 동적 HTML 출력을 직접 삽입하고 제어하는 ​​데 사용됩니다.
• 숏코드는 워드프레스 편집기 또는 do_shortcode() 함수를 통해 게시물이나 페이지 콘텐츠 내에서 사용됩니다.

예를 들어, single.php 파일에서 the_author() (템플릿 태그)를 사용하여 작성자의 이름을 표시할 수 있고, gallery (숏코드)는 게시물 본문 안에 추가할 수 있습니다.

숏코드는 사용자에게 더 직접적으로 드러나는 반면, 템플릿 태그는 테마 코드 내부에서 작동합니다.

자세히 알아보기: Elementor에서 템플릿을 쉽게 사용하기 위한 단축 코드 설정 방법

고급 사용법: 템플릿 태그에 매개변수 전달하기

일부 템플릿 태그는 데이터 표시 방식을 사용자 지정하기 위한 매개변수를 허용합니다. 이러한 유연성을 통해 코드를 반복 작성하지 않고도 콘텐츠 표현 방식을 맞춤 설정할 수 있습니다.

wp_nav_menu()를 사용한 예시:

php

php
wp_nav_menu(
array( 'theme_location' => 'primary',
'menu_class' => 'nav-menu',
'container' => 'nav',
));
?>

여기서는 메뉴의 모양과 HTML 구조를 정의하기 위해 매개변수 배열이 전달됩니다. 마찬가지로, `get_the_excerpt($post_id)`와 같은 태그를 사용하면 특정 게시물의 요약을 가져올 수 있어 정보 검색 및 표시 방식을 더욱 세밀하게 제어할 수 있습니다.

SEO 및 접근성 고려 사항

관련 모범 사례를 따르세요 SEO 및 접근성.

• 의미론적 HTML 태그를 사용하세요(<article> ,<section> ) 템플릿 태그와 함께.
• the_post_thumbnail() 함수를 사용하여 이미지 태그에 alt 속성을 추가합니다.
• 제목에 올바른 구조를 사용했는지 확인하십시오.<h1> ,<h2> ).

예:

<img src=”<?php echo get_the_post_thumbnail_url(); ?> ” alt="<?php the_title(); ?> ”>

디버깅 템플릿 태그

템플릿 태그가 작동하지 않는 경우:

• 현재 위치가 루프 내부에 있는지 확인하세요.
• function_exists() 함수를 사용하여 함수의 존재 여부를 확인합니다.
• WP_DEBUG와 오류 로그를 사용하여 문제를 추적하십시오.

예:

만약 'the_title' 함수가 존재한다면, 해당 함수가 제목을 호출하고
합니다.
을

브라우저 지원 및 호환성

템플릿 태그는 PHP와 WordPress 코어의 일부이므로 브라우저 지원은 직접적인 문제가 되지 않습니다. 하지만 HTML과 함께 JavaScript를 사용할 경우에는 문제가 될 수 있습니다.<template> 요소:

• 대부분의 최신 브라우저(크롬, 파이어폭스, 사파리, 엣지)에서 이를 지원합니다.
• 이전 버전의 인터넷 익스플로러는 지원하지 않습니다.
• 필요한 경우 폴리필을 사용하여 지원을 추가하세요.

더 읽어보기: 워드프레스 PHP 버전을 안전하게 업데이트하는 방법에 대한 필수 가이드

HTML<template> 요소 및 자바스크립트

워드프레스 템플릿 태그의 직접적인 부분은 아니지만, 이를 이해하는 것은 중요합니다. 자바스크립트 렌더링.

예:

<template id=”card-template”>
<div class=”card”>
<img src=”” alt=””>
<p class=”description”></p>
</div>
</template>

const template = document.querySelector('#card-template');
const clone = template.content.cloneNode(true);
clone.querySelector('img').src = 'image.jpg';
clone.querySelector('.description').textContent = '카드 설명';
document.body.appendChild(clone);

이를 통해 HTML 구조를 동적으로 재사용할 수 있으며, 개념적으로는 템플릿 태그와 유사하지만 자바스크립트로 구현됩니다.

흔히 저지르는 실수들을 피하는 방법

템플릿 태그를 사용할 때 주의해야 할 몇 가지 실수는 다음과 같습니다

• 잘못된 컨텍스트 사용: the_content()와 같은 태그는 루프 안에서 사용해야 합니다. 그렇지 않으면 예상대로 작동하지 않습니다.

• 출력 이스케이프 처리를 잊은 경우: 보안 문제를 방지하려면 항상 esc_html(), esc_url() 또는 이와 유사한 함수를 사용하여 출력을 정제해야 합니다.

• 브라우저 호환성 확인 안 함: HTML을 사용하는 경우

• 태그 대신 하드코딩을 사용하세요: 템플릿 태그가 데이터베이스에서 동적으로 값을 가져올 수 있는 경우, 고정된 값을 사용하는 것을 피하십시오.

모범 사례를 따르면 사이트의 보안, 성능 및 유지 관리 용이성이 보장됩니다.

요약

워드프레스의 템플릿 태그는 동적 콘텐츠를 표시하고, 코드를 깔끔하게 유지하며, 사이트 유연성을 향상시키는 강력한 방법입니다. 게시물 제목, 작성자 이름 또는 사용자 정의 데이터를 표시하든 템플릿 태그를 사용하면 테마 개발이 간소화됩니다.

템플릿 태그를 제대로 사용하면 웹 페이지의 구조가 잘 잡히고 접근성이 뛰어나며 SEO 친화적입니다. 또한 사용자 지정 템플릿 태그를 생성하면 고급 맞춤 설정이 가능해져 표시되는 내용과 방식을 정확하게 제어할 수 있습니다.

자주 묻는 질문