본문 바로가기

wordpress/wordpress기초

워드프레스 - 테마 만들기 - 클라이언트 출력하기(header, footer)

반응형

임시 데이터를 위해 새 책들을 추가해 주었다. 

 

index.php에서는 기본적으로 Post들을 표시해주기 때문에 최신 글들이 나타나게 된다

 

가져오는 갯수의 기준은 

 

설정의 읽기를 통해 가져온다

 

 

index.php

<?php
echo '<pre>';
var_dump($wp_query);
echo '</pre>';

 

해당과같이 $wp_query 를 통해 값을 가져와보면 

요청하는 값들을 조회할 수 있다. 기본적으로 Post(글) 을 통해 데이터를 가져오는것을 확인 할 수 있다.

 

 

book의 고유 주소를 등록해주기 위해 

has_archive

설정을 변경해준다

has_archive를 true로 해주고 

functions.php

<?php
function getHelloWorld(){
    return '<h1>Hello World</h1>';
}

function bookstore_register_post_type(){
    register_post_type('book', [
        'has_archive' =>true,
        'labels' => [
            'name'                  => '책',
            'singular_name'         => '책',
            'menu_name'             => '책',
            'name_admin_bar'        => '책',
            'add_new'               => '새 책 추가',
            'add_new_item'          => '새 책을 추가합니다',
            'new_item'              => '새 책',
            'edit_item'             => '책 수정',
            'view_item'             => '책 보기',
            'all_items'             => '책 목록 ',
            'search_items'          => '책 검색',
            'parent_item_colon'     => '상위 책:',
            'not_found'             => '현재 입력한 책이 없습니다.',
            'not_found_in_trash'    => '휴지통에 책이 없습니다',
            // 'featured_image'        => '',
            // 'set_featured_image'    => '',
            // 'remove_featured_image' => '',
            // 'use_featured_image'    => '',
            // 'archives'              => '',
            // 'insert_into_item'      => '',
            // 'uploaded_to_this_item' => '',
            // 'filter_items_list'     => '',
            // 'items_list_navigation' => '',
            // 'items_list'            => '',
        ],
        'public' =>true,
        'menu_position' => 3,
        'menu_icon' => 'dashicons-book'
        // 'menu_icon' => get_template_directory_uri().'/images/open-book.svg'
    ]);
}
add_action('init', 'bookstore_register_post_type');

 

index.php

<?php
var_dump(get_post_type_archive_link('book'));

index.php에서 조회를 해보면 

 

해당과같이 주소가 등록이 되어있다.

 

하지만 해당 주소는 정상적으로 wordpress에서 갱신이 안된상태로써 

워드프레스 admin 사이트에서 다시 재 등록을 해주어야 한다. 

 

 

설정 - > 고유주소 -> 변경 사항 저장을 눌러주고 

 

index.php

<?php
echo '<pre>';
var_dump($wp_query);
echo '</pre>';

 

조회를 해보면 

 

정상적으로 등록한 책들의 정보를 가져 올 수 있게 된다.

 

havae_posts

$wp_query에서 더 표시할 post가 있는지 검사, 있으면 true 없으면 false 리턴 

 

the_post

template tag를 사용할 수 있게 $wp_queru의 현재 post를 세팅 

현재 포스트를 한칸 더 뒤로 이동한다. 

template tag  

wp에서 정보를 동적으로 표시할 때 쓰는 함수들 

 

 

 

 

the_title은 일종의 템플릿 태그로써 제목을 나타내 준다

index.php

<ul>
    <?php
    if (have_posts()) {
        while (have_posts()) {
            the_post();
    ?>
            <li><?php the_title(); ?></li>
    <?php
        }
    } ?>
</ul>

 

 

정상적으로 등록헀던 태그들이 나타나게 된다 

 

여기에 

A태그를 추가하면

 

 

<ul>
    <?php
    if (have_posts()) {
        while (have_posts()) {
            the_post();
    ?>     
            <li>
            <a href="<?php the_permalink()?>">
            <?php the_title(); ?>
            </a>
            </li>
    <?php
        }
    } ?>
</ul>

 

 

get_post_type_archive_link 는 archive의 주소를 가져오는 함수이다

<div>
    <a href="<?= get_post_type_archive_link('book') ?>">책 목록</a>
</div>

<ul>
    <?php
    if (have_posts()) {
        while (have_posts()) {
            the_post();
    ?>
            <li>
                <a href="<?php the_permalink() ?>">
                    <?php the_title(); ?>
                </a>
            </li>
    <?php
        }
    } ?>
</ul>

 

각각 클릭시 

 

 

위와같이 나오게 된다. 

 

header, footer 만들기 

 

get_header()

header.php를 include

wp_head()

<head></head>안에 들어갈 주요 내용을 구성해 출력 

 

wp_head 내용 채우기

 

wp_enqueue_style('handle-name', get_stylesheet_uri());

기본 스타일시트 include

 

add_action("wp_enqueue_scripts', 'function_name');

기본 스타일시트 include 함수를 등록

 

add_action("after_setup_theme','function_name');

기본 테마 설정 함수를 등록 

 

 

워드프레스에서는 주로 header와 footer를 분리해서 include하는 방식으로 사용해 준다. 

index.php

<?php get_header() ?>

<ul>
    <?php
    if (have_posts()) {
        while (have_posts()) {
            the_post();
    ?>
            <li>
                <a href="<?php the_permalink() ?>">
                    <?php the_title(); ?>
                </a>
            </li>
    <?php
        }
    } ?>
</ul>

 

 

index.php에서 get_header을 선언해줬다. get_header은 header.php파일을 가져오는 함수로써 이를 위해

header.php 함수를 가져와야 한다 

header.php 부분에 메인 홈페이지 주소와 book archive의 주소도 넣어주었다.

 

header.php

<!DOCTYPE html>
<html lang="en">

<head>
    <?php wp_head() ?>
</head>

<body>
    <nav>
        <a href="<?= home_url() ?>">Bookstore</a>
        <a href="<?= get_post_type_archive_link('book') ?>">책 목록</a>
    </nav>
    <hr/>

 

 

 

이번엔 footer을 넣어준다. 

 

index.php

<?php get_header() ?>

<ul>
    <?php
    if (have_posts()) {
        while (have_posts()) {
            the_post();
    ?>
            <li>
                <a href="<?php the_permalink() ?>">
                    <?php the_title(); ?>
                </a>
            </li>
    <?php
        }
    } ?>
</ul>

<?php get_footer() ?>

 

footer.php

<?php wp_footer()?>
</body>
</html>

 

wp_header와 wp_footer은 기본적으로 워드프레스에서 필요한 부분들을 넣어주는 함수이다. 

 

반응형