게시글을 팝업형식으로

워드프레스 게시판 KBoard(케이보드) 사용중입니다.

1. 게시글을 팝업형식으로 띄울 수 있나요?

2. ajax로 해당 게시글의 document를 불러올 수 있나요?

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

    1. KBoard 플러그인에서 게시글을 팝업으로 표시하시려면 스킨 파일을 수정해주셔야 합니다.

    스킨마다 코드가 다를 수도 있기 때문에 default 스킨을 기준으로 안내해드리겠습니다.

    FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/list.php 파일에

    아래의 코드를 모두 찾아서

    <a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toString()?>">

    아래의 코드로 모두 교체해보세요.

    <a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toString()?>" onclick="window.open(this.href, '<?php echo $content->title?>', 'width=700, height=800, scrollbars=yes'); return false;">

    위 코드에서 width(너비)와 height(높이)는 적절히 수정 후 사용해보세요.

     

    팝업창이 아닌 새창으로 표시하시려면 아래의 코드를 적용해보세요.

    <a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toString()?>" target="_blank">

     

    답글 쪽에도 적용하시려면 reply-template.php 파일을 수정해주시면 됩니다.

    최신글은 latest.php 파일을 수정해보세요.

     

    2. KBoard 플러그인에서 Ajax로 게시글을 불러오려면 별도로 코드를 추가해주셔야 합니다.

    어떤 용도로 사용하시려는지 알려주시면 예제 코드를 작성해보겠습니다.

     

    직접 프로그래밍이 가능하시다면

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

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

    add_action('wp_ajax_kboard_ajax_content', 'kboard_ajax_content');
    add_action('wp_ajax_nopriv_kboard_ajax_content', 'kboard_ajax_content');
    function kboard_ajax_content() {
    	check_ajax_referer('kboard_ajax_security', 'security');
    	
    	if(isset($_REQUEST['content_uid']) && $_REQUEST['content_uid']) {
    		$content_uid = intval($_REQUEST['content_uid']);
    	}
    	
    	$content = new KBContent();
    	$content->initWithUID($content_uid);
    	
    	if($content->uid){
    		wp_send_json(array('result' => 'success', 'content' => $content));
    	}
    	wp_send_json(array('result' => 'error'));
    }

     

    스크립트 코드는 아래의 코드처럼 추가해보시겠어요?

    <script>
    jQuery(document).ready(function(){
    	jQuery.post(kboard_settings.ajax_url, {action:'kboard_ajax_content', content_uid:'<?php echo $content->uid?>', security:kboard_settings.ajax_security}, function(res){
    		if(res.result == 'success'){
    			// 게시글 정보를 가져온 후 실행합니다.
    			
    		}
    	});
    });
    </script>

    해당 코드를 사용하시는 페이지에 따라 코드를 수정해야 할 수도 있습니다.

    고맙습니다.

  • 감사합니다

    진행하고싶은것은 게시글을 클릭하면 게시글 내용이 팝업창으로 나타나는것입니다 하지만 단순 팝업창이아닌 modal팝업창이 나오기를 원합니다.

     

    modal팝업창 스크립트를 제작이 가능한데요.. 어떻게 연결해야할지는 감이안오네요! ㅠㅠ

  • 말씀하신 modal 팝업창은 어떤 식으로 구현하시는 건지요?

    게시글 클릭 시 새로운 창이 아닌 레이어로 표시하시려는 지요?

    게시글 목록 페이지에서 게시글 본문 페이지의 레이아웃을 미리 구성하셔야 할 듯합니다.

    현재 어떤 스킨을 사용 중이신지도 알려주시겠어요?

    간단하게라도 예제 코드를 작성해보겠습니다.

    고맙습니다.

  • 감사합니다.

    현재 사용하고있는 스킨은 ocean-gallery 스킨입니다.

     

    ※게시글 클릭시 새로운 창이아닌 레이어로 표시하려고합니다.

     

    ps. 추가로 게시글을 왼쪽, 오른쪽으로 이동하면 좋겠다고도 생각합니다..

  • 스킨 파일을 수정해보시겠어요?

    FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/list.php 파일에

    아래의 코드를 찾아서

    <div class="kboard-gallery-item">
    	<a href="<?php echo $url->getDocumentURLWithUID($content->uid)?>">
    		<div class="kboard-gallery-thumbnail">
    			<?php if($resize_img_src):?>
    			<img src="<?php echo $resize_img_src?>" alt="">
    			<?php else:?>
    			<div class="kboard-no-image"><i class="icon-picture"></i></div>
    			<?php endif?>
    			<div class="kboard-gallery-foreground"><img src="<?php echo KBOARD_URL_PATH . '/skin/ocean-gallery/images/over-foreground.png'?>" alt=""></div>
    			<div class="kboard-gallery-username"><?php echo date("Y/m/d", strtotime($content->date))?> by. <?php echo apply_filters('kboard_user_display', $content->member_display, $content->member_uid, $content->member_display, 'kboard', $boardBuilder)?></div>
    		</div>
    		<div class="kboard-gallery-title"><?php echo $content->title?></div>
    	</a>
    </div>

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

    <div class="kboard-gallery-document content-uid-<?php echo $content->uid?>">
    	<div id="kboard-document">
    		<div id="kboard-ocean-gallery-document">
    			<div class="kboard-document-wrap" itemscope itemtype="http://schema.org/Article">
    				<button type="button" onclick="close_pop_up()">닫기</button>
    				<div class="kboard-title" itemprop="name">
    					<p><?php echo $content->title?></p>
    				</div>
    				
    				<div class="kboard-detail">
    					<?php if($content->category1):?>
    					<div class="detail-attr detail-category1">
    						<div class="detail-name"><?php echo $content->category1?></div>
    					</div>
    					<?php endif?>
    					<?php if($content->category2):?>
    					<div class="detail-attr detail-category2">
    						<div class="detail-name"><?php echo $content->category2?></div>
    					</div>
    					<?php endif?>
    					<?php if($content->option->tree_category_1):?>
    					<?php for($i=1; $i<=$content->getTreeCategoryDepth(); $i++):?>
    					<div class="detail-attr detail-tree-category-<?php echo $i?>">
    						<div class="detail-name"><?php echo $content->option->{'tree_category_'.$i}?></div>
    					</div>
    					<?php endfor?>
    					<?php endif?>
    					<div class="detail-attr detail-writer">
    						<div class="detail-name"><?php echo __('Author', 'kboard')?></div>
    						<div class="detail-value"><?php echo apply_filters('kboard_user_display', $content->member_display, $content->member_uid, $content->member_display, 'kboard', $boardBuilder)?></div>
    					</div>
    					<div class="detail-attr detail-date">
    						<div class="detail-name"><?php echo __('Date', 'kboard')?></div>
    						<div class="detail-value"><?php echo date("Y-m-d H:i", strtotime($content->date))?></div>
    					</div>
    					<div class="detail-attr detail-view">
    						<div class="detail-name"><?php echo __('Views', 'kboard')?></div>
    						<div class="detail-value"><?php echo $content->view?></div>
    					</div>
    				</div>
    				
    				<div class="kboard-content" itemprop="description">
    					<div class="content-view">
    						<?php foreach($content->attach as $key=>$attach): $extension = strtolower(pathinfo($attach[0], PATHINFO_EXTENSION));?>
    							<?php if(in_array($extension, array('gif','jpg','jpeg','png'))):?>
    								<p class="thumbnail-area"><img src="<?php echo site_url($attach[0])?>" alt="<?php echo $attach[1]?>"></p>
    							<?php else: $download[$key] = $attach; endif?>
    						<?php endforeach?>
    						
    						<?php echo $content->content?>
    					</div>
    				</div>
    				
    				<div class="kboard-document-action">
    					<div class="left">
    						<button type="button" class="kboard-button-action kboard-button-like" onclick="kboard_document_like(this)" data-uid="<?php echo $content->uid?>" title="<?php echo __('Like', 'kboard')?>"><?php echo __('Like', 'kboard')?> <span class="kboard-document-like-count"><?php echo intval($content->like)?></span></button>
    						<button type="button" class="kboard-button-action kboard-button-unlike" onclick="kboard_document_unlike(this)" data-uid="<?php echo $content->uid?>" title="<?php echo __('Unlike', 'kboard')?>"><?php echo __('Unlike', 'kboard')?> <span class="kboard-document-unlike-count"><?php echo intval($content->unlike)?></span></button>
    					</div>
    				</div>
    				
    				<?php if(isset($download) && $download): foreach($download as $key=>$value):?>
    				<div class="kboard-attach">
    					<?php echo __('Attachment', 'kboard')?> : <a href="<?php echo $url->getDownloadURLWithAttach($content->uid, $key)?>"><?php echo $content->attach->{$key}[1]?></a>
    				</div>
    				<?php endforeach; endif;?>
    			</div>
    			
    			<?php if($content->visibleComments()):?>
    			<div class="kboard-comments-area"><?php echo $board->buildComment($content->uid)?></div>
    			<?php endif?>
    			
    			<div class="kboard-control">
    				<div class="left">
    					<a href="<?php echo $url->set('mod', 'list')->toString()?>" class="kboard-ocean-gallery-button-small"><?php echo __('List', 'kboard')?></a>
    					<?php if($content->getPrevUID()):?>
    					<a href="<?php echo $url->getDocumentURLWithUID($content->getPrevUID())?>" class="kboard-ocean-gallery-button-small" onclick="kboard_gallery_document('<?php echo $content->getPrevUID()?>'); return false;"><?php echo __('Prev', 'kboard')?></a>
    					<?php endif?>
    					<?php if($content->getNextUID()):?>
    					<a href="<?php echo $url->getDocumentURLWithUID($content->getNextUID())?>" class="kboard-ocean-gallery-button-small" onclick="kboard_gallery_document('<?php echo $content->getNextUID()?>'); return false;"><?php echo __('Next', 'kboard')?></a>
    					<?php endif?>
    				</div>
    				<?php if($content->isEditor() || $board->permission_write=='all'):?>
    				<div class="right">
    					<a href="<?php echo $url->getContentEditor($content->uid)?>" class="kboard-ocean-gallery-button-small"><?php echo __('Edit', 'kboard')?></a>
    					<a href="<?php echo $url->getContentRemove($content->uid)?>" class="kboard-ocean-gallery-button-small" onclick="return confirm('<?php echo __('Are you sure you want to delete?', 'kboard')?>');"><?php echo __('Delete', 'kboard')?></a>
    				</div>
    				<?php endif?>
    			</div>
    			
    			<?php if($board->contribution() && !$board->meta->always_view_list):?>
    			<div class="kboard-ocean-gallery-poweredby">
    				<a href="http://www.cosmosfarm.com/products/kboard" onclick="window.open(this.href); return false;" title="<?php echo __('KBoard is the best community software available for WordPress', 'kboard')?>">Powered by KBoard</a>
    			</div>
    			<?php endif?>
    		</div>
    	</div>
    </div>

     

    list.php 파일 제일 하단에

    아래의 코드도 추가해보세요.

    <style>
    #kboard-ocean-gallery-list .kboard-gallery-document { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
    #kboard-ocean-gallery-list #kboard-document { margin: 10% auto; padding: 10px; width: 50%; background-color: white; border: 1px solid gray; }
    </style>
    
    <script>
    function kboard_gallery_document(uid){
    	jQuery('.kboard-gallery-document').hide();
    	jQuery('.content-uid-'+uid).show();
    }
    function close_pop_up(){
    	jQuery('.kboard-gallery-document').hide();
    }
    </script>

     

    위의 코드들은 예제 코드이기 때문에 버그가 있을 수도 있습니다.

    적절히 활용해보시겠어요?

    고맙습니다.

  • 감사합니다 조금의 코드수정으로 팝업게시판을 만들었습니다!

  • 안녕하세요!

    해당 글의 댓글들을 활용하여 팝업 게시판을 완성하였습니다.

    그런데, 이처럼 작업하다보니 게시글 리스트를 불러올때 전체 게시글의 팝업도 html 상에서 불러와지다 보니 메모리 부족 오류가 자주 뜹니다 ㅠㅠ

     

    혹시 해당 글을 클릭했을때 해당 팝업의 show/hide 가 아니라

    해당 글을 클릭했을때 해당 팝업이 생성되고, 삭제를 누르면 제거가되는 등의 기능은 가능할까요?

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