CMS 줌라(Joomla), Jomsocial 기본 커스터마이징 및 설정 (1/2)

줌라(Joomla), Jomsocial 기본 커스터마이징 및 설정 (1/2)

 

Joomla로 커뮤니티 사이트 만들기 4번째 시간입니다.

  1. 줌라(Joomla)로 페이스북과 같은 SNS 사이트 구축하기 -들어가기에 앞서-
  2. 줌라(Joomla)로 SNS사이트 만들기. Jomsocial 설치 방법
  3. [Jomsocial강좌] Jomsocial 설치후 첫번째, Cronjobs 설정하기

이번 시간에는 기본 커스터마이징을 진행하도록 하겠습니다. 이번 강좌를 통해 줌라의 주요 메뉴들을 거의 접하실 수 있습니다. 설명이 어려웠거나 모르는 부분 있으시면 댓글 남겨주세요. 알아보고 답변 드릴게요. 깊숙한걸 물어보시면 안됩니다! ㅎㅎ

줌라 Joomla 커스터마이징

Jomsocial 설치를 마친후 표시되는 사이트는 휑~한 홈 화면이 너무나 어색합니다. 설치시 샘플 데이터 설치를 안했거든요. 샘플 설치 및 무료 템플릿 설치를 마친것과 아주 대조적입니다.

[참조] [§]Joomla! 처음사용자를 위한 Quick Start Package 설치하기(무료 템플릿 포함)

어찌됐든 눈에 띄는곳부터 커스터마이징 해 나가도록 하겠습니다.

  • 브라우저에 표시되는 사이트이름 변경
  • 나만의 파비콘으로 변경
  • 사이트이름 정의
  • 휑~한 기본 홈화면을 없애고 Jomsocial을 기본 홈으로 변경
  • 메뉴에 내 블로그주소 링크 추가
  • 카피라이트 변경

 

줌라 joomla jomsocial 연재 강좌 페이스북 소셜네트워크 SNS제작 사이트 만들기

 


Jomsocial로 이동하여도 눈에 거슬리는 것들이 보입니다.

  • Get Connected! 이하 문구들을 내가 원하는 문구로 변경
  • 커버이미지(Jomsocial 공식적으로는 Welcome Image 라고 합니다.) 변경
  • 회원가입버튼 표시

줌라 joomla jomsocial 연재 강좌 페이스북 소셜네트워크 SNS제작 사이트 만들기


자, 그럼 우선은 위와 같은 내용으로 커스터마이징을 진행하도록 하겠습니다. 오른쪽에 로그인 폼도 없애버릴까 생각중입니다.

Home

Jomsocial 이외의 모든 표시내용은 Joomla 코어의 설정과 관련있습니다. 우선은 아래 세군데, 사이트 이름과 브라우저에 사이트이름 표시, 파비콘 변경을 진행.

jomsocial-커스터마이징06-1

 


관리자 대쉬보드에 접속후 ”시스템-전역구성”에 들어갑니다.

줌라 joomla jomsocial 연재 강좌 페이스북 소셜네트워크 SNS제작 사이트 만들기 커스터마이징

 

”사이트 설정” 섹션의 사이트이름, ”SEO 세팅” 섹션의 페이지 제목에 사이트 이름을 포함을 변경. 그럼 사이트상단 사이트이름, 브라우저 제목, Footer의 카피라이트 부분에 적용 됩니다.

줌라 joomla jomsocial 연재 강좌 페이스북 소셜네트워크 SNS제작 사이트 만들기 커스터마이징

파비콘(favicon.ico)은 적당한 이미지를 파비콘 생성기를 이용해 생성후 FTP를 이용해 사용중인 템플릿 디렉토리에 업로드 합니다. ”/templates/your_template_name”

기본으로 사용하고 있는 템플릿(protostar)에 덮어쓰기 합니다. 현재 적용중인 템플릿 확인은 ”메뉴-확장기능-템플릿관리”에 들어가서 확인하며, ”관리자” 템플릿과 ”사이트” 템플릿으로 나뉩니다.

