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

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

5月
2

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

5月 2, 2012in iPhone

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

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

子テーマの記事

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

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

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

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

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

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

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

参考サイト

[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>

できたのが、これ！

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

自分自身が他のサイトを見ている時、これがあればやっぱり便利だと感じます。
以前、使っていた「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さんのブログを参考にしました。
以前から、なんとなく気になっていたんですよねｗ
わかってよかったー( ^ω^ )ﾆｺﾆｺ

今更知らないなんて言えない…Skitchで画像の一部分を注目させるスポットライト効果を使う | Exception Code.
このSkitchというアプリ、Mac使いのブロガーなら必ず使っていると言っても過言じゃないですよね。よく、画像で説明しているブログを見てると、1点だけ明るくて、他の部分が暗くなっている画像がありま …

こんな本もあります。
何気に本屋で手にとったんですが「Twenty Eleven」にはもってこい
最初はコードがびっしり書かれていたので、これわからんな〜と思いましたが、
徐々に参考になってきましたｗｗｗ

WordPress 3.2以降に対応した、WordPressのデザインカスタマイズのための基本がしっかり分かる本。
WordPress 3.2および3.3の標準テーマである「Twenty Eleven」では、HTML5/CSS3が大胆に導入されました。また、1ソースでパソコン、スマートフォン、タブレット端末に対応する「レスポンシブWebデザイン」を採用しており、「次世代サイトの見本」とも言えるような最新鋭のテーマです。
本書では、「Twenty Eleven」のテンプレートとCSSをわかりやすく整理して解説。また、CSSでのカスタマイズ、テンプレートを書き換えてのカスタマイズなど、デザインを思い通りにするためのテクニックを紹介しています。