ㅋㅋㅋ

주말에 테마하나 만들어 보려고 바로 지금 그 작업하고 있었는데….

보통 테마 제작자는 로고 사이즈를

add_image_size( 'hackya-logo', 220, 80 );

이런식으로 지정을 해놓습니다. 왜냐하면 사용자가 어떤 크기의 로고를 사용하는 것 과 상관없이, 내가 만든 테마에 맞는 사이즈가 표시되도록 하고 싶기때문이거든요.

이걸 지정을 해놓지 않으면, 예를 들어 사용자가 관리자 페이지에서 600px X 500px 크기의 로고를 넣을경우, 레이아웃이 다 깨지고 난리가 나겠죠.

그리고 이렇게 지정을 해놓으면 아래와 같은 html 이 출력이 됩니다.

<img width="220" height="80" src="http://xxxxxxxx.com/origami/wp-content/uploads/sites/5/2015/03/logo_100-55x80.png" class="site-logo attachment-hackya-logo" alt="origami_logo_100" />

테마 제작자가 개념이 있는 사람이면 (테마 제작자들 거의다 이정도 개념은 갖고 있습니다.) 혹시라도 이 로고 사이즈를 사용자가 추가적으로 조절해야할 필요가 있는 경우를 고려해서 출력되는 html 에 ID 나 class 를 지정해 줍니다.

제 테마의 경우는, 위에서 보시면 클래스가 site-logo 로 지정되서 출력이 되고 있죠.

class="site-logo

그럼 수정하는 방법은 간단합니다.

css 에서

.site-logo {height:100px}

이렇게 css 를 작성하면 php 에서 지정한 80px 의 높이가 아닌, css 에서 지정한 100px 높이의 로고로 표시됩니다.

Matthew Park

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Lives in Colorado.

안녕하세요 모바일 로고크기조정하고싶은데

css 를 어떻게 추가해야하고 어디에다 넣어야되나요 ?

안녕하세요답글을 이제봤네요 감사합니다

제 테마 편집기 들어가서 찾아보니 이렇게 되어있는데

pc 버전 모바일버전 px 로 제가 임의적으로 수정하고싶으면 어떻게 건들어야할지 알려주실수있으실까요 ?

.fusion-logo a {
display: block;
max-width: 100%;
}
.fusion-logo img {
width: auto;
}
.fusion-logo-2x {
display: none;
}
.fusion-mobile-logo-1x,
.fusion-mobile-logo-2x {
display: none;
}

che