WordPress에서 기사 페이징을 구현하는 방법

워드프레스에서 기사 페이지 매김을 구현하는 방법은 무엇입니까?

길이가 길어서 페이지 로딩 속도가 너무 느리고 사용자 경험이 저하됩니다. 따라서 긴 기사를 페이지로 나누는 방법을 찾아야 합니다. 검색 결과 매우 좋은 코드 솔루션을 찾았습니다. 개인적인 사용 후에는 정말 효과적이므로 여기에서 공유하겠습니다. 관심이 있으시면 놓치지 마세요

추천: "wordpress tutorial"

최근에 다음과 같은 기사가 많이 있는 것을 발견했습니다. 사진이 꽤 길어요. 이로 인해 페이지가 너무 느리게 로드되어 사용자 경험에 도움이 되지 않습니다. 특히 새로 추가된 워드프레스 테마 페이지는 비록 텍스트는 많지 않지만 각 워드프레스 테마에는 독자의 전반적인 이해를 돕기 위해 작은 그림이 함께 제공되어야 합니다. 프레젠테이션을 할지 결정합니다. 따라서 약 30개의 WordPress 테마를 함께 추가하면 페이지가 매우 길어집니다. 따라서 우리는 긴 기사의 페이지를 매기는 방법을 찾아야 합니다.

Google에서 검색한 결과 매우 좋은 코드 솔루션을 찾았습니다. 직접 사용해본 결과 정말 효과가 있어서 여기에 공유합니다.

1. 페이징 버튼 추가

문제가 두렵지 않다면 기사 작성 시 HTML 모드로 전환하고 다음 코드 줄을 삽입하면 됩니다.

코드는 다음과 같습니다.

<p><!--nextpage--></p>

사실 편집기에 페이징 버튼을 추가하는 것이 훨씬 쉽습니다. 이전에 코드를 수정하여 이 기능을 구현한 것을 본 적이 있는데 잊어버렸네요. 저는 WordPress 편집기 향상 플러그인인 TinyMCE Advanced를 사용하고 있기 때문입니다. 이 버튼은 오랫동안 사용되어 왔기 때문에 여기서는 자세히 설명하지 않겠습니다.

2012-06-17 추가: 워드프레스 3.4 텍스트 편집기에 페이징 버튼 추가

저의 "당신이 여성 게스트 정보라면" fc.guansoft.com 웹사이트에서도 이 기사에 소개된 긴 기사 페이징 코드를 사용하고 있기 때문입니다. 하지만 해당 사이트에는 TinyMCE Advanced 플러그인이 설치되어 있지 않습니다. 그래서 나는 WordPress 편집기에 이 페이징 버튼을 추가하는 비교적 간단한 방법을 찾기 위해 온라인에 접속했습니다. 방법은 다음과 같습니다.

/wp-includes/class-wp-editor.php 파일을 찾으세요. 'wp_more' 찾기, 태그: (라인 366)

코드는 다음과 같습니다:

$mce_buttons = apply_filters(&#39;mce_buttons&#39;, array(&#39;bold&#39;, &#39;italic&#39;, &#39;strikethrough&#39;, &#39;¦&#39;, &#39;bullist&#39;, &#39;numlist&#39;, &#39;blockquote&#39;, &#39;¦&#39;, &#39;justifyleft&#39;, &#39;justifycenter&#39;, &#39;justifyright&#39;, &#39;¦&#39;, &#39;link&#39;, &#39;unlink&#39;, <SPAN style="TEXT-DECORATION: underline"><STRONG><SPAN style="COLOR: #ff0000; TEXT-DECORATION: underline">&#39;wp_more&#39;,</SPAN></STRONG></SPAN> &#39;¦&#39;, &#39;spellchecker&#39;, &#39;fullscreen&#39;, &#39;wp_adv&#39; ), $editor_id);

'wp_more' 뒤에 'wp_page'(작은따옴표와 쉼표 포함)를 추가합니다. 수정된 코드는 다음과 같습니다.

코드는 다음과 같습니다.

$mce_buttons = apply_filters(&#39;mce_buttons&#39;, array(&#39;bold&#39;, &#39;italic&#39;, &#39;strikethrough&#39;, &#39;¦&#39;, &#39;bullist&#39;, &#39;numlist&#39;, &#39;blockquote&#39;, &#39;¦&#39;, &#39;justifyleft&#39;, &#39;justifycenter&#39;, &#39;justifyright&#39;, &#39;¦&#39;, &#39;link&#39;, &#39;unlink&#39;, <SPAN style="TEXT-DECORATION: underline"><STRONG><SPAN style="COLOR: #ff0000; TEXT-DECORATION: underline">&#39;wp_more&#39;,&#39;wp_page&#39;,</SPAN></STRONG></SPAN> &#39;¦&#39;, &#39;spellchecker&#39;, &#39;fullscreen&#39;, &#39;wp_adv&#39; ), $editor_id);

이 때, 기사 작성 및 편집 배경의 텍스트 편집기에 있는 태그 더보기 버튼과 유사한 아이콘을 볼 수 있습니다.

마찬가지로 다음 페이지 버튼이 코드 편집기에 나타납니다.

2. 페이징 기능 추가

워드프레스에는 실제로 페이징 기능을 위한 자체 기능이 있지만 호출되지 않았습니다. 따라서 기사를 편집할 때 페이지 나누기를 삽입하지만 변경 사항이 표시되지 않습니다. 이 함수를 어떻게 호출할 수 있나요? 방법은 매우 간단합니다. 테마 템플릿 파일 Single.php에서 다음과 유사한 코드 줄을 찾으세요.

코드는 다음과 같습니다.

<?php the_content(); ?>

간단한 페이징 기능을 구현하려면 이 코드 줄 뒤에 아래에 표시된 코드를 추가하세요.

코드는 다음과 같습니다.

<?php wp_link_pages(); ?>

3. 페이징 효과를 아름답게 합니다.

위의 두 단계를 거치면 이미 긴 기사의 페이징 기능이 구현될 수 있습니다. 하지만 그다지 예쁘지는 않으니 페이징 효과를 더 완벽하게 만들 수 있도록 미화해 보겠습니다.

먼저 이전 단계의 페이징 함수 코드를 다음 코드로 바꿉니다.

코드는 다음과 같습니다.

<?php wp_link_pages(array(&#39;before&#39; => &#39;<div class="fenye">分页阅读：&#39;, &#39;after&#39; => &#39;&#39;, &#39;next_or_number&#39; => &#39;next&#39;, &#39;previouspagelink&#39; => &#39;上一页&#39;, &#39;nextpagelink&#39; => "")); ?> <?php wp_link_pages(array(&#39;before&#39; => &#39;&#39;, &#39;after&#39; => &#39;&#39;, &#39;next_or_number&#39; => &#39;number&#39;, &#39;link_before&#39; =>&#39;<span>&#39;, &#39;link_after&#39;=>&#39;</span>&#39;)); ?> <?php wp_link_pages(array(&#39;before&#39; => &#39;&#39;, &#39;after&#39; => &#39;</div>&#39;, &#39;next_or_number&#39; => &#39;next&#39;, &#39;previouspagelink&#39; => &#39;&#39;, &#39;nextpagelink&#39; => "下一页")); ?>

그런 다음 CSS 스타일을 아름답게 꾸며보세요.

테마 파일 style.css 끝에 다음 코드를 직접 넣어주세요.

코드는 다음과 같습니다.

/**页面分页**/ 
.fenye{text-align:center;margin:0px auto 10px;font-weight:bold} 
.fenye span{background-color:#DDDDDD;color:#fff;font-weight: bold;margin:0px 1px;padding:1px 6px;display:inline-block;text-decoration:none;border:1px solid #e0e0e0;} 
.fenye a{text-decoration:none;} 
.fenye a span{background-color:#F6F6E8;font-weight: normal;color: #000;text-decoration: none;} 
.fenye a:hover span{background-color:#DDDDDD;color: #fff;}

최종 표시 효과는 아래 그림과 같습니다.

4 기사 페이지를 매긴 후 제목 중복이 SEO에 미치는 영향을 해결합니다.

긴 기사를 페이지 매기기 때문입니다. , 이 페이지의 제목은 동일합니다. SEO에 부정적인 영향을 미칠지는 모르겠습니다. 피하는 것이 좋습니다! WordPress 기사 페이지 매기기에 페이지 번호를 추가하면 제목 중복 문제를 해결할 수 있습니다. 아래와 같은 효과로 변경할 수 있습니다.

간단하고 실용적인 WordPress 장문 페이지 매기기 코드 - Guanshuo 워드프레스 플러그인

간단하고 실용적인 WordPress 장문 페이지 매기기 코드 - 2페이지 - Guanshuo 워드프레스 플러그인

간단하고 실용적인 WordPress 장문 페이지 매기기 코드 - 3페이지 - Guanshuo WordPress 플러그인

테마 템플릿 파일 header.php에서 과 유사한 코드를 찾아 다음 코드로 바꿉니다.

코드는 다음과 같습니다.

<?php if ( is_single() ) { ?><title><?php echo trim(wp_title(&#39;&#39;,0)); ?><?php if (get_query_var(&#39;page&#39;)) { echo &#39;-第&#39;; echo get_query_var(&#39;page&#39;); echo &#39;页&#39;;}?> — <?php bloginfo(&#39;name&#39;); ?></title><?php } ?>

5. 피드 페이지 매김 방지

페이징 기능이 구현된 후 피드 페이지의 기사에 페이지가 매겨지며 일반적으로 첫 페이지의 내용만 표시됩니다.

해결 방법: wp-includes 디렉터리에서 query.php 파일을 열고 다음 코드 줄(약 3578줄)을 찾습니다.

코드는 다음과 같습니다.

if ( strpos( $content,&#39;<!–nextpage–>&#39; ) ) {

다음 코드 줄로 수정합니다.

코드는 다음과 같습니다

if ( strpos( $content, &#39;<!--nextpage-->&#39; ) && (!is_feed()) ) {

更多WordPress相关技术文章，请访问WordPress教程栏目：https://www.php.cn/cms/wordpress/

위 내용은 WordPress에서 기사 페이징을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!