워드프레스 Onepress 테마의 오른쪽에 있는 사이드바에는 기본적으로 최신 글과 카테고리 위젯이 보이도록 설정되어 있습니다. 한동안 그대로 유지하다가 조금 식상해진 것 같아 카테고리별 최신 글 표시로 변경하였습니다. 이 글에서 그 방법을 자세히 알아보겠습니다.
워드프레스 Onepress 테마의 사이드바에 카테고리별 최신 글 표시하기
워드프레스 Onepress 테마를 사용하면서 오른쪽 사이드바에 있는 최신 글과 카테고리는 그대로 두되, 가독성을 높이기 위해 제목 앞에 기호도 붙이고 색상도 변경하는 등 살짝 가공해서 적용하고 있었습니다. 그런데 오늘 블로그를 보는데 왠지 모르게 식상하다는 생각이 들더군요. 뭔가 변화가 필요하지 않을까 하는 생각은 드는데 그렇다고 대대적으로 테마를 바꾸거나 많은 변화를 주고 싶은 생각은 또 없었습니다. 그래서 기본 형태는 유지하되, 최신 글과 카테고리를 하나로 묶어 표시될 수 있도록 변경하였습니다. 이 글에서는 카테고리별 최신 글 표시 방법에 대해 설명드리겠습니다.
1. 기존 Onepress 테마에 있던 최신 글과 카테고리 위젯
아래 그림은 Onepress 테마에 지금까지 적용하고 있던 최신 글과 카테고리입니다. Onepress 테마를 적용하면 단순 나열식으로 최신 글과 카테고리명만 보이는데, 제가 포스팅 글과 카테고리 앞에 기호와 포스팅 글의 갯수를 확인할 수 있도록 하고, 폰트 색상도 변경하였기 때문에 조금 다르게 보일 수도 있습니다. 이렇게 만드는 방법도 아래 링크를 통해 확인하실 수 있습니다.
워드프레스 Onepress 테마 카테고리 이름 뒤에 포스팅 개수 표시하기
워드프레스 OnePress 테마 최신 글과 카테고리 제목 앞에 기호 붙이기
PHP로 워드프레스 블로그 카테고리별 포스팅 개수 표시하기
2. Onepress 테마에 카테고리별 최신 글 표시하기
아래는 Onepress에서 기본으로 제공하는 최신 글과 카테고리를 하나로 합쳐 카테고리별 최신 글이 표시되도록 변경한 화면입니다. 공간의 제약이 있어 카테고리별로 2개의 최신 글만 보이도록 했고, 카테고리명의 색상은 제가 블로그 글을 쓸 때 사용하고 있는 카테고리별 색상을 적용하였습니다.
1) 카테고리별 최신 글 추가 PHP 코드 작성하기
위의 그림과 같이 사이드바의 내용을 변경하기 위해서는PHP로 워드프레스 블로그 카테고리별 포스팅 개수 표시하기 에서 소개한 ‘PHP Code Widget’ 플러그인이 설치되어 있어야 합니다. 먼저 해당 글을 참고하여 해당 플러그인을 설치하시기 바랍니다.
다음으로 카테고리별 최신 글을 표시할 수 있도록 하는 PHP 코드를 알아보겠습니다.
제가 사용한 코드는 아래와 같은데요, 여러분의 블로그에 적용한 카테고리가 저와 다를 것이기 때문에 그대로 사용하시면 안 되고, 카테고리 부분의 코드를 여러분의 카테고리명으로 수정해 주셔야 합니다.
아래 코드에서 6~10라인까지가 카테고리명을 설정하는 부분이며, 이 부분을 여러분의 카테고리명으로 변경하시면 됩니다.
- ‘it-skill’은 카테고리 ID로 여러분의 카테고리 아이디로 변경
- ‘IT Skill’은 카테고리 명으로 여러분의 카테고리 명으로 변경
<h3 class="wp-block-heading" id="widget_title">카테고리별 최신 글</h3>
<?php
// WordPress core loading
require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
// Define desired categories
$categories = [
'it-skill' => ['name' => 'IT Skill', 'color' => '#0959a2'],
'essential-knowledge' => ['name' => 'Essential Knowledge', 'color' => '#48a021'],
'passive-income' => ['name' => 'Passive Income', 'color' => '#cc0000']
];
echo '<div class="custom-category-posts">';
foreach ($categories as $slug => $info) {
// Fetch the latest 3 posts for each category
$query = new WP_Query([
'category_name' => $slug,
'posts_per_page' => 2,
'no_found_rows' => true,
'post_status' => 'publish'
]);
// Get category info
$category = get_category_by_slug($slug);
$category_link = get_category_link($category->term_id); // Retrieves the link for the category
// Display category name as a link and post count in bold with specific color
echo sprintf('<p style="font-weight: bold; color: %s;"><a href="%s" style="color: %s;">▣ %s (%d)</a></p>',
$info['color'],
esc_url($category_link), // Ensure the URL is safe to use
$info['color'],
$info['name'],
$category ? $category->count : 0);
echo '<ul>';
// Display latest posts list
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo sprintf('<li style="white-space: pre-wrap; text-indent: -1.15em; padding-left: 1em; font-size: 14px;"><a href="%s" style="color: #061D7A;">◉ %s</a></li>',
get_permalink(),
get_the_title());
}
} else {
echo '<li>No posts found.</li>';
}
echo '</ul>';
// Reset query data
wp_reset_postdata();
}
echo '</div>';
?>
카테고리 아이디와 카테고리 명은 워드프레스 관리자 화면에서 ‘글’ → ‘카테고리’에서 확인하실 수 있으며, 아래 화면에서 ③번이 카테고리 명이고, ④번이 카테고리 ID입니다.
그리고 폰트 색상은 제가 사용한 HEX 코드(위의 코드에서 'color' => '#0959a2'의 #로 되어 있는 것이 HEX 코드입니다)로 된 것을 그대로 사용하셔도 되고, 만약 색깔이 마음에 들지 않으신다면 아래 링크된 글에서 색상 부분의 내용을 참고하여 원하는 색상의 HEX 코드로 변경하시면 됩니다.
블로그 방문자의 모바일 브라우저 상단 색상을 변경하는 방법
2) 작성된 코드를 사이드바 위젯으로 추가하기
이제부터 작성된 PHP 코드를 사이드바 위젯에 추가해 보도록 하겠습니다.워드프레스 관리자 화면에서 ‘디자인’ → ‘위젯’을 순서대로 클릭하여 위젯 화면으로 들어갑니다.
위젯 화면에서 ③번 ‘+’를 클릭하면 위젯을 검색할 수 있는 화면이 나오는데, 여기서 ‘php’를 입력하여 검색한 후, 검색결과에서 ‘PHP Code’를 클릭합니다.
‘PHP Code’를 클릭하면 아래와 같이 PHP 위젯이 추가되는데 ①번 위치에 위에서 작성한 코드를 복사하여 붙여넣기 합니다. 그리고 ②번의 위아래 화살표를 이용하여 원하는 위치로 위젯을 이동시킨 후, ③번 위치에 있는 ‘업데이트’를 클릭하면 적용됩니다.
지금까지 카테고리별 최신 글 표시를 위한 PHP 코드를 작성하고 PHP Code Widget를 활용하여 위젯에 추가하는 방법을 알아보았습니다. 아래 화면은 위젯을 적용한 결과입니다.
여러분은 최신 글과 카테고리를 나눠 보여주는 것과 이 글에서 알려드린 카테고리별 최신 글을 보여주는 것 중 어느 것이 좋으신가요?
오늘은 워드프레스 Onepress 테마의 사이드바에 나뉘어 적용되어 있던 최신 글과 카테고리를 하나로 합쳐 카테고리별 최신 글 표시로 변경하는 방법에 대해 알아보았습니다. 사실 저는 두 가지 방법 모두 괜찮다고 생각하고 있습니다. 다만 하나의 방법만 계속 적용할 경우 식상할 수 있어 조금씩 변화를 주는 것도 좋은 방법이라고 생각합니다. 여러분 중 오늘 소개해 드린 카테고리별 최신 글을 표시하는 것이 마음에 드시는 분이 있다면 이 글을 참고하여 적용해 보시기 바랍니다.