이전 글에서 404 템플릿 파일의 수정을 해서 검색박스를 추가하고 검색 결과 나타나는 부분을 수정했습니다. 이번 글은 푸터에 있는 테마 제작사의 로고를 제거하고 이곳의 양쪽에 내 사이트의 이름과 제작자의 이름을 배치하는 방법을 알아보겠습니다.
푸터의 로고를 요소검사하면 이미지가 있습니다. 이 이미지는 credit이라는 아이디 선택자의 div 태그가 감싸고 있고 다시 afterfooter 라는 아이디 선택자로 감싸고 있습니다. 요소검사를 해서 어떤 파일의 어떤 부분을 수정하려면 이러한 선택자들을 알아둬야 합니다.
편집기 화면에서 푸터 파일을 선택하고 스크롤해서 내리면 afterfooter 라는 선택자는 보이는데 credit이라는 선택자는 보이지 않습니다. 다만 함수에 의해 다른 곳에서 가져오고 있습니다. 그러면 이 함수가 어디서 가져오는지 알아보겠습니다.
테마폴더로 가서 보면 테마에 쓰이는 템플릿 파일과 폴더가 있습니다. 푸터에 관련된 파일을 찾아야 하는데 footer.php 파일은 열어 봤고 다른 곳에서 찾아야 합니다. 폴더를 보면 CSS는 스타일시트 파일이 있는 곳이고 images 폴더는 테마에 사용된 이미지들, includes 폴더은 함수들, library는 자바스크립트 파일, licensing은 저작권과 관련된 내용이 있습니다. 가장 적합한 폴더로 core 폴더가 있는데 이 단어의 의미는 중요한 핵심이라는 뜻이죠. 뭔가 있을 것 같습니다. 기본 테마 폴더를 열어서 비교해보면 파일의 이름들은 같습니다. 다만 어떤 파일 디자인의 파일을 사용할지에 따라서 위의 파일들의 숫자가 많고 적어집니다. 폴더의 수도 마찬가지죠. 그러니 각 테마 폴더의 내용은 다른 것입니다.
core 폴더에 들어오니 다시 여러개의 폴더와 파일이 있습니다. 이전 부모 폴더의 내용과 비슷합니다. 여기서도 가장 적합한 폴더는 actions입니다.
이 폴더에 들어오니 여러개의 파일들이 있고 푸터와 관련될 듯한 파일이 하나 있습니다. 이 파일을 텍스트 편집기에 열어봅니다.
하단으로 스크롤 해서 내려오면 footer.php 에서 사용된 함수가 보입니다. credit이라는 아이디 선택자도 있고 이미지 태그도 있습니다. 이 이미지 태그로 인해서 로고가 나타나는 것입니다.
다시 편집기 화면으로 돌아와서 푸터 부분의 함수를 제거하고 위와 같이 입력합니다. 내 사이트 이름 앞에 저작권 표시인 ©를 입력합니다. 이것은 html 코드로 ©를 표시합니다. 다시 이것을 감싸는 a 태그를 만들고 href 안에 홈 URL을 입력합니다. 그 다음에 이 요소를 스타일시트에서 제어할 수 있도록 클래스 선택자를 입력합니다. 선택자의 이름은 독특하게 지어야합니다. 같은 이름이 있으면 해당 요소도 같은 효과를 가져오기 때문이죠. 두번째 줄은 윗줄을 복사해서 붙여넣고 테마 제작자 이름을 입력합니다. URL은 다를 수 있고 이 링크를 클릭하면 다른 탭에서 열리도록 target="_blank"를 추가합니다. 클래스 선택자도 수정합니다.
저장한 다음 블로그 화면에서 보니 두개의 요소가 왼쪽으로 몰려있습니다. 수정해야겠죠.
.go-left { float:left; line-height:40px;}
.go-right { float:right; line-height:40px; }
스타일시트 편집기를 열고 위처럼 입력합니다. 하나는 왼쪽으로 다른 하나는 오른쪽으로 보내고 줄의 높이를 높이면서 상하로 중앙정렬할 수 있는 line-height 속성을 사용해서 수치를 입력합니다.
양쪽으로 분리됐으며 높이 40픽셀의 푸터에서 중앙에 위치합니다.
다음 글은 Font Awesome이라는 아이콘 폰트를 이용해서 각 메뉴의 이름 앞에 아이콘을 배치하는 방법을 알아보겠습니다.
테마 수정 코드-->
테마수정코드1125.txt
