WordPress Iconic One テーマのページネーションが寂しすぎる

公開 | 更新 
図1.埋もれて見つけにくいページネーション

WordPress で複数ページで構成される記事を初めて書くことになり、 Iconic One テーマでページ終わりにページ間のナビゲーションを担う ページネーション を表示させてみると、完全に周囲のコンテンツに埋もれていることに気づきました。子テーマを作って ページネーション の改善を試みます。

Iconic One PROテーマのページネーション

最近、執筆する記事が長くなる傾向にあり、ページ当たりの読み込み所要時間を短く抑えるためにも、改ページを入れることに。ところが表示させてみると、ページネーションと呼ばれる、ページ下のページ番号リンクが小さく、その位置も下過ぎてこれでは完全に埋もれています。

図1.埋もれて見つけにくいページネーション

図1.埋もれて見つけにくいページネーション

Iconic One テーマには有償のPRO版があり、その謳い文句の一つにページネーションの記述があるので、もしかすると無償版には最低限の機能しかデフォルトでは用意されていないのかも知れません。しかしながら、ページネーション機能が全く使えないわけではないことから、自分で修正してみます。

 

子テーマを作成

テーマに手を加える際には、その子テーマを作成して手を入れるのが安全なようです。WordPressをホスティングしているWebサーバの /wp-content/theme/下にある iconic-oneフォルダと同列に子テーマ用のフォルダとして、 iconic-one-childを作成します。そしてその中へは次の2つのファイルを配置します。

図2.子テーマ用フォルダとファイルの配置

図2.子テーマ用フォルダとファイルの配置




このうち、 style.cssの中で親テーマ名を記述する Template:の値をテーマ名 Iconic Oneとしてしまうと正しく認識されません。Iconic Oneを格納しているフォルダ名と同じ iconic-oneと記述するのが正しいようです。

 

子テーマを有効化

ファイルの配置を終えたらWordPressの管理画面を開き、メニューを【外観→テーマ】と進みます。新たに作成した子テーマはここに表示されるはずなのですが、当初、上述の通り親テーマ名を正しく記述していないと、壊れているテーマとして扱われてしまいました。

図3.壊れている子テーマ

図3.壊れている子テーマ

記述を正すと正しく表示されたので、この子テーマを有効にします(まだ子テーマの中身は実質空っぽなので、この時点ではまだ何も変化は有りません)。

図4.正しく認識された子テーマ

図4.正しく認識された子テーマ

ページネーション位置を調整

準備は整ったのでいよいよ修正作業なのですが、直すべきはページネーションなのか、それともその上に被さる「関連記事」(JetPackによる)なのか、調べてもなかなか同じような症状を訴えるユーザは見つかりません。そんな中、全く同じ症状のページネーションを改善された記事を見つけることが出来ました(鳴謝!)。

PHPレベルでWordPressを触ったことがあまり無いので、スクリプトと共にその仕組みを記述しているのは、とても助かりました。早速、必要なPHPスクリプトを先ほどの子テーマの functions.php へ加えます。

これによりページネーションが記事本文直下に浮かび上がって来ました。

図5.記事直下へ移動したページネーション

図5.記事直下へ移動したページネーション

ページネーションをCSS修飾

さすがにこのままでは目立たないので、スタイルシートで簡単に修飾します。WordPress管理画面の子テーマの追加CSSへ、以下を追記しました。

図6.WordPress管理画面 子テーマの追加CSS

図6.WordPress管理画面 子テーマの追加CSS

表示させてみるとこのようになります。だいぶ簡素ですが、これなら次のページへの遷移を見逃すこともないでしょう。

図7.簡単に修飾したページネーション

図7.簡単に修飾したページネーション

シンプルなデザインが自分好みで、特に無料版での制限を感じることなくIconic Oneテーマを使って来ましたが、今回の一件でそろそろ他のテーマへの移行も考えるようになりました。

 

2023年12月追記 : 2ページ目以降の冒頭にもページネーション

複数ページに分けた記事が増えてくると、自分が今開いているのが何ページ目か、見失うように感じました。

そこで先ず、雑誌のように記事の冒頭にはアイキャッチ画像を表示させます。管理画面の外観のカスタマイズで投稿設定にあるオプションにチェックを入れます。

図8.アイキャッチ表示オプション

図8.アイキャッチ表示オプション

このままではページ分割された全てのページ冒頭で表示されてしまうので、現在のページ番号を取得して2ページ目以降では表示しないよう制御します。

ここで少しハマったのが、「現在のページ番号の取得」でした。検索するとよく目にする get_query_var('paged') は記事の一覧表示時のページ番号を取得する引数。今回は個別記事のページ割なので、指定する引数は get_query_var('page') です(戻り値はどちらも0から始まる整数値)。

このアイキャッチ画像は the_content() の外すぐ上にいるので functions.php では対応できず。そこで、子テーマにコピーした content.php の52行目付近を、次の要領で編集します。

こうして2ページ目以降のアイキャッチ画像を抑制した上で、ページネーションをページ冒頭にも表示して、現在いるページを明示します。

functions.php に記述したページネーションのクラスの、戻り値を返す部分を次のように書き換えます。

これでページ冒頭のアイキャッチとページネーションの切り替え表示が完成。メリハリの効いたレイアウトになりました。

図9.アイキャッチとページネーション切替

図9.アイキャッチとページネーション切替


created by Rinker
¥2,980 (2024/03/04 13:11:14時点 Amazon調べ-詳細)
created by Rinker
¥2,277 (2024/03/04 13:14:44時点 Amazon調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA