워드프레스 블로그 포스트 페이지 꾸미기

 

 

<?php

get_header();

while(have_posts()) {

the_post(); ?>

샘플 텍스트 우선 블로그를 위해 페이지 배너 div class를 가지고 옵니다. 다른 페이지에 있는 코드를 복사해 왔습니다. 상단 배너와 사진 그리고 배너 페이지 내용이 보입니다. 

<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"><?php the_title(); ?></h1>

<div class="page-banner__intro">

<p>Don't forget to replace me later</p>

</div>

</div>

</div>

div-class="container...는 포스트 페이지 내용이 왼쪽으로 쏠려 있는 것이 아니라 가운데 잘 정렬될 수 있도록 해줍니다. 

a class = "metabox.. 태그는 블로그 홈으로 돌아갈 수 있게, 그리고 작가와 날짜를 표시하도록 해주는 코드입니다.

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

<div class="metabox metabox--position-up metabox--with-home-link">

<p>

<a class="metabox__blog-home-link" href="<?php echo site_url('/blog') ?>"><i class="fa fa-home" aria-hidden="true"></i> Blog Home</a> <span class="metabox__main">Posted by <?php the_author_posts_link(); ?> on <?php the_time('n.j.y'); ?> in <?php echo get_the_category_list(', '); ?></span>

</p>

</div>

샘플 텍스트 div class="generic-content" 같은 경우에는 포스트가 모두 정해진 스타일 (제목, 본문 등)에 따라 표시될 수 있도록 해준다.

그리고 php the_content 코드는 블로그 포스트의 내용을 가지고 온다.

<div class="generic-content"><?php the_content(); ?></div>

</div>

<?php }

get_footer()

?>

샘플 텍스트