1o4.org

[map]のキーを持つフィールドに住所を入力し、その住所からGooglemapへのリンクを生成します。

<?php
  $address = post_custom('map');
  $address_encode = urlencode($address);
  $zoom = 14;

  $gmap = "http://maps.google.co.jp/maps?q=".$address_encode."&z=".$zoom;
?>
<a href="<?=$gmap;?>" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/estate/maps.jpg"></a>

参考にさせて頂いたサイト様：Google Map へのリンク

要は出力されるRSSをカスタマイズしたい！
調べてみたけどサッパリわかりませんでした、勉強不足です！

先ずはfeedを出力させる側のwpにカスタマイズします！
フォーラムの方ではどちらも解決されていたようですが頭の悪い僕にはサッパリでしたので
つまりテンプレートを用意すればいいんじゃね？と思いたち
http://wordpress.org/extend/plugins/feed-template-customize/
↑のプラグインをインストール
wp-include内のfeed-rss2.phpをテーマフォルダにコピー
コピーしたファイルをwpのカスタマイズ時と同じように変更
下記のようにphpファイルの中身はループ分のみ、というか表示させたい部分のみで構いません
カスタムフィールドも入れられるし、柔軟性高いね！

<table class="parent1">
  <tr>
    <th scope="col" class="child1">セミナー名・詳細</th>
    <th scope="col" class="child2">日　時</th>
    <th scope="col" class="child3">開　場</th>
    <th scope="col" class="child4">備　考</th>
  </tr>
  <?php
  $posts = get_posts('numberposts=0');
      global $post;
  ?>
  <?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
  <tr>
    <td class="child1" id="post<?php the_ID(); ?>">
      <dl>
        <dt><?php the_title(); ?></dt>
        <dd><?php the_content(); ?></dd>
      </dl>
    </td>
    <td class="child2"><?php echo nl2br(post_custom('date')); ?></td>
    <td class="child3"><?php echo nl2br(post_custom('hall')); ?></td>
    <td class="child4"><?php echo nl2br(post_custom('remarks')); ?></td>
  </tr>
  <?php endforeach; endif;?>
</table>

あたりまえだけど文字コードはちゃんとUTF-8で保存しないと全力で文字化けします

フィードにアクセスしたらちゃんと表示されてるっ！

次に読み込み！
別ドメインへのアクセスはjQueryではできないのでphpで
埋め込みたい場所に下記を記述

<?php
  $feed = file_get_contents("表示させたいページのURL");
  print $feed;
?>

今回は「表示させたいページのURL」はwpのfeedになるから
「http://ドメイン/wp/category/カテゴリー名/feed」とかになるよね！
ページをphpにて保存！もちろんutf-8で！

無事に表示されました！
なんかfeedとかrssっぽくないけど･･･

ちゃんと理解してfunction.phpなんかを編集できる人は本当にすごいな、と
僕はまだまだ勉強不足だなーと実感しました

参考にさせて頂いたフォーラムの記事
http://ja.forums.wordpress.org/topic/3563?replies=5
http://ja.forums.wordpress.org/topic/7957

使用させて頂いたプラグイン
http://wordpress.org/extend/plugins/feed-template-customize/
http://dogmap.jp/2011/06/28/feed-template-customize/

Canvas機能を使用し、画像を回転表示させるスクリプト
http://code.google.com/p/jqueryrotate/
上記URLからダウンロードして使用･･･なのだけど、なんでか動かない！
ので僕はこっちを使ってます

$(function(){
	$('#rotate1').rotate(-25);
	var rotImage = $("#rotate2").rotate({
		bind :[
			{"mouseover":function(){rotImage[0].rotateAnimation(85);}},
			{"mouseout":function(){rotImage[0].rotateAnimation(-85);}}
		]
	});
});

<img src="images/common/sNav1.png" id="rotate1">
<img src="images/common/sNav1.png" id="rotate2">

1つ目が初めから傾いた状態で表示、2つめがアニメーションで表示しています

詳細ページのナビゲーションに、その記事が所属しているカテゴリの記事一覧を表示させたいときの記述

