Ashe Pro 테마 타이포그라피 초기화

Ashe Pro 등 외국산 테마의 문제는 타이포그라피가 영어권에 주로 맞추어져 있다는 것입니다. 그래서, 타이포그라피를 만져줄 필요가 있는데, 전면 페이지 타이포그라피는 테마의 특성을 많이 담고 있기 때문에, 바꾸면 테마의 분위기를 망쳐버립니다. 전면 페이지 타이포 그라피는 그대로 둔 채로, Single Post, Single Page에서 내용 부분의 타이포그라피를 워드프레스 초기 상태로 되돌려놓으면, 볼만해 집니다.

여기서는 Polylang을 ashe pro와 함께 사용한다고 치고, 한글 페이지만 디자인을 초기화하는 코드를 만들어 보았습니다.

Single Post 에 적용될 타이포그라피 초기화

/* 포스트 스타일 설정 */
html[lang="ko-KR"] .single-post article {
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    margin: 0; /* 기본 간격 초기화 */
    padding: 0; /* 기본 간격 초기화 */
}

html[lang="ko-KR"] .single-post article h1,
html[lang="ko-KR"] .single-post article h2,
html[lang="ko-KR"] .single-post article h3,
html[lang="ko-KR"] .single-post article h4,
html[lang="ko-KR"] .single-post article h5,
html[lang="ko-KR"] .single-post article h6 {
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.25;
    margin-top: 1.5em; /* 기본 헤더 간격 */
    margin-bottom: 1em; /* 기본 헤더 간격 */
}

html[lang="ko-KR"] .single-post article p {
    margin-bottom: 1.5em; /* 기본 단락 간격 */
}

html[lang="ko-KR"] .single-post article a {
    color: #0073aa;
    text-decoration: underline;
}

html[lang="ko-KR"] .single-post article a:hover {
    color: #005177;
}

/* 포스트에서 구분선 초기화 */
html[lang="ko-KR"] .single-post .wp-block-separator {
    border: none;
    border-top: 2px solid #ddd;
    margin: 1.5em 0;
    width: 100%;
}

html[lang="ko-KR"] .single-post .wp-block-separator.has-alpha-channel-opacity {
    opacity: 1;
}

html[lang="ko-KR"] .single-post .wp-block-separator.has-background {
    background: none;
}

html[lang="ko-KR"] .single-post .wp-block-separator.is-style-wide,
html[lang="ko-KR"] .single-post .wp-block-separator.is-style-dots {
    border: none;
    background: none;
}

html[lang="ko-KR"] .single-post .wp-block-separator.is-style-wide:before,
html[lang="ko-KR"] .single-post .wp-block-separator.is-style-dots:before {
    content: '';
    display: block;
    border-top: 2px solid #ddd;
}

html[lang="ko-KR"] .single-post .wp-block-separator.is-style-dots:before {
    border-top: none;
    border-bottom: 2px dotted #ddd;
}

Single Page 에 적용될 타이포그라피 초기화

/* 페이지 스타일 설정 */
html[lang="ko-KR"] .page article {
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    margin: 0; /* 기본 간격 초기화 */
    padding: 0; /* 기본 간격 초기화 */
}

html[lang="ko-KR"] .page article h1,
html[lang="ko-KR"] .page article h2,
html[lang="ko-KR"] .page article h3,
html[lang="ko-KR"] .page article h4,
html[lang="ko-KR"] .page article h5,
html[lang="ko-KR"] .page article h6 {
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.25;
    margin-top: 1.5em; /* 기본 헤더 간격 */
    margin-bottom: 1em; /* 기본 헤더 간격 */
}

html[lang="ko-KR"] .page article p {
    margin-bottom: 1.5em; /* 기본 단락 간격 */
}

html[lang="ko-KR"] .page article a {
    color: #0073aa;
    text-decoration: underline;
}

html[lang="ko-KR"] .page article a:hover {
    color: #005177;
}

/* 페이지에서 구분선 초기화 */
html[lang="ko-KR"] .page .wp-block-separator {
    border: none;
    border-top: 2px solid #ddd;
    margin: 1.5em 0;
    width: 100%;
}

html[lang="ko-KR"] .page .wp-block-separator.has-alpha-channel-opacity {
    opacity: 1;
}

html[lang="ko-KR"] .page .wp-block-separator.has-background {
    background: none;
}

html[lang="ko-KR"] .page .wp-block-separator.is-style-wide,
html[lang="ko-KR"] .page .wp-block-separator.is-style-dots {
    border: none;
    background: none;
}

html[lang="ko-KR"] .page .wp-block-separator.is-style-wide:before,
html[lang="ko-KR"] .page .wp-block-separator.is-style-dots:before {
    content: '';
    display: block;
    border-top: 2px solid #ddd;
}

html[lang="ko-KR"] .page .wp-block-separator.is-style-dots:before {
    border-top: none;
    border-bottom: 2px dotted #ddd;
}

Ashe Por 는 이상하게 자식테마를 만들면, 기능의 일부가 꼬여버립니다. 따라서, 메인 테마를 사용해서, custumize에 들어가서 css 를 추가하는 방법으로 초기화합니다.