日別アーカイブ: 2015年6月28日

5.ページナビをつける。

プラグインWP-PageNavi

記事が6本入ったので一覧ページ「ブログ」にページナビをつけてみます。

WP-PageNaviをインストール&有効化。

index.phpのデフォルトのページナビゲーションの箇所を書き換える。

<?php twentythirteen_paging_nav();  ?>

<?php if(function_exists('wp_pagenavi')) : wp_pagenavi(); endif; ?>

表示設定を2ページにして効果を確認。(6本あるので3ページに分割される。)
WP-PageNavi

ありゃー また左ギリギリかよ!!

しかも下のウィジェットとかぶってる。

レスポンシブのせいなのか、ことごとく左寄せで、やたらと縦並びになる
このテーマ。

たしかにスマホサイズだとこれでいけなくもない。

WP-PageNavi スマホ   ほらね

でもPCではあまりに不格好なんで修正
…なんだけど、どこをいじったらいいのか分からず
ここからがひと苦労。

まずはスタイルシートだろうとstyle.cssの
さっき削除したデフォルトのページナビの指定のあたりに追記してみようと
この要素のタグをChromeの「要素を検証」でチェック。

WP-PageNaviソース

しかし
#content.wp-pagenaviにマージンなど指定してみたものの微動だにしない。

あーだこーだ いじってるうちにデフォルトのデザインが
cssのリンクが切れて戻らなくなっちゃうし
(コメントアウトしたのを消去し忘れてただけでした。)
ほぼギブアップしかかったころ、やっと見つけました。

高橋拓郎さんのブログです。

WP-PageNaviの設定画面でpagenavi-css.cssを使用にチェック。(デフォルトで入ってます。)

こんなとこにcssあったんですね気付きませんでした。

となると後は楽です。

プラグインの編集からpagenavi-css.cssを開いて
.wp-pagenaviに中央への配置と、下にスペースを取るためマージンを指定。

.wp-pagenavi {
                         clear: both;
                        text-align: center;
                       margin-bottom: 20px; 
}

これで

wp−pagenavi

うまくいきましたーーーーーっ

ありがとう高橋さん。

追記 2015  11  5

WP-Page Naviを更新したら、また 左に寄ってしまいました。
上記のpagenavi-css.cssファイルは停止になっていて、この操作はできません。

テーマ本体のcssに(ここでは子テーマを使っているので子テーマのstyle.css)
普通に追記するだけで中央に配置できました。

.wp-pagenavi {
 text-align: center;
}

 

プラグイン jQuery Sooth Scroll

右下にある記事の冒頭に戻るための三角のボタンですね。

これはインストール&有効化だけで完了。