検索

ホームページ  >  記事  >  CMS チュートリアル  >  ワードプレスで記事ページングを実装する方法

ワードプレスで記事ページングを実装する方法

藏色散人
藏色散人オリジナル
2019-12-25 10:50:075479ブラウズ

ワードプレスで記事ページングを実装する方法

#WordPress で記事のページングを実装するにはどうすればよいですか?

長い記事なので、ページの読み込み速度が遅くなり、ユーザーエクスペリエンスが低下するため、長い記事をページ分割する方法を見つける必要があります。非常に優れたコードソリューションです。実際に使ってみたところ、本当に効果があったのでここでシェアさせていただきます。

最近、画像付きの記事が多く、比較的長い記事であることに気づきました。これにより、ページの読み込みが遅くなり、ユーザー エクスペリエンスが損なわれます。特に新しく追加された WordPress テーマのページには、多くのテキストはありませんが、読者に全体的な理解を与えるために、各 WordPress テーマに小さな画像が添付されている必要があります。プレゼンテーションを行うかどうかを決定します。したがって、30 近くの WordPress テーマを追加すると、ページは非常に長くなります。したがって、長い記事をページ分割する方法を見つける必要があります。 Google で検索した結果、非常に優れたコード ソリューションを見つけました。実際に使ってみたところ、本当に効果があったので、ここで共有します。 1. ページング ボタンの追加

トラブルを恐れない場合は、記事を書くときに HTML モードに切り替えて、次のコード行を挿入できます。これを追加する必要はありません。ページ送りボタン。

コードは次のとおりです:

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

実際、ページング ボタンをエディタに追加する方がはるかに簡単です。以前にこの関数がコードを修正して実装されているのを見たことがありましたが、忘れていました。それはWordPressエディターの拡張プラグインであるTinyMCE Advancedを使用しているからです。このボタンは以前から存在しているため、ここでは詳しく説明しません。

2012-06-17 補足: WordPress 3.4 テキスト エディタにページング ボタンを追加

私の「女性ゲストの場合の情報」fc.guansoft.com Web サイトもこのサイトで使用されているためです。記事 長い記事のためのページネーションコードを紹介します。しかし、そのサイトには 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. ページング関数を追加する

Wordpress には実際には独自のページング関数がありますが、まだ呼び出されていません。そのため、記事を編集するときに改ページを挿入しますが、変更は見られません。この関数を呼び出すにはどうすればよいでしょうか?方法は非常に簡単で、テーマ テンプレート ファイル single.php 内で次のようなコード行を見つけます。

コードは次のとおりです。

<?php the_content(); ?>

このコード行の後に次のコードを追加して、単純なページング機能を実現します。

コードは次のとおりです:

<?php wp_link_pages(); ?>

3. ページング効果を美しくする

上記の 2 つの手順を実行することで、長い記事のページング機能を実現できます。しかし、これはあまり美しくないので、ページング効果をより完璧にするために美化しましょう。

まず、前の手順のページング関数コードを次のコードに置き換えます。

コードは次のとおりです。

<?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 プラグイン

シンプルで実用的な Wordpress の長い記事のページネーション コード - ページ 2 - Guan Shuo Shuo wordpress プラグイン

シンプルで実用的な wordpress の長い記事のページング コード - ページ 3 - Guanshuo wordpress プラグイン

テーマ テンプレート ファイル内で

…… のようなものを見つけます。 header.php title> コードを次のコードに置き換えます。 <p>コードは次のとおりです:</p><pre class="brush:php;toolbar:false"><?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 } ?></pre><p>5. フィードのページ分割を防止する </p> <p>ページング機能が実装されると、フィード ページの記事がページ分割されます。通常、最初のページのコンテンツのみが表示されます。 </p> <p>解決策: wp-includes ディレクトリの query.php ファイルを開き、次のコード行 (約 3578 行目) を見つけます。 </p> <p>コードは次のとおりです:</p><pre class="brush:php;toolbar:false">if ( strpos( $content,&#39;<!–nextpage–>&#39; ) ) {</pre><p>Put it 次のコード行に変更します。 </p> <p>コードは以下のように表示されます:</p><pre class="brush:php;toolbar:false">if ( strpos( $content, &#39;<!--nextpage-->&#39; ) && (!is_feed()) ) {</pre><p>更多WordPress相关技术文章，请访问<strong>WordPress</strong>教程栏目：https://www.php.cn/cms/wordpress/</p>

以上がワードプレスで記事ページングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：WordPress で自動更新メール通知を無効にする方法次の記事：WordPress で自動更新メール通知を無効にする方法

関連記事

続きを見る