[WordPress] 워드프레스 테마 내마음대로 만들기-part2

워드프레스 내마음대로 만들기 -part2-시간입니다.

 

 

 

http://localhost/myblog/login.php 로 가셔서 로그인을하고 오시면 이렇게 어제까지 만들었던 첫 화면이 나타날 것 입니다.

 

(1)번은

 

여기서 다룬 내용들 입니다.

 

오늘 해볼 내용들은 (2)번과 (3)번 내용들 입니다.

 

 

C:\xampp\htdocs\myblog\wp-content\themes\simplesimple

여기 경로로 들어가셔서 searchform.php 파일에 들어가 줍니다.

물론 라이팅 프로그램은

 

요걸로~^^

 

 

 

 

 

searchform.php 파일에 들어왔습니다.~!!!

 

여기서

<!-- searchform.php --> 이라는거 처음보셧죠?

이것은 get_search_form() 이라는 템플릿 태그인데요

이 태그를 사용하면

 

 

요렇게 검색창이 나타나게해줄 수 있습니다.

<!-- searchform.php -->

<!-- /searchform.php -->

태그 안을 보시면 form 태그가 사용되었습니다.

해석을 해보겠 습니다.

[해석]

form 태그 안에 method="get" 이라고 사용되었는데요 이 내용은

 

여기로 가셔서 개념정리를 하고 오시기 바랍니다.

 

get방식의 특징중에서 중요한 데이터든 아니든 화면에 다 보여주는 특징을 가지고 있습니다.

저 검색창이 보안상으로 중요한것도 아니고 숨길 필요가 없으니 get방식을 사용해주는 것 입니다.

 

id="searchform" 이라고 사용되었는데요

여기서 잠깐 id속성에 대해 설명하도록 하겠습니다.

 

id속성

페이지에 있는 다른 요소들과 해당요소를 고유하게 식별하는데 사용됩니다.

특히!! 같은 페이지 내에서 서로 같은 id속성을 사용하면 안됩니다.

 

그리고!! 어제 정리를 못한 class속성에 대해서도 알아보도록 하겠습니다.

 

class속성

페이제 내에서 몇개의 특정 요소들을 식별하려는 경우에 모든 HTML 요소에 class속성을 사용해 줍니다.

여기서 중요한건!!!

id속성과는 다르게 여러개의 요소에 class를 지정해줄 수 있다는게 id속성과는 차이점 입니다.

 

 

해석을 계속 해 보겠습니다.

action="<?php echo home_url('/'); ?>"

라고action속성에 php내용이 사용되었는데요

어제도 말했다시피 php 를 사용하므로서 HTML을 동적으로 출력해 준다는 것 입니다.

 

엄연히 검색하는 창 이니까 내용들을 입력해줘야겠죠?

그래서 <input>태그를 사용하였는데요

입력하는 타입은 text 타입이며

 

placeholder="검색"

이라고 나왔는데요

 

placeholder속성

우리가 보통 입력창에다가 입력을 할때 무엇을 입력할지 모를때 희미한 글자가 나타나는 경우를 볼수가 있을것입니다. 네이버홈페이지에서 로그인창을 보면

 

요런거같은 경우를 사용할때 쓰는 속성입니다.

 

 

그리고 이제 설명할것은 wp_nav-menu() 템플릿 태그인데요

요것은 네비게이션 메뉴룰 츌룍허눈 템플릿 태그입니다. 쉽게말해서

 

요기 '샘플 페이지' 라는 곳을 설정하는 태그입니다.

여기서는 <div>태그와 <ul><li>태그로 만들어져 있는데요

셈플페이지란 고정페이지입니다.

고정페이지가 만들어져 있따면 wp_nav_menu()는 <ul>, <li> 태그를 이용하여 이를 목록으로 표시하는 템플릿 태그 입니다.

 

그럼 <ul>태그가 무엇이냐!

<ul>태그

정렬 순서가 없는 목록을 표시하는데 사용되는 태그이며

<li>태그와 함께 사용됩니다.

 

 

요런식으로 사용됩니다.