facebookでRSSを読み込んでウォールに最新記事を表示させる事ができるfacebookアプリ

RSS Grafitti

を試用中でございます。

サムネイルも読み込めるのかな・・・

とりあえず反映できるか投稿テストです。

（追記）

→反映できました。

まず、カテゴリ一覧、記事詳細ページで現在のカテゴリIDを取得。

<?php if (is_category() || is_single()) {
if (is_category()) {
$cat_now = get_category(get_query_var(‘cat’));
}
elseif (is_single()) {
$cat_now = get_the_category();
$cat_now = $cat_now[0];
}
$cat_id = $cat_now->cat_ID;
} ?>

月別アーカイブ表示

<?php if (is_category() || is_single()) {
wp_get_archives( ‘cat=’.$cat_id );
} else {
wp_get_archives( ‘type=monthly’ );
} ?>

最新記事表示

<?php if (is_category() || is_single()) {
$lastposts = get_posts(‘category=’.$cat_id.’&numberposts=5′);
} else {
$lastposts = get_posts(‘numberposts=5′);
}
foreach($lastposts as $post) : setup_postdata($post);
?>
<li><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></li>
<?php endforeach; ?>

早速アップグレードしましたが（管理画面の自動更新からサクっと）今のところ全く問題ありません。
プラグインも同様にサクッと自動更新しましたが、不具合の発生しているものは無い模様。

大幅にカスタマイズしているショッピングカートプラグインWelcart がこけたら…が恐怖でしたが大丈夫でした。

マルチサイト化しているWordpressもアップグレードしましたが、これも無問題。

Ktai styleもだいじょうぶ☆

管理画面もだいぶ強化されてます。

この辺り↓の新機能が便利そう

はい、困った時のショートコードー。
今回はYouTubeサムネイルリンク埋め込み版です。

サムネイル画像はytimg.comから取得。
サイズ処理はHTMLタグ側で無理やり、です。
CSSによってはうまく調整できないので style属性にでも書き換えましょう。

functions

function youtube($atts) {
extract(shortcode_atts(array(
"value" => '',
"width" => '480',
"height" => '360',
"title" => ''
), $atts));
return '<div class="ytthum"><a href="http://www.youtube.com/watch?v='.$value.'"><img src="http://i.ytimg.com/vi/'.$value.'/0.jpg" width="'.$width.'" height="'.$height.'" alt="'.$title.'" /></a><br />'.$title.'</div>';
}
add_shortcode("youtube", "youtube");

Shortcord

［youtube value="emAzdSUkkM8"］

Sample

参考にさせていただきました

WordPressで運営しているサイトでYoutubeを使う際に知っておくと得するっぽいTips

これだと、該当カテゴリに記事が無い場合は何も表示されず素っ気ない感じがします。

そこで、記事がない場合に「ごめんね」コピーを表示します。
ついでにタイトルクリックで一覧ページにジャンプの仕様を、一覧ボタン表示に変え、これも記事が無い場合は表示しないようにします。

その改良版コードがこれ。
大したカスタマイズじゃないですけど…メモメモ。

<?php $lastposts = get_posts('category=1&numberposts=5'); ?>
<div class="topnews">
<div?class="cat-title">
<h2><?php echo get_the_category_by_ID('1') ?></h2>
<?php if($lastposts): ?>
<a href="<?php echo get_category_link('1'); ?>"?class="bt-catidx">一覧はこちら</a>
<?php endif; ?>
</div>
<?php if($lastposts): ?>
<dl>
<?php foreach($lastposts as $post) : setup_postdata($post); ?>
<dt><?php the_time('Y/n/j'); ?></dt>
<dd><a href="<?php the_permalink(); ?>"><?php the_title_attribute(); ?></a></dd>
<?php endforeach; ?>
</dl>
<?php else : ?>
<p>ただいま準備中です。</p>
<?php endif; ?>
</div>

追記：カテゴリーIDの指定が・・・

