たかなblog

のんびりと色んな情報を発信していきます。

プラグイン

WPtouch Mobile Pluginにページネーションを導入したい

こんにちは、高菜です。

「WPtouch」関連の記事にコメントをいただくことが多いのですが、今回こんな質問をいただきましたので記事にしてみました。
解答欄だとリンクも画像も使えないので、、
同じく悩んでいる方は参考にしていただければと思います。

WPtouchを導入して、ある程度自身で
デザイン変更をしていたのですが、

「WPtouchの他のエントリー読み込み」をという所を
[前へ] 1 2 3 [4] 5 … [後へ]
という様な感じへやりたいのですが
知識不足な為まったくわからなく、
たなか様の知識をお借りしたくコメントいたしました。

お忙しいとは思いますがなにかいい方法はないでしょうか?
よろしくお願いいたします。

私からの回答としては、「WPtouchはカスタマイズして使わない方がいいよ。。」なのですが、これを言ってはどうしようもないので、何とか回答になるようにまとめてみました。

WPtouchとカスタマイズ

WPtouchでカスタマイズを行っても、プラグインの更新を行うと全部元に戻ってしまうので注意してください。
カスタマイズの復旧をしやすいようにバッチを作ってみたり、疑似子テーマを作ってみたりと対策方法はありはしますが、どちらにせよ更新の度に作業は必要です。

毎回きちんと更新の度に作業できるのであればいいのですが、「こわいから更新しない」「面倒だから更新しない」となってしまう可能性がある方は、別の方法も考えてみましょう。

現在のデフォルトテーマ含め、最初からスマホ対応しているテーマも多くなってきました。
これらのテーマの導入を検討するか、それぞれ自分でテーマをカスタマイズする気であれば、「Multi Device Switcher」等のプラグインの導入を検討してみてください。

プラグインでの対応

WPtouchで表示しているスマホサイトに対して何らかのカスタマイズを加える場合、プラグインで済むのであればプラグインでの対応をお勧めします。

今回の例でしたら、「Automatic Page Numbers - PageNavi」あたりを管理画面からインストール>有効化すればこんな感じになります。

Automatic Page Numbers - PageNavi2

気を付けていただきたいのは、「Load More Entries...」等の既存のページングが消えない点。
それから、プラグインなのでスマホ版ページだけではなく、PCページのページングもすべてこの表示がされるので、

Automatic Page Numbers - PageNavi3

使っているテーマによっては、こんな感じで表示されてしまいます。
まぁそれぞれ元々のページングしている部分をごっそり削除してあげればいいだけのような気もしますが。

その他、「WP-PageNavi」あたりも有名ですので使ってみるのもありかもです。

その場合、/plugins/wptouch/themes/foundation/default内のindex.phpを編集します。

以下の部分をごっそり置き換え。

置き換え後

だいぶすっきりですね。
ページナビがどのように表示されるかは、プラグインの設定ページを見てみてください。
対象のプラグインの細かい設定方法などは、長くなりそうなので今回は割愛します。

表示を確認できたら、CSS等で表示を整えてあげる必要があります。

「WP-PageNavi」でナビゲーションを設置した場合は、専用のデザイン改変プラグイン「Wp Pagenavi Style」が使用できます。
こちらも使用方法は簡単なので割愛しますが、WP-PageNavi&Wp Pagenavi Styleでナビゲーションを追加するとこんな感じです。

Automatic Page Numbers - PageNavi4

ナビゲーションの上下の詰まり具合が気になるようであれば、上のPHPのソース置き換え時に改行を適当に追加するか、CSSでレイアウトを整えてあげてください。

テーマファイルを触るときのカスタマイズ方法は、以下サイトでわかりやすく説明されていました。

WPtouchをカスタマイズしてブログをオリジナルデザインでスマフォ対応させたよ!(カスタマイズ編)

プラグインを使わず対応

先ほど紹介した、

を置く位置に自力でPHPを記載してあげます。

そちらについてはPHP素人の私より、以下サイトで確認したほうが早いし確実だと思うので、今回はリンクだけ載せておきますね。

WP-PageNavi を使わずにナビゲーション表示

プラグイン不要!WordPressのページャー(ページネーション)機能を簡単に実装する方法

さいごに

「WPtouch Mobile Plugin」は、「簡単にスマホ対応」させることにおいてはピカイチですが、自分なりにカスタマイズしようと思うと途端にハードルが上がります。

これからはじめる方は、レスポンシブデザイン等ですでにスマホ対応しているテーマを使う方が断然楽です。

それでもどうしてもこのプラグインを利用したい!という方は、Wordpress、そしてプラグインのアップデートについていかなければならないので覚悟してください。
プラグインのアップデートも、面倒がらずに行ってくださいね。

それも含めたうえで、カスタマイズして使いこなすことができれば、きっと他と差別化された素敵なサイトになると思うので、その時は是非参考にさせてください :)

それでは、また。


たかなblogでは、これをまとめてほしい!という疑問を募集しております。
気になったもの、多かったものを記事にしていく形になるかとは思いますが、何かを探すとき、ネットから色々情報を拾って整理するのって、自分でやると意外と時間がかかるんですよね。

そういったものを探すお手伝いが出来ればと思っています。
ご希望があれば是非お気軽にコメント欄へ!
コメントは基本、私が承認すると表示される仕様になっているため(スパム防止)、コメントを送信したのに表示されるのに2、3日かかる、ということもございます。
確認次第公開していきますのでお待ちください。

それではまた。

-プラグイン
-, , , ,

おすすめ記事

1
12月目前!クリスマスグッズ、どんなものに関心が集まっているの?

今回気になってまとめてみたのは、「クリスマスの人々の関心」について。 昨年(20 ...

2
年賀状印刷、業者に委託してでオシャレに?自宅で徹底的にこだわる?

年賀状作成は、プロにお願いする時代!? 年賀状のテンプレートが簡単に手に入るよう ...

3
ハロウィン、クリスマスに!とにかく可愛いコスプレ子供服【最新版】

ハロウィンも終わり、クリスマスが楽しみな季節になりました! これからクリスマスパ ...