작성일자
카테고리 워드프레스/워드프레스 완벽입문 FAQ

1.정렬 css를 써서 이미지가 좌측으로 글은 우측으로 잘 정리되었습니다. 하지만 짧은 글 같은경우(하나는 제목이 없고, 하나는 이미지가 없는 글(article) 박스가 깨지더라구요. 이부분은 어떻게 해야할지요? article 박스 최소 크기를 늘려야할지요.



이미지가 글박스의 범위를 벗어나는 것은 atticle 태그에 일부 설정이 안돼서 그렇습니다.

책에서 샘플 콘텐츠는 긴 내용의 글만 넣어서 저도 그런 현상을 발견하지 못했네요. 이것을 수정하려면 책에서도 멏군데 방법이 나옵니다.

530p와 606p입니다. 


CSS에서 다음과 같이 overflow:hidden;을 article 태그에 삽입하면 해결됩니다.


article {

position: relative;

overflow: hidden;

}


3. 513p에서 검색박스가 테두리를 벗어나는 것을 방지하기 위해 미디어쿼리에 영역 설정을 할 때 왜 min-width:768px and max-width:979px에 써야하나요? 


499p에 부트스트랩의 기기별 사이즈가 있습니다. 이대로 해야하죠.


기기별 사이즈에 대한 질문이 아니라 왜 저 사이즈(비율)에 검색 박스 크기 설정을 한것인가요? 

    미디어쿼리에 있는 다른 사이즈(min width:480 and max width:767)에 적용해도 상관 없는건가요?


왜 그 사이즈에만 검색 박스의 크기를 설정했는가는 그 사이즈에서 화면 폭이 줄어들면 사이드바가 같이 줄어들어서 검색박스가 튀어나오기 때문이고 그 이하의 사이즈에서는 사이드바가 컨텐트영역의 하단으로 내려가므로 튀어나올 염려가 없기 때문입니다.


 그리고 저 검색박스 자체를 알아서 줄어들고 길어지게 만들 수 없을까요?(화면폭을 정말 좁게 만들면 결국 박스가 테두리 밖으로 나와서요.)


검색박스를 max-width를 적용하면 되겠죠. 실험해보지는 않았지만 검색박스는 일정한 폭을 유지해야 입력할 수 있기 때문에 화면 폭에 따라서 줄어들거나 늘리는 것은 바람직 하지 않습니다.


 또, 왜 form에 css를 입히나요? (#searchform이 아니라)


여기서 form을 대상으로 하는 것이 아니라 선택자를 특정하기 위한 것입니다. 370p의 복합선택자 부분을 참고하세요.


4. 508p 에 클래스 선택자를 여러개 넣을 때 <div class="container wrapper"></div> 이면 css에서 .container{}으로 꾸미고, .wrapper{}로 꾸밀 수 있다는 거죠? 서로 충돌할시에는요? 그때는 가장 마지막에 입력된(하단에 가까운) 부분이 우선 적용 되겠죠?


네 그렇습니다. <div class="container wrapper">처럼 두개 있는 경우 만일 container에 변경을 가하면 모든 container 클래스에 적용되므로 하나만 적용하기 위해서입니다. 충돌을 방지하기 위해서죠.

 

5. 클립이 잘라내는 명령이라는것은 만약  clip: rect(1px 1px 1px 1px); 이면 사방에서 1px씩 잘라내었다는 의미인가요? (좌측에서 우측으로 1px, 위에서 아래로 1px같이)  


네 좌측에서 1픽셀까지 우측에서 1픽셀까지니까 안보이죠. 


6. 485p에 왜 content.php를 수정하는게 아니라 index.php를 수정하나요?- 어떤 영역을 수정해야할지 정확히 캐치하지 못해서 생기는 문제같습니다. (3번질문과 연결되는듯)


content.php는 글 내용을 가져오는 역할만 합니다. 505페이지를 보면 레이아웃을 적용하지 않는다고 나오죠. 이 파일은 레이아웃과는 관계없고 다만 index.php에서 <?php get_template_part( 'content', get_post_format() ); ?>라는 템플릿 태그에 의해 content.php파일이 만든 글을 불러오게 됩니다. 마치 <?php get_header(); ?>의 역할을 하는 것과 같죠.


7. 477p, 대기시키는 함수의 용도는? 그 안의 "."의 용도는? css에는 왜 버전 삽입 안하는지요?


대기함수는 내가 워드프레스 사이트에 접속하면 서버로 부터 스타일시트나 자바스크립트를 내려받습니다. 화면에 나타나는 것이 아니라 내 컴퓨터의 메모리에 있는 것이고 필요할 때 작동합니다. 그래서 대기시키는 것이죠. 

여러개의 자바스크립트가 있는 경우 같은 종류면 충돌이 일어나므로 대기시킨 것 중에서 필요한 것만 사용하도록 합니다. 


점( . )의 용도는 php 언어에서 두개의 스트링을 연결시켜주는 역할을 합니다. 템플릿 태그와 일반 글자를 연결하기 위해서 사용합니다. 자바스크립트는 업그레이드 되면서 버전이 있을 수가 있지만 CSS는 업그레이드라는 것이 없죠. 그래서 필요없습니다.


8. 474p 여기는 왜 상대경로가 되는지?


상대 경로가 아닙니다. 476p를 보면 스타일시트 폴더를 표시하는 템플릿 태그인 get_stylesheet_directory_uri()는 절대 경로를 만들어줍니다. 그 다음에 assets~~가 나오죠. 이 둘을 이어주는 역할을 하는 것이 점(.)입니다.


474p를 보면, @ import 라고 써있잖아요. 여기에 사용된 ".." 상위 폴더로 간다는 의미 아닌가요? 

    맞다면 이건 상대경로가 맞지 않나해서요.


스타일시트 같은 곳에선 상대주소를 사용해도 됩니다. 물론 절대주소를 사용해도 되죠.


9. 423p, margin right에 마이너스값을 줬는데 요소 검사해보면 우측으로 공간이 더 늘어났어요. 이 부분이 이해가 안됩니다. 


플러스 값을 적용하면 요소의 폭이 늘어나죠. 그러면 이웃해 있는 요소와 충돌이 일어나서 아래로 내려갑니다. 아래로 내려가지 않도록 하면서 범위를 벗어나게 하는 방법이 마이너스 값을 적용하는 것입니다. CSS를 사용하면서 이런 방법을 잘 사용하지 않지만 이런 특별한 부분에서 적용하면 문제해결이 쉽습니다. 이런 방법을 대부분 잘 모르죠. CSS에서 마이너스 값는 요소를 배치할 때 아주 유용하게 사용됩니다. 뭔가 배치가 잘 안될 때 사용하죠.


10. 415p, id 와 class 같이 쓰면 충돌하지 않는가요?


id 와 클래스는 같은 이름이라 해도 충돌을 일으키지 않습니다.왜냐하면 우선 순위가 있기 때문이죠. 371p에 선택자의 우열에 관한 내용이 있습니다.


저작자 표시 비영리 변경 금지
신고
김기범

안녕하세요.
일단 친절하게 집필해주셔서 감사합니다.
php 실력이 바닥이라 힘들긴했지만 워드프레스로 사이트 하나 만들고 나니 재미있네요 ㅎ

하다보니 궁금한점이 생겼는데요.
카테고리로 메뉴를 만들어서 카테고리 마다 다른 사이드바를 적용하고 싶은데 가능할까요??
초기페이지와 헤더, 푸터는 다중사이드바가 가능한데 카테고리는 어떻게 해야될지 모르겠어요;;

말이 조금 헷갈리긴 한데.
카테고리로 메뉴를 만들고 그 카테고리 메뉴 마다 다른 사이드바를 적용하고 싶습니다.

BlogIcon 베누시안

안녕하세요. 재밋는 발상을 하셨습니다. 책을 아마 끝까지 보셨다면 어렵풋이 방법이 생길 듯 한데요. 우선 자세한 내용은 별도로 글을 올리기로 하고 생각을 해보자면 탬플릿 계층구조를 이용하는 것입니다. 책에서 페이지의 템플릿 계층구조에 대해서 402페이지에 나옵니다 카테고리도 마찬가지의 계층구조를 갖고 있는데 질문대로 하자면 카테고리 아이디를 이용하면 되겠습니다. 하나의 카테고리를 선택했을 때 주소란에 cat=번호가 나올겁니다. 그것이 해당 카테고리의 아이디인데 이 카테고리가 선택됐을 때 사용할 템플릿 파일을 하나 만듭니다.

만일 아이디가 31이라면 파일이름은 category-31.php 기본테마에 있는 파일중 category.php를 복사해서 폴더에 붙여넣고 파일이름을 수정하면 되겠죠. 그런 다음 사이드바를 수정합니다. 책에 3개의 사이드바를 사용한 부분을 참고하면 됩니다.

BlogIcon 베누시안

http://martian36.tistory.com/1065 <--이곳에 새 글을 올렸으니 참고하세요.

BlogIcon 맥프레소

안녕하세요. 베누시안님!
워드프레스를 처음 접하고 현재는 이놈 하나에 매진하고 있습니다.
그래서 생전 처음 html5와 css 공부를 하고 베누시안님의 책을 보면서 워드프레스 차일드 테마를 제 멋데로 바꿔보며 그 재미에 푹 빠져 있습니다. 완성되면 공개해볼까 합니다 ㅋ

책을 읽으면서 css 부분은 따로 계속해서 공부하고 노하우를 익히면 어떻게든 될거 같습니다.
문제는 역시 functions.php 라고 해야 하나.. 위젯코드를 함수파일에 등록하고 등록한 위젯을 어디 어느 부분에서 불러와야 내가 원하는 페이지를 만들게 되는것인가 인듯 합니다.

이 부분을 확실히 이해해야만 내가 원하는 구조의테마를 만들 수 있을거 같은데 감 잡기가 힘듭니다. 이와 관련해서 도움이 될만한 책자(php 기초 서적? )나 정보를 추가로 얻을 수 있을까요? 현재로선 그냥 책에 관련 부분을 달달 외우던가 필요할때마다 찾아 쓰자입니다. -_-;

BlogIcon 베누시안

안녕하세요. 워드프레스 테마 만드는 것은 다른 지식이 필요없습니다. CSS가 가장 많이 필요하기 때문에 이부분을 더 해보세요. 티스토리 블로그 레이아웃도 변경해보고 하다보면 별거 아닙니다. 4장의 테마 만들기는 기초적인 것이지만 아주 기본이 됩니다. 그러니 책 내용을 응용해서 위젯을 만들어서 헤더에도 나오게 해보고 원하는 부분에 배치해보세요. 4장을 응용하면 얼마든지 할 수 있습니다. 5장에도 위젯 추가하는 방법도 나오죠. 테마를 만드는데 참고할 수 있는 사이트는 모두 영어로 돼있습니다. 국내에서 참고할만한 사이트도 없구요. 책은 더하죠. 아직 테마에 관한 깊은 지식이 필요한 단계가 아니라서 출판사에서도 기획을 하고 있지 않습니다. 내년 후반에가면 상황에 따라서 책이 나올수도 있겠습니다.

BlogIcon 맥프레소

관건은 css인가 보네요. 아직 초보주제에 마음만 급한 질문이었네요. 국내에도 워드프레스가 활성화 될 날을 위해서 기초부터 열심히 닦아놔야겠습니다.
감사합니다.

BlogIcon 베누시안

네 테마 디자인은 CSS만 알면 됩니다. 이리저리 배치를 잘해야 좋은 디자인이 나오는 것이고 템플릿 태그나 함수는 수정만 하면 되는 것이죠. 앞으로 필요에 따라 이런 수정하는 방법도 글로 올리겠습니다. 그렇다고 php를 알아야하는 것도 아니랍니다.
국내에서 워드프레스가 펼처나갈려면 관건이 한글화작업인데 저도 바쁘니 필수적인 부분만 번역하고 있답니다.

티스토리 툴바