上記例だとカテゴリーIDの指定が何度も必要で面倒ミスの元になりそう！
エクスポート→インポートでIDが変わったりすることもあるし。
というわけで、カテゴリースラッグからIDを取得してゴニョることにしました。

<?php $lastposts = get_posts('category=1&numberposts=5'); ?>
<div>
<div?class="cat-title">
<h2><?php echo get_the_category_by_ID('1') ?></h2>
<?php if($lastposts): ?>
<a href="<?php echo get_category_link('1'); ?>"?class="bt-catidx">一覧はこちら</a>

これを

<?php $term_id = get_category_by_slug('xxxxx')->term_id;
$lastposts = get_posts('category='.$term_id.'&numberposts=5'); ?>
<div>
<div?class="cat-title">
<h2><?php echo get_the_category_by_ID($term_id) ?></h2>
<?php if($lastposts): ?>
<a href="<?php echo get_category_link($term_id); ?>"?class="bt-catidx">一覧はこちら</a>

こう。

1. 固定ページでは全ページのタイトルを画像に。
2. 投稿系では一覧・詳細共に共通でカテゴリー名をタイトル画像に。
   （記事が属するカテゴリは一つだけとする）

これを実現するためには、タイトル要素をCSSで指定できるようにすればいい。
Wordpressは body のクラスに自動でページIDや投稿IDをつけてくれているのですが、これをフックにする場合、以下の問題が・・・

• ページや投稿記事を作成するまでIDが何になるかわからない
• 投稿記事のbodyには属するカテゴリについての情報を出力しない

そこで、タイトル要素の親要素のクラスに

1. 固定ページでは、ページスラッグ
2. 投稿記事一覧・詳細では、カテゴリースラッグ

を出力するようにカスタマイズします。

1. ページスラッグの出力カスタマイズ例（page.php）

<div id="content" class="pgslug-<?php echo get_page_uri($post->ID);?>" role="main">

第3階層以下は全て第2階層のタイトル画像を使用する （2011/11/01追記）

• 商品紹介
  • 商品その1
  • 商品その2
    • 商品その2のバリエーションその1
    • 商品その2のバリエーションその2
  • ・・・

というような階層構造をWordpressで作成している場合、タイトル画像は商品紹介以下全ページで「商品画像」としたい、という場合が多いかと。
そんな場合はこれで。

<?php
$top_post = get_post($post->ID);
while ($top_post->post_parent) { $top_post = get_post($top_post->post_parent); }
$top_slug = get_page_uri($top_post->ID);
?>
<div id="content" class="pgslug-<?php echo $top_slug;?>" role="main">

2. カテゴリースラッグの出力カスタマイズ例（single.php, category.php）

<?php
$cat = get_the_category();
$catslug = $cat[0]->category_nicename;
?>
<div id="content" class="pgslug-<?php echo $catslug; ?>" role="main">

その他のコンテンツでは…

アーカイブや検索系では body に対応するクラスが付いているので、それをフックにします。

• アーカイブ：archive
• タグ：tag
• 検索系共通：search
  • 検索結果一覧：search-results
  • 検索で見つからない：search-no-results
• Not found：error404

あとはこれら全てのクラスに対して

.pgslug-xxxx #page-title {
width: 100%;
height: 35px;
overflow: hidden;
text-indent: -999em;
background: url(画像のパス) no-repeat;
}

のように背景画像を設定すればいいかと。

できればプレーンテキストでハマるデザインで提案しておきたいところですが…どうしてもって場合もあるので、備えあれば憂いなし。

font-resizer

テンプレート埋め込みタグ

<?php if(function_exists('fontResizer_place')) { fontResizer_place(); } ?>

出力タグ

<li class="fontResizer" style="text-align: center; font-weight: bold;">
<a style="font-size: 0.7em;" title="Decrease font size">A</a>
<a title="Reset font size">A</a>
<a style="font-size: 1.2em;" title="Increase font size">A</a>
<input id="fontResizer_value" type="hidden" value="ownid" />
<input id="fontResizer_ownid" type="hidden" value="content" />
<input id="fontResizer_ownelement" type="hidden" value="" />
<input id="fontResizer_resizeSteps" type="hidden" value="1.6" />
<input id="fontResizer_cookieTime" type="hidden" value="31" />
</li>

