2. 기본 설정 및 개발 환경, 워드프레스 테마 개발 기초 기본 구조와 템플릿 파일 이해하기

2. 기본 설정 및 개발 환경

워드프레스를 기반으로 웹사이트를 개발하기 위해서는 우선 개발 환경을 설정해야 합니다. 이 절에서는 워드프레스 개발을 위한 기본적인 설정 및 환경 구축 방법을 설명하겠습니다.

1. 개발 도구 설치

워드프레스 테마를 개발하기 위해 필요한 기본 도구는 다음과 같습니다:

코드 에디터: Visual Studio Code, Sublime Text, Atom 등과 같은 텍스트 에디터를 사용합니다.
로컬 서버: XAMPP, MAMP, Local by Flywheel 등의 로컬 서버를 설치하여 워드프레스를 개발할 수 있는 환경을 만듭니다.
브라우저: Google Chrome, Firefox 등 최신 브라우저를 사용하고, 개발자 도구로 작업할 수 있습니다.

2. 로컬 서버 설치 및 워드프레스 다운로드

여기서는 XAMPP를 사용하여 로컬 서버를 설치하는 방법을 설명하겠습니다:

XAMPP를 다운로드하십시오: XAMPP 다운로드
다운로드한 설치 파일을 실행하고 지침에 따라 설치합니다.
XAMPP Control Panel을 열고 Apache와 MySQL을 시작합니다.
워드프레스를 다운로드하고(공식 웹사이트에서) C:\xampp\htdocs 폴더에 압축을 풉니다.
브라우저를 열고 http://localhost/wordpress를 입력하여 설치를 시작합니다.

3. 데이터베이스 설정

워드프레스를 위한 데이터베이스를 설정하는 방법은 다음과 같습니다:

XAMPP Control Panel에서 Admin 버튼을 클릭하여 phpMyAdmin으로 이동합니다.
상단 메뉴에서 Database를 클릭하고, 데이터베이스 이름을 입력한 후 Create 버튼을 클릭합니다.
브라우저에서 다시 http://localhost/wordpress로 돌아와 데이터베이스 정보를 입력하여 설치를 완료합니다.

워드프레스 테마 개발 기초

1. 기본 구조 이해하기

워드프레스 테마는 여러 파일과 폴더로 구성되어 있습니다. 기본적으로 필요한 파일은 다음과 같습니다:

style.css: 테마의 스타일을 정의하는 파일로, 테마 정보 헤더도 포함됩니다.
index.php: 템플릿 파일의 기본이 되는 파일입니다.
functions.php: 테마의 기능을 확장하는 PHP 파일입니다.

2. style.css 파일

이 파일은 테마의 전반적인 스타일을 설정하는 CSS 파일입니다. 기본 구조는 다음과 같습니다:


/*
Theme Name: My First Theme
Theme URI: http://example.com/
Author: Your Name
Author URI: http://example.com/
Description: An example theme for WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myfirsttheme
*/

3. index.php 파일

워드프레스의 모든 요청은 index.php 파일에서 처리됩니다. 기본적인 구조는 다음과 같습니다:

<?php get_header(); ?>

<div id="main" class="site-main">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p><?php the_excerpt(); ?></p>
    <?php endwhile; else : ?>
        <p>포스트가 없습니다.</p>
    <?php endif; ?>
</div>

<?php get_footer(); ?>

4. functions.php 파일

이 파일은 테마에 필요한 다양한 기능을 추가합니다. 예를 들어, 메뉴 등록이나 스타일 시트 및 스크립트 추가를 설정할 수 있습니다:


 __( 'Primary Menu', 'myfirsttheme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

function mytheme_scripts() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?>

5. 템플릿 파일 이해하기

워드프레스는 다양한 템플릿 파일을 사용하여 페이지를 구성합니다. 가장 일반적인 템플릿 파일은 다음과 같습니다:

header.php: 페이지의 상단 부분을 정의합니다.
footer.php: 페이지의 하단 부분을 정의합니다.
sidebar.php: 사이드바를 정의하는 파일입니다.
single.php: 개별 포스트를 표시하는 템플릿 파일입니다.
page.php: 정적 페이지를 표시하는 템플릿 파일입니다.

테마 개발 실습

1. 기본 테마 만들기

이제 기본적인 파일 구조를 이해했으므로, 실습을 통해 간단한 테마를 만들어 보겠습니다.

wp-content/themes 폴더를 열고 myfirsttheme라는 폴더를 만듭니다.
위에서 설명한 style.css, index.php, functions.php 파일을 각각 생성합니다.
각 파일에 필요한 코드를 입력합니다.
워드프레스 관리 화면로 이동하여 테마를 활성화합니다.

2. 사용자 정의 메뉴 추가하기

메뉴를 추가하려면 functions.php 파일에서 메뉴를 등록해야 합니다. 아래의 코드를 추가합니다:


function mytheme_register_menus() {
    register_nav_menus( array(
        'header-menu' => __( 'Header Menu' ),
    ) );
}
add_action( 'init', 'mytheme_register_menus' );

그 다음, header.php 파일을 만들어 아래와 같이 메뉴를 추가합니다:


<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

3. 사이드바 추가하기

사이드바를 추가하려면 다음의 코드를 functions.php 파일에 추가합니다:


function mytheme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Sidebar', 'myfirsttheme' ),
        'id'            => 'sidebar-1',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

이제 sidebar.php 파일을 생성하고, 아래와 같이 사이드바를 출력합니다:


<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

결론

이번 강좌를 통해 워드프레스 테마 개발의 기초적인 부분을 이해하셨기를 바랍니다. 기본 환경 설정에서부터 테마의 구조 및 개발 방법에 이르기까지 다양한 내용을 다뤄 보았습니다. 워드프레스 개발은 지속적으로 학습이 필요한 분야이므로, 다양한 자료를 참고하며 실습을 통해 깊이 있는 지식을 쌓아 가시기 바랍니다. 앞으로 여러분의 멋진 테마 개발을 기대합니다!