WP-PageNavi WordPress 플러그인 스타일링 안내서

익숙하지 않은 경우 WP-PageNavi WordPress 플러그인을 사용하면 일반적인 이전 / 다음 탐색을 고급 번호의 페이징 탐색으로 바꿀 수 있습니다. 이것은 내가 개발 한 여러 테마에 포함시킨 기능입니다. RS16, 블로그 웨이브, RS17, 과 밝은 반점.


RS16 페이지

이 튜토리얼에서는 다음을 수행하는 방법을 살펴 보겠습니다.

  • WP-PageNavi를 설치하고 테마에 올바르게 통합하십시오.
  • 기본 플러그인 스타일을 비활성화 및 / 또는 재정의하는 두 가지 방법.
  • WP-PageNavi의 HTML 마크 업 출력 개요
  • 마지막으로 CSS를 통한 페이지 탐색 모양을 변경하는 방법

플러그인 설치

WP-PageNavi 플러그인 설치와 관련하여 두 가지 옵션이 있습니다.

  • 에서 다운로드 WordPress.org, / wp-content / plugins / 디렉토리에 업로드하고 활성화하십시오 (일명, 구식 방법).
  • 호스트에 따라 WordPress 관리자 패널의 플러그인 아래에있는“새로 추가”페이지에서 플러그인을 검색하여 자동으로 플러그인을 설치할 수도 있습니다. “pagenavi”를 검색하면 찾을 수 있습니다.

좋아, 아주 쉬웠어야 했어 이제 통합 부분에 대한 코드가 약간 더러워 질 때입니다..

테마 통합

테마 통합에서 WP-PageNavi가 활성화되어 있지 않은 경우 오류가 표시되는 것을 원하지 않습니다. 대신 이전 이전 / 다음 스타일 탐색으로 되돌아갑니다. 이를 위해 우리는 function_exists 조건부 검사.

이것이 일반적인 이전 / 다음 WordPress 탐색 코드라고 가정 해 보겠습니다.

<?php next_posts_link ( ‘«이전 출품작’) ?>
<?php previous_posts_link ( ‘최신 항목»’) ?>

다음과 같이 변경합니다.

<?php if (function_exists ( ‘wp-pagenavi’)) {wp_pagenavi (); } else { ?>
<?php next_posts_link ( ‘«이전 출품작’) ?>
<?php previous_posts_link ( ‘최신 항목»’) ?>
<?PHP} ?>

기본적으로 WP-PageNavi가 활성화되어 있는지 확인하고 활성화되어 있으면 새 페이지 탐색 코드를 표시합니다. 그렇지 않으면 정상적으로 이전 / 다음 탐색으로 돌아갑니다..

참고 사항 : CSS가 어떻게 코딩되는지에 따라 wp_pagenavi (); ‘탐색'(또는 이에 상응하는) div 내부 부분 WP-PageNavi는“wp-pagenavi”라는 새로운 클래스를 내 보냅니다..

플러그인 스타일 무시

기본적으로 WP-PageNavi는 플러그인 디렉토리의 pagenavi-css.css라는 CSS 파일을 사이트 헤더에 자동으로 삽입합니다. 우리는 이러한 기본 스타일이 우리 자신의 멋진 맞춤형 스타일을 방해하지 않기를 원하므로 완전히 제거하고 두 가지 간단한 방법이 있습니다..

  • 테마 디렉토리에 CSS 파일 추가 – 이것은 아마도 기본 WP-PageNavi 스타일을 재정의하는 가장 쉬운 방법입니다. 테마 디렉토리에 pagenavi-css.css라는 파일이 있으면 WP-PageNavi는 플러그인 디렉토리의 기본 파일 대신이를 사용합니다..
  • functions.php 파일에 스 니펫 추가 – 내가 찾은 다음 코드 스 니펫 WP 레시피 위의 동작을 완전히 비활성화하고 플러그인의 스타일 시트를 포함하지 않습니다 (기본 또는 테마 디렉토리의 재정의).