クラス付けしてくれているのでデザインはCSSでどうとでもなります。

汎用的に使えるかもしれないサンプルはこちら

テンプレート

<div id="font_select">
<ul>
<li id="fselectTtl">文字サイズ：</li>
<?php if(function_exists('fontResizer_place')) { fontResizer_place(); } ?>
</ul>
</div>

CSS

/* font-resizer */
#font_select {
letter-spacing: -0.31em;
*letter-spacing: normal;
word-spacing: -0.43em;
text-align:right;
padding-right:0.5em;
line-height:20px;
}
#font_select ul {
list-style: none outside none;
margin:0 0 1em 0;
padding:0;
}
#font_select ul li,
#font_select ul li a {
display: inline-block;
zoom: 1; *display: inline;
vertical-align: middle;
white-space:nowrap;
}
#font_select ul li#fselectTtl {
letter-spacing: normal;
word-spacing: normal;
width:auto;
}
#font_select ul li.fontResizer {
}
.fontResizer a {
letter-spacing: normal;
word-spacing: normal;
width:20px;
hright:20px;
margin-right:2px;
}
.fontResizer a:hover {}
a.fontResizer_minus {}
a.fontResizer_reset {}
a.fontResizer_add {}

フロートはあまり好きじゃないので inline-block。
リサイズボタンにマイナスインデント＋背景画像で。
そういえばマイナスインデントでリンクテキストをhiddenするテクニックがSEO的にマイナスっていう都市伝説はホントのところどうなんでしょうね？
どなたか知ってたら教えてくださーい。

追記：
JS組込みの手間を惜しまないのであれば、より汎用的でHTMLの制限のないこちらの方がいいかも。（未検証）

Simple jQuery Text Resizer

functions.php に以下を追加して

function my_form_tag_filter($tag){
if ( ! is_array( $tag ) )
return $tag;
if(isset($_GET['goods'])){
$name = $tag['name'];
if($name == 'your-goods') $tag['values'] = (array) $_GET['goods'];
}
return $tag;
} add_filter('wpcf7_form_tag', 'my_form_tag_filter', 11);

Contact Form 7 で例えば

<p>商品名<br /> [text your-goods] </p>

のような商品名欄を作成し、ボタンのリンク先を

http://example.com/contact?goods=商品1

みたいにすると、ソノような動きをします。

Contact Form 7′s FAQ

wp_list_pagesをページ内に埋め込みたいという要望はかなり多いはず。

ただそのたびに個別テンプレートを用意したり、条件分岐を設定するのも面倒。
気づいたらloop_page.phpがグチャグチャに…なんてことにも。

このプラグインを入れると、以下のショートコードが使えるようになるらしいです。
これから検証するのですが、ショートコードを忘れないようにメモメモφ(｀д´)

