WordPress 튜토리얼: HTML에서 WordPress 테마를 만드는 방법(1부)

<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>
		<header class="header">
		<p>This is header section. Put your logo and other details here.</p>
	</header>

그런 다음 추가하세요…

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

...header.php 파일의 <head> 태그 사이에 스타일시트를 연결하세요. 위에 표시된 대로 header.php에 <html> 및 <body> 여는 태그를 넣는 것도 잊지 마세요. 모든 변경 사항을 저장합니다.

두 번째 섹션(예:

<?php get_header(); ?>

… 맨 위에 그리고 …

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

…완전히 바닥까지. 이 세 줄은 header.php, sidebar.php 및 footer.php(순서대로)를 가져와서 코드를 다시 통합하는 index.php에 표시합니다. 모든 변경 사항을 저장합니다. 이 시점에서 index.php 파일은 다음과 같아야 합니다:

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

그런 다음 index.html의 사이드바 및 바닥글 섹션 내용을 각각 sidebar.php 및 footer.php에 복사합니다.

게시물 추가

귀하의 HTML 템플릿이 WordPress 테마로 바뀌려고 합니다. 게시물을 추가하기만 하면 됩니다. 블로그에 게시물이 있는 경우 맞춤 제작된 "HTML-to-WordPress" 테마에 해당 게시물을 어떻게 표시하시겠습니까? 루프라고 알려진 특별한 유형의 PHP 함수를 사용합니다. The Loop는 게시물과 댓글을 어디에 배치하든 표시하는 특수한 코드일 뿐입니다.

이제 index.php 템플릿의 콘텐츠 섹션에 게시물을 표시하려면

<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><!--.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><!--. entry-->
				<footer class="post-footer">
					<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
				</footer><!--.post-footer-->
			</div><!-- .post-->
		<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
			<nav class="navigation index">
				<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
				<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
			</nav><!--.navigation-->
		<?php else : ?>
	<?php endif; ?>
</div><!--.content-->

그러면 귀하의 게시물이 처리됩니다. ABC처럼 쉽습니다. 이 시점에서(그리고 이 튜토리얼에 제공된 샘플 파일을 사용하여) header.php는 다음과 같아야 합니다.

<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' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

sidebar.php는 다음과 같아야 합니다:

<?php dynamic_sidebar( 'sidebar' ); ?>

footer.php는 다음과 같아야 합니다:

<footer class="footer">
    <p>And this is the footer</p>
</footer>
<?php wp_footer(); // Crucial core hook! ?>
</body>
</html>

바닥글에서 닫는 및 태그를 보셨나요? 그것도 포함하는 것을 잊지 마세요.

style.css는 다음과 같아야 합니다.

/*
Theme Name: Creating WordPress Theme from HTML
Theme URI: http://wpexplorer.com
Description: This theme shows you how to create WordPress themes from HTML
Version: 1.0
Author: Freddy for @WPExplorer
Author URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Tags: wpexplorer, custom theme, HTML to WordPress, create WordPress theme
*/
body {
    font-family: arial, helvetica, verdana;
    font-size: 0.8em;
    width: 100%;
    height: 100%;
}

.header {
    background-color: #1be;
    margin-left: 14%;
    top: 0;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    width: 72%;
    height: 250px;
}

.content {
    background-color: #999;
    margin-left: 14%;
    margin-top: 5px;
    float: left;
    width: 46%;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

.sidebar {
    background-color: #1d5;
    margin-right: 14%;
    margin-top: 5px;
    float: right;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    top: 180px;
    width: 23%;
}

.footer {
    background-color: red;
    margin-left: 14%;
    float: left;
    margin-top: 5px;
    width: 72%;
    height: 50px;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

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><!--.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><!--. entry-->
				<footer class="post-footer">
					<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
				</footer><!--.post-footer-->
			</div><!-- .post-->
		<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
			<nav class="navigation index">
				<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
				<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
			</nav><!--.navigation-->
		<?php else : ?>
	<?php endif; ?>
</div><!--.content-->
<?php get_sidebar(); ?>
<?php wp_footer(); // Crucial footer hook! ?>
<?php get_footer(); ?>

다시 말하지만, 이것은 머리글, 콘텐츠, 사이드바, 바닥글 레이아웃이 있는 왼쪽에서 오른쪽으로의 웹사이트를 기반으로 합니다. 당신은 따르고 있습니까? 5개의 파일은 모두 테마 폴더에 저장되어야 합니다. 원하는 대로 폴더 이름을 지정하고 WinRar 또는 동등한 프로그램을 사용하여 ZIP 아카이브로 압축합니다. WordPress 설치에 새 테마를 업로드하고 활성화한 후 변환된 테마가 실제로 작동하는 모습을 확인하세요!

그거 쉬웠지, 그렇지? 원하는 대로 테마 스타일을 지정할 수 있지만 WordPress에서 우리가 좋아하는 대부분의 기능은 여전히 비활성화되어 있습니다. 이 튜토리얼은 HTML 템플릿을 WordPress로 변환하는 기본 사항을 다루며 초보자에게 큰 가치가 있을 것입니다. 다음 튜토리얼에서는 한 단계 더 높은 수준으로 HTML 템플릿을 어느 방향으로든 바꿀 수 있는 WordPress 프로그래밍의 다른 측면(예: 템플릿 파일 및 템플릿 태그)을 다루겠습니다. 너는 좋아한다. 계속 지켜봐 주시기 바랍니다!