ACF - Advanced Custom Fields 로 주소 입력하기

ACF 필드를 사용하면 워드프레스 페이지를 보다 다이나믹하게 사용할 수 있습니다. 플러그인을 여러개 사용하면 편리하지만 자바스크립트나 스타일시트를 적용하는데에 한계가 있기 때문에 보다 창의적으로 작업을 원하는 개발자들이 많이 사용하는 플러그인 입니다.

 

여기서는 간단한 주소 입력칸을 만들고 PHP를 조절해 페이지에서 부르는 작업을 해보겠습니다. 

 

플러그인 설치 및 적용

 

1. 플러그인 메뉴를 선택하고 Add New -> ACF 를 검색합니다. 아래와 같은 아이콘이 보이면 Install Now -> Activate를 선택해 설치해 줍니다. 

 

 

2. 플러그인을 설치하면 아래와 같은 메뉴가 생깁니다. Custom Fields ->  'Add New' 를 선택합니다. 

3. Custom Fields 메뉴를 선택하고 Add New Field Group 에서 필드 이름을 정해줍니다. 다음 Field Label -> Address Filed Name -> address, Field Type 은Text area로 설정합니다. 

 

4. Location 에서 'page' is equal to 'Contact' 으로 설정하고 Publish 해 줍니다. 

 

 

5. 이제 Page 메뉴의 Contact 페이지로 가서 Edit 를 눌러 앞에서 만든 Contact Fields가 생성되었는지 확인합니다.

 

 

6. Contact Fields 가 Contact 페이지하단에 보이면주소를 입력하고 update 또는 Publish를 눌러 저장합니다.

 

 

 

PHP  코드 입력하기

 

1.  워드프레스의 Child-theme 안에 template-part -> content-page.php 를 엽니다. 다음 아래의 코드를 입력해줍니다. 

 

 

2. 다음 Settings -> Permalinks 를 열고 Common Settings 이 post-name으로 되어있는지 확인 한 후 Save change를 누릅니다.

 

 

3. 웹페이지로 가보면 contact form 위쪽에 주소가 입력된것을 볼 수 있습니다.

 

4. HTML 코드와 같이 쓰려면 아래와 같이 입력합니다. 

 

 

5. 저장 후 다시 웹페이지에 가서 페이지를 새로고침 해보면 앞에서 입력한 주소에 HTML 태그가 적용된것을 볼 수 있습니다.

 

 

 

다른 페이지에 노출시키려면

 

앞에서 만든 ACF 필드를 다른 페이지에도 적용하려면 해당되는 페이지의 php 파일을 열고 ACF 필드를 적용시킨 페이지의 아이디를 가져와 호출해줍니다.  제가 만든 Contact 페이지의  ID는  8입니다. 그것을 코드에 적용해줍니다. 

 

 

1. 먼저 웹페이지의 하단에 주소를 노출시키려면 footer.php 파일을 열고 아래와 같이 입력합니다. 

2. 저장하고 웹페이지에서 확인해보면  footer에 주소가 노출된것이 보입니다. HTML 태그를 적용해 좀 더 이쁘게 꾸며줍시다.