WordPress 테마의 구조 소개
- <스팬>1. WordPress 튜토리얼: HTML에서 WordPress 테마를 만드는 방법(1부)
- 2. WordPress 튜토리얼: HTML에서 WordPress 테마를 만드는 방법(2부)
- 3. 현재 읽고 있는 내용: WordPress 테마 분석 소개
얼마 전 HTML에서 WordPress 테마를 만드는 개념을 소개했습니다. 우리는 튜토리얼을 두 부분으로 나누었고 오늘은 두 튜토리얼을 구체화하는 것에 관한 것이므로 이 게시물을 게시물 시리즈의 세 번째 부분으로 간주하십시오. 내 목표는 WordPress 테마를 분해하여 그것이(테마) 작동 방식에 대한 명확한 그림을 제공하는 것입니다.
이 게시물에서는 귀하가 HTML 및 CSS에 대한 실무 지식이 있다고 가정합니다. WordPress 테마를 디자인하려면 HTML 및 CSS 기술을 갖추는 것이 필수 조건임을 선언하겠습니다. 한 가지 더, 이 게시물에는 거창한 단어와 어려운 개념이 포함되어 있지 않습니다. 이해하기 쉬우므로 재미있게 학습할 준비를 하세요.
약간의 HTML 프라이밍
모든 HTML 웹페이지는 <div> 태그를 사용하여 여러 부분으로 분할됩니다. 예를 들어 웹 사이트의 본문(<body>)을 탐색, 머리글, 기본 콘텐츠, 사이드바, 바닥글 등 여러 섹션으로 나눌 수 있습니다.
웹페이지를 섹션으로 나누면 CSS를 사용하여 원하는 대로 섹션을 정렬(또는 배열)할 수 있습니다. 이 프로세스를 스타일링이라고 하며 여기에는 색상, 크기, 테두리, 특수 효과 등과 같은 다른 스타일 요소를 추가하는 작업이 포함됩니다. 이것이 CSS의 강력한 기능이며 CSS는 CSS(Cascading Style Sheets)의 약자입니다. HTML과 CSS 파일을 함께 넣고 몇 개의 이미지를 추가하면 완전한 웹사이트가 완성됩니다.
WordPress 테마에서는 상황이 크게 다르지 않습니다. HTML에서 WordPress 테마를 만드는 방법의 1부에서 본 것처럼 WordPress 테마는 여러 파일로 분할됩니다. 이 시점에서 어떤 유사점을 발견할 수 없다면 제가 설명해 드리겠습니다.
정적 HTML 웹 페이지는 <div> 태그(또는 실제로 구식인 경우 테이블)를 사용하여 여러 부분(앞서 섹션이라고 불렀음)으로 나뉩니다. 반면에 WordPress 테마는 여러 PHP 파일로 분할된 다음 템플릿 태그를 사용하여 다시 결합됩니다.
따라서 모든 본문 요소(머리글, 기본 콘텐츠, 사이드바, 바닥글 등)를 단일 파일에 두는 대신(정적 HTML의 경우) 각 본문 요소(WordPress 테마)는 별도의 파일에 있습니다.
따라서 헤더는 header.php에 있고, 사이드바는 sidebar.php에 있으며, 주요 콘텐츠는 index.php, Single.php(포스트인 경우) 또는 page.php(페이지인 경우)에 있습니다. ). 바닥글 섹션은 footer.php 등에 위치합니다.
당신은 따라하고 있습니까? 아래 그림을 확인하세요.
위 그림에서 <?php get_header(); ?>, <?php get_sidebar(); ?> 및 <?php get_header(); ?>를 템플릿 태그라고 합니다. 그들의 작업은 테마 디렉토리에서 header.php, sidebar.php 및 footer.php를 순서대로 가져와서 index.php에 내용을 표시하여 웹 페이지를 완성하는 것입니다.
.php 확장자에 겁먹지 마세요. PHP 파일 안의 콘텐츠는 여러분에게 익숙한 HTML 코드일 뿐입니다. 예를 들어, header.php에는 일반적인 HTML 목록 탐색이 포함될 수 있습니다. 마찬가지로 일반적인 HTML 코드를 footer.php, sidebar.php 및 index.php에 넣을 수 있습니다.
index.php(또는 원하는 위치)에 loop.php 기능을 배치하여 블로그 게시물을 표시할 수도 있지만, 속도를 늦추고 WordPress 테마의 분석으로 돌아가야 합니다. HTML에서 WordPress 테마를 만드는 방법의 2부에서 루프에 대해 한두 가지 언급했습니다. 그리고 우리는 미래에 그것(루프)과 다른 기능들에 대해 이야기할 것입니다.
계속해서…
기본 WordPress 테마는 다음과 같은 최소 4개의 템플릿 파일로 구성됩니다.
- index.php
- 헤더.php
- 사이드바.php
- 바닥글.php
각 마법의 파일에 무엇이 들어 있는지 살펴보겠습니다.
Index.php 템플릿 파일
이것은 작동하는 WordPress 테마가 없는 기본 파일입니다. WordPress 웹사이트를 방문할 때 로드되는 첫 번째(또는 기본) 파일입니다. index.html과 동일하다고 생각하세요.
WordPress 테마의 일반적인 index.php는 다음과 같습니다.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?><?php get_header(); 사이에 루프를 추가할 수 있습니다. /> 및 <?php get_sidebar(); ?> 아래와 같이 블로그 게시물을 홈페이지(index.php)에 표시합니다.
<?php get_header(); ?>
<div class="content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<div class="date"><?php the_time( 'M j y' ); ?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div><!--end post header-->
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!--end entry-->
<div class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</div><!--end post footer-->
</div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class="navigation index">
<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</div><!--end navigation-->
<?php else : ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Header.php 템플릿 파일
이 템플릿 파일에는 헤더 코드, 탐색 및 HTML 헤드 코드가 포함되어 있습니다. 기본적으로 header.php는 웹 사이트 상단에 표시하려는 모든 것을 저장합니다. 웹사이트 제목 같은 것 말이죠.
또한 header.php의 CSS 스타일시트에 연결됩니다. 다음은 header.php의 기본 예입니다:
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<div class="header">
<p>This is header section. Put your logo and other details here.</p>
</div>Sidebar.php 템플릿 파일
Sidebar.php에는 사이드바에 표시하는 데 필요한 모든 것이 포함되어 있습니다. 사이드바에는 추가 메뉴, 위젯, 카테고리, 소셜 미디어 아이콘, 사용자 정의 콘텐츠, 광고 등의 HTML 코드가 포함되어 있습니다.
Sidebar.php에는 필요에 따라 순수 HTML 마크업이나 PHP 함수 호출이 포함될 수 있습니다. 따라서 기본 sidebar.php는 다음과 같습니다.
<div class="sidebar">
Put your custom content or HTML code here.
</div>Footer.php 템플릿 파일
footer.php에는 무엇이 들어갈 것이라고 생각하시나요? 여기에 저작권 정보, 추가 메뉴, 링크, 소셜 미디어 아이콘 등 원하는 것을 입력할 수 있습니다! 기본 footer.php가 어떻게 보이는지 보시겠습니까? 여기:
<footer class="footer">
Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be.
</footer>
</body>
</html>footer.php에서