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

#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;}

最終的な表示効果は次の図に示すとおりです:

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

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

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

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