블로그 페이지 설정하기

블로그 페이지가 어떻게 워드프레스 포스트를 보이게 할지 설정해 주고 있습니다.

아래서 함께 보겠습니다.

 

워드프레서 헤더를 가지고 오는 php 코드입니다.

<?php

get_header(); ?>

 

아래는 HTML 코드로 페이지 배너를 가지고 왔습니다. 

배너 타이틀과 소개를 변경하였습니다. 

 

<div class="page-banner">

<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('/images/ocean.jpg') ?>)"></div>

<div class="page-banner__content container container--narrow">

<h1 class="page-banner__title">Welcome to our blog!</h1>

<div class="page-banner__intro">

<p>Keep up with our latest news.</p>

</div>

</div>

</div>

배너 바로 밑에 글을 삽입할 경우 페이지 왼쪽으로 텍스트가 쏠리기 때문에 아래와 같이 container를 사용하여 페이지에 텍스트가 잘 표시되도록 합니다.

<div class="container container--narrow page-section">

 

php코드에서 while Loop을 사용하여 포스트를 표시해주고 있습니다.

 

while() {} 

have_posts() - 포스트가 있는 동안 계속 불러온다

the_post(); - 기능을 사용하여 포스트 제목을 가지고 온다

 

 

<?php

while(have_posts()) {

the_post(); ?>

 

아래 HTML 코드를 사용하여 포스트의 내용을 가지고 온다.

<div class="post-item">

<h2 class="headline headline--medium headline--post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<div class="metabox">

 

포스트 하단에 들어갈 작가, 시간 그리고 카테고리 리스트를 자동으로 불러올 php 코드들을 확인할 수 있습니다.

 

 

<p>Posted by <?php the_author_posts_link(); ?> on <?php the_time('n.j.y'); ?> in <?php echo get_the_category_list(', '); ?></p>

</div>

<div class="generic-content">

 

포스트 미리보기를 가지고 오는 php코드 

 

<?php the_excerpt(); ?>

 

<p><a class="btn btn--blue" href="<?php the_permalink(); ?>">Continue reading &raquo;</a></p>

</div>

<?php

}

?>

</div>

 

푸터 내용을 가지고 오는 php코드입니다.

<?php get_footer();

?>