add_action ( ‘wp_print_styles’, ‘my_deregister_styles’, 100);

함수 my_deregister_styles () {
wp_deregister_style ( ‘wp-pagenavi’);
}

테마의 functions.php 파일에 해당 코드를 넣고 CSS 스타일을 일반 테마의 스타일 시트 (보통 style.css)에 추가하십시오..

노트 : 코드가 다음과 같이 괄호로 묶여 있는지 확인하십시오 <?PHP … ?> 함수 파일이 현재 비어있는 경우.

WP-PageNavi HTML 마크 업 및 CSS 선택기

WP-PageNavi 마크 업은 다음과 같습니다. 다음 예에서는 현재 2 페이지에 4 페이지가 있습니다..

이전1
2

다음

마지막»

다음 CSS 선택기를 사용하여 위의 HTML 마크 업을 타겟팅 할 수 있습니다.

  • .wp-pagenavi – 전체 div에 적용되며 CSS 지우기, 패딩 / 여백, 글꼴 크기 및 스타일 (굵게, 기울임 꼴 등)에 유용합니다.
  • .wp-pagenavi a – 페이지 번호 및 이전 / 다음을 포함하여 페이지 탐색 내의 모든 링크를 대상으로합니다..
  • .wp-pagenavi a.page – 페이지 번호를 구체적으로 타겟팅
  • .wp-pagenavi a.first – “첫”링크를 구체적으로 타겟팅합니다 (위에 나열되지 않음)
  • .wp-pagenavi a.last – “마지막”링크를 대상으로합니다.
  • .wp-pagenavi span – 확장 부분과 함께 현재 페이지 번호를 대상으로합니다 (세 개의 점이있는 것)
  • .wp-pagenavi span.current – ​​현재 페이지 번호를 대상으로합니다.
  • .wp-pagenavi span.extend – 구체적으로 확장 대상 (3 개의 점)
  • .wp-pagenavi span.pages – 구체적으로 페이지 번호 표시 대상 (예 : 페이지 1/4)

노트 : 기본적으로 이전 및 다음 링크에는 CSS 클래스가 없습니다. 페이지 번호 및 첫 번째 / 마지막 링크와 완전히 구별되도록하려면 .wp-pagenavi 선택기에 추가 된 모든 스타일을 재설정해야합니다. 이것이 의미가 없다면 다음 (실제로 단순화 된) 예를 살펴보십시오..

예를 들면 다음과 같습니다. 이전 및 다음 링크를 굵게 표시하고 다른 모든 링크의 무게는 보통이라고 가정 해 보겠습니다. 다음을 수행해야합니다.

.wp-pagenavi {글꼴 무게 : 굵은 체; } / * 이전 및 다음 링크 만 * /
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last {font-weight : normal; } / * 기타 링크 * /

예를 들어 페이지 번호 링크, 첫 번째 링크 및 마지막 링크를 하나의 규칙으로 결합했습니다. 물론, 그것들을 분리하고 각각에 더 구체적인 스타일을 추가 할 수 있습니다.

기본적으로 이전 / 다음 링크에 클래스가 추가되었지만 훨씬 더 쉽습니다. 어쨌든 재설정 할 수 있으므로별로 중요하지 않습니다..

중요 업데이트 : 의 업데이트 덕분에 스 크리 부 의견에서 WP-PageNavi의 최신 버전에는 이전 / 다음 클래스가 있음이 밝혀졌습니다 (부분적으로 감사합니다). 요스트).

.wp-pagenavi a.previouspostslink 및 .wp-pagenavi a.nextpostslink를 사용하여 각각 이전 및 다음 링크를 선택할 수 있습니다..

정렬되지 않은 선택기 목록이 더 이상 관련이 없을 때까지 위의 모든 내용은 더 이상 관련이 없지만 다른 상황에서는 CSS를 재정의하는 데 유용한 교훈이 될 수 있기 때문에 계속하겠습니다. 아래 CSS 예제는 어쨌든 해당 선택기를 사용하지 않았으므로 여전히 적용됩니다..

