워드프레스 - 페이징 작업시 오류 수정하기

워드프레스에서 페이징 기능을 사용하다 보면, 때때로 콘텐츠가 한 줄로 나타나는 현상이 발생할 수 있습니다. 이는 br 태그가 자동으로 삽입되어 레이아웃이 깨지는 경우에 주로 발생합니다. 이런 상황은 사용자 경험을 저해하고, 사이트의 가독성을 떨어뜨릴 수 있습니다.

<?php
// 페이지 번호를 가져옵니다. 기본값은 1
$page = isset($_GET['paged']) ? intval($_GET['paged']) : 1;

// 페이지당 항목 수
$items_per_page = 20;

// 데이터를 가져옵니다.
$data = wpgetapi_endpoint('supabase_news', 'service_bbs_id', array('debug' => false));

// 총 항목 수와 총 페이지 수를 계산합니다.
$total_items = is_array($data) ? count($data) : 0;
$total_pages = ceil($total_items / $items_per_page);

// 현재 페이지의 데이터만 슬라이싱합니다.
if (is_array($data)) {
    $offset = ($page - 1) * $items_per_page;
    $data = array_slice($data, $offset, $items_per_page);
}
?>
<div class="news-table">
    <table>
        <thead>
            <tr>
                <th>사이트</th>
                <th>제목</th>
                <th>분류</th>
                <th>등록일</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($data as $item) : ?>
                <tr>
                    <td><?php echo htmlspecialchars($item['target_id']); ?></td>
                    <td><a href='<?php echo htmlspecialchars($item['title_link']); ?>' target='new'><?php
						echo htmlspecialchars($item['title']); 
						if ($item['translated_title'] != null){
							echo htmlspecialchars($item['translated_title']);
						}
						?></a></td>
                    <td><a href="<?php echo htmlspecialchars($item['cate_link']); ?>"  target='new'><?php echo htmlspecialchars($item['cate']); ?></a></td>
                    <td><?php echo htmlspecialchars($item['bbs_date']); ?></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
<div class="navigation">
<!-- 페이지 네비게이션 -->
<div class="pagination"> ㅁㅁ
    <?php
    // WP-Paginate의 페이지 네비게이션 함수
    echo paginate_links(array(
        'total' => $total_pages,
        'current' => $page,
        'format' => '?paged=%#%',
        'prev_text' => '&laquo; Previous',
        'next_text' => 'Next &raquo;',
    ));
    
    
    ?>
</div>
</div>

css 스타일

.pagination {
margin: 20px 0;
text-align: center;
}



.pagination a {
display: inline-block; /* 링크를 가로로 배열 / margin: 0 5px; / 링크 사이 여백 설정 */
padding: 8px 16px;
text-decoration: none;
color: #0073aa;
border: 1px solid #ddd;
border-radius: 4px;
}

.pagination a:hover {
background-color: #f1f1f1;
}

.pagination a.active {
background-color: #0073aa;
color: white;
border: 1px solid #0073aa;
}

페이지에서 모두 한줄로 나타남.

개발자도구에서 인스펙션을 해보면 <br> 테그가 추가되어 있어서 계속 한줄로 나타나는 현상이었음.

해결 방법

이 문제를 해결하기 위해 CSS를 사용하여 br 태그를 숨기는 방법을 적용할 수 있습니다. 아래의 CSS 코드를 사용하면 페이징 영역 내의 모든 br 태그를 숨길 수 있습니다:

.pagination br {
    display: none;
}

이 코드는 .pagination 클래스를 가진 요소 내에 있는 모든 br 태그를 숨깁니다. 이를 통해 자동으로 삽입된 br 태그로 인해 발생하는 레이아웃 문제를 간단히 해결할 수 있습니다.

적용 방법

테마의 스타일시트에 추가:
- 워드프레스 관리자 대시보드에서 외모 > 테마 편집기로 이동합니다.
- 사용 중인 테마의 style.css 파일을 찾아서 클릭합니다.
- style.css 파일의 맨 아래에 위의 CSS 코드를 추가하고 저장합니다.
추가 CSS 사용자 정의:
- 워드프레스 관리자 대시보드에서 외모 > 커스터마이즈로 이동합니다.
- 추가 CSS 섹션을 선택합니다.
- 위의 CSS 코드를 입력하고 공개하기 버튼을 눌러 저장합니다.

CSS를 활용하여 워드프레스 페이징 문제를 해결하는 것은 간단하면서도 효과적인 방법입니다. .pagination br { display: none; } 코드를 추가함으로써 자동 삽입되는 br 태그로 인한 레이아웃 문제를 손쉽게 해결할 수 있습니다. 이 방법을 통해 사용자 경험을 개선하고, 사이트의 가독성을 높일 수 있습니다.

해결 방법

적용 방법

관련된 글: