블로그에 기사를 다르게 게시하는 웹 사이트를 본 적이 있습니까?

일부 웹 사이트에는 사용자 정의 배경으로 강조 표시된 기사가있는 반면 다른 웹 사이트에는 고유 한 모양의 각 카테고리 게시물이있을 수 있습니다. 모든 WordPress 게시물을 사용자 정의하는 방법을 항상 배우고 싶었다면 올바른 위치에 왔습니다.워드 프레스의 각 기사에 독특한 스타일을 부여하는 방법

이 자습서에서는 각 WordPress 기사를 다르게 모양을 만드는 방법을 보여줍니다.

그러나 WordPress를 설치 한 적이 없다면 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면 

그런 다음 왜 우리가 여기 있는지 다시 돌아옵니다.

레마르크:이 튜토리얼에서는 WordPress에 사용자 정의 CSS를 추가해야합니다. 검사 도구도 사용해야합니다. 일부 CSS 및 HTML 지식이 필요합니다.

워드 프레스 항목에 대한 각각의 스타일을 지정

WordPress는 웹사이트의 다양한 요소에 기본 CSS 클래스를 추가합니다. ㅏ 워드 프레스 테마 표준 호환에는 본문, 게시물, 페이지, 위젯, 메뉴 등에 대한 CSS 클래스를 추가하기 위해 WordPress에 필요한 코드가 있어야 합니다.

에 대한 우리의 가이드를 발견하십시오 영구 링크 : 블로그 링크를 사용자 지정하는 방법

워드 프레스의 주요 기능은 " post_class () 테마에서 기사에 이러한 기본 CSS 클래스를 추가 할 위치를 WordPress에 알리는 데 사용됩니다.

웹 사이트를 방문하여 브라우저에서 Inspect 도구를 사용하면 각 게시물에 추가 된 이러한 클래스를 볼 수 있습니다.

클래스 CSS 워드 프레스 대시 보드

다음은 사용자가 표시 한 페이지를 기반으로 기본적으로 추가 된 CSS 클래스입니다.

  • .post-ID
  • .poster
  • .attachement
  • .gluant
  • .hentry
  • .category ID
  • .category 이름
  • .tag 이름
  • .format- {크기 이름}
  • {.type- 포스트 형 이름}
  • 포스트 썸네일을 .has
  • .post-암호 필요
  • 막아 줄께요 --A-암호로

표시 예는 다음과 같습니다.

해당 CSS 클래스를 사용하여 각 WordPress 발행물을 다르게 사용자 정의 할 수 있습니다.

읽기 : 워드 프레스는 이번 주말에 블로그를 개선하는 방법

예를 들어 개별 게시를 편집하려는 경우 사용자 지정 CSS에서 post-id 클래스를 사용할 수 있습니다.

.post-412 {배경 컬러 : #FF0303; 색상 : #FFFFFF; }

게시물 ID와 일치하도록 게시물 ID를 변경해야합니다.

워드 프레스에서 기사 모양 사용자 지정

다른 예를 살펴 보겠습니다.

이번에는 "뉴스"라는 특정 범주에 게시 된 모든 기사를 다룰 것입니다.

에 대한 우리의 가이드를 발견 WordPress 블로그에 사용자 정의 CSS를 추가하는 방법

테마에 다음과 같은 사용자 정의 CSS를 추가하면됩니다.

.category 뉴스 {글꼴 크기 : 18px; 글꼴 스타일 : 기울임 꼴; }

이 CSS는 카테고리 '의 모든 항목에 영향을줍니다. 일시적인 관심사 ".

post_class 함수 ()

테마 개발자는 기능을 사용합니다 post_class () WordPress에 게시물 클래스를 추가 할 위치를 알려줍니다. 일반적으로 "article"태그에 있습니다.

함수 post_class () 기본적으로 WordPress에서 생성 한 CSS 클래스를로드 할뿐만 아니라 자신 만의 클래스를 추가 할 수도 있습니다.

또한 발견 블로그 콘텐츠 스크레이퍼를 보호하는 방법

당신에 따르면 워드 프레스 테마, post_class() 함수는 single.php 파일이나 템플릿 파일에서 찾을 수 있습니다. 일반적으로 코드는 다음과 같습니다.

" >

다음과 같은 속성으로 사용자 정의 CSS 클래스를 추가 할 수 있습니다.

" >

post_class 클래스는 각각의 기본 CSS 클래스를 사용자 정의 CSS 클래스와 함께 인쇄합니다.

여러 CSS 클래스를 추가하려는 경우 해당 클래스를 배열로 정의하고 사후 클래스 () 함수에서 사용할 수 있습니다.

" >

저자에 따라 다른 스타일로 기사 표시

posts_class 함수에 의해 생성 된 기본 CSS 클래스에는 작성자 이름이 CSS 클래스로 포함되지 않습니다.

작성자를 기준으로 각 게시물의 스타일을 사용자 정의하려면 먼저 작성자의 이름을 CSS 클래스로 추가해야합니다.

읽기 : CSS 애니메이션의 워드 프레스를 추가하는 방법

다음 스 니펫을 사용하여이를 수행 할 수 있습니다.

" >

이 코드는 사용자 이름을 CSS 클래스로 추가합니다. 사용자 이름은 WordPress에서 사용하는 URL과 호환되는 이름입니다. 공백이없고 모든 문자가 소문자이므로 CSS 클래스로 사용하기에 적합합니다.

또한 우리의 가이드를 참조하십시오 WordPress 블로그에 사용자 정의 CSS를 추가하는 방법

위 코드는 다음과 같이 표시 될 것입니다.

이제 사용자 정의 CSS에서 ".peter"를 사용하여 특정 작성자의 모든 게시물을 다르게 표시하도록 수정할 수 있습니다.

.peter {배경 컬러 : #EEE; 국경 : 고체 1px #CCC; }

주석을 기반으로 기사 게시 사용자 정의

댓글에 따라 순위가 매겨진 인기 기사가있는 위젯이있는 웹 사이트를 보셨을 것입니다. 이 예에서는 주석 수를 사용하여 다른 스타일을 만드는 방법을 보여줍니다.

우리의 발견 댓글을 관리하는 10 가지 프리미엄 WordPress 플러그인

먼저 댓글 수를 가져 와서 클래스를 연결해야합니다.

댓글 수를 얻으려면 파일에 다음 코드를 추가해야 합니다. 워드 프레스 테마. 이 코드는 WordPress 루프에 들어가므로 태그 바로 앞에 추가할 수 있습니다. .

승인 됨; 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 미만의 댓글이있는 메일은 '   20 미만이 호출 됨 신흥 ", 그리고 20 이상의 의견은 모두" 인기있는 ".

그런 다음 post_class 함수에 CSS 클래스를 추가해야합니다.

" >

이렇게하면 각 게시물의 댓글 수에 따라 새롭고 새롭게 등장하는 인기 CSS 클래스가 모든 기사에 추가됩니다.

우리는 또한 당신이 우리의 기사를 읽을 초대합니다 온라인 문서 서명을위한 6 WordPress 플러그인

인기도에 따라 스타일 발행물에 사용자 정의 CSS를 추가 할 수도 있습니다.

.new를 {테두리 : 고체 1px #FFFF00} {.emerging 테두리 : 1px #FF9933 점선} {.popular을 경계 : 1px #CC0000 파선}

테두리 만 추가하지만 원하는 CSS 규칙을 추가 할 수 있습니다.

프리미엄 워드 프레스 플러그인도 만나보세요  

당신은 다른 것을 사용할 수 있습니다 워드 프레스 플러그인 현대적인 외관을 제공하고 블로그 또는 웹사이트에 대한 연결을 최적화합니다.

우리는 여기에 당신을 도울 수있는 프리미엄 WordPress 플러그인을 제공합니다.

1. 궁극적 인 회원 프로

Ultimate Membership Pro는 훌륭합니다. 워드 프레스 플러그인 구독 프리미엄 및 콘텐츠 제한. 독점 액세스 수준을 만들어 사용자가 패키지(무료 또는 유료)에 따라 관리할 수 있습니다.

궁극적 인 회원 프로 워드 프레스 회원 워드 프레스 플러그인

그러므로 그것은 가능할 것입니다 웹 사이트의 모든 내용을 보호하십시오, 또는 그것의 일부. 예를 들어 코스, 레슨, 페이지, 제품, 카테고리, 이미지 등이 될 것입니다.

에 대한 기사도 읽어보십시오. 미리보기 이미지를 만드는 4 프리미엄 WordPress 플러그인

주요 기능은 콘텐츠 보호, 다중 액세스 수준, 다중 결제 게이트웨이 지원입니다. 페이팔Authorize.net, 스트라이프, 2 체크 아웃, 은행 송금-, 내용의 부분 보호, 기타…

다운로드 | 데모 | 웹 호스팅 

2. 슬라이더 페이스북

슬라이더 페이스북워드 프레스 플러그인 방문자에게 웹사이트에 댓글을 남길 수 있는 옵션을 제공하는 프리미엄입니다. 이 현대적이고 방해가 되지 않는 주석 상자를 사용하면 워드 프레스 플러그인 Facebook 소셜 네트워크와 웹사이트 통합을 확장하는 Like Box 및 Fan Page Wall 기능을 제공합니다.페이스 북 워드 프레스 소셜 플러그인 워드 프레스 슬라이더 방법

이 플러그인은 또한 웹 사이트의 용량을 확장하기위한 다양한 기능을 제공합니다. 좋아요 섹션 ( "Like Box") 또는 팬 전용 페이지 ( "Fan Page Wall).

너무 발견 점차 페이스 북과 Disqus 의견을로드하는 방법

Facebook 댓글 슬라이더에는 이미 버튼이 있고 모든 게시물 또는 페이지에 나타날 수 있으므로 게시물이나 페이지에 "좋아요"및 "공유"버튼을 포함 할 필요가 없습니다. 방문자는 "좋아요"버튼을 찾을 수 있습니다. "공유"버튼 그리고 Facebook 슬라이더 설명 상자. 그들은 분명히 자신의 Facebook 계정을 사용할 것입니다.

또한 흔들림 효과를 켜고 끄고 시간을 설정할 수 있습니다.

다운로드 | 데모 | 웹 호스팅

3. 로그인 닌자

이 프리미엄 WordPress 플러그인을 사용하면 로그인 페이지를 사용자 지정할 수 있습니다. 단순한 커스터마이징 그 이상입니다. 귀하의 로그인 양식. 페이지 색상 변경, 배경 이미지 추가, 로고 추가 등을 통해 전체 페이지를 사용자 정의 할 수 있습니다.닌자 로그인 워드 프레스 플러그인

다른 기능은 다음과 같습니다. 보안 문자로 로그인 및 등록 양식 보호, 무차별 대입으로 공격하는 IP의 자동 및 수동 금지, 모든 연결 활동에 대한 자세한 로그, 역할 및 사용자 이름에 따른 사용자 리디렉션, 이메일 알림 수신 모든 연결 이벤트, 사용하기 쉬운 그래픽 인터페이스, 자세한 문서 등이 있습니다.

다운로드 | 데모 | 웹 호스팅

추천 자료

웹 사이트 구축 및 관리에 도움이되는 기타 권장 리소스에 대해 알아보십시오.

결론

여기 있습니다! 이것이이 튜토리얼의 전부입니다. WordPress 블로그에서 기사 표시를 사용자 정의 할 수 있기를 바랍니다. 이 분야에 대해 우려 사항이나 제안 사항이 있으시면 논의 할 의견 섹션.

그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.

...