기사의 개별 페이지를 사용자정의로 디자인하기

조건 분기와 스타일시트 설정을 이용해서 기사의 개별 페이지를 사용자정의로 디자인한다. 헤더 이미지를 표시하지 않도록 하고, 기사 제목의 배경색을 진한 회색으로 표시한다.

->POINT

  • 조건 분기 <?php if(!is_single()): ?>~<?php endif; ?>
  • 기사의 개별 페이지의 클래스 이름 <body class=”single single-post postid-12 single-format-standard”>
  1. 기사의 개별 페이지 사용자정의
    기사의 개별 페이지는 4개의 파트 템플릿(header.php, content-single.php, sidebar.php, footer.php)을 로딩해서 single.php로 생성되는 구조였다. 페이지 디자인은 style.css로 지정했다.
    이 중에서  single.php와 content-single.php는  개별 페이지의 생성에만 사용되기 때문에 소스를 변경해도 다른 페이지에는 영향을 주지 않는다. 그러나 그 이외의 다른 파트 템플릿과 스타일시트의 설정은 다른 페이지에서도 사용하고 있기 때문에 약간의 테크닉이 필요하다.
  2. 헤더 이미지 출력하지 않기
    먼저 기사의 개별 페이지에 헤더 이미지가 출력되지 않도록 하기 위해 header.php를 편집한다. 헤더 이미지의 출력은 <?php if(get_header_image()): ?>~<?php endif; ?>로 지정했기 때문에 이것을 삭제하면 이미지가 출력되지 않는다. 그러나 이러한 방법은 모든 페이지의 헤더 이미지가 삭제되기 때문에 헤더 이미지의 설정 조건을 조건분기인  <?php if(!is_single()): ?>~<?php endif; ?>를 이용해서 개별 페이지를 생성하는 경우에만 헤더 이미지가 출력되지 않도록 한다.
    ->MEMO
    <?php if(()): ?>~<?php endif; ?>는 조건 분기를 하는 PHP 명령어이고, <?php if(is_single()): ?>이라고 지정하면 기사의 개별 페이지를 생성하는 경우에만 내용을 출력한다.
    한편 예제와 같이 is_single() 앞에 “!”를 추가해서 <?php if(!is_single()): ?>이라고 지정하면 기사의 기사의 개별 페이지를 생성하는 경우에만 내용을 출력하지 않는다.
  3. 제목의 배경색 변경하기
    제목의 배경색을 변경하기 위해 style.css를 편집한다. 제목의 디자인은 ‘div.post h2 {~}’와 ‘div.post h2 a {~}’로 지정되어 있는데, 이 설정을 변경하면 모든 페이지가 영향을 받는다. 따라서 기사의 개별 페이지를 식별하는 클래스 이름을 이용해서  개별 페이지에만 적용되도록 설정을 추가한다. 기사의 개별 페이지를 식별하는 클래스 이름은 <body> 부분으로 출력한 것을 이용한다. 여기서는 ‘single’이라는 클래스 이름을 이용해서 지정한다. ‘.single div.post h2 {~}’와 ‘.single div.post h2 a {~}’로 지정한다.

header.php

<!DOCTYPE html>
<html>
<head>
(생략)

<div id=”nav”>

<?php wp_nav_menu(array(
‘theme_location’ => ‘navigation’
)); ?>
</div>

<?php if(!is_single()): ?>​

<?php if(get_header_image()): ?>
<div id=”image”><img src=”<?php header_image(); ?>” alt=”*” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” /></div>
<?php endif; ?>
<?php endif; ?>​

</div>

출처: 바꾸면서 배우는 워드프레스 디자인

“기사의 개별 페이지를 사용자정의로 디자인하기”에 대한 한개의 댓글

답글 남기기