wordpress[워드프레스] - 002

**[공지사항]** [개인적인 공부를 위한 내용입니다. 오류가 있을 수 있습니다.]

[ 워드프레스(wordpress) - 002 ]

wordpress & PHP 문법

[ header 설정 ]

header.php를 생성 및 아래와 같이 작성한다.
index.php의 최상단을 아래와 같이 변경한다.
저장 후 브라우저에서 index.php를 새로고침해서
header 영역의 변경을 확인한다.

[ footer 설정 ]

footer.php를 생성 및 아래와 같이 작성한다.
index.php의 최하단을 아래와 같이 변경한다.
저장 후 브라우저에서 index.php를 새로고침해서
footer 영역의 변경을 확인한다.

[ single.php에 header & footer 적용 ]

header와 footer가 index.php에는 적용이 되었지만
각 글의 상세페이지인 single.php에는 적용이 되지 않았다.
single.php의 최상단과 하단에 아래의 코드를 추가하여 적용해준다.

[ page.php에 header & footer 적용 ]

page.php의 최상단과 하단에 아래의 코드를 추가하여 적용해준다.

[ css 적용하기 ]

header.php에 html 태그와 함께 php코드를 아래와 같이 추가하고 저장한다.
functions.php를 생성하고 아래와 같이 코드를 추가하고 저장한다.
style.css을 생성 및 아래와 같이 코드를 추가하고 저장한다.
index.php를 새로고침하여 css가 적용된 화면이 출력되는지 확인한다.

[ 전체 글 영역 조정하기 ]

header.php에서 </body>, </html> 태그를 잘라내기 하여 footer.php에 붙여넣는다.
그리고 아래와 같이 footer.php의 </body> 태그 바로 위에 코드를 추가하고 저장한다.
index.php를 새로고침하여 화면이 어떻게 바뀌었는지 확인한다.

[ 다른 html 파일에서 php로 옮기기 ]

원하는 theme을 골라놓는다.
그리고 그 theme 내의 build, css, images, src 폴더를
현재 작업하고 있는 local 폴더에 복사해서 붙여넣는다.
그리고 외부 theme 내 index.html에서
<"header">~<"/header"> 영역을 복사해서
header.php에 붙여넣는다.
<"footer">~<"/footer"> 영역을 복사해서 footer.php에 붙여넣는다.
functions.php의 코드를 아래와 같이 수정 및 추가한다.
index.php를 새로고침하여 화면이 어떻게 바뀌었는지 확인한다.

[ footer에 SNS Icon 생성하기 ]

icon은 fontawesome을 이용할 예정이다.
functions.php 파일에 아래와 같이 코드를 추가해준다.
이때 fontawesome 관련 주소는 index.html에서 복사해서 붙여넣는다.
functions.php를 저장하고 브라우저를 새로고침해서 icon을 확인한다.

[ font 바꾸기 ]

index.html에서 google font 관련 항목을 아래와 같이 복사한다.
functions.php 파일에 아래와 같이 코드를 추가해준다.
functions.php를 저장하고 브라우저를 새로고침해서 변경된 font를 확인한다.

[ main 페이지 꾸미기 ]

index.html의 body 영역에서 이미 복사해서 사용했던
header영역과 footer 영역을 제외한
나머지 전체를 복사해서 index.php에
아래와 같이 붙여넣고 저장한다.
그리고 브라우저에서 화면을 새로고침하여
변경이 되었는지를 확인한다.

[ image 경로 변경하여 정상적으로 출력하기 ]

index.php의 main title image인 library-hero.jpg가 정상적으로 보여지지 않는다.
이는 library-hero.jpg의 image 경로는 images 폴더인데
wordpress에서의 images 폴더의 주소는
http://fictional-university.local/wp-content/themes/fictional-university-theme/images/library-hero.jpg
이기에 서로 다르기 때문이다.
이에 정확한 경로 표시를 위해서 아래와 같이 수정한다.
그리고 브라우저를 새로 고침하여
이미지가 정상적으로 보이는지 확인한다.
이미지가 정상적으로 출력이 되었다면
bus.jpg, apple.jpg, bread.jpg 모두 동일하게 변경하고 저장한다.
그리고 브라우저를 새로고침하여 이미지를 확인한다.

[ javascript를 이용하여 rolling image 구현 ]

functions.php에 아래와 같이 코드를 추가하고 저장한다.
브라우저 화면을 새로고침하여
rolling image가 작동되는지 확인한다.