修正：wordPress記事本文を指定文字数でページ分割
。wordPressで任意の場所で、ショートコードを入力してページ分割する方法は、ネット検索すると見つかると思います。
今回、記事本文の文字数を指定してページ分割を行い、ページネーションを実装するコードです。
今回のコードは、スマホのみ記事本文を指定文字数で分割して、ページネーションを使い表示します。
今回のコードはマルチバイトの考慮がされていないため、日本語で４０００文字単位で分割しようとしても、実際は、２０００文字くらいで分割されてしまいます。
先日公開したコードで実装でいない理由
実は、この記事を公開した直後に不具合があることが分かり、修正を試みていました。
でずがWordPressの構造上の理由から、ページ分割のアプローチが根本的に違うと分かりました。
そのため光学のために、あえて動かないコードも掲載します。
ここで公開したコードではページ分割ができないには、記事を表示しているときでは、ページ分割の処理が難しいからです。
WordPressの標準のページ分割機能を使うためには
WordPressは、標準で長い記事を分割して表示できる機能があります。
記事の中に、HTMLのコードとして、
<!--nextpage-->
を予め実装しているとWordPressが、このコードを読み取ってページ分割とページネーションのボタンを、ウェブページに設置します。
ただ自分でボタンのデザインを行ってる場合、特にリンク先のページが無くボタンが存在していないときに、常にボタンを表示したいとか、数字ではなく「前」や「次」の文字で表示したいときは、標準のページネーションの機能を使う際に、工夫が必要です。
この辺りのことは、別の記事で詳しく書きたいと思います。
○○タグを先に記事に保存しておく
こちらの記事にもありますが、ページ分割のコードは、予め記事に挿入しておく必要があります。
動的な処理で、を使うことは、できないようです。
オリジナルでページ分割の仕組みを作ろうとすると、WordPressが自動で記事に挿入するタグやHTMLのタグなどの影響を受けてしまい、正しく記事を取り出すことが難しくなります。
どうしても文字数で記事を分割したいなら
どうしても希望の文字数で記事を分割したい場合は、記事を保存するときに、自動で
<!--nextpage-->
が記事に挿入されるように、save_postアクションフックを活用して、機能を追加してみましょう。
wordPressの標準のページ分割を使う際に、参考になる記事
先日公開した間違ったページ分割の方法
子テーマなどのfunctions.phpに追記するコード
//記事のページネーション指定文字単位機能
define('IT_CHARS_PER_PAGE', ここで半角数字で分割する文字数を指定); // 1ページあたりの文字数 日本語での文字数
if (!isset($_GET['it_post_page'])) {
$it_current_post_page = 1; // デフォルトのページ番号
} else {
$it_current_post_page = intval($_GET['it_post_page']); // URLからページ番号を取得
}
//記事を文字数で分割する関数の作成:
function it_split_post_by_chars($post_content)
{
global $it_current_post_page;
$start = ($it_current_post_page - 1) * IT_CHARS_PER_PAGE;
$length = IT_CHARS_PER_PAGE;
return mb_strimwidth($post_content, $start, $length);
}
//分割された記事ページのリンクを生成する関数の作成:
function it_get_post_pagination_links($post_id)
{
global $it_current_post_page;
$post_content = get_post_field('post_content', $post_id);
$total_pages = ceil(mb_strlen($post_content) / IT_CHARS_PER_PAGE);
$previous_link = '';
$next_link = '';
if ($it_current_post_page > 1) {
$previous_link = '<a class="it-nav-button" href="?p=' . $post_id . '&it_post_page=' . ($it_current_post_page - 1) . '">前のページ</a>';
} else {
$previous_link = '<span class="it-nav-button disabled">前のページ</span>';
}
if ($it_current_post_page < $total_pages) {
$next_link = '<a class="it-nav-button" href="?p=' . $post_id . '&it_post_page=' . ($it_current_post_page + 1) . '">次のページ</a>';
} else {
$next_link = '<span class="it-nav-button disabled">次のページ</span>';
}
return '<div class="navi-btn"><div class="it-nav-previous">' . $previous_link . '</div><div class="it-nav-next">' . $next_link . '</div></div>';
}
投稿ページを基に、テンプレートを作ると良いと思います。
投稿ページに設置するコード
<?php
the_title(); // 記事のタイトルを表示
echo it_split_post_by_chars(get_the_content()); // 本文を文字単位で分割して表示
echo it_get_post_pagination_links(get_the_ID()); // ページネーションのリンクを表示
?>
ボタン生成などのCSS
.it-nav-button {
display: inline-block;
padding: 5px 15px;
border-radius: 3px;
text-decoration: none;
margin: 0 5px;
transition: background-color 0.3s;
}
.it-nav-button:hover {
background-color: #f5f5f5;
}
/* linkが無いときは */
.it-nav-button.disabled {
color: gray;
cursor: not-allowed;
/* background-color: #e9e9e9; */
border-color: #b0b0b0; /* より濃いボーダー色 */
}
.navi-btn {
display: flex;
justify-content: center; /* 水平方向の中央揃え */
align-items: center; /* 垂直方向の中央揃え */
gap: 10px; /* ボタン間のスペース */
}
今回もChatGPT PlusとBingを使ってコードを生成しています。
生成AIを使ってコードを生成するときの注意点は、こちらです。
できるだけ接頭語を付ける
wordPressの中で他の関数やプラグインを競合することを避けるために、自分が作る関数には、自分が作ったと分かるように、接頭語を付けることをお勧めします。
今回のコードの中でも、○○-のように書かれている部分があると思いますが、それが接頭語です。
接頭語を使うことで、メンテナンスも楽になります。
関数名はオリジナルで
ChatGPTなどでwordPressに関連する機能のコードを書いてもらうとき、ChatGPTは、例として出力することがあります。
そのため関数名をオリジナルの英数文字で設定することで、他のプラグインと競合を防ぐことができます。
最初に仕様、要件をまとめて作ってもらう
要件や仕様を小出しにして生成してもらうのではなく、最初から把握している要件、仕様を全部生成AIに伝えてコードを生成してもらいましょう。
そうすることでチャットの回数を減らすことができますし、コードの修正回数を減らすことができるので、生産性の向上に繋がります。
一度の依頼で完成していることは奇跡
生成AIでコードを作るときは、一度で成功することは、稀です。
通常は、数回エラーなどの修正作業があります。
この時に、エラー修正をChatGPTなどの生成AIに丸投げすると迷路に入ってしまうことがあります。
できるだけエラーの内容をそのまま生成AIに伝えて、エラーの解説をしてもらうようにしましょう。
デバッグの方法を教えてくれることもあるので、人間がデバッグしてコードを完成させることを心がけてください。
このコードを使う上で注意があります。
このコードは、分割したときに、内容が連続せず飛んでしまう不具合が見つかっています。
このまま使用して存在が発生しても私は、責任を負うことは、できません。
これは、プログラム制作の勉強の教材として使って頂くのは良いですが、実際の業務には、使わないでください。
Discussion