워드프레스 연관동영상 관련 질문드립니다!

제가 아래 코드를 사용해서 같은 카테고리 내에 있는 게시글들이 썸네일과 제목으로 랜덤하게 뿌려지게끔 만들었는데

썸네일 모양이나 크기가 다 중구난방이에요 ㅠㅠ

게다가 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 코드로 해결이 가능할지 살펴보겠습니다.

    고맙습니다.

  • 비회원으로 확인 가능한 페이지주소가 없네요 ㅠㅠ

     

    https://imgur.com/a/OtEBcQl

    그냥 이미지만으로는 이렇게 나와요

     

  • CSS 코드 수정은 저희가 직접 페이지를 봐야 도움을 드릴 수 있습니다.

    레이아웃 수정 시 HTML과 CSS 코드에 대해 알면 도움이 됩니다.

    크롬 브라우저 개발자 도구(F12)를 사용하시면

    CSS 속성을 쉽게 찾을 수 있고 테스트해보실 수 있습니다.

     

    아래의 링크 참고해보시면 CSS 코드 수정 시 도움이 되실 듯합니다.

    KBoard(케이보드) 게시판 버튼 색상 변경 방법

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기