Last updated on 2023. 06. 17.

워드프레스 기본 테마 중에서 Twenty Twelve 테마가 심플하고 좋아서 잘 쓰고 있었습니다. 그런데 모바일 화면에서만 메뉴가 너무 이상하게 나와서 구글링을 해 보니깐 역시… 나만 이상하다고 느낀 게 아니었는지 변경하는 방법이 어딘가 나와 있어서 여기에 정리해 봅니다.

변경 전 메뉴는 버튼이 있고 그걸 누르면 목록이 보이는데 그것도 세로로 보입니다

변경 후 메뉴는 PC와 동일하게 보입니다. 메뉴가 많으면 일부 목록이 밑으로 보일 수 있는데, 실제로는 넘치지 않아서 내려가 보이지 않고 이름 길이를 조절해서 한 줄로 맞출 수 있다. 이게 더 깔끔하다.

바꾸는 법을 참조한 사이트도 링크하였습니다. 링크는 여기 입니다. 영어로 되어있습니다.

1. Child 테마 생성 플러그인 설치

원본 테마를 직접 변경하는 것은 당연히 위험부담이 있기 때문에 원본 테마의 기본 골격만 가져와서 그것을 수정하는 것이 편하다. 이것을 원본 테마의 Child 테마라고 합니다. Twenty Twelve 테마의 Child 테마를 만들어야 하는데 그것을 쉽게 해주는 플러그인이 있다.

위에 플러그인을 설치하고 활성화한 뒤에 현재 테마를 Analyze를 누르고 맨 밑으로 이동해서 Child 테마를 생성하면 된다. 그러면 -child 가 붙은 폴더가 생성된다. 워드프레스 테마 폴더의 위치는
워드프레스 홈 폴더/wp-content/themes 에 있다. 총 3가지 file 을 수정해야 된다.

2. Child 테마의 function.php 수정

모든 작업은 Child 테마 폴더의 내용을 수정해야 한다. 혹시 원본을 수정할지도 모르니 강조해 둔다. function.php 를 열어서 다음의 코드를 붙여준다. 붙이는 위치는 file 을 열면

// AUTO GENERATED - Do not modify or remove comment markers above or below:

라는 문구가 보이는데, 그 바로 아래 줄 에다가 붙이면 된다. 수정하지 말라는 데 우린 수정한다;

//Remove 2012 Mobile Javascript
function de_script() {
    wp_dequeue_script( 'twentytwelve-navigation' );
    wp_deregister_script( 'twentytwelve-navigation' );
}

add_action( 'wp_print_scripts', 'de_script', 100 );

저장하고 나가면 작업 완료

3. Child 테마의 header.php 수정

header.php 파일은 처음에 원래 없습니다. 그래서 원본 폴더에서 Child 폴더로 그대로 복사해 옵니다. sudo 명령을 사용해서 복사해 오면 소유권이 root로 되어 있어서 복사한 뒤에 먼저 소유권을 수정해 줍니다.

sudo chown www-data.www-data header.php

그다음 header.php를 열어서 43행 근처에 다음의 코드를 삭제해 줍니다. 넣는 것이 아닙니다.

<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>

<h3 class 대신에 <button class 로 되어 있을 수도 있습니다. 그러면 거기서 부터 /button> 까지 지워 주시면 됩니다. 저장하고 나가면 완료.

4. Child 테마의 style.css 수정

처음에 style.css 파일은 주석 외에는 빈 파일입니다. 여기에 코드를 넣어야 하는데 양이 좀 많습니다. 중요한 것은 아래의 코드를 그대로 붙이시면 안 됩니다. 일단 원본 폴더로 가서 style.css 를 열어 봅니다. 그리고 다음과 같은 코드가 있는 곳의 시작 지점부터 끝 지점까지 모든 내용을 복사를 해야 합니다. 저 같은 경우는 대략 1500번 행 근처에서 발견했는데 그동안 개인적으로 홈페이지를 꾸민 정도에 따라 위치는 좀 다릅니다.

우리가 붙여야 할 코드의 시작 지점과 끝 지점 두 줄을 푸른색으로 표기했습니다. 여러분의 원본 폴더에서 해당 코드의 시작과 끝을 찾고 모든 내용을 복사해다가 child 폴더의 style.css 에 붙여넣기 하고 저장하면 됩니다.

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	border-bottom: 1px solid #ededed;
	border-top: 1px solid #ededed;
	display: inline-block !important;
	text-align: left;
	width: 100%;
}
.main-navigation ul {
	margin: 0;
	text-indent: 0;
}
.main-navigation li a,
.main-navigation li {
	display: inline-block;
	text-decoration: none;
}
.main-navigation li a {
	border-bottom: 0;
	color: #6a6a6a;
	line-height: 3.692307692;
	text-transform: uppercase;
	white-space: nowrap;
}
.main-navigation li a:hover {
	color: #000;
}
.main-navigation li {
	margin: 0 40px 0 0;
	margin: 0 2.857142857rem 0 0;
	position: relative;
}
.main-navigation li ul {
	display: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	z-index: 1;
}
.main-navigation li ul ul {
	top: 0;
	left: 100%;
}
.main-navigation ul li:hover > ul {
	border-left: 0;
	display: block;
}
.main-navigation li ul li a {
	background: #efefef;
	border-bottom: 1px solid #ededed;
	display: block;
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 2.181818182;
	padding: 8px 10px;
	padding: 0.571428571rem 0.714285714rem;
	width: 180px;
	width: 12.85714286rem;
	white-space: normal;
}
.main-navigation li ul li a:hover {
	background: #e3e3e3;
	color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
	color: #636363;
	font-weight: bold;
}

이제 다 끝났습니다. 저장하면 됩니다.

5. 워드프레스에서 테마 적용하기

이제 워드프레스에서 수정한 테마를 적용하면 됩니다. 배경화면등의 이미지는 다시 넣어야 합니다.