귀하의 주제에 대한 기사에 홀수 및 짝수 클래스를 추가하시겠습니까? 워드 프레스 블로그 ? 수업을 추가하면 각 기사의 특정 스타일을 표시 할 수 있습니다.
이 자습서에서는 WordPress에 짝수 또는 홀수 클래스를 표시하는 방법을 보여줍니다.
왜 수업을 추가해야합니까? 한 쌍 "또는" 이상한 » 당신의 주제에 워드 프레스 블로그 ?
많은 워드 프레스 테마 WordPress 주석에 이전 또는 동일한 클래스를 사용하십시오. 사용자는 한 주석이 끝나는 위치와 다른 주석이 시작되는 위치를 볼 수 있습니다.
마찬가지로 기사에이 기술을 사용할 수 있습니다. 사용자가 부피가 큰 페이지를 빠르게 스캔 할 수 있다는 점이 미적으로 즐거워 보입니다. 이것은 신문이나 잡지 사이트의 홈 페이지에 특히 유용합니다.
즉, 귀하의 기사에 클래스를 추가하는 방법을 살펴보겠습니다. 워드 프레스 블로그.
짝수 / 홀수 클래스를 WordPress에 추가하는 방법
WordPress는 기본 CSS 클래스를 생성하여 웹 사이트의 다른 기사에 즉시 추가합니다. 이 CSS 클래스는 플러그인 및 테마 개발자가 각기 다른 기사에 고유 한 스타일을 추가하는 데 도움이됩니다.
워드 프레스는 또한 " post_class 테마 개발자가 기사에 클래스를 추가하는 데 사용됩니다.
기능 post_class 또한 필터이므로이를 조작 할 수 있습니다. 이것이 바로 우리가 여기서 할 일입니다.
이 코드를 functions.php 파일에 추가하기만 하면 됩니다. 워드 프레스 테마.
함수 oddeven_post_class ($ 클래스) {글로벌 $ current_class; $ classes [] = $ current_class; $ Current_class = ($ current_class == '이상한')? 'Even': '이상한'; return $ classes; } add_filter ( 'post_class', 'oddeven_post_class'); 글로벌 $ current_class; $ current_class = '이상한';
이 함수는 단순히 짝수 및 홀수 항목에 클래스를 추가합니다.
사이트의 소스 코드에서 홀수 및 짝수 클래스를 찾을 수 있습니다. 기사 제목으로 마우스를 가져간 다음 마우스 오른쪽 버튼을 클릭하여 항목을 검사하십시오.
이제 기사에 홀수 및 짝수 클래스를 추가했습니다. 다음 단계는 CSS로 독특한 스타일을 부여하는 것입니다. 하위 테마에 맞춤 CSS 코드를 추가하거나 간단한 CSS 플러그인을 사용하여 추가 할 수 있습니다.
다음은 시작점으로 사용할 수있는 CSS 코드의 예입니다.
.even {background : #f0f8ff; } .odd {background : #f4f4fb; }
결과는 다음과 같습니다.
좋은 결과를 얻으려면 약간의 연습이 필요하지만이를 위해서는 CSS를 마스터하거나 다음과 같은 도구를 사용해야합니다. CSS 영웅.
그렇게 간단합니다. 이 튜토리얼이 도움이 되길 바랍니다. 언제든지 소셜 네트워크에서 친구에게 질문을하거나이 튜토리얼을 공유하십시오.
