우선 HTML 파일을 미리 준비할 필요가 있다.
다행히도 강사가 준비해준 파일이 있기 때문에 해당 파일을 예시로 사용할 수 있었다.
해당 HTML 파일의 헤더와 푸터 부분의 HTML을 header.php, footer.php에 각각 복사해서 붙여 넣었다. 그렇게 하여 위와 같은 결과 페이지가 나왔다.
위에 페이지에 대한 HTML 코드는 아래와 같이 코드를 확인할 수 있다.
그러나 웹사이트 디자인적인 측면이 부족하기 때문에 준비된 css파일을 테마 폴더 안으로 이동시켰다.
미리 준비되어 있는 디자인이긴 하지만 해당 폴더를 사용해서 워드프레스 테마가 해당 폴더에 있는 css파일과 다양한 자료를 사용하도록 php function 기능을 사용하였다.
위에서 볼 수 있는 것처럼 function.php에서 wp_enqueue_style 기능을 사용하여 build 폴더 안에 있는 index.css 및 style-index.css css파일을 불러오도록 하였다.
wp-content/themes/테마이름/ 이렇게 복잡한 주소를 사용하는 것보다 워드프레스의 편리한 기능인 get_theme_file_uri를 사용하였다.
그리고 font awesome의 기능을 사용하기 위해 //maxcden.bootstrapcdn 뒤에까지 모두 URL을 사용하여 폰트 어썸 사이트에서 제공되는 스타일을 URL을 사용하여 가지고 왔다.
또한 구글폰트 정보도 fonts.googleapis.com URL을 사용하여 웹사이트에 가지고 왔다.
Javascript를 부르는 스크리브는 wp_enqueue_script
이 기능은 더 많은 조건들이 필요하다. style과 달리 이름, get_theme_file_uri, array, 버전 정보 1.0, true라는 값이 모두 필요하였다.
이렇게 미리 제공된 디자인 css 파일과 배너 기능을 javascript를 통해 사용하고 나니까 아래와 같은 괜찮은 홈페이지가 완성되었다.
다음으로는 인테리어 페이지 템플릿과 관련된 레슨이 준비되어 있다.
함께 알아보도록 하자.
'코딩' 카테고리의 다른 글
| php에서 echo를 써야할까 안써야할까 (0) | 2022.12.12 |
|---|---|
| 워드프레스에서 부모 페이지 자식 페이지 만들고 연결해주기 (0) | 2022.12.10 |
| 워드프레스 헤더(Header)와 푸터(Footer) (0) | 2022.12.09 |
| PHP Function, array 사용하는 방법 (0) | 2022.12.09 |
| 워드프레스에서 새로운 테마를 만드는 방법 (0) | 2022.12.09 |