<ul id="product_<?php $cat = get_the_category(); $cat = $cat[1]; { echo $cat->slug; } ?>">
  <?php
  foreach((get_the_category()) as $cat) {
  $cat_id = $cat->cat_ID ;
  break ;
  }
  $query = 'cat=' . $cat_id. '&showposts=10';
  query_posts($query) ;
  ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <li><a href="<?php the_permalink(); ?>"/><?php the_title()?></a></li>
  <?php endwhile; endif; ?>
  <?php wp_reset_query() ?>
</ul>

しかし上記述だと親カテゴリが同じ場合、子カテゴリが違っているものも表示されます
子カテゴリで分けたい場合は下記述で

<ul id="product_<?php $cat = get_the_category(); $cat = $cat[1]; { echo $cat->slug; } ?>">
  <?php
  foreach((get_the_category()) as $cat) {
  $cat_id = $category[1]->cat_ID ;
  break ;
  }
  $query = 'cat=' . $cat_id. '&showposts=10';
  query_posts($query) ;
  ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <li><a href="<?php the_permalink(); ?>"/><?php the_title()?></a></li>
  <?php endwhile; endif; ?>
  <?php wp_reset_query() ?>
</ul>

ulのid属性にproduct_記事のスラッグ名が入ります
これをdreamweaverのテンプレート内に持っていきたい場合なんかは、とりあえず記事内にこれを記述しておいて
jQueryのappendToで持ってったりできますね
カテゴリ毎にidも決まっているので割とスムーズにいけると思います

同じように、パンくずナビなんかで子カテゴリの名前を表示させたい場合

<ul id="breadcrumb"><!--
  --><li><a href="../../../../index.html">HOME</a></li><!--
  --><li><a href="../../../../products.html">商品一覧</a></li><!--
  --><li><?php $category = get_the_category(); ?><a href="<?php echo get_category_link($category[1]->cat_ID) ?>"><?php $cat = get_the_category(); $cat = $cat[1]; { echo $cat->cat_name; } ?></a></li><!--
  --><li><?php the_title(); ?></li><!--
--></ul>

子カテゴリになる場合、$cat・$categoryの記述を$cat[1]・$category[1]に変更するといけます

wordpressのカスタマイズの仕事もだいぶこなしてきたのにまだ殆ど理解できてない･･･

chromeやsafariなどwebkit系のブラウザでグローバルナビゲーションがずれる現象について。

#header {
	height: 354px;
	width: 902px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/common/header.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
#header p {
	position: absolute;
	top: -9999px;
}
#gNav {
	position: absolute;
	top: 308px;
	left: 8px;
	height: 44px;
	width: 884px;
	overflow: hidden;
}
#gNav li { float: left; }
#gNav a {
	display: block;
	background-image: url(../images/common/gNav.jpg);
	height: 44px;
	text-indent: -9999px;
}

<div id="header">
	<p id="siteName">サイトネーム</p>
	<ul id="gNav" class="clearfix"><!--
  		--><li id="gNavLi1"><a href="#">ナビゲーション</a></li><!--
  		--><li id="gNavLi2"><a href="#">ナビゲーション</a></li><!--
  		--><li id="gNavLi3"><a href="#">ナビゲーション</a></li><!--
  		--><li id="gNavLi4"><a href="#">ナビゲーション</a></li><!--
  		--><li id="gNavLi5"><a href="#">ナビゲーション</a></li><!--
  		--><li id="gNavLi6"><a href="#">ナビゲーション</a></li><!--
	--></ul>
</div>

グローバルナビゲーションをヘッタの中に絶対配置して、liをフロートし、その中のaを画像置換するようなよくあるナビゲーションです。
chromeでF12を押すとデバッグツールが出ます、これで念のためナビゲーション部分を確認します。
今回もそうですが、多くの場合、aタグのheightの半分の高さの空白がaの上に入ります。
この空白のおかげでwebkit系のブラウザで表示する際にはだいたいグローバルナビゲーションがずれて表示されます。
webkit系のハックを使用するとかなり高確率でfirefoxと被りますが、一応webkit専用のハックもあるようです。

@media screen and (-webkit-min-device-pixel-ratio:0){
#gNav a{
  margin-top: -22px;
}
}

