Generatepress 사이드바 편집 – 랜덤 태그 5개 나타내기

이번에 새롭게 시작하는 블로그 테마를 워드프레스 테마 중 속도가 빠르다고 하는 Generatepress 테마를 이용하고 있습니다. 사이드바에 기존 테마에서 제공하는 구름태그와 비슷한 효과를 나타내는 소스를 챗GPT와 함께 만들어 봤습니다.

먼저 미리보기 하면 패시브인컴 블로그 우측 사이드바에 적용 중입니다.

코디 소스 미리보기

소스 코드

소스 코드 중 아래 부분을 수정하면 가져 올 태그 수도 조정 가능 합니다.

$post_count = 5; // 랜덤으로 가져올 게시물 수
$tag_count_per_post = 3; // 각 게시물에서 가져올 태그 수

<style>
.hot-tags-container {
  max-width: 600px;
  margin: 0 auto;
}

.hot-tags-title {
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 10px;
}

.hot-tags-list {
  list-style: none;
  padding: 0;
}

.hot-tags-list li {
  display: inline-block;
  margin-right: 10px; /* 태그 사이 간격 조정 */
  margin-bottom: 10px; /* 태그 위 아래 간격 조정 */
}

.hot-tags-list li:last-child {
  margin-right: 0;
}

.hot-tags-list li a {
  text-decoration: none;
  color: #333;
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 20px;
}

.hot-tags-list li a:hover {
  background-color: #ddd;
}
</style>

<div class="hot-tags-container">
  <h3 class="hot-tags-title">Hot Tags</h3>
  <ul class="hot-tags-list">
    <?php
    $post_count = 5; // 랜덤으로 가져올 게시물 수
    $tag_count_per_post = 3; // 각 게시물에서 가져올 태그 수
    $total_tags_count = $post_count * $tag_count_per_post; // 총 태그 수
    $tags_count = 0; // 출력된 태그 수

    $posts = get_posts(array(
      'numberposts' => $post_count, // 랜덤으로 가져올 게시물 수
      'orderby'     => 'rand', // 랜덤으로 정렬
      'post_status' => 'publish' // 발행된 게시물만 가져옴
    ));

    if ($posts) {
      foreach ($posts as $post) {
        $tags = get_the_tags($post->ID); // 게시물 태그 가져오기

        if ($tags) {
          shuffle($tags); // 태그를 랜덤으로 섞음
          $tags = array_slice($tags, 0, $tag_count_per_post); // 각 게시물에서 가져올 태그 수만큼 선택

          foreach ($tags as $tag) {
            echo '<li><a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a></li>';
            $tags_count++; // 출력된 태그 수 증가
            if ($tags_count >= $total_tags_count) {
              break 2; // 총 태그 수에 도달하면 루프 종료
            }
          }
        }
      }
    }
    ?>
  </ul>
</div>

Generatepress 엘리먼트로 추가

Generateprss 테마 장점 중 하나가 코드를 쉽게 추가 할 수 있다는 것입니다. 저는 엘리먼트를 이용해 우측 사이드바에 추가 해 보겠습니다. 아래와 같이 엘리먼트를 Hook 으로 추가해 주면 우측 사이드바에 언제나 노출 됩니다.