[카페24] 게시판 커스텀 01

munju·2023년 3월 28일

카페24는 제일 대중적인 cms이다.
우리 회사에서는 카페24를 이용해 홈페이지 구축을 하는데,
오늘은 그동안 미뤘던 게시판 커스텀 하는 법을 기록해보려한다.

-예시로 현재 적용된 고객사의 게시판 모습이다.
그 전 작업자가 메인페이지에 게시판을 슬라이드 형태로 노출을 해두었는데,
카페24 작업 경험이 많지 않았기 때문에 게시판을 커스텀 하는것이란 너무 어렵게만 느껴졌다.
더구나 성공사례 게시판의 경우에는 더더욱 생소했다.

게시판

메인페이지 노출 UI / 슬라이드 구현 / 클릭시 해당 게시판 게시물로 이동

위에 이미지는 현재 개인 계정에 있는 내 포트폴리오 사이트에 작업한 결과물이다.
이미지까지 업로드 되도록 커스텀 해봤다. 만든지는 조금 됐지만 나중을 대비해 기록을 해두려한다.

html

<div class="section section05" id="section05">
	<div class="reward-wrap">
    	<?php echo latest('theme/swiper', 'work', 8, 23); ?>
        <div class="txt-box">
        	<p class="stit">Memo board</p>
            <p class="tit">dailymunju <br><strong>메모보드</strong></p>

            <p class="txt">부족한 부분을 게시하여 <br/>공부하는 메모보드입니다</p>
            <div class="slide-arrow-box">
            	<div class="prev">←</div>
                <div class="next">→</div>
            </div>
      	</div>
	</div>
</div>

<?php echo latest('theme/swiper', 'work', 8, 23); ?>

위의 php 코드를 reward-wrap코드 안에 삽입한다.

CSS

메인페이지에 구현할 스타일 시트를 추가한다.


<style>
        .section05{background-color: #aeb3b7;/* background:url(/img/section_05bg.jpg) no-repeat center; background-size: cover; */ letter-spacing: -1px;}
        .section05 .reward-wrap{display:flex; align-items: center;}
        .section05 .reward-box{width:1230px; margin-left:0; margin-right:0;}
        .section05 .txt-box{padding-left:75px;}
        .section05 .txt-box .stit{color: #767676; margin-bottom:30px; font-size:17px; letter-spacing: 2px; font-weight: bold;}
        .section05 .txt-box .tit{font-size:28px; color:#fff; font-weight: 500; margin-bottom: 50px; line-height: 1.34;}
        .section05 .txt-box .tit strong{font-size:37px;}
        .section05 .txt-box .txt{font-size:18px; line-height: 1.65; color:rgba(255,255,255,.6);}
        .section05 .txt-box .slide-arrow-box {margin-top:30px; display:flex;}
        .section05 .txt-box .slide-arrow-box > div {background:#7a7a7a; color:#fff; cursor:pointer; padding:10px 20px 12px; font-size:28px; font-weight:bold;}
        .section05 .txt-box .slide-arrow-box > div.prev{position:relative;}
        .section05 .txt-box .slide-arrow-box > div.prev::after{content:""; display:block; position:absolute; right:0;  top: 22px;  width:1px;height:20px; background:rgba(255,255,255,.5);}
        .section05  .swiper-wrapper {padding-bottom:20px; padding-top:20px;}
        .section05 .swiper-wrapper .swiper-slide{box-shadow: 2px 4px 10px rgb(0 0 0 / 20%);}
        .section05 .reward-box .img-box img {width:100%;}
        .section05 .reward-box .pan-info{padding:50px; background:#fff; position:relative;}
        .section05 .reward-box .pan-info .btn-go{display:block; width:45px; height:45px; position:absolute; right:40px; top:30px; border-radius:50%; color:#fff; font-size:35px; background:#536878; text-align:center; line-height:42px;}
        .section05 .reward-box .pan-info .tit{font-size:28px; font-weight:bold; margin-bottom:12px; text-decoration: underline;}
        .section05 .reward-box .pan-info .subject{font-size:20px; font-weight:bold; margin-bottom:12px; }
        .section05 .reward-box .pan-info .txt{font-size:15px; color:#333; display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
</style>

script

슬라이드 구현 스크립트를 추가한다.

    <script>
        var swiper_slide = new Swiper('.section05 .swiper-container', {
            slidesPerView: 3,
            spaceBetween: 50,
            speed: 1500,
            autoplay: true,
            loop: true,
            navigation: {
            nextEl: '.slide-arrow-box .next',
            prevEl: '.slide-arrow-box .prev',
            },
        });
    </script>

카페24 서버에 접속하면, theme/basic에 있는 상위 폴더에서
header / index / tail 등의 php 파일에서 작업을 하는데,
경로는 대략 아래와 같다.

<?php echo latest('theme/swiper', 'work', 8, 23); ?>

이코드는 php언어로 작성되었는데, 전임자가 작업한 소스를 보고 응용하였다.
먼저 latest폴더를 생성하기 전에 해당 게시판을 관리자페이지에서 개설한다.

위 이미지 처럼 나는 스킨에 su라는 폴더를 생성해주었다.
서버에 있는 소스를 보면

이렇게 theme > basic > skin > board > su
라는 경로로 파일을 만들어서 넣어주었다. (관리자에서 생성하기 전에 서버에 생성해 주어야한다.)

분류란에 게시판에 들어갈 분류를 기입해준다.

위 이미지 처럼 게시판에 들어갔을때 카테고리별로 게시를 하도록 전체, html , css, javascript ,jquery,vue.js, react.js 의 카테고리를 생성해주었다.

su라는 폴더에는 이제 list.skin.php / style.css / view_comment.skin.php /
view.skin.php / write_update.skin.php / write.skin.php 의 파일을 생성해준다.

기존에 게시판을 생성하면 리스트,뷰,라이트 페이지가 있는것처럼 디폴트로 있는 파일들을
복사해 커스텀을 하는 방식대로 진행하였다.

이제 앞서 작성한

<?php echo latest('theme/swiper', 'work', 8, 23); ?>

코드를 살펴보겠다.

경로대로 보면, latest 폴더안에 있는 swiper폴더를 생성한것을 불러오는것인데,
여기서부터 조금 어렵게 느껴졌다.

su 폴더와 동등한 경로인 latest 폴더를 생성한 후 안에 latest.skin.php와
해당하는 style.css를 만들어주었다.

latest.skin.php

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
$thumb_width = 460;
$thumb_height = 386;
$list_count = (is_array($list) && $list) ? count($list) : 0;
?>
<div class="swiper-container reward-box">
	<div class="swiper-wrapper">
		<?php
			for ($i=0; $i<$list_count; $i++) {
      $thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);
      
			if($thumb['src']) {
				$img = $thumb['src'];
			} else {
				$img = G5_IMG_URL.'/no_img.png';
				$thumb['alt'] = '이미지가 없습니다.';
			}
			$img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" >';
			$wr_href = get_pretty_url($bo_table, $list[$i]['wr_id']);
	    ?>
	
		<div class="swiper-slide">
			<div class="img-box">
				<?php echo run_replace('thumb_image_tag', $img_content, $thumb); ?>
			</div>
			<div class="pan-info">
				<a href="<?php echo $wr_href; ?>" class="btn-go">+</a>
				<p class="tit"><?php echo $list[$i]['ca_name']; ?> </p>
				<div class="subject"><?php echo $list[$i]['subject']; ?></div>
				<p class="txt">
					<? echo cut_str(strip_tags($list[$i]['wr_content']), 130); ?>
				</p>
			</div>
			
		</div>		
		<?php }  ?>
	</div>
</div>

style.css

<style>
@charset "utf-8";

/* 새글 스킨 (latest) */
/*.pic_lt .mySwiper{height:600px}*/
.pic_lt a{border:2px solid #21a7ff;display:block;color:#fff}
.pic_lt a:hover{border-color:#0b101a}
.pic_lt .txt{background-color:#21a7ff;padding:20px}
.pic_lt .txt .category{font-size:16px;border-bottom:2px solid #fff;padding-bottom:3px}
.pic_lt .txt .subject{font-size:20px;margin:20px 0; display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.pic_lt .txt .ico{border-radius:50%;border:1px dashed #fff;text-align:center;width:40px;height:40px;line-height:36px;display:inline-block}
.pic_lt .lt_img img{width:100%}
/*.pic_lt .swiper-slide{height:calc((100% - 20px) / 2)}*/
.pic_lt .swiper-wrapper{padding-bottom:70px}
.pic_lt .swiper-button-next:after,
.pic_lt .swiper-button-prev:after{content:""}
.pic_lt .swiper-button-next, 
.pic_lt .swiper-button-prev{top:-130px; margin-top:0; border:1px solid #21a7ff;border-radius:50%;text-align:center;width:60px;height:60px}
.pic_lt .swiper-button-next{right:auto;left:500px;margin-left:30px}
.pic_lt .swiper-button-prev{right:auto;left:454px;margin-left:-30px}


.law-img {display:flex; align-items:center; margin: 20px 0 0; background:#fff; color:#000;  font-size:1rem;}
.law-img img{margin-right:10px;}
</style>

이제 게시판에 게시물을 작성하였을 때 view 단은

이런식으로 작성된다.

작성자를 추가하기 위해서는

관리자페이지에서 회원관리-회원추가하고, 나는 lee라는 이름으로 섬네일과 작성자를 추가했다.

예를 들면 변호사 얼굴이나 작성자의 섬네일을 등록하고 싶다면 위와 같이 추가할 수 있도록 게시판을 커스텀 해보았다.

법률홈페이지에서 작업한 게시판을 끌어다가 작업했기때문에, 작성란이라든지, 기입란 등등에
아직 흔적이 남아있다.

관리자페이지에서 글을 작성할때에는 위 캡처본처럼 소제목 기입란, 메모, 적용 등으로 분류해놨고, 맨 위쪽 분류를 보면 아까 기입했던 카테고리를 선택할 수 있다.
작성시 기입란이나 텍스트를 수정하려면 이 페이지는 write 페이지 이기때문에
su라는 게시판 폴더로 들어가 write.skin.php를 수정해주면 되겠다.