Avatar
안녕하세요
방문자님
로그인 또는 회원가입
트위터 부트스트랩으로 만드는 워드프레스 테마 오타 수정
2015년 7월 16일
2

코드를 작성하다보면 한번 틀린 코드를 계속해서 사용하게 됩니다. 워드프레스는 하나의 템플릿을 만들면 이를 복사해서 계속 다른 템플릿을 만들게 되는데 처음 실수가 발생한 파일을 계속 사용하다보니 다른 파일에도 오타가 나타나고 있습니다. 이 문제는 부트스트랩의 .container-fluid라는 선택자에서 발생했는데 사실 이 선택자는 스타일의 거의 없는 선택자로 이 선택자를 사용해도 사이트에서는 거의 모양이 나오지 않습니다. 그러다보니 오타가 있어도 의심하지 않고 계속 진행한 것이 실수였습니다.

278

오타가 처음 발생한 곳은 279 페이지입니다. 이 페이지 상단에 .container-fluid를 넣어야 하는데 .container-fliud로 넣고 말았습니다. .container-fluid 선택자는 스타일이 거의 없다고 했지만 다음과 같은 스타일이 정해져있습니다.

.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

양 사이드에 패딩이 15픽셀 있고 마진이 auto로 돼있어서 중앙정렬 되도록 하고 있습니다. 그러니 이 선택자를 사용하면 거의 티가 나지 않습니다. 바로잡기 위해서 .container-fliud를 .container-fluid로 수정하면 다른 코드도 수정해야 합니다. 위 페이지에서 테스트를 위해 .bg-ddd 선택자를 추가했는데 테스트 후에는 제거하세요. 그리고 .m-btm-30도 제거하면 됩니다. 따라서 .container-fliud가 있는 곳은 다음과 같이 코드가 돼있어야 합니다.

error

이미 작업을 하신 분들은 서브라임 텍스트 편집기에서 일괄적으로 변경할 수 있습니다.

280

완료된 테마에서 검색해보니 17개의 파일에서 18개 나타납니다. Ctrl+Shift+F 키를 누르고 Find에 container-fliud p-all-0 m-btm-30 bg-ddd를 추가하고 Where에는 우측 끝의 ... 버튼을 클릭해 자식 테마 폴더를 지정합니다. 우측의 Find 버튼을 눌러 검색합니다. Replace에 container-fluid p-all-0를 추가한 다음 우측 끝의 Replace 버튼을 클릭하면 됩니다. 책의 진행 상태에 따라 파일 개수가 달라질 수 있습니다.

책에서 페이지에 오타로 나타나는 부분은 다음과 같습니다.

278

279 페이지

280-1

280 페이지

283

283 페이지 상단

283-1

283 페이지 하단

288

288 페이지 상단

288-1

288 페이지 하단

289

289 페이지

342

342 페이지

427

427 페이지

이상 9곳입니다. 첨부 파일의 소스 코드는 수정했습니다.


  1. 너무 자세한 설명과 뒷처리에 감동했습니다.
    감사합니다.

댓글 달기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.