できればハックはあまり使いたくはないですけれどね

自動登録は諦めて手動登録で！

色んな方法を試しました
～を－に置換したり、半角カナを全角カナに変えたり
MySQLでmtb_zipの中身を空にしたり
けど一向に進む気配がないので、自動登録を諦めて手動にしてみたところ
何度更新しても全く動く気配のなかった進捗状況バーが割りとスムーズに動いていく！

はじめから手動ですればよかった･･･

パーマリンクの変更

/%category%/%post_id%.html

スラッグを指定した方がよろしいですが、実際にこれを使う側の方が、そこまで考えて指定されることはありません

wpの埋め込み

<?php require './wp/wp-blog-header.php'; ?>

（埋め込むページからの相対パスを記述、この場合は同階層にwpというフォルダ名でwordpressを設置した際の記述です）
htmlファイルの1行目（DOCTYPEより上）に上記を記述後、拡張子をhtmlからphpに変更

記事一覧に詳細ページの1枚目の画像を抽出
記事に含まれる1枚目の画像を抽出する│APPOFIT様

記事一覧の画像を非表示

<?php
  $my_content = get_the_content();
  $my_content = preg_replace("|(<img[^>]+>)|si","",$my_content);
  echo $my_content;
?>

（参考：http://www.webtipsbox.com/wordpress-templatefile-snippet.html）
1枚目の画像を抽出と一緒に使うと新着情報なんかに使えますね

ループ処理

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
記事を表示
<?php endwhile; ?><?php else : ?>
記事がない時の表示
<?php endif; ?>

新着情報などに使う時用

<dl>
<?php
	$posts = get_posts('numberposts=5&category=7');
	global $post;
?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
  <dt><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dt>
  <dd><? the_time('Y年n月j日 H時i分');?><br><?php the_content(); ?></dd>
<?php endforeach; endif;?>
</dl>

dlの中にdt、ddを繰り返し展開していくので、スクリプト自体をdlで囲います
numberposts=5は表示させる記事数
category=7は表示させたいカテゴリのID（スラッグでも使えるのかな）
the_time(‘y年m月d日’)は年（year）/月（month）/日（day）の表示形式、順番や間のスラッシュの変更も自由です
フォーマットに関する詳しい情報は小粋空間さんの「５．フォーマット文字一覧」にて記載されています
↓以下引用させて頂いたフォーマット一覧↓

出力される日付文字列の書式

単位	フォーマット文字	意味	表示例
年	Y	4桁の数字	1999, 2003
	y	2桁の数字	99, 03
月	m	2桁の数字	01 – 12
	n	1桁または2桁の数字	1 – 12
	F	フルスペル	January – December
	M	3文字の省略形式	Jan – Dec
日	d	2桁の数字	01 – 31
	j	1桁または2桁の数字	1 – 31
曜日	D	3文字の省略形式	Mon – Sun
	l	フルスペル	Sunday – Saturday
午前/午後	a	小文字	am / pm
	A	大文字	AM / PM
時	h	2桁の数字・12時間表示	01 – 12
	g	1桁または2桁の数字 12時間表示	1 – 12
	H	2桁の数字・24時間表示	00 – 23
	G	1桁または2桁の数字 24時間表示	0 – 23
分	i	先頭にゼロをつける	00 – 59
秒	s	先頭にゼロをつける	00 – 59

以下は年月日・時分秒の設定早見表です。

年月日の設定早見表

年		月		日		設定例	表示
4桁	Y	2桁	m	2桁	d	Y/m/d	2007/01/01
				0なし	j	Y/m/j	2007/01/1
		0なし	n	2桁	d	Y/n/d	2007/1/01
				0なし	j	Y/n/j	2007/1/1
2桁	y	2桁	m	2桁	d	y/m/d	07/01/01
				0なし	j	y/m/j	07/01/1
		0なし	n	2桁	d	y/n/d	07/1/01
				0なし	j	y/n/j	07/1/1

時分秒の設定早見表