• [pagelist]　基本。wp_list_pages(‘title_li=’)
• [subpages]　現在の子ページ。[pagelist child_of="current"]でも可。
• [siblings]　共通の親を持つ子ページ。[pagelist child_of="parent"]でも可。
• depth ? means how many levels in the hierarchy of pages are to be included in the list, by default depth is unlimited (depth=0), but you can specify it like this: [pagelist depth="3"];
• if you want to show flat list of pages (not hierarchical tree) you can use this shortcode: [pagelist depth="-1"];
• if you want to show subpages of the specific page you can use this shortcode: [pagelist child_of="4"] where 4 is the ID of the specific page;
• if you want to exclude some pages from the list you can use this shortcode: [pagelist exclude="6,7,8"] where exclude parameter accepts comma-separated list of Page IDs;
• if you want to exclude the tree of pages from the list you can use this shortcode: [pagelist exclude_tree="7,10"] where exclude_tree parameter accepts comma-separated list of Page IDs (all this pages and their subpages will be excluded);
• if you want to include certain pages into the list of pages you can use this shortcode: [pagelist include="6,7,8"] where include parameter accepts comma-separated list of Page IDs;
• if you want to specify the title of the list of pages you can use this shortcode: [pagelist title_li="<h2>List of pages</h2>"]; by default there is no title (title_li=””);
• if you want to specify the number of pages to be included into list of pages you can use this shortcode: [pagelist number="10"]; by default the number is unlimited (number=””);
• if you want to pass over (or displace) some pages you can use this shortcode: [pagelist offset="5"]; by default there is no offset (offset=””);
• if you want to include the pages that have this Custom Field Key you can use this shortcode: [pagelist meta_key="metakey" meta_value="metaval"];
• if you want to show the date of the page you can use this shortcode: [pagelist show_date="created"]; you can use this values for show_date parameter: created, modified, updated;
• if you want to specify the column by what to sort you can use this shortcode: [pagelist sort_column="menu_order"]; by default order columns are menu_order and post_title (sort_column=”menu_order, post_title”); you can use this values for sort_column parameter: post_title, menu_order, post_date (sort by creation time), post_modified (sort by last modified time), ID, post_author (sort by the page author’s numeric ID), post_name (sort by page slug);
• if you want to change the sort order of the list of pages (either ascending or descending) you can use this shortcode: [pagelist sort_order="desc"]; by default sort_order is asc (sort_order=”asc”); you can use this values for sort_order parameter: asc, desc;
• if you want to specify the text or html that precedes the link text inside the link tag you can use this shortcode: [pagelist link_before="<span>"]; you may specify html tags only in the HTML tab in your Rich-text editor;
• if you want to specify the text or html that follows the link text inside the link tag you can use this shortcode: [pagelist link_after="</span>"]; you may specify html tags only in the HTML tab in your Rich-text editor;

それも面倒、というか忘れそうなので、テンプレートに対策を直接記述する
以下のバグ対策を施すことにしました。

例えば

wp_list_pages(‘exclude_tree=29,32,36,39&sort_column=menu_order&depth=2&title_li=’ );

という記述は、

$parent_pages_to_exclude = array(29,32,36,39);
foreach($parent_pages_to_exclude as $parent_page_to_exclude) {
if ($page_exclusions) { $page_exclusions .= ‘,’ . $parent_page_to_exclude; }
else { $page_exclusions = $parent_page_to_exclude; }
$descendants = get_pages(‘child_of=’ . $parent_page_to_exclude);
foreach($descendants as $descendant) {
$page_exclusions .= ‘,’ . $descendant->ID;
}
}
wp_list_pages(‘title_li=&sort_column=menu_order&depth=2&exclude=’ . $page_exclusions);

で想定通りの動作をさせられます。

参考：http://wordpress.org/support/topic/excluding-multiple-pages-with-exclude_tree

WordPress 3.0〜 の新しい機能としてカスタムヘッダーという機能がある。
これは以下のような機能をもったもの。

• 管理画面で全ページ共通で表示されるヘッダーイメージを選択できる
• 固定ページ、投稿ページごとに投稿画面からヘッダーイメージをアップできる

しかし、これではカテゴリー一覧や検索関連では個別設定できないので、この機能を使って「タイトル画像」を各ページにセットする、という使い方はできない。

そこで、一つのテンプレートファイル（header.php）をカスタマイズして、以下のような仕様のヘッダーイメージを全ページに設定する方法を考えてみた。

• トップページには大きめのメインビジュアル画像
• カテゴリー一覧・個別投稿ページではカテゴリータイトル画像
• 固定ページには個別のタイトル画像

条件分岐は、いつもの if 文で。

トップページにメインビジュアル画像

普通に固定で。

<img src=”<?php bloginfo( ‘template_url’ ); ?>/images/main.jpg” alt=”" />

もしくはカスタムヘッダーを使う。（管理画面から差替え可能）

<img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”" />

カテゴリー一覧・個別投稿ページではカテゴリータイトル画像

カテゴリースラッグを抜き出して画像ファイル名を
｛カテゴリースラッグ｝_ttl.jpg
としてテンプレートの画像ディレクトリに用意。
これを以下のように読み出す。

<?php $cat = get_the_category(); $cat = $cat[0]; {
echo ‘<img src=”‘ . get_bloginfo(“template_url”) . ‘/images/’ . $cat->category_nicename . ‘_ttl.jpg” alt=”‘ . $cat->cat_name . ‘” />’;
} ?>

固定ページには個別のタイトル画像

カスタムフィールドを使い 「ttl」のような key に セットした値を使って
｛カスタムフィールド：ttlの値｝_ttl.jpg
という名前の画像ファイルをテンプレートの画像ディレクトリに用意。
これを以下のように読み出す。

<img src=”<?php bloginfo( ‘template_url’ ); ?>/images/<?php echo get_post_meta($post->ID,’ttl’,true); ?>_ttl.jpg” alt=”<?php the_title(); ?>” />

全ページ・全カテゴリ分のテンプレートファイルを個別に用意するのに比べればかなり楽にタイトル画像を実現できたかと思います

今回は2.9.xからのバージョンアップ。
念のためにバックアップをきっちりとってから、管理画面のバージョンアップボタンをポチりましたが、問題なく全て自動でバージョンアップできました。

多くの新機能が備わったようで、検証が楽しみです。

この記事を書いている目的の一つに、リビジョンの時差についての検証があります。

＞Wordpress.org：フォーラム：時刻設定

結論：Wordpress 3.01 では、リビジョンの時差は治っています。

※SSL絡みの au端末で発生する無限リダイレクト問題は治っていない模様。

【解決策】
ライブラリを読み込む際に、以下を記述しておく。
※郵便番号 input : id=”zip”
※都道府県 input : id=”pref”
※住所 input : id=”addr”

ググったところ、これは、他のライブラリとの干渉を防ぐためにのWordoress仕様のjQueryの親心だそうな。

解決策としては、JSの「$()」を「jQuery()」にすればOK。

ようやく重い腰を上げて、当サイトのWordpressのバージョンを2.8.xから最新の2.9.2にアップグレードしました！

及び腰だったのは、使っているサーバ（sakura）のMySQLのバージョンが4.0で、2.9.xからMySQLのバージョンが5.0以上が必須になったからなのでした。
バージョンアップ自体はサーバのコンパネからの操作で簡単にできるのですが、DBのバックアップ→リストアといういかにも不測の事態が起こりそうな作業が必要なのです。

念のため、先達のバージョンアップ報告をチェックしつつおそるおそる作業を始めたわけですが・・・・予想通りトラブル発生。

#1007 ? Can’t create database ‘データベース名’; database exists
というエラーメッセージが出てインポートできません。

よくよく先の先達のバージョンアップ報告を見ると、コメントに同様の報告がされていました。
よく見ておけば・・・
がしかし、報告されている解決手順では解決できず・・・・・

真っ青になりつつも、念のためにWordpressのプラグイン「WP-DBManager」でバックアップしておいたデータをあててみたところ、無事インポート成功！復活しました。
備えあれば憂いなし。
バックアップって、本当に大事ですね。

ちなみに、データベースが空の状態でWordpressにアクセスすると初期セットアップの画面になり、ここでセットアップ→DBプラグイン有効化→バックアップデータのリストア、の手順でリストアしたところ、Wordpressが管理側・表示側ともに真っ白になってしまいました。
ではと、データベースを一旦まるごと削除して作り直し、バックアップデータをphpmyadminの画面からインポートしたところ、無事成功、というなんとも冷や汗ものな作業工程でありました。

WordPress 自体のバージョンアップは、そんな苦労がアホらしくなるほどあっさり簡単に成功しました。やれやれ。