Twenty Twenty-Two 테마 사용자 정의

워드프레스 Twenty Twenty-Two 테마의 기본 설정을 사용자 정의하는 방법에 대해서 설명한다.

헤더 및 푸터 설정

워드프레스 관리자 접속을 한 뒤 웹사이트 상단에 위치한 사이트 편집을 선택한다. 좌측 상단의 워드프레스 로고를 클릭하고 메뉴에서 템플릿 파트 항목을 선택한다. 기존 템플릿 파트의 목록이 나타나면 우측 상단의 새로 추가 버튼을 클릭한다. 새로운 템플릿 파트의 이름을 정하고 헤더/푸터 여부를 지정한다. 새로운 템플릿 파트 화면이 나타나면 블록 삽입기 토글>패턴을 클릭해서 필요한 디자인을 고른다.

템플릿 및 템플릿 부분은 구조를 사용자 정의할 수 있다. 예를 들면 일반적으로 헤더에 위치하는 내비게이션의 경우 링크추가를 이용하여 특정 페이지, 카테고리, 검색기 등을 연결한다. 디자인이 확정되면 편집 내용을 저장한다. 새로 만든 템플릿 부분은 개별 템플릿에서 적용할 수 있다.

바디 설정

웹사이트의 상단에 위치한 사이트 편집을 클릭하면 편집 가능한 사이트 항목의 화면이 나타난다. Twenty Twenty-Two 테마의 홈 페이지 템플릿에는 최신 글 목록의 쿼리 반복문이 배치되어 있다.

쿼리 반복문은 디자인을 변경할 수 있다. 상단의 목록 보기를 클릭한 후 나타난 메뉴에서 쿼리 반복문을 선택한다. 우측 화면의 교체버튼을 클릭하면 다양한 패턴의 쿼리 반복문이 나타난다. 다음패턴/이전패턴 버튼을 눌러 패턴을 고른 후 선택 버튼을 클릭한다. 변경 사항에 만족하면 홈 페이지 템플릿을 저장하고 결과를 확인한다.

사전 설정

Twenty Twenty-Two 테마의 사전 설정은 theme.json 파일을 통해서 사용자 정의할 수 있다. theme.json 파일의 서체, 색상 등의 기본값을 임의로 지정하는 것이다.

theme.json 파일을 변경하기 위해서는 FTP(FileZilla)와 코드 편집기(Visual Studio Code)가 필요하다. 매니지드 워드프레스 서비스를 이용하는 경우 다음과 같이 입력하여 FTP에 로그인하고 www>wp-content>themes>twentytwentytwo 폴더에서 theme.json 파일을 다운로드한다.

  • 호스트: 도메인주소
  • 사용자명: Cafe24 ID
  • 비밀번호: FTP/DB password

theme.json 파일은 코드 편집기를 사용하여 내용을 변경하고 저장한 후 업로드한다. 예를 들어 Twenty Twenty-Two 테마의 콘텐츠 너비 설정을 변경하고 싶으면 픽셀 값을 변경한다.

"layout": {
			"contentSize": "650px",
			"wideSize": "1000px"
		}

폰트 설정 – Use Any Font

워드프레스 테마에 기본 글꼴이 아닌 폰트를 사용하기 위해서는 두 가지 방법이 있다. 첫째는 자신의 웹사이트 로컬 서버에 폰트를 호스팅해서 사용하는 것이고, 둘째는 이미 다른 웹사이트의 서버에 호스팅되고 있는 폰트를 사용하는 것이다. 두 방법 모두 CSS파일을 수정하는 과정이 필요하지만 플러그인을 설치하면 코딩 없이도 폰트를 변경할 수 있어서 간편하다.

추천하는 폰트 플러그인은 Use Any Font이다. Use Any Font 플러그인을 설치한 후 플러그인을 통해 웹사이트에 적용하고 싶은 폰트 파일을 업로드한다. Use Any Font는 무료로 사용할 수 있는 플러그인이지만 유료 서비스에 가입하면 폰트를 두 가지 이상 지정할 수 있다.


답글 남기기

이메일 주소는 공개되지 않습니다.