時		分		秒		設定例	表示
12時間表記・2桁	h	2桁	i	2桁	s	h:i:s	01:02:03
12時間表記・0なし	g					g:i:s	1:02:03
24時間表記・2桁	H					H:i:s	13:02:03(01:02:03)
24時間表記・0なし	G					G:i:s	13:02:03(1:02:03)

条件分岐

<?php if (is_home()) { ?>
 <body id="index" <?php body_class(); ?>>
<?php } elseif (is_search()) { ?>
 <body id="search" <?php body_class(); ?>>
<?php } elseif (is_archive()) { ?>
 <body id="archive" <?php body_class(); ?>>
<?php } elseif (is_category()) { ?>
 <body id="cat-<?php the_category_ID(); ?>" <?php body_class(); ?>>
<?php } elseif (is_page()) { ?>
 <body id="<?php function get_page_uri2($page_id) {$page = get_page($page_id); return $page->post_name;} ?><?php echo get_page_uri2($wp_query->post->ID);?>" <?php body_class(); ?>>
<?php } elseif ( is_single()) {?>
 <body id="single" <?php body_class(); ?>>
<?php } else { ?>
 <body <?php body_class(); ?>>
<?php } ?>

勿論bodyのIDを変更する以外にも使用できます。
TOPのヘッタのみにカルーセルいれたりとか。

固定ページの自動改行を解除
page.php内get_header直後に下記を挿入

<?
remove_filter('the_content', 'wpautop');
the_content();
?>

brBrbrプラグイン使用時には一行追加します

<?
remove_filter('the_content', 'wpautop');
remove_filter('the_content','brBrbr');
the_content();
?>

参考にさせて頂いたチートシート→Webクリエイターボックス　WordPress チートシート

Custom Field Gui Utility 3
カスタムフィールドをテンプレートに反映
imagefieldの使い方
カスタムフィールドに入力した内容の改行の反映

カスタムフィールドをテンプレートに適用する際に

<?php echo post_custom('キー')?>

上記のように記述する箇所を

<?php echo nl2br(post_custom('キー')); ?>

上記のように記述することで、改行も反映されます

<?php $imagefield = get_imagefield('detail1image');
$attachment = get_attachment_object($imagefield['id']);
echo '<image src="' . $attachment['url'] . '" alt="' . $attachment['title'] . '" /><br />' . $attachment['content'] ;
?>

カスタムフィールドでアップロードした画像を表示し、その下にアップロード時に入力した画像の説明を表示

<a href="javascript:;" onclick="window.open('http://maps.google.co.jp/maps?q='+encodeURI('<?php echo post_custom('pref')?>'));return false;" target="_blank">地図はこちら</a>

カスタムフィールドキー「pref」に入力した住所からGoogle mapへのリンクを自動で生成

$(function(){
	$('#headerTab a').hover(
		function(){
			$(this).stop().animate({top : '0px'},'normal','easeOutBounce');
		},
		function(){
			$(this).stop().animate({top : '-5px'},'normal','swing');
		}
	);
});

この場合、予めhover後の長さの画像をtop:-5pxで絶対配置したものをhoverで0pxまで戻します。
{top : ’0px’}の部分はCSSでの指定になるので、たとえば画像置換のパディングで指定していた際にはtopをpaddingTopに変更。
‘normal’が入っている第二引数には’slow”normal”fast’や’ミリ秒指定’といった速度に関する記述を入れます。
’3000′であれば3秒かけてアニメーションが行われます。
‘easeOutBounce’や’swing’が入っている第三引数にはeasing名を入れます。
jQuery単体だと’liner’か’swing’しか選択できませんが、別途jQuery Easing Pluginを導入すれば他にも多くの動きをつけることが可能です。
導入する際にはjQueryを読み込んでいるスクリプトタグより後に記述して下さい。
今回は5px程度の動きになるので殆ど変化はありませんが、大幅に動く際には大きく変わります。

詳しい種類についてはこちらのサイト様をご覧ください。

<ul class="photo"><!--
  --><li><img src="images/shop/photo1.jpg"></li><!--
  --><li><img src="images/shop/photo1.jpg"></li><!--
  --><li><img src="images/shop/photo1.jpg"></li><!--
--></ul>

