【SWELL】アーカイブページのページャーを非表示にする方法

SWELLでページャーを非表示にする方法

SWELLの初期設定では、投稿件数が少ない状態でもアーカイブページのページャーは「1」と表示されます。

今回のカスタマイズ方法はこのページャーを非表示にする方法になります。

基本的に記事数が増えてきたら、アーカイブページの表示する記事数を制限（設定）し、視認性やページ読み込み速度を考慮していくフェーズが発生します。今回のカスタマイズは、そのフェーズまでにたどり着く前に無為なページャーが気になる場合の対処とお考えください。

SWELLでページャーを非表示にした状態

SWELLのデフォルト設定では、下の画像のように、投稿件数が少なくアーカイブページが1ページのみの状態でもページャー「1」が表示されます。

今回のカスタマイズ方法では、アーカイブページが1ページしかない状態にページャーを非表示にする方法になります。

ページャーをカスタマイズする2つの方法

pagination.phpを編集

テーマSWELLのファイルのコードを書き換える必要があるため、編集用にSWELLの子テーマを用意しましょう。

今回の場合、pagination.phpが必要になります。

親テーマSWELLからSWELL＞parts＞post_list＞item>pagination.phpを、ディレクトリ階層ごとコピーして子テーマの中に作成してください。（その他のファイルは必要ありません）

カピーさん

親テーマを直接編集してもテーマアップデート時に編集内容が上書きされちゃうから子テーマが必要というわけだ！

アーカイブページのページネーションを編集するには、pagination.phpを編集する必要があります。

pagination.phpの27行目にある$snow_onlyをtrueからfalseに書き換えていきます。

/*書き換え前のコード*/
$show_only = true; // 1ページしかない時に表示するかどうか

/*書き換え後のコード*/
$show_only = false; // 1ページしかない時に表示するかどうか

書き換え後に保存。以上で編集作業は完了になります。アーカイブページが1ページのみの状態で、ページャーが表示されていない状態になっているかを確認してみてください。

CSSで非表示化する方法

pagination.phpを編集するのは、「怖い」「コードをいじるのは避けたい」という人むけで、CSSで非表示にすることも可能なので併せて紹介しておきます。

SWELL子テーマのstyle.cssやカスタマイズの追加CSSに下記コードを追記すると非表示にすることができます。

.c-pagination {
    display: none;
}

上記コードを追記した上で、更新（保存）で完了です。

この方法でもページャーは非表示になります。

ですが、この方法はアーカイブページが2ページ以上になっても機能する方法（コード）になっています。なのでアーカイブページが2ページ以上になったタイミングで上記コードは削除する必要があります。

もし、コード編集を忘れて放置してしまうと、ページャーが表示されない状態になってしまい、2ページ目以降を見てもらえない状態になってしまいます。

非表示にしたいならpagination.phpを編集しよう

2つの方法があるわけですが、受託などで将来的に自分の手から離れる可能性がある場合は、pagination.phpの編集がおすすめです。

pagination.php編集は条件が設定されているので、アーカイブページに表示する記事数で判断してくれます。

CSS編集は忘れたときには、記事（コンテンツ）が正常に見られない状態になってしまいますので、デメリットとして大きくなってしまいます。

ページャーはUI目線で必要な要素

ただ個人的には、ページャーの有無に関しては記事が少ない状態でそこまで気にする必要はないという考えだ。

ユーザー目線で見た場合に、ページャーが「1」のみであったとしても、記事（コンテンツ）はここまでしかないというのは伝わると思っている。

記事数が増えていくことで、ページャーというのは必要不可欠な機能になるのは分かりきっている。

記事更新の予定が元より無い場合以外は、ページャー機能はそのままでいいのでは無いだろうか。

一時的な状態を気にするよりも、記事（コンテンツ）の拡充の方がWebサイト全体で見ればプラスになるので、優先順位を間違えないようにしていきましょう。