지도 하단에 나오는 리스트에

기본적으로 썸네일, 지점명(제목), -지역명 으로 노출되고 있는 부분에서

-지역명 하단에 '-연락처(누르면 통화걸릴 수 있게), -주소' 를 추가하는 작업을 의뢰하고자 합니다.

코스모스 내 AI 상담에서 해결안을 받았으나 시간이 없어서 의뢰하고자 합니다.

카페24 워드프레스로 작업중이고, 스테이징 사이트로 해보신 적 있으신지 여부도 알려주시면 감사하겠습니다.

-------------------------- AI상담 답변입니다 -----------------------------

KBoard 세계지도 프랜차이즈 스킨의 리스트 화면에서 지역(주소) 아래에 상세 주소, 연락처, 그리고 클릭 시 바로 연결되는 연락처 버튼을 추가하고 싶으시군요.

이 작업은 스킨의 리스트 출력 파일인 list.php를 수정하여 해결할 수 있습니다. 아래 절차를 따라 진행해 보세요.

1. 수정할 파일 경로
FTP를 통해 서버에 접속하여 아래 경로의 파일을 엽니다.
wp-content/plugins/kboard/skin/world-map-franchise/list.php

2. 코드 수정 방법
파일 내에서 지역(지역명)을 출력하는 코드를 찾아 그 아래에 원하는 정보를 출력하는 코드를 삽입합니다.

list.php 파일에서 아래와 같이 지역을 출력하는 코드를 찾습니다.

<div class="kboard-world-map-franchise-list-address"><?php echo $content->option->address?></div>
위 코드 바로 아래에 상세 주소, 연락처, 연락처 버튼을 출력하는 다음 코드를 추가합니다.

<!-- 상세 주소 출력 -->
<?php if($content->option->detail_address):?>
<div class="kboard-detail-address"><?php echo $content->option->detail_address?></div>
<?php endif?>

<!-- 연락처 출력 -->
<?php if($content->option->tel):?>
<div class="kboard-tel">연락처: <?php echo $content->option->tel?></div>

<!-- 연락처 버튼 (모바일에서 클릭 시 전화연결) -->
<div class="kboard-tel-button">
    <a href="tel:<?php echo $content->option->tel?>" style="background-color: #007bff; color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none; display: inline-block; margin-top: 5px;">전화하기</a>
</div>
<?php endif?>
3. 중요 확인 사항 (입력필드 메타키)
위 코드가 정상적으로 작동하려면 [KBoard] -> [게시판 목록 및 관리] -> [입력필드 설정] 탭에서 각 항목의 메타키(Meta Key) 이름이 코드와 일치해야 합니다.

상세 주소의 메타키가 detail_address인지 확인하세요.
연락처의 메타키가 tel인지 확인하세요. (만약 phone이라면 코드의 tel을 모두 phone으로 변경해야 합니다.)
4. 스타일 조정 (CSS)
디자인을 깔끔하게 다듬고 싶다면 [KBoard] -> [대시보드] -> [커스텀 CSS] 칸에 아래 코드를 추가해 보세요.

.kboard-detail-address { font-size: 13px; color: #555; margin-top: 3px; }
.kboard-tel { font-size: 13px; color: #333; margin-top: 3px; font-weight: bold; }
.kboard-tel-button a:hover { background-color: #0056b3; }