2
【WordPress】プラグインを使わないでパンくずリストとページナビゲーションが設置できた!

まるまる2日もかかった!
自作テーマじゃないけど、子テーマを導入してから、ちょこちょこ弄るのが楽しいマヨです(*^_^*)
私の使っているテーマはデフォルトで入っている「Twenty Eleven」です。
後で忘れないように、メモ的に残しておこうと思いました。
今回導入たのは、下記の2つです!
- パンくずリスト
- ページナビゲーション
Google先生に聞いたりして、パンくずリストは、すぐに設置できたのですが、
ページナビゲーションには、かなり手こずってしまったわけです^^;
というのも、子テーマはとても編集しやすいのですが、
「functyons.php」というのが、私にはとても手に負えなかったのです_| ̄|○
何回も書きなおしては、画面が真っ白になりました(@_@;)
それでも、Mac OS X 用 FTP クライアント「Transmit」で、
子テーマのファンクションファイルを削除すれば、元通りなりましたが、
とても心臓に悪い〜〜〜www
参考サイト
WordPressの子テーマで、親テーマのfunctions,phpを上書きする方法
はじめは、こういうのが、いいな〜と高望み(ΦωΦ)フフフ…
パンくずリストの設置
パンくずナビゲーションとは
日本語では「パンくずリスト(breadcrumb list)」だが、英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的。「パンくずリスト」という …
読まれている方が、現在サイトのどこにいるのかを、示してくれるものですので、
これがあるのと無いのとでは、大いに違うと思います。
パンくずリストの設置方法
以下のコードを子テーマ(私の場合)のsingle.phpファイルの配置したい場所に貼り付けました。
上の方に表示できました\(^o^)/
<div class="breadcrumbs"> <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?> </a> > <?php $cat = get_the_category(); echo get_category_parents($cat[0], true, ' > '); ?> <?php the_title(); ?> </div>
できたのが、これ!
ページナビゲーションの設置
自分自身が他のサイトを見ている時、これがあればやっぱり便利だと感じます。
以前、使っていた「Twenty Ten」にはプラグインを導入して使っていたのですが、
多分バージョンアップで上書きされて、なくなっていました。
で、今回テーマを変えたのをきっかけに、再度導入しようと思いました。
このサイトのことは、@rakuishi07さんに聞きました。
いつもアドバイスありがとうございます!!!
Yuriko.Net » WP-PageNavi を使わずにナビゲーション表示
コードをとりあえず、index.phpの配置したい位置へ(私はhome.phpないから)、コピペです。
あとは、searchとかにもいいかも〜
<div class="tablenav"><?php global $wp_rewrite; $paginate_base = get_pagenum_link(1); if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) { $paginate_format = ''; $paginate_base = add_query_arg('paged', '%#%'); } else { $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') . user_trailingslashit('page/%#%/', 'paged');; $paginate_base .= '%_%'; } echo paginate_links( array( 'base' => $paginate_base, 'format' => $paginate_format, 'total' => $wp_query->max_num_pages, 'mid_size' => 5, 'current' => ($paged ? $paged : 1), )); ?></div>
次にstyle.cssを子テーマに追加します。
.tablenav { color: #2583ad; background:white; margin: 1em auto; line-height:2em; text-align:center; } a.page-numbers, .tablenav .current { color: #00019b; padding: 2px .4em; border:solid 1px #ccc; text-decoration:none; font-size:smaller; } a.page-numbers:hover { color:white; background: #328ab2; } .tablenav .current { color: white; background: #328ab2; border-color: #328ab2; font-weight:bold: } .tablenav .next, .tablenav .prev { border:0 none; background:transparent; text-decoration:underline; font-size:smaller; font-weight:bold; }
これで、無事に反映されました。
ここまで来るのに遠回りして、なんとまるまる2日もかかっちゃった(T_T)
おぉー、やったー\(^o^)/

で、上のスクショなんですが、@hawk_aさんのブログを参考にしました。
以前から、なんとなく気になっていたんですよねw
わかってよかったー( ^ω^ )ニコニコ
今更知らないなんて言えない…Skitchで画像の一部分を注目させるスポットライト効果を使う | Exception Code.
このSkitchというアプリ、Mac使いのブロガーなら必ず使っていると言っても過言じゃないですよね。 よく、画像で説明しているブログを見てると、1点だけ明るくて、他の部分が暗くなっている画像がありま …
こんな本もあります。
何気に本屋で手にとったんですが「Twenty Eleven」にはもってこい
最初はコードがびっしり書かれていたので、これわからんな〜と思いましたが、
徐々に参考になってきましたwww
WordPress 3.2以降に対応した、WordPressのデザインカスタマイズのための基本がしっかり分かる本。
WordPress 3.2および3.3の標準テーマである「Twenty Eleven」では、HTML5/CSS3が大胆に導入されました。また、1ソースでパソコン、スマートフォン、タブレット端末に対応する「レスポンシブWebデザイン」を採用しており、「次世代サイトの見本」とも言えるような最新鋭のテーマです。
本書では、「Twenty Eleven」のテンプレートとCSSをわかりやすく整理して解説。また、CSSでのカスタマイズ、テンプレートを書き換えてのカスタマイズなど、デザインを思い通りにするためのテクニックを紹介しています。
Transmit
カテゴリ: ユーティリティ
価格: ¥2,950
ではでは、☆。.:*:・’゜ヽ( ´ー`)ノ まったね~♪
【こちらの関連記事もご覧ください】
- [WordPress]3.8.1にアップデートしたので、要らなくなったテーマを削除しました(4035views)
- [WordPress]見出しのデザインを変えてみました。(2865views)
- [WordPress]「Yoko」の子テーマを作りました。(3183views)
- 【WordPress】プラグイン 「Twenty Eleven Theme Extensions」 導入できた!(13502views)
- [WordPress]WPtouchをやめてレスポンシブウェブデザインテーマに変えました!(6042views)
マヨさん、すごい!φ(..)メモメモ
私はテーマをころころ変えちゃうのでプラグインで対応です。(^_^;
ありがとうございます♪
(ノ´∀`*)ーちょっとずつですが、できると嬉しいですね!
プラグイン入れると重たくなると聞いているので、がんばりました(^^♪
マヨさん
ありがとうございました(* ̄∇ ̄*)無事にパン屑リストを設置することができました!助かりました
コメント、ありがとうございます!
お役に立てて、嬉しいです♪