デザイン

WordPressで長い記事を分割してページネーションを追加する方法とCSSデザイン

一般的にはページを分割した時のページネーション(ページ送りのボタン)は「次へ」「前へ」のみ、もしくは番号で「1,2,3・・・」というのが一般的です。

 

しかし、ページネーションに番号と「前へ」「次へ」ボタン両方を追加したいという欲張りな方はこちらの方法で追加できます。

 

元はこちらのサイトを参考にさせていただきました!

http://mugcup8.com/how-to-setup-pagenation/

 

プラグインがかなり古いので入れる場合は自己責任でお願いします。

 

 

ページを分割できるようにする

 

特に何もしなくてもこちらのコードをテキストエディターに入力すれば分割は可能です。

 

 

ただし、毎回入力するのはとても手間になります。

 

そこでページを簡単に分割できるように、投稿のエディター上にショートカットを出すプラグインを導入してしまいましょう。

 

「TinyMCE Advanced」というプラグインを使用します。

 

https://ja.wordpress.org/plugins/tinymce-advanced/

 

「設定」の「TinyMCE Advanced」を開き、エディタメニューを有効化します。

 

そして下の「使用しないボタン」から「分割」のボタンをドラッグして上の好きなエリアに持ってきます。

 

 

右の紙が重なっているようなマークが分割用のボタン

 

 

あとは投稿画面で好きなところでこのボタンを押して分割すれば完了です。

 

「次へ」「前へ」+「ページ番号」ボタンを設置する

 

テーマによりますが、基本的には番号表示しか出ません。

 

そこで活躍するのがこの「Number My Post Pages」というプラグインです。

 

https://ja.wordpress.org/plugins/number-my-post-pages-plugin/

 

おそらくプラグインが古いのかプラグインの検索で出てきません。上記の公式ページから一度ご自分のパソコンにダウンロードし、アップロードして使用してください。

 

有効化したあとは設定は以下のようにします。

 

 

次に、テーマの編集より「single.php」を開いて、<?php wp_link_pages();?>と書かれている箇所を探して以下のコードに変更します。

 

 

そうするとデザインがかなり崩れていると思うので、以下を参考にカスタマイズしてみてください。

 

 

あとは微調整して完成です。

 

上記コードを適用したものはこんな感じになります。

パソコンでの画面表示

 

スマホでの画面表示

 

 

もし「できない!」ということがあれば1000円〜デザイン変更の代行も承りますのでお気軽にお問い合わせください!

 

お問い合わせ >>

 

 

おまけ:簡単なCSSは自分でもできると便利

 

デザインについて詳しく知らなくてもできることはたくさんあります。

でも教材を買ってきて読むのは面倒だし、すぐ飽きる・・・
そんな方におすすめなのが「」です。

こちらは全て動画の教材で、実際にコーディングするところを見ながら学習できます。

また、その動画の講師の方に質問をすることもできるので、わからなくてつまづいた時にも停滞を最小限にして進めることができます。

 

しかもしょっちゅうセールをやっていて、1講座40時間で1,200円などになるので、とても価格としてもお得です。

通常の通信制の講座やパソコンスクールに比べると100分の1ぐらいの破格の値段でしっかりした内容の講義が受けられます。

 

私のスキルもこのUdemyを活用して独学で伸ばしました。

初心者用のものから多岐にわたり揃っているのでレベルに応じた教材を試して見てください!

 

 

Udemyを覗く

ABOUT ME
アバター
helppostation
20代最後にプログラミングに目覚め、2017年7月にtech academyのJavaエンジニアリングコースを修了。 参考:【比較】初心者でもできるプログラミングはここから始めよう! 現在は自身のブログ作成に加え、初心者の方向けのブログ作成を請け負い中。 自身のブログはSEO対策により3ヶ月で10,000PVを突破し、まだまだ成長中 スキル HTML/CSS Java PhotoShop ※ココナラでも出品中!2018.3.24現在、13件の実績でご評価いただいています!