CSS 예제

다음은 내가 만든 PageNavi 스타일의 예입니다. 블로그 웨이브 테마.

Blogwave 업데이트 된 PageNavi

이 모양을 얻는 데 사용한 코드는 다음과 같습니다., 다중 단일 CSS 선택 사항입니다 :

.wp-pagenavi a, .wp-pagenavi 범위 {
패딩 : 5px; 오른쪽 여백 : 10px;
글꼴 크기 : 15px; 색깔 : # 03719c; 텍스트 장식 : 없음;
경계 : 3px 고체 #ccc; -경계선 반경 : 5px; -웹킷 테두리 반경 : 5px; 국경 반경 : 5px;
}
.wp-pagenavi a : 호버, .wp-pagenavi span.current {
배경 : # 03719c;
색상 : #fff;
경계 : 3px 단색 #AFAFAF;
}
.wp-pagenavi span.current {글꼴 무게 : 굵게; }

그리고 이것이 의미하는 바는 다음과 같습니다.

첫 번째 규칙
.wp-pagenavi a, .wp-pagenavi 범위는 .wp-pagenavi div 내부의 모든 앵커 및 범위 요소 (거의 모든 것)를 선택합니다..

  • 규칙의 첫 번째 줄은 패딩을 5px로 설정하여 밝은 회색 테두리 (아래 정의)에 맞지 않습니다. 또한 각 요소의 오른쪽에 10px의 일관된 여백을 설정하므로 각 요소 사이에 동일한 간격이 있습니다..
  • 두 번째 줄은 글꼴 크기를 15px로 설정하고 텍스트 색상을 파란색으로 만들고 링크에 밑줄이 없는지 확인합니다.
  • 세 번째 줄은 모든 것에 단색 3px 회색 테두리를 설정합니다. 경계 반경 코드는 모서리를 둥글게 만듭니다..

두번째 규칙
.wp-pagenavi a : hover, .wp-pagenavi span.current는 각각 현재 페이지 번호뿐만 아니라 링크 호버 효과를 선택합니다..

  • 첫 번째 줄은 진한 파란색 배경색을 설정합니다.
  • 두 번째 줄은 텍스트를 흰색으로 만듭니다..
  • 세 번째 줄은 약간 어두운 테두리를 제공합니다.

세 번째 규칙
이렇게하면 링크 호버 효과에도 영향을주지 않고 현재 페이지 번호 (다시)가 선택됩니다 (두 번째 규칙처럼). 이것은 현재 페이지 번호를 굵은 글꼴 무게로 만듭니다..

링크 호버 효과에 포함시키지 않은 이유는 보통에서 굵은 글꼴 무게로 고르지 않은 효과가 있기 때문입니다.

노트 : CSS의 코딩 방식에 따라 더 구체적인 선택기를 사용해야 할 수도 있습니다. 예를 들어 #content a에 대한 스타일이 있고 WP-PageNavi가 content div 안에 있으면 PageNavi CSS를 #content .wp-pagenavi a로 다시 작성하고 덜 구체적인 스타일을 재정의해야 할 수도 있습니다..

결론

나는 이것이 비교적 간단한 예라는 것을 알고 있습니다. 다양한 링크와 다른 요소를 훨씬 더 차별화하기 위해 훨씬 더 고급 CSS 규칙을 가질 수 있습니다. 잘만되면 당신은 길을 따라 몇 가지 CSS 팁을주었습니다..

선택적 WP-PageNavi 통합은 개발자가 테마에 통합 할 수있는 멋진 기능입니다. 위에서 설명한 통합 방법을 사용하면 사용자가 쉽게 사용할지 여부를 쉽게 선택할 수 있으며 많은 블로그에 적합한 옵션이 될 수 있습니다..

여러분 모두가 튜토리얼을 좋아했으면 좋겠습니다. 향후 WordPress 튜토리얼 또는 CSS 팁에 대한 요청이 있으면 의견에 알려주십시오..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map