워드프레스 헤더(Header)와 푸터(Footer)

워드프레스에서는 헤더와 푸터를 위한 php 파일을 만들 수 있다.

각각 header.php; footer.php가 그 파일의 이름이 된다.

그리고 php 기능을 이용하여 워드프레스에서 제공해 주는 헤더와 푸터를 불러올 수 있다.

각각의 기능 get_header(); get_footer(); 가 된다. 

 

코드를 사용할 때 <?php ?>를 반복적으로 사용해서 php기능을 계속 열고 닫기 보다 한번에 묶어서 시작과 끝에 두어 코드를 깨끗하게 유지하는 것도 중요하다.

 

위와 같이 header, footer설정을 완료하면 모든 웹사이트 페이지에 헤더 푸터 내용이 표시가 된다.

그리고 더 나아가 홈페이지 index.php 뿐만이 아니라 포스트와 페이지에서도 헤더/푸터가 설정되기를 원하기 때문에 동일한 get_header(); get_footer() 기능을 위아래 추가해 주는 것이 중요하다.

페이지에 추가된 모습.

포스트와 페이지에도 헤더 푸터 php를 가지고온 모습을 위에서 확인할 수 있다.

여기서는 style.css 파일에서의 디자인 설정을 가지고오는 function을 확인할 수 있다.

사이트에서 스크립트를 불러올 때 css를 적용하라는 명령이 위에 있습니다. 

우선 university_files() 기능을 추가하여 university_main_styles라는 이름과 워드프레스의 get_stylesheet_url() 기능을 사용한다. 

get_stylesheet_url() 기능 역시 워드프레스 탑재 기능이다. 

 

그리고 기능을 실제로 구동하기 위한 add_action(); 기능을 사용해준다

두 가지 조건 값을 추가하고 있다. 

스크립트인 wp_enqueue_script를 불러올 때 university_files 기능을 함께 불러와서 css 곧 스타일을 적용하라는 행동을 의미한다. 

여기에는 바로 function을 불러오는 것이 아니라 액션을 추가한 것이기 때문에 university_files 뒤에 ()가 바로 붙지 않는다고 한다.

function 뒤에 ()는 바로 로딩시 불러올 때 붙인다는 점을 배우게 된다.

 

워드프레스에서는 php 기능 wp_head();을 사용하면 워드프레스에서 헤더 섹션을 결정하게 된다.

워드프레스 플러그인에서 css파일을 가지고 와야된다면 위에 기능을 통해 어떤 것을 헤더에 가지고 올지 결정할 수 있다. 

css파일을 잘 불러왔음을 확인할 수 있다.

css파일에 글씨의 색상을 오렌지로 설정하도록 하였기 때문에 사이트도 위에서 오렌지로 글씨가 표시가 된다.

초록색으로 변경하면 사이트도 초록색으로 변경된다.(결과 화면 생략)

index.php에서 

</body> </html> 태그를 우선 삭제하게 된다.

그리고 이 끝나는 태그를 당연해 보이는 푸터 페이지 footer.php에 추가한다.

 

이렇게 footer.php에서 닫아준다.

wp_footer(); 를 마지막 body 태그 전에 추가한다.

자바스크립트 파일, 위에 어드민 관리자 메뉴까지 추가가 가능한 기능이다.

위에서 볼 수 있는 것처럼, 사이트의 관리자 메뉴가 추가되었다.

오늘은 여기까지.