”/templates/protostar/favicon.ico”

업로드후 브라우저를 리프레쉬 하여 확인합니다. 업로드 하였는데 변경이 안될시에는 캐쉬삭제 및 브라우저 캐쉬삭제를 실행합니다.

다음은, 줌라의 사이트이름을 로고로 대치하는 방법과 Home이라고 쓰여져 있는 부분을 없애기 또는 원하는 텍스트로 변경하는 방법을 알아보겠습니다.

줌라 커스터마이징 Joomla Jomsocial메뉴바-메뉴-Main Menu에 들어가서 Home을 엽니다. 참고로 메뉴명 옆에 alias는 워드프레스의 slug와 같습니다.. 나중에 메뉴부분은 따로 한번 더 다룰 예정입니다.

jomsocial-커스터마이징06-3

다음으로 ”페이지 디스플레이 옵션” 탭으로 이동하여, 설정을 변경하고 저장후 닫기.

줌라 커스터마이징

메뉴항목에 들어온김에 메뉴추가도 한번 해보겠습니다.

줌라 메뉴추가하는법 커스터마이징

메뉴바에서 ”메뉴-Main Menu”를 선택후 ”새로만들기”를 클릭.

줌라 메뉴생성 커스터마이징

’타이틀메뉴’ 항목에 메뉴의 이름과 별명(alias)를 입력후 선택을 클릭. 별명은 입력하지 않으면 임의로 생성됩니다.

줌라 메뉴생성 커스터마이징

링크에 http://를 포함한 풀URL을 입력 후 ’저장후 닫기’를 누릅니다.

’링크 타입 옵션’ 탭에서 이미지삽입도 가능합니다. TEXT를 없애고 아이콘을 넣는다던지, 함께 표시하는것이 가능합니다. 이미지는 실사이즈 그대로 삽입 되오니 참고하세요.

줌라 메뉴 외부URL추가 커스터마이징

 

이렇게 변경이 되었습니다.

줌라 메뉴 추가 커스터마이징

 

표시된 부분을 드래그 하여 메뉴 표시 순서 변경이 가능합니다.

줌라강좌 줌라메뉴 줌라 커스터마이징


이제, 사이트제목을 로고로 변경해 보도록 하겠습니다.

”메뉴-확장기능-템플릿 관리”에서 사이트 기본 템플릿으로 설정되어 있는(별표시) protostar를 선택합니다.

줌라 커스터마이징

로고를 업로드 하기 위해 선택을 누르면 창이 뜹니다.

줌라 커스터마이징 기본설정

’파일선택’ 후 업로드를 하고, 표시된 이미지를 선택한 뒤 ’삽입’을 합니다.

줌라 커스터마이징 기본설정


중간정리

여기까지 하셨으면, 줌라 커스터마이징에 필요한 주요 메뉴들을 대부분 살펴보신게 됩니다.

  • 전역설정 (시스템-전역 구성)
  • 메뉴 (메뉴-메뉴 관리자)
  • 템플릿 (확장기능-템플릿 관리)
  • 모듈 (확장기능-모듈 관리) < 아직진도 안나감

메뉴内 여기서 다루지 않은 항목들 일지라도 한번씩들 눈으로는 살펴보셨을 거에요. 옵션마다 이름에 마우스를 갖다대면 설명이 표시됩니다. 이 메뉴에는 이런게 있구나 하면서 알 것 같은 항목들은 옵션 변경 하셔도 됩니다.

현재까지의 결과물. 뭔가 점점 갖춰지고 있는것 같죠?

줌라 커스터마이징

분량이 많아 Jomsocial 페이지 수정은 다음회로 넘기겠습니다. 태블릿 꺼지려고 해요.

긴 글 읽어주셔서 감사합니다. 도움되고 계시길 바래요. 다음시간에 줌라 한글화 작업의 비밀을 알려드리겠습니다.