각 항목마다 다른 스타일을 제공하는 사이트를 본 적이 있습니까? 일부 사이트에는 다른 기사가 있습니다« 앞으로 강조 표시되는 반면 다른 범주에는 색상이 다른 각 범주가 있으며 때로는 매우 독특한 관점을 가질 수도 있습니다.
이것이 바로이 튜토리얼에서 다룰 내용입니다. WordPress에서 기사에 고유 한 스타일을 부여하는 데 사용할 수있는 다양한 방법을 공유합니다.
그래서 우리는 무엇을 사용할 것입니까? "라는 함수를 사용하겠습니다 post_class ". 이 함수는 일반적으로 index.php, single.php 및 "를 표시하는 기타 파일에서 기사 컨테이너 (HTML 태그)에 다른 클래스를 인쇄합니다. 기사 루프 "(참조로" 워드 프레스 루프 ").
레마르크: 이 튜토리얼에서는 사용자가 의 디자인에 익숙해야 합니다. 워드 프레스 테마 HTML/CSS를 마스터하세요.
"index.php"파일이나 루프가있는 다른 파일을 열면 일반적으로 " DIV "With classes"post- {id} ", 그러나 아마도"post_class "함수를 사용했을 것입니다.
" >
태그에이 기능 추가하기 " DIV », 각 기사에는 WordPress에서 추가 한 다음 클래스가 있습니다. 기본적으로 다음 클래스가 추가됩니다.
- .post-ID
- .post
- .attachment
- .sticky
- .hentry (hAtom 마이크로 포맷 페이지)
- .category ID
- .category 이름
- .tag 이름
다음은 클래스가있는 태그의 예입니다.
따라서 "style.css"파일을 열고 "category-dancing"클래스를 추가하면 "댄싱"범주의 기사 표시를 사용자 정의 할 수 있습니다.
.category 댄스 {배경 : #97c3e1; 국경 : 고체 1px #84aac4;}
위는 "댄싱"카테고리의 기사에 파란색 배경을 제공합니다. "category-dance"수업 등에 다른 수업을 추가하여 계속할 수 있습니다. 동일한 기술을 사용하여 특정 레이블이있는 항목에 고유 한 모양을 부여 할 수 있습니다.
그러나 사이트의 모양을 사용자 지정하려는 사람에게는 클래스 측면에서 추가 제어가 필요할 수 있습니다. 다음과 같이 사용하려는 클래스를 지정할 수 있습니다.
그러나 WordPress와 같은 동적 플랫폼에서 어떻게 작동합니까? WordPress의 기사에 클래스를 추가하는 방법에 대한 몇 가지 예를 살펴 보겠습니다.
스타일 저자에 따라
종종 일부 블로그는 작성자에 따라 다른 스타일을 사용한다는 것을 알 수 있습니다. 이러한 블로그의 경우 저자에 따라 각 기사에 고유 한 스타일을 부여하는 것이 좋습니다. 따라서이 예에서는 작성자의 이름에 따라 각 게시물에 고유 한 스타일을 부여 할 것입니다. 따라서 "index.php"파일 또는 다른 파일 (archive.php / category.php 등)에서 기사 작성자의 이름을 검색합니다.
위의 코드는 저자의 "표시된"이름을 검색하여 $ author 변수에 할당합니다. 이제 값을 얻었으므로 다음과 같이 post_class 코드에 추가 할 수 있습니다.
Remarque : 클래스 1과 클래스 2를 유지할 필요는 없습니다. 정적 클래스를 추가하려는 경우입니다.
예제는 다음과 같아야합니다.
저자의 공개 이름 변수에 따라 각 기사의 이름이 달라집니다. 그런 다음 다음과 같이 원하는 스타일을 추가 할 수 있습니다.
.Herve {테두리 : 고체 1px #000} {.Thierry 테두리 : 고체 1px #d88b3d} {.Franklin 테두리 : 고체 1px #4781a8}
그런 다음 루프의 각 항목은 다른 클래스를 가지므로 다른 스타일이 적용됩니다.
의견의 수에 스타일
주로 댓글 수를 기반으로하는 위젯에서 인기 기사가있는 사이트를 보았습니다. 이 예에서는 댓글 수에 따라 게시물의 스타일이 어떻게 달라지는 지 보여줄 것입니다. 가장 먼저해야 할 일은 댓글의 수를 가져 와서 클래스를 연결하는 것입니다. 주석 수를 얻으려면 루프에 다음 코드가 필요합니다.
승인 됨; if ($ my_comment_count <10) {$ my_comment_count = 'new'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = '인기'; }?>
위의 코드에서 특정 규모에 따라 클래스를 추가합니다. 기사가 10 댓글 미만인 경우 클래스 " 추가됩니다. 기사에 10 개 이상의 주석이 있고 20 개 미만의 주석이 있으면 클래스 "ermerging추가됩니다. 기사에 20 개 이상의 주석이있는 경우 클래스 '인기' 추가됩니다. 사이트의 평균 리뷰 비율에 따라이 척도를 변경할 수 있습니다.
따라서 기사 코드는 다음과 유사합니다.
루프에서 위의 코드를 붙여야합니다. 그런 다음 $ custom_values 변수를 post_class 함수에 추가합니다.
.new를 {테두리 : 고체 1px #FFFF00} {.emerging 테두리 : 1px #FF9933 점선} {.popular을 경계 : 1px #CC0000 파선}
이것은 WordPress에서 기사 스타일을 사용자 정의하는 가장 좋은 방법입니다. 그러나 때로는 더 많은 통제력을 원합니다. CSS 클래스를 사용하면 미리보기를 편집 할 수 있지만 구조는 변경할 수 없습니다.
이 튜토리얼에서 끝났습니다. WordPress의 기사에 특정 스타일을 만들 수 있기를 바랍니다.
