워드프레스 테마 변경, 수정

워드프레스 테마 변경

워드프레스 기본 2017 테마에서 Visualmodo의 Mechanic 테마로 변경을 했다. 태그, 카테고리 페이지, 에러 페이지 등 손 볼 곳이 많지만 내가 원했던 느낌은 어느 정도 완성한 상태이다. 직접 해보니 수정 작업도 쉽진 않지만, CSS와 JS가 됐다 안됐다 하는게 정말 스트레스였다. 이걸 직업으로 하는 분들께 심심한 애도를 드린다.

Mechanic 테마를 먼저 등록하고, Mechanic의 자식 테마인 Mechanic Child를 추가로 등록했다. CSS와 일부 함수들의 수정이 필요했기 때문에 Mechanic Child 테마를 활성화했다. 다른 빌더들도 그런지 모르겠지만, 빌더 기능에서 끌어오는 템플릿은 빌더쪽 플러그인 소스 내부에 들어 있어 수정해야 하는 부분을 찾는데도 애를 먹었다. Visualmodo의 테마들은 WPBakery Page Builder(구, Visual Composer)라는 외부 빌더를 사용하고 있다.

수정한 부분을 기록해 두지 않으면 왜 수정했는지 까먹기 때문에 나중을 위해서 수정 내용을 남겨둔다. style.css와 functions.php는 관리자 화면의 외모 -> 테마 편집기에서 수정이 가능하다.

style.css 수정

Mechanic 테마는 반응형 테마이기 때문에 가변폭에 대한 규정이 많다. 768px, 992px, 1200px 3개의 구분 가변폭이 있는데, 사이드바를 날리고 컨텐츠 영역을 가운데 정렬을 하기 위해 아래와 같은 css 코드를 Mechanic Child 테마의 style.css에 추가했다.

@media (min-width: 992px) {
    #primary.col-md-8{
        width: 970px;
        margin: 0 auto;
    }
    #secondary.col-md-4{
        display:none;
    }
}

@media (min-width: 1200px) {
    #primary.col-md-8{
        width: 970px;
        margin-left: 100px;
    }
    #secondary.col-md-4{
        display:none;
    }
}

Line 6~8, 16~18 : 테마의 content-single 템플릿 코드를 보니, 사이드 바의 위젯이 비어 있으면 사이드바는 자동으로 없어지고, 컨텐츠를 표시하는 primary 클래스가 col-md-12로 변경이 된다. 추후 사이드 바를 다시 사용하게 될 경우를 대비해서, 위젯을 지우지는 않고 화면에 보이지 않게만 만들었다. 사이드 바는 secondary 클래스의 col-md-4에 할당이 되고 있으며, 해당 ID를 display:none으로 선언해 화면에 보이지 않게 했다.

Line 12~15 : 사이드 바가 존재할 경우 컨텐츠 영역은 primary 클래스의 col-md-8로 할당되어 있다. 1200px 이상에선 테마의 가로 폭이 1170px로 기본 설정되어 있기 때문에 컨텐츠 폭만 970px로 변경하면 오른쪽으로 200px이 남기 때문에 왼쪽으로 치우쳐 보인다. div 내부의 text는 align이 되지만 div 자체는 align이 안되기 때문에, 가운데 정렬을 하려면 마진을 사용해야 한다. 그래서, 왼쪽 마진을 200px의 절반인 100px 로 설정했고, 헤더와 풋터의 폭이 1170px이더라도 컨텐츠의 폭은 970px를 유지하면서 가운데 정렬이 된다. 결국 992px 이상의 화면 크기에선 컨텐츠 영역의 폭이 970px로 고정된다.

functions.php 수정

생각보다 기능 추가할 일이 많았다. 아직까진 부모 테마나 관련 플러그인의 수정 없이 functions.php만으로 대응할 수 있었다.

//Function to add Meta Tags in Header

function add_meta_tags() {
    echo '
<!-- Start: Favicon CSS -->

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#222328">

<!-- End: Favicon CSS -->
    ';
}
add_action('wp_head', 'add_meta_tags');

//Function to change Logo URL and Title on Login Page

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'JunkLAB';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

// Change content_width for the image resize

$GLOBALS['content_width'] = 970;

function remove_default_image_sizes( $sizes) {
   unset( $sizes['medium_large'] );
    
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'remove_default_image_sizes');

// Add Featured Image sizes

add_image_size( 'featured-image', 690 );

// Add Featured Image to Media Select

function add_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'featured-image' => __( 'Featured Image' )
    ) );
}
add_filter( 'image_size_names_choose', 'add_custom_sizes' );

// Change Post Thumbnail size that I want

add_filter( 'post_thumbnail_size', function($size)
{
    add_filter('wp_calculate_image_srcset_meta', '__return_null_and_remove_current_filter');
  
    return 'featured-image';
});

// Would be handy, in this example, to have this as a core function ;-)
function __return_null_and_remove_current_filter ( $var )
{
    remove_filter( current_filter(), __FUNCTION__ );
    return null;
}

Line 3~17 : 각종 favicon 선언과 브라우저 title bar의 색깔을 조정하는 임의의 태그를 head에 선언한다. link/meta 등의 태그는 Custom CSS에 넣을 수 없고, HTML에 넣어야 한다. Visualmodo의 테마엔 이런 기능이 따로 없어서 wp_head에 해당 태그를 추가했다.

Line 21~29 : login page의 로고를 변경하는 기능은 있는데, 그 로고의 링크를 wordpress에서 내 홈페이지로 변경하는 기능이 없어 추가했다.

Line 33 : CSS에서 컨텐츠 영역은 970px로 만들었지만 Mechanic 테마에 content_width 값이 640으로 고정되어 있어, 이미지 업로드 시 large 사이즈가 640으로 고정되어 버린다. 이를 방지하기 위해서 content_width 값을 970으로 다시 선언해주었다.

Line 35~40 : medium_large는 워드프레스에서 768짜리 이미지를 만들기 위해 기본적으로 선언된 값이다. 690(featured)과 970(large) 사이즈 이미지를 만들고 있기 때문에 768은 불필요하다고 생각되서 제거하기로 했다. 

Line 44 : 메인 화면에 특성 이미지(Featured Image = Post Thumbnail)가 기본적으로 들어가는 설정인데 별도의 이름(featured-image)으로 690 사이즈를 등록했다. 690px은 Mechanic 테마에서 특성 이미지가 가장 크게 보일 때(1열 배열)의 사이즈이다. 특성 이미지 등록시 690 사이즈 이미지를 최우선으로 불러온다. Line 57 이후의 함수 참조.

Line 48~53 : Featured-Image라는 이름을 미디어에서 선택을 할 수 있게 등록했다. 여기에 등록하지 않으면 따로 선택할 방법은 없다. 

Line 57~69 : 제일 애를 먹었던 부분이다. 기본적으로 워드프레스의 모든 이미지는 srcset 속성을 이용해서 반응형 테마에 맞게 브라우저 폭에 따라 각각 다른 이미지를 불러온다. 문제는 현재 내 테마에서 특성 이미지는 대부분 350px 이하의 박스안에서만 불러와지는데, PC의 브라우저 폭은 1200px를 쉽게 넘어가니 항상 원본 이미지를 특성 이미지로 표시를 한다. 페이지 로딩 속도를 향상시키기 위해선 좀 더 작은 사이즈의 이미지를 표시하게 할 필요가 있었다.

처음에도 잠깐 언급을 했지만, 빌더의 특성상 특성 이미지를 불러오는 템플릿이 빌더의 플러그인에 하드 코딩 되어 있었다. 테마를 수정해서는 각이 안나오는 상황. 처음에는 플러그인의 해당 항목을 찾아서 post_thumbnail('featured-image')와 같은 식으로 해봤지만, srcset 속성은 없어지지 않았다.

모든 이미지에서 srcset을 날리는 소스는 구글 검색하면 많이 나왔지만, 특정 사이즈의 이미지에서만 srcset을 날리는 소스는 stackoverflow에서 겨우 찾을 수 있었다. 원래의 코드는 full 이미지 사이즈의 특성 이미지를 불러올 때만 srcset를 날려버리게 되어 있다.

이 부분을 post_thumbnail_size가 호출되면 실제 사이즈와 상관 없이 srcset 계산을 하지 않게 하고, 이미지 사이즈는 따로 등록한 featured-image를 반환해서 강제로 featured-image로 등록된 이미지만 화면에 뿌려주게 수정하였다.

혹시 글 목록에선 특성 이미지를 작게 보여주지만, 글 본문에선 특성 이미지를 큰 사이즈로 보여주는 테마라면 사이즈 별 조건을 추가를 해주어야 한다. Mechanic 테마는 글 본문에서는 특성 이미지를 불러오지 않고, 제목 배경에 다른 이미지를 등록할 수 있게 되어 있어서 이 부분을 고려하지는 않았다.