$('.photo img').hover(function() {
	$(this).stop().fadeTo(330,0.7);
		}, function() {
	$(this).stop().fadeTo(330,1);
});
$('.photo li').mouseover(function(){
	$(this).closest('ul').css('backgroundImage','url(' + $(this).children('img').attr('src') + ')')
});

ulの背景画像として予めphoto1の画像をいれておき、それぞれのリストの画像はCSSで縮小しておきます。
マウスオーバーでリストの画像がulの背景画像と入れ替わります。
間違え易いのが、jQueryにてCSSを指定する際の記述方法。
background-imageがbackgroundImageとなるように、ハイフンの直後の文字列が大文字になり、ハイフン自体は消えます。
つまりラクダ記法ですね。
.closestは直前の親要素、childrenは子要素、attr(‘src’)は画像のソースURLです。

$(function(){
	$('#gallery .topImage').prepend($('#gallery li:first-child img').clone());
	$('#gallery .textarea').html($('#gallery li:first-child img').attr('alt'));
	$('#gallery li img').mouseover(function(){
		$('#gallery .topImage img').attr('src',$(this).attr('src'));
		$('#gallery .textarea').html($(this).attr('alt'));
	}).hover(
		function(){
			$(this).stop().fadeTo(250,0.7);
		},
		function(){
			$(this).stop().fadeTo(250,1);
		}
	).css('cursor','pointer');
});

<div id="gallery">
	<p class="topImage"></p>
	<ul><!--
		--><li><img src="images/construction/case1.jpg" alt="サンプル1"></li><!--
		--><li><img src="images/construction/case2.jpg" alt="サンプル2"></li><!--
		--><li><img src="images/construction/case3.jpg" alt="サンプル3"></li><!--
		--><li><img src="images/construction/case4.jpg" alt="サンプル4"></li><!--
		--><li><img src="images/construction/case5.jpg" alt="サンプル5"></li><!--
		--><li><img src="images/construction/case6.jpg" alt="サンプル6"></li><!--
		--><li><img src="images/construction/case7.jpg" alt="サンプル7"></li><!--
		--><li><img src="images/construction/case8.jpg" alt="サンプル8"></li><!--
		--><li><img src="images/construction/case9.jpg" alt="サンプル9"></li><!--
		--><li><img src="images/construction/case10.jpg" alt="サンプル10"></li><!--
		--><li><img src="images/construction/case11.jpg" alt="サンプル11"></li><!--
		--><li><img src="images/construction/case12.jpg" alt="サンプル12"></li><!--
	--></ul>
	<div class="textArea"></div>
</div>

マウスオーバーした画像をtopImage内に拡大表示し、textArea内をaltの内容に置き換えます
初期表示の画像やテキストは1枚目の画像を参照します

<ul id="gNav" class="clearfix"><!--
  --><li id="gNavLi1"><a href="#">リンク1</a></li><!--
  --><li id="gNavLi2"><a href="#">リンク2</a></li><!--
  --><li id="gNavLi3"><a href="#">リンク3</a></li><!--
  --><li id="gNavLi4"><a href="#">リンク4</a></li><!--
  --><li id="gNavLi5"><a href="#">リンク5</a></li><!--
  --><li id="gNavLi6"><a href="#">リンク6</a></li><!--
  --><li id="gNavLi7"><a href="#">リンク7</a></li><!--
  --><li id="gNavLi8"><a href="#">リンク8</a></li><!--
--></ul>

$(function(){
	$('#gNav li').append('<div class="tab"></div>');
	$('#gNav a').css('cursor','pointer').blend().mouseover(function() {
    $(this).siblings('div.tab').stop().animate({top : '5px'},'fast','linear').animate({top : '0px'},'normal','easeOutBounce');
	});
});

cssでliをrelativeにし、jsにて自動挿入されるdiv.tab及びaタグを絶対配置にします
2つをtop:5pxに配置し、z-indexにてaをdiv.tabの上に乗せます
hoverでaにblendの効果が出て、マウスオーバーでdiv.tabがぴょこっと飛び出ます
ボタンの色とタブの色をそれぞれ合わせておくと可愛らしいナビゲーションになります