제가 아래 코드를 사용해서 같은 카테고리 내에 있는 게시글들이 썸네일과 제목으로 랜덤하게 뿌려지게끔 만들었는데
썸네일 모양이나 크기가 다 중구난방이에요 ㅠㅠ
게다가 css로 좀 꾸미고 싶은데 저것들이 어디서 불려오는건지를 몰라서 못꾸미고 있어요...
썸네일 크기 지정이나 불러오는 제목 위치나 모양 등을 바꾸려면 어떻게 해야하나요?
<?php
$args = array(
'posts_per_page' => 3, // How many items to display - 표시할 항목 개수
'post__not_in' => array( get_the_ID() ), // Exclude current post - 현재 글 제외
'no_found_rows' => true, // We don't need pagination so this speeds up the query - 쿼리 속도 높임
'orderby'=>'rand' // 랜덤하게 표시하기 위해 추가됨. 삭제하면 랜덤하게 표시되지 않음
);
$cats = wp_get_post_terms( get_the_ID(), 'category' );
$cats_ids = array();
foreach( $cats as $wpex_related_cat ) {
$cats_ids[] = $wpex_related_cat->term_id;
}
if ( ! empty( $cats_ids ) ) {
$args['category__in'] = $cats_ids;
}
// Query posts
$wpex_query = new wp_query( $args );
// Loop through posts
foreach( $wpex_query->posts as $post ) : setup_postdata( $post ); ?>
<!--관련동영상
<tabie border="0" cellpadding="0" cellspacung="0">
<tr>
<td></td>
</tr>
</tabie>-->
<div class="relatedthumb">
<a rel="nofollow" href="<?php echo esc_url( urldecode(get_permalink()) ); ?>"><?php the_post_thumbnail('pluto-top-featured-post'); ?><br />
<?php the_title(); ?>
</a>
</div>
안녕하세요~^^
본문에 코드를 올려주실 땐 반드시 에디터의 코드 스니펫 삽입 기능을 이용 부탁드립니다.
그렇지 않으면 코드가 이상해져서 에러 나는 코드로 바뀌거나,
질의응답 시 의사소통에 오해와 문제가 생길 수도 있습니다.
the_post_thumbnail 함수에서 썸네일 크기를 설정하실 수 있습니다.
아래의 링크를 확인해보시겠어요?
https://developer.wordpress.org/reference/functions/the_post_thumbnail/
제목의 위치와 모양은 어떻게 바꾸고 싶으신지 알려주시겠어요?
고맙습니다.
https://imgur.com/a/ztinS8c
이런식으로 하고 싶어요! ㅜ
코드스니핏으로 다시 올릴게요!
<div class="tab-item tab-menu-2" style="font-size: 1.2rem; ">
<!--<?php
$cats = get_categories();
foreach ( $cats as $cat ) {
echo '<h2>' . $cat->name . '</h2> <ul>';
$args = array( 'category' => $cat->term_id, 'posts_per_page' => -1 );
$cat_posts = get_posts( $args );
foreach ( $cat_posts as $post ) {
echo '<li><a href="' . get_permalink( $post->ID ) . '">' . $post->post_title . the_post_thumbnail().'</a></li>';
//the_post_thumbnail();
}
echo '</ul>';
}
wp_reset_postdata();
?> -->
<h3>Related posts</h3>
<?php
$args = array(
'posts_per_page' => 3, // How many items to display - 표시할 항목 개수
'post__not_in' => array( get_the_ID() ), // Exclude current post - 현재 글 제외
'no_found_rows' => true, // We don't need pagination so this speeds up the query - 쿼리 속도 높임
'orderby'=>'rand' // 랜덤하게 표시하기 위해 추가됨. 삭제하면 랜덤하게 표시되지 않음
);
$cats = wp_get_post_terms( get_the_ID(), 'category' );
$cats_ids = array();
foreach( $cats as $wpex_related_cat ) {
$cats_ids[] = $wpex_related_cat->term_id;
}
if ( ! empty( $cats_ids ) ) {
$args['category__in'] = $cats_ids;
}
// Query posts
$wpex_query = new wp_query( $args );
// Loop through posts
foreach( $wpex_query->posts as $post ) : setup_postdata( $post ); ?>
<!--관련동영상
<tabie border="0" cellpadding="0" cellspacung="0">
<tr>
<td></td>
</tr>
</tabie>-->
<div class="relatedthumb">
<a rel="nofollow" href="<?php echo esc_url( urldecode(get_permalink()) ); ?>"><?php the_post_thumbnail('pluto-top-featured-post'); ?><br />
<?php the_title(); ?>
</a>
</div>
<?php
// End loop
endforeach;
// Reset post data
wp_reset_postdata(); ?>
</div>
현재는 페이지에서 어떻게 표시되고 있는지요?
비회원으로도 확인 가능한 페이지 주소 알려주시면
CSS 코드로 해결이 가능할지 살펴보겠습니다.
고맙습니다.
CSS 코드 수정은 저희가 직접 페이지를 봐야 도움을 드릴 수 있습니다.
레이아웃 수정 시 HTML과 CSS 코드에 대해 알면 도움이 됩니다.
크롬 브라우저 개발자 도구(F12)를 사용하시면
CSS 속성을 쉽게 찾을 수 있고 테스트해보실 수 있습니다.
아래의 링크 참고해보시면 CSS 코드 수정 시 도움이 되실 듯합니다.
고맙습니다.