워드프레스5 문의드려요

안녕하세요

댓글에 달아주신 답변으로 해결을 잘했습니다

다른 문의점은 현재 지도와  매물목록이 최근20개 매물만 나타나고 표시되어지는데 이것을 제한없이 매물전체가 나오게 코드수정을 어떻게 해야하는지요

그리고 판 메뉴에 매물의 제목이 노출이 안되는데 이것을 수정하는 방법 또한 궁금합니다

매물 콘텐츠 싱글페이지에 맨아래  지도부분이 구글이라 그런지 왼쪽은 지도가 정상적으로 나오는 반면 오른쪽 스트리트뷰는 나오지가 않네요

전체를 지도로 나타낼수 있는 코드수정법을 부탁드립니다

아니면 지도 자체를 다음지도로 변경할수도 있는지 궁금합니다

마지막으로 지도에서 다방이나 직방처럼 지도확대시 멀티마커를 숫자로 표현하는 플러그인이 있는지요

여러가지 질문에 죄송스럽게 생각합니다

감사합니다

 

  1. veteran 댓글:

    [매물목록 전체 출력]

    테마 functions.php 파일 85번 줄이 다음 첫 번째로 되어 있습니다. 두 번째 줄처럼 -1로 변경 후 저장하고 확인하세요.

    $query->set( 'posts_per_page', 20 ); // 이 줄을 찾아
    $query->set( 'posts_per_page', -1 ); // 이 줄로
    

    [판 페이지 테이블에서 제목 추가]

    테마 template-parts/house-table.php 파일 24, 25번 줄은 다음과 같습니다.

    <th data-field="house_favm" data-halign="center" data-align="center"><?php _e( 'M', 'house' ); ?></span></th>
    <th data-field="house_site" data-sortable="true" data-filter-control="select"><?php _e( '지역', 'house' ); ?></th>
    

    다음 코드 두 번째 줄을 추가하세요. 추가 위치는 임의로 정한 것이며, 원하는 곳에 삽입하면 됩니다.

    <th data-field="house_favm" data-halign="center" data-align="center"><?php _e( 'M', 'house' ); ?></span></th>
    <th data-field="house_title" data-halign="center" data-align="center"><?php _e( '제목', 'house' ); ?></span></th>
    <th data-field="house_site" data-sortable="true" data-filter-control="select"><?php _e( '지역', 'house' ); ?></th>
    

    그리고 51번 줄 다음에 아래 두 번째 코드를 추가, 저장 후 확인하세요. 추가 위치는 위의 코드 추가 위치에 따른 것입니다.

    <td><span class="badge"><?php the_favorites_count(); ?></span></td> // 51번 줄
    <td><?php the_title(); ?></td> // 이 코드 추가
    

    [스트리트뷰, 지도만 출력, 다른 지도 서비스]

    스트리트뷰는 관리페이지에서 매물 위치 등록 시 조금씩 변경해서 스트리트뷰가 표시되는 위치를 선택해야 합니다. 매물의 주소에 따라 위도와 경도가 자동으로 나오지만, 프런트에서 스트리트뷰가 나오도록 관리페이지에서 마우스를 이용하여 지도의 마커를 조금씩 이동하고 저장 후 다시 프런트에서 확인해야 합니다. 구글 지도의 경우 우리나라의 모든, 세부 지역을 촬영하지 않았을 것이므로 어쩔 수 없습니다.

    지도만 출력하기 위해서는 우선 테마의 single-house.php 파일을 엽니다. 117, 118번 줄은 다음의 첫 번째와 두 번째 코드입니다. 네 번째로 변경하세요.

    <div id="map_single" style="width: 50%; height: 300px;float:left"></div>
    <div id="pano" style="width: 50%; height: 300px;float:right"></div>
    // 위 두 줄의 코드를 아래 한 줄의 코드로
    <div id="map_single" style="width: 100%; height: 300px"></div>
    

    95~103번 줄에 다음 코드가 있습니다. 삭제하세요.

    var panoramaOptions = {
        position: latlng,
        pov: {
            heading: 10,
            pitch: 10
        }
    };
    var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
    map.setStreetView(panorama);
    

    저장하고 싱글 매물 페이지를 확인하세요.

    [다른 지도 서비스, 다양한 지도 기능]

    구글 지도, 다음 지도 등 대부분의 지도 서비스는 여러 기능을 제공합니다. 해당 서비스의 안내를 참고하여 지도 기능을 구현할 수 있습니다. 하지만 이런 기능은 지도 서비스의 기능을 숙지하는 문제이며, 워드프레스와 직접 관련은 없습니다. 지도 서비스의 특징을 이해한 후 워드프레스의 데이터를 출력, 표현할 방법을 검토해야 합니다.

    워드프레스 5를 통해 데이터 출력을 이해한 후 다른 지도 서비스에 데이터를 출력하는 방법을 학습하는 것이 좋을 것으로 생각합니다. 책의 예제를 천천히 학습하여 이해한다면 어려운 문제는 아닐 것입니다. 다만, 다른 서비스의 기능을 이해하고 사용하는 데에 별도의 지식이 필요할 수 있습니다.

    감사합니다.

댓글 입력 기간이 지났습니다.