#7.그누보드 테마 적용하고 수정하는 방법!

안녕하세요! 반발자 안다형입니다!

지난시간 그누보드 기능과 각 스킨을 적용하는 방법을 알아보았지요!

오늘은 그누보드의 테마를 적용하고, 내가 원하는대로 수정하는 방법을 알아볼게요!

 

---

 

그누보드, 영카트, 워드프레스용 쇼핑몰 배포

sir 사이트에 접속하고, 그누보드5 - 테마 게시판으로 접속해주세요!

테마 게시판에 들어가면 사용하기 좋은 테마들이 올라와 있어요.

많은 분들께서 감사하게도 예쁘게 테마를 만들어서 무료로 배포해주신 것들이랍니다!..!!*_*

 

우리가 직접 만들면 너무 어렵고 만들 수 없는..??!! 그런 예쁜 유용한 테마들이 많이 있어요.

이걸 다운로드해서 내 사이트에 적용시키기만 하면? OK!

 

여러분이 원하는 테마를 선택하고 다운로드 해주세요!

저는 예티 와이드 무료테마를 다운로드 받았답니다!🙆‍♂️

 

다운로드 받은 것바다 다 다르지만, 제가 받은 테마의 폴더를 열어보면 이렇게 폴더 안에 pages폴더와 theme폴더가 있네요!

theme폴더는 테마가 들어있는 폴더로 안에 들어가면 해당 테마 폴더가 들어있구요, pages 폴더는 쉽게 테마에 맞는 페이지를 구현할 수 있도록 제공하고 있는 파일입니다.

 

모든 테마가 이렇게 있지는 않으나 이런 특수한 경우도 있으니 잘 확인해야 하고요, 이런 경우 theme폴더 내의 테마 폴더를 ftp를 통해 업로드 해주면 됩니다!~

 

테마 폴더 안의 내용들을 보면 이렇게 다양한 파일들이 있는데요, 우리는 이 파일들을 수정하여 테마를 내가 원하는대로 바꿀 수 있습니다!~

일단 테마를 업로드 하고 적용해보도록 하지요!🤗

 

이렇게 FTP 프로그램을 이용해 theme폴더 안으로 업로드 해주세요!

테마 폴더는 용량이 그렇게 크지 않으니 금방 업로드 될 거예요!!~

 



업로드를 마쳤다면, 관리자페이지에 접속해 테마설정 메뉴를 클릭해주세요!

그러면 원래는 베이직테마 하나만 있었다면 예티테마가 추가된 걸 확인할 수 있을 거예요!

테마적용 버튼을 눌러 테마를 적용시켜주세요!

 

짜잔 테마가 바뀐 걸 확인할 수 있습니다!

하지만 이건 테마를 적용했을 뿐! 내가 원하는 사이트로 변경하기 위해서는 여러가지를 수정해주어야 합니다!

그런데 어떤 걸 수정해야 할지 모르겠다구요???!!

 

그누보드는 보통 세 부분으로 나누어져 있습니다.

header / 내용 / footer

페이지를 내가 만든다 했을 때, 소스 상단에 header을 입력시켜주고요, 그 페이지에 맞는 내용을 입력해준 뒤, 하단에 footer을 입력해주면 테마가 적용된 페이지가 완성되는 것이죠!

 

그래서 header에 있는 로고를 바꾸고 싶다, 혹은 글을 수정하고 싶다 하는 것이 있으면 head.php를(혹은 header.php) 수정하면 됩니다.

head.php 소스를 확인해볼까요?

 

테마마다 소스의 구성은 다를 수 있습니다만, 이 테마는 친절하게도 수정할 부분을 나타내주셨네요.

위의 수정해서 사용하세요 부분은, 카톡이나 네이버 블로그 등 링크할 때 뜨는 정보를 설정할 수 있는데요, 본인 사이트에 맞게 수정하면 됩니다!~

 

그리고 헤더부분을 보고, 내가 수정해야 할 부분을 찾아서 수정해주면 되는데요, 처음에는 뭘 수정해야 할지 잘 모를 수 있지만, 하다보면 알 수 있을 거예요!

 

해더 상단 왼쪽에 SNS아이콘들이 있었는데요, 페이스북, 트위터, 인스타그램 중 안 쓰는 건 빼고싶고 혹시 내가 다른 걸 쓴다면 추가하고 싶잖아요, 아래 네모 박스 부분을 수정해주면 됩니다. <div> 태그로 시작했다면, </div>로 끝나겠죠? <div>와</div>를 포함해 지워주면 깔끔하게 사라집니다!~

 

그리고 우리가 보는 화면은 테마의 index파일이기 때문에 index.php를 수정해줄게요.

실제 반영되는 화면과, 소스를 비교해가면서 글자는 그대로 글자로 적혀있으니 지우고 수정해주면 됩니다.

또한 이미지 같은 경우는 소스를 읽어보면 image 관련된 글자나, jpg, png등의 확장자로 되어있는 파일명이 있을 텐데 그걸 지우도 내가 원하는 이미지로 바꿔주면 바로 적용 가능합니다!

 

위 이미지는 친절하게도 사이즈가 적혀있네요. 1920*620 사이즈로 이미지를 만들어서 적용해주세요!~

이미지 제작하은, 미리캠버스라는 사이트로 디자인하면 손쉽게 가능합니다!~

디자인 플랫폼 미리캔버스

 

이미지를 제작하셨다면, ftp 프로그램으로 서버를 접속하여, 임의의 폴더를 하나 만들고 그 폴더에 이미지를 넣어주세요!

*주의하실 점은, 폴더나 파일명이 한글이면 안돼요! 폴더, 파일명은 영어로 하기를 권장합니다!⭐️

 

업로드 한 경로를 확인하고 인터넷브라우저로 입력해보세요. 만약 이미지가 잘 뜬다면, 옳게 업로드 한 것이니 성공~

이제 그 링크로 바꿔주기만 하면 성공적~!

 

또 아래로 내리다보면 익숙한 코드가 보이시나요?

<?php echo latest('theme/pic_basic_company', 'gallery', 6, 24); ?>

latest는 최근글 모듈을 입력하는 코드였죠! 

gallery 게시판의 최근글을 보여주는 것이니 gallery 게시판의 글들을 최근 글부터 보여줄 거예요!

 

때로는 테마마다 없는 게시판인데 코드로 적혀있는 경우도 있어요.

그럴 때에는 관리자 페이지에서 게시판 테이블명을 동일하게 하여 생성하고 글을 작성하면 최근글에 잘 뜰거에요! :)

아니면 내가 원하는 게시판 테이블명으로 수정하는 방법도 있겠죠!

 

footer.php 소스를 보니 이렇게 있더라구요.

여기에서도 수정할 부분을 수정해주고 사용하면 되는데요, 주의할 점은 테마 제작자에게 저작권이 있으므로 수정해도 된다는 조건이 있는 경우가 아니라면 Copyright는 수정하지 않고 사용하시면 됩니다!🙆‍♂️

 

그누보드 테마를 이용하면 누구나 손쉽게 홈페이지를 만들 수 있습니다!

수정할 때 주의할 점은, 수정하고 업로드 했는데 코드가 잘못되어 애러가 뜰 수 있으니 수정 전 미리 파일을 백업하고 난 뒤 수정해주는 게 중요합니다!!

 

테마 적용까지 왔다면 이제 여러분은 홈페이지를 만들 수 있는 역량을 어느정도 갖추게 되었습니다!

다음시간에는 메뉴 만드는 방법과, 해당하는 소스 손쉽게 찾는 방법을 이어서 포스팅할게요!

 

홈페이지 직접 만들 수 있는 그 날까지 빠이팅입니다!!~~🙆‍♂️🙆‍♂️🙆‍♂️