세계지도 프랜차이즈 스킨 위치 표시

세계지도 프랜차이드 스킨을 구매하고 설치했습니다. 구글 api도 연결해서 돌아갑니다. 

https://www.seemile.com/i-am-here

두개 정도를 올려봤는데요. 

1. 위치 등록시에 area 는 한국지역만 있던데, 제가 한국에 있어서 그런가요? 전 세계 용으로 써야 해서요. 국내만 표기되는 것이라면, area 칸을 없앨수 있나요? 

2. 여기 게시판 들어가면 지도위에 해당 지점들이 바로 표시되게 할수는 없나요? 게시판의 지점을 클릭해야만 지도에 나오던데요. 

3. 지도 하단의 지점을 클릭하면, 첨부 된 것처럼 레이아웃이 틀어집니다. 저는 우커머스 스토어프론트 디폴트를 child로 해서 쓰고 있습니다. 

4. 디폴트 지도의 크기를 조정하려면 어떻게 해야하나요? 좀 더 넓게 영역을 잡고 싶은데요. 

 

 

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    1. KBoard 세계지도 프랜차이즈 스킨은 기본적으로 국내 지역만 표시하고 있으며

    kboard_worldmap_franchise_branch_list 필터를 사용하시면 해외 지역도 표시하실 수 있습니다.

    워드프레스 관리자 -> 외모 -> 테마 편집기 페이지에서 functions.php 파일 하단에

    아래의 코드를 추가해보시겠어요?

    add_filter('kboard_worldmap_franchise_branch_list', 'my_kboard_worldmap_franchise_branch_list', 10, 1);
    function my_kboard_worldmap_franchise_branch_list($branch_list){
    	$branch_list['united_states']['name'] = '미국';
    	$branch_list['united_states']['latlng'] = '39.880746, -101.690939';
    	$branch_list['moscow']['name'] = '모스크바';
    	$branch_list['moscow']['latlng'] = '55.755211, 37.619958';
    	
    	return $branch_list;
    }

    위의 코드를 활용하시면 위치를 더 추가하실 수 있습니다.

    위의 코드에서 united_states는 고유한 키 값이며 name은 페이지에서 실제 표시될 이름입니다.

    latlng는 좌표값으로 구글 지도에서 원하시는 위치의 좌표를 찾아서 입력해주시면 됩니다.

    https://www.google.co.kr/maps/

     

    2. kboard_worldmap_franchise_default_location 필터를 이용하시면 지도 로딩 시 처음 표시되는 위치를 수정하실 수 있습니다.

    워드프레스 관리자 -> 외모 -> 테마 편집기 페이지에서 functions.php 파일 하단에

    아래의 코드를 추가해보시겠어요?

    add_filter('kboard_worldmap_franchise_default_location', 'my_kboard_worldmap_franchise_default_location', 10, 2);
    function my_kboard_worldmap_franchise_default_location($default_location, $board){
    	if($board->id == '1'){
    		$default_location = '39.738347, -101.515308';
    	}
    	return $default_location;
    }

    위의 코드에서 $board->id == '1' 부분은 실제 게시판 id로 적용해주시고

    $default_location = '39.738347, -101.515308'; 실제 지도 로딩 시 표시될 좌표값으로 변경해보시겠어요?

     

    3. 테마 쪽의 CSS 코드로 인해 레이아웃이 깨지는 듯합니다.

    워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보시겠어요?

    #kboard-worldmap-franchise-document .kboard-worldmap-franchise-info .kboard-franchise-title { clear: none; }

     

    추가로 kboard_worldmap_franchise_default_zoom 필터를 사용하시면

    구글 지도의 zoom을 설정하실 수 있습니다.

    테마의 functions.php 파일 하단에 아래의 코드를 추가해주시면 됩니다.

    add_filter('kboard_worldmap_franchise_default_zoom', 'my_kboard_worldmap_franchise_default_zoom', 10, 2);
    function my_kboard_worldmap_franchise_default_zoom($default_zoom, $board){
    	if($board->id == '1'){
    		$default_zoom = '7';
    	}
    	return $default_zoom;
    }

    위의 코드에서 $board->id == '1' 부분은 실제 게시판 id로 적용해주시고

    $default_zoom = '7' 부분의 숫자도 적절히 수정해주시면 됩니다.

    따로 수정하지 않으셨다면 기본으로 13으로 설정되어 있습니다.

    숫자가 커질수록 지도에서 상세하게 보이며 숫자가 작아질수록 많은 지역을 표시할 수 있습니다.

     

    이해가 안 되시거나 더 궁금하신 점이 있으시다면 댓글로 남겨주시겠어요?

    고맙습니다.

  • 1. 테마의 functions.php 파일 하단에

    아래의 코드를 추가해보시겠어요?

    add_filter('kboard_worldmap_franchise_distance', 'my_kboard_worldmap_franchise_distance', 10, 3);
    function my_kboard_worldmap_franchise_distance($distance, $board_id, $board){
    	// 현재 좌표로부터 반경(km)
    	$distance = '100000';
    	return $distance;
    }

    위의 코드에서 숫자는 km 기준이며 기본은 지정된 좌표(서울)에서 반경 20km 이내의 게시글만 지도에 표시합니다.

    위처럼 크기를 크게 하시면 지도를 이동하지 않아도 지도 로딩 시 지도에 마커를 표시합니다.

     

    FTP로 접속해서 /wp-content/plugins/kboard/skin/worldmap-franchise/google-maps.js 파일에

    아래의 코드를 찾아서

    for(var key in results){
    	if(!results.hasOwnProperty(key)) continue;
    	
    	var position = {lat:parseFloat(results[key].lat), lng:parseFloat(results[key].lng)};
    	var marker = new google.maps.Marker({
    		map: map,
    		position: position,
    		title: results[key].title,
    		url: results[key].urls
    	});
    	
    	markers.push(marker);
    	
    	marker.addListener('click', function(){
    		window.location.href = this.url;
    	});
    }

    아래의 코드로 교체해보시겠어요?

    var bounds = new google.maps.LatLngBounds();
    		
    for(var key in results){
    	if(!results.hasOwnProperty(key)) continue;
    	
    	var position = {lat:parseFloat(results[key].lat), lng:parseFloat(results[key].lng)};
    	var marker = new google.maps.Marker({
    		map: map,
    		position: position,
    		title: results[key].title,
    		url: results[key].urls
    	});
    	
    	markers.push(marker);
    	
    	bounds.extend(position);
    	map.fitBounds(bounds);
    	
    	marker.addListener('click', function(){
    		window.location.href = this.url;
    	});
    }

    위의 코드로 교체하시면 지도 중앙 위치를 마커들의 중심으로 설정합니다.

     

    2. 지역(Area) 필드를 안 보이게 하시려면

    FTP로 접속해서 /wp-content/plugins/kboard/skin/worldmap-franchise/editor.php 파일에

    아래의 코드를 찾아서 지워보시겠어요?

    <div class="kboard-attr-row">
    	<label class="attr-name"><?php echo __('Area', 'kboard-worldmap-franchise')?></label>
    	<div class="attr-value">
    		<select name="category1">
    			<option value=""><?php echo __('Select', 'kboard')?></option>
    			<?php foreach(kboard_worldmap_franchise_branch_list() as $key=>$item):?>
    			<option value="<?php echo $key?>"<?php if($content->category1 == $key):?> selected<?php endif?>><?php echo $item['name']?></option>
    			<?php endforeach?>
    		</select>
    	</div>
    </div>

    지도 위에 표시되는 전체 부분도 안 보이게 하시려면

    워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보시겠어요?

    #kboard-worldmap-franchise-list .kboard-category { display: none !important; }
    #kboard-worldmap-franchise-document .kboard-category { display: none !important; }

     

    3. 필드 수정은 /wp-content/plugins/kboard/skin/worldmap-franchise/editor.php 파일에서

    한글로 된 부분을 수정해보시겠어요?

    추후 번역을 추가해서 업데이트하도록 하겠습니다.

    고맙습니다.

  • list.php 파일을 수정해주셔야 할 듯합니다.

    FTP로 접속해서 /wp-content/plugins/kboard/skin/worldmap-franchise/list.php 파일에

    아래의 코드를 모두 찾아서

    <?php if($content->option->homepage): $kboard_homepage = kboard_worldmap_franchise_homepage($content->option->homepage)?>
    <div class="kboard-worldmap-franchise-homepage"><?php echo __('Homepage', 'kboard-worldmap-franchise')?> : <a href="<?php echo esc_attr($kboard_homepage)?>" title="" onclick="window.open(this.href); return false;"><?php echo $kboard_homepage?></a></div>
    <?php endif?>

    찾은 코드 밑에 아래의 코드를 추가해보시겠어요?

    <?php if($content->content):?>
    <div class="kboard-worldmap-franchise-content"><?php echo $content->content?></div>
    <?php endif?>

    일정 글자 수를 초과했을 때 말줄임표를 적용하시려면 위의 코드 대신

    아래의 코드로 적용해보시겠어요?

    <?php if($content->content):?>
    <div class="kboard-worldmap-franchise-content"><?php echo mb_strimwidth($content->content, 0, 200, '...', 'utf-8')?></div>
    <?php endif?>

    위의 코드에서 200 부분을 적절하게 수정해보세요.

     

    mb_strimwidth 함수에 대한 자세한 내용은 아래의 링크를 참고해보시겠어요?

    http://php.net/manual/en/function.mb-strimwidth.php

    고맙습니다.

  • 답변 감사합니다. 

    줌은 1로 해서 전세계가 한번에 나오게 했습니다. https://www.seemile.com/i-am-here 
    레이아웃 깨진것은 css 추가하니 제대로 나옵니다.

    그리고 1, 2번은 snippet으로 해서 functios.php 에 모두 등록하고 activate 적용해 봤습니다. 약간 제 질문 의도와는 다른 측면이 있습니다. 

    한번 더 질문 드리겠습니다. ^^

    1. 최초 페이지 로딩시에 아래 그림처럼 등록자들 위치가 한번에 모두 표시되게 했으면 합니다. 

    이거 볼수록 괜찮은 아이디어로 만들어진 플러그인이네요 ~~ 

    2. area 필드를 입력하지 않아도, 주소만으로 등록이 되네요. 그래서 area 필드를 없애도 좋을것 같습니다. 없애거나 (안보이게 하는) 방법좀 알려주세요. 

    전세계 사용자 대상으로 하는 것이라, 모든 국가를 다 등록한다는 것도 좀 그렇네요. 그래서 없애는 것이 좋을것 같아서요.

    3. 그리고 필드 제목이나 홀더안의 한글네임을 영어로 바꿔야 하는데요. 어디서 바꿔야 할까요? 너무 요청사항이 많았네요. ㅠㅠ

    "지도표시주소" --> "Your address in map" , "예제 .... " --> "example..." 

  • 아 고맙습니다.  ~ 원하던 방향으로 다 해결되었습니다. https://www.seemile.com/i-am-here/

    하나만 더 질문요~ 요거는 답 안해주셔도 되긴 합니다만.... 안될것도 같고, 너무 많이 질문해서요. 

    소개글을 앞에 빈 공간에 끌어다가 일부 보여줄수 있을까요? 휑해서..

  • 고맙습니다. 이제 마무리 되었습니다. 꾸벅~

    영어 버전으로 해서 영어 시장에 타켓 정해서 이 플러그인 내 놔도 좋겠단 생각이 드네요. 수고하세요. 

  • 안녕하세요.

    저희 제품을 사용하시면서 궁금하신 점이나 개선해야 될 부분이 있다면

    저희 커뮤니티에 글 남겨주시면 도움을 드리겠습니다.

    해외지역도 더 간편하게 추가할 수 있는 부분은 연구해보도록 하겠습니다.

    고맙습니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요