5月
2

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

5月 2, 2012in iPhone
3644979563 7a4ff7a322 n

まるまる2日もかかった!

自作テーマじゃないけど、子テーマを導入してから、ちょこちょこ弄るのが楽しいマヨです(*^_^*)

子テーマの記事

私の使っているテーマはデフォルトで入っている「Twenty Eleven」です。

後で忘れないように、メモ的に残しておこうと思いました。

今回導入たのは、下記の2つです!

  • パンくずリスト
  • ページナビゲーション

Google先生に聞いたりして、パンくずリストは、すぐに設置できたのですが、
ページナビゲーションには、かなり手こずってしまったわけです^^;

というのも、子テーマはとても編集しやすいのですが、
「functyons.php」というのが、私にはとても手に負えなかったのです_| ̄|○

何回も書きなおしては、画面が真っ白になりました(@_@;)
それでも、Mac OS X 用 FTP クライアント「Transmit」で、
子テーマのファンクションファイルを削除すれば、元通りなりましたが、
とても心臓に悪い〜〜〜www

参考サイト

[WP] 子テーマでのfunction.php利用法

WordPressの子テーマで、親テーマのfunctions,phpを上書きする方法

はじめは、こういうのが、いいな〜と高望み(ΦωΦ)フフフ…

WordPressにプラグイン無しでページネーションを設置する方法 | コリス

パンくずリストの設置

パンくずナビゲーションとは

パンくずリスト – Wikipedia
日本語では「パンくずリスト(breadcrumb list)」だが、英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的。「パンくずリスト」という …

読まれている方が、現在サイトのどこにいるのかを、示してくれるものですので、
これがあるのと無いのとでは、大いに違うと思います。

パンくずリストの設置方法

以下のコードを子テーマ(私の場合)のsingle.phpファイルの配置したい場所に貼り付けました。
上の方に表示できました\(^o^)/

<div class="breadcrumbs">
	<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?>
</a> &gt; 
	<?php $cat = get_the_category(); echo get_category_parents($cat[0], true, ' &gt; '); ?>
	<?php the_title(); ?>
</div>

できたのが、これ!

【WordPress】プラグイン 「Twenty Eleven Theme Extensions」 導入できた! | iPhoneとマヨテキメモ-1

ページナビゲーションの設置

自分自身が他のサイトを見ている時、これがあればやっぱり便利だと感じます。
以前、使っていた「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^)/

IPhoneとマヨテキメモ | iPhoneとMacなど初心者マヨのメモ書き 2 2

で、上のスクショなんですが、@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 App
カテゴリ: ユーティリティ
価格: ¥2,950

ではでは、☆。.:*:・’゜ヽ( ´ー`)ノ まったね~♪

【こちらの関連記事もご覧ください】


記事をお読み頂き、ありがとうございます!

記事の内容を気に入って頂けましたか?
もし気に入って頂けましたら、
ソーシャルボタンで共有頂ければ、とても嬉しいです♪


follow us in feedly RSS

4件のコメント to “【WordPress】プラグインを使わないでパンくずリストとページナビゲーションが設置できた!”

  1. おゆきさん

    マヨさん、すごい!φ(..)メモメモ
    私はテーマをころころ変えちゃうのでプラグインで対応です。(^_^;

    返信
    • mayo1950

      ありがとうございます♪
      (ノ´∀`*)ーちょっとずつですが、できると嬉しいですね!
      プラグイン入れると重たくなると聞いているので、がんばりました(^^♪

      返信
  2. けいけいあかか

    マヨさん
    ありがとうございました(* ̄∇ ̄*)無事にパン屑リストを設置することができました!助かりました

    返信

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This blog is kept spam free by WP-SpamFree.