米が好き

WordPress 3.0 日本語版が6/23にリリースされ、アップデートした方は色々触っている事だと思います。

以前書いた、記事投稿時に画像を挿入する際フラッシュ形式ではなくポップアップにして連続投稿する方法ですが、3.0になって前回の方法では使えなくなってしまいました。
私は画像が1・2枚ならフラッシュ形式、それ以上ならポップアップ形式かFTPに直上げの方法を取っており、私だけではなくこのポップアップ形式を使っている人が少なからずいるので、再度調べてみました。

今回変更箇所多すぎ。

なので、私の変更したファイルを画像込みでZIPにしてアップしてます。
『media-button-image_f.gif』、『media-button-image_p.gif』、『media.php』が中に入っています。
2つの画像は『wp-admin/images/』の中に。
media.php は『wp-admin/includes/』の中に放り込めば一先ず使えます。

投稿画面がこんな感じになります。


左がフラッシュ形式、右がポップアップ形式です。


ダウンロードはこちらから。

「いや、俺は自分で変更する！」
ってな方は、以下に変更箇所を全て書いておりますので頑張ってください。

余計な説明は入れていません。
私も深くは分かっておらず、「こうしたから出来た」ってなだけです。＾＾；

ファイルは言わずもがな、『media.php』の変更後は UTF-8 で保存してください。
続きを読む

過去記事、
【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法
【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2
ですが、WordPress 3.0 の『wp-admin/includes/media.php』を見ると少々ややこしく・・・と言うか前よりは簡単になっているんでしょうが、以前のやり方では上手くいきません。

しかし、無事解決方法を解読。
その方法とは！

・・・明日書きまーす。ｗ

ちょっと気になって調べたら案外簡単に出来たので、備忘録として書いておこうと思います。
今回行ったのは、特定のクラス（CSS）を加えたイメージタグの抽出方法です。

私が記事を書く時は、必ず頭にイメージを入れています。
（今日のシリーズやニコニコ紹介などは別）

このイメージは以下のように記述しています。

<img src="http://kome-suki.net/・・・" class="entry_thumb" />

<?php
  $cnt = get_the_content();
  if (substr($cnt, 0, 1) == "<") {
    preg_match("/<img(.*?)class=\"entry_thumb\" \/>/", $cnt, $thumb);
    echo $thumb[0];
  } else {
  }
?>

@yoidoreoさんからの要望でやってみました。

WordPressで画像を記事内に挿入する際、以前紹介した『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法』、『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2』を使っています。

私は画像が大量にある時には、画像に連番付けてFTPで上げてから、記事内にイメージタグをコピペして番号だけ手打ちしています。
@yoidoreoさんはそうではなく、メディアライブラリで全部上げてからポップアップ表示してリストから挿入しているらしいです。
で、挿入する際一々画像の詳細を表示してからじゃないと画像が挿入できません。
詳細の一番下に『投稿に挿入』ボタンがあるんですから。

要は何を行ったかと言うと、

if ( $toggle ) {
  $class = empty($errors) ? 'startclosed' : 'startopen';
  $toggle_links = "
  <a class='toggle describe-toggle-on' href='#'>$toggle_on</a>
  <a class='toggle describe-toggle-off' href='#'>$toggle_off</a>";
} else {
  $class = 'form-table';
  $toggle_links = '';
}

if ( $toggle ) {
  $class = empty($errors) ? 'startclosed' : 'startopen';
  $toggle_links = "
  <a class='toggle describe-toggle-on' href='#'>$toggle_on</a>
  <a class='toggle describe-toggle-off' href='#'>$toggle_off</a>
  <div style=\"float:right; margin:5px 10px 0 0;\"><input type='submit' class='button' name='send[$attachment_id]' value='" . esc_attr__( 'Insert into Post' ) . "' /></div>";
} else {
  $class = 'form-table';
  $toggle_links = '';
}

add_filter( 'post_limits', $limit_filter = create_function( '$a', "return 'LIMIT $start, 10';" ) );

$_GET['paged'] = isset( $_GET['paged'] ) ? intval($_GET['paged']) : 0;
if ( $_GET['paged'] < 1 )
  $_GET['paged'] = 1;
$start = ( $_GET['paged'] - 1 ) * 10;
if ( $start < 1 )
  $start = 0;
add_filter( 'post_limits', $limit_filter = create_function( '$a', "return 'LIMIT $start, 10';" ) );

'total' => ceil($wp_query->found_posts / 10),

.media-item .pinkynail {
  float: left;
  margin: 2px;
  max-width: 40px;
  max-height: 32px;
}

* html .media-item .pinkynail {
  height: 32px;
  width: 40px;
}

$display_title
<table class='slidetoggle describe $class'>

$display_title
<div style=\"clear:both;\"></div>
<table class='slidetoggle describe $class'>

2日前からトップページのみにTwitter（@kome__suki）のつぶやきを表示させるようにしていました。
これはいつものRSSフィードを読み込んで表示させる方法を使用していたんですが、Twitterだけは上手く読み込んでくれません。
文字コードが何故か ASCII になってバケたり、30分経っても読み込まなかったりとメチャメチャです。
ブログ用のアカウント取ったってのに、そのブログにちゃんと表示してくれなくては意味がありません。
こちらのサイトも利用して試させてもらいましたが、やっぱりダメでした。
なので、TwitterのRSSだけはプラグインに頼った方が懸命です。

サイドバーにある @kuu_san のつぶやきは『Twitter Tools』というプラグインを使用しています。
多数のアカウント設定は出来ないので、別の『Tweetable』と言うプラグインを使用しました。

これは凄いです。
何が凄いって、Twitterでつぶやいた内容が瞬時に反映されます。
TweetDeck でつぶやき、すぐにブログをリロードしたら反映されていました。
この速さには驚きです。
RSSと言うより Twitterの公式サイトに登録するので、アプリと同じ感覚なんでしょうね。
管理画面上からつぶやいたりフォロワーのTLなんかも見れますが、私は表示させたいだけだったのでこの辺はノータッチです。

バージョンが上がって少々違いますが、登録などの仕方は以下のサイトを参考に。

<?php tweetable_latest_tweets(10); ?>

$date = date('F j, Y g:i', strtotime($latest['tweets'][$counter]['created_at']));

$date = date('Y/n/d H:i', strtotime($latest['tweets'][$counter]['created_at'])+32400);

echo '<span class="twitter_status">';
echo '<span class="status-text">'.make_clickable($latest['tweets'][$counter]['text']).'</span>';
echo '<span class="twitter_meta">'.$date.'</span>';

echo '<span class="twitter_status">';
echo '<span class="twitter_meta">'.$date.'</span>';
echo '<span class="status-text">'.make_clickable($latest['tweets'][$counter]['text']).'</span>';

<li class="tweetable_item">
  <span class="twitter_status">
  <span class="twitter_meta">2010/5/05 03:00</span>
  <span class="status-text">【アニメ】けいおん！！がオリコン1・2位独占。 そして中の人を初めて見た。 <a href="http://bit.ly/ba5ZFj" rel="nofollow">http://bit.ly/ba5ZFj</a></span>
  </span>
</li>

昨日作ったブログ用のTwitterアカウントのつぶやきを、トップページのみ表示させました。
RSSをそのまま表示させるのには難があります。

１．Twitterからのフィードは、全文表示しかない。
２．文の頭にアカウント名が入る。
３．リンクはテキストのまま。（非リンク状態）
４．日時表示が日本向きではない。

たった1つのつぶやきに対し、上記の4つもの問題点があります。
その問題を解決させて表示させる方法です。

PHPでの基本的な表示方法は、例によってこちらの方法を使用しています。

１．Twitterからのフィードは、全文表示しかない。
RSSフィードからの情報は以下の通り。
『2010/5/3 00:23:40　【2ch】この精神科医に良い病院を教えてあげてください。 http://bit.ly/cZuTm0』を例にしています。

Array (
      [title] => kome__suki: 【2ch】この精神科医に良い病院を教えてあげてください。 http://bit.ly/cZuTm0
      [description] => kome__suki: 【2ch】この精神科医に良い病院を教えてあげてください。 http://bit.ly/cZuTm0
      [pubdate] => Sun, 02 May 2010 15:23:40 +0000
      [guid] => http://twitter.com/kome__suki/statuses/13250913673
      [link] => http://twitter.com/kome__suki/statuses/13250913673
      [summary] => kome__suki: 【2ch】この精神科医に良い病院を教えてあげてください。 http://bit.ly/cZuTm0
      )

<ul>
<?php
  $rss = fetch_rss('http://twitter.com/statuses/user_timeline/139088868.rss');
  $maxitems = 10;
  $items = array_slice($rss->items, 0, $maxitems);

  if (empty($items)) echo 'No items';
  else
    foreach ($items as $item) :
?>
  <li><?php
    $text = substr($item['description'],12);
    $text = ereg_replace("(https?|ftp)(://[[:alnum:]\+\$\;\?\.%,!#~*/:@&=_-]+)", "<a href=\"\\1\\2\" target=\"_blank\">\\1\\2</a>", $text);
    echo date("Y/n/j H:i", strtotime($item['pubdate'])+32400) . $text;
  ?></li>
<?php endforeach; ?>
</ul>

echo "<span style=color:#ff0000;>" . date("Y/n/j H:i", strtotime($item['pubdate'])+32400) . "</span>　" . $text;

iTunes Storeはトップ10やトップ25などのRSS配信をしています。
RSSリーダーで読む事も、WordPressではなくても表示させる事は可能です。
私がWordPressを使ってるってだけです。

WordPressでのRSS表示方法は以前書いた『【WordPress】外部RSSを取得して表示する方法』の方法を使っています。
この方法を使ってWordPress上に表示させてみます。
『sidebar.php』など、PHPファイルに書くのであれば何の問題もありませんが、ページを使って表示させる場合はPHPで書いていますので、以下のプラグインが必要になります。

<?php
  $rss = fetch_rss('http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/ws/RSS/topfreeapplications/sf=143462/limit=10/genre=6014/xml');
  $maxitems = 10;
  $items = array_slice($rss->items, 0, $maxitems);

  if (empty($items)) echo 'No items';
  else
    foreach ($items as $item) :
?>
～～～～～
<?php endforeach; ?>

<?php echo $item['updated']; ?>

<?php echo $item['id']; ?>

<?php echo $item['title']; ?>

<?php echo $item['summary']; ?>

<?php echo $item['im']['name']; ?>

<?php echo $item['im']['duration']; ?>

<?php echo $item['im']['artist']; ?>

<?php echo $item['im']['price']; ?>

<?php echo $item['im']['image']; ?>

<?php echo $item['link']; ?>

<?php echo $item['im']['releasedate']; ?>

<?php echo $item['link_enclosure']; ?>

<?php echo $item['rights']; ?>

<?php echo $item['atom_content']; ?>

<img src="<?php echo substr($item['im']['image'],162,245); ?>" />

<img src="<?php echo substr($item['im']['image'],0,69); ?>175x175-75.jpg" />

<h2 class="title">AppStore 無料ゲームアプリ トップ10</h2>
<?php
  $rss = fetch_rss('http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/ws/RSS/topfreeapplications/sf=143462/limit=10/genre=6014/xml');
  $maxitems = 10;
  $items = array_slice($rss->items, 0, $maxitems);

  if (empty($items)) echo 'No items';
  else
    foreach ($items as $item) :
?>
<div class="entry_title_top"></div>
<h2 class="index_title"><a href="<?php echo $item['id']; ?>" target="_blank" style="font-size:16px;"><?php echo $item['im']['name']; ?></a></h2>
<div class="entry_title_btm"></div>
<div style="float:left; width:250px;">
  <img src="<?php echo substr($item['im']['image'],162,245); ?>" />


  <strong>価格：</strong>　<?php echo $item['im']['price']; ?>

  <strong>カテゴリー：</strong>　ゲーム
  <strong>リリース：</strong>　<?php echo substr($item['im']['releasedate'],0,10); ?>
  
  <strong>アップデート：</strong>　<?php echo substr($item['updated'],0,10); ?>

  <strong>販売業者：</strong>　<?php echo $item['im']['artist']; ?>
  
  <strong>コピーライト：</strong>　<?php echo $item['rights']; ?>
</div>
<div style="float:right; width:330px; text-align:right;">
  <img src="<?php echo $item['link_enclosure']; ?>" class="pict" width="300" />
</div>
<div style="clear:both;"></div>

<div class="entry_box" style="margin-bottom:30px;">
  <div class="title">■原文説明</div>
  <div class="intro"><?php echo $item['summary']; ?></div>
</div>
<?php endforeach; ?>

今まで覚えたい覚えたいと思いつつも、中々着手しなかったSmarty。

「Smartyって何じゃらほい？」ってな人もいると思います。
「PHPで使えるテンプレートエンジン」と言っても、「何それ、おいしいの？」と返事すると思います。
私もそうでした。
簡単に言うと、ブログみたいに『index』『header』『footer』『side』などを分けて管理できるようになる素晴らしき言語なのです。

WordPressどっぷりな私にとっては要らないって言えば要らないんですが、仕事となるとそうもいかない。
5年以上も前に作られたWEBサイト。
100ページ以上もあるのに、全てHTMLでベタ打ち。
1箇所変更があると、全てのファイルを変更しなければいけません。
DreamWeaver使って一括変換なども出来ますが、一々全てのファイルをアップしなければいけないし手間と労力が掛かりすぎます。
このご時勢、こんな面倒な事はやってられません。
本当はデータベース化したかったんですが、まだ私の力が及ばないので、まずはSmarty導入してから勉強したいと思います。

最初からやりたい事は決まっていたんですが、これが中々思うように行きません。
やりたかったのは、こんな感じ。（簡単に）

<html>
<head>
<title>タイトル</title>
</head>
<body>
{include file="header.tpl"}
メインコンテンツ
{include file="side.tpl"}
{include file="footer.tpl"}
</body>
</html>

昨日書いた記事の続きです。

前回は『フラッシュ形式』と『ポップアップ形式』のボタンを2つ設置する方法で行いましたが、画像が同じだと分かりづらいと思うので表示させる画像を分けてみました。
ソースを見ると一目瞭然ですが、画像ファイルは『wp-admin/images/media-button-image.gif』です。
これを新しく2つ作成し、画像リンクを変えるだけで簡単に表示を変えれます。

元の画像は 14×12 ですので、それに合わせて自作するも良しです。
私は只単に文字を乗せただけで作ってみました。

	フラッシュ	ポップアップ
アイコン
ファイル名	media-button-image_f.gif	media-button-image_p.gif

<a href="{$image_upload_iframe_src}&TB_iframe=true" id="add_image" class="thickbox" title='$image_title (Flash)' onclick="return false;"><img src='images/media-button-image_f.gif' alt='$image_title (Flash)' /></a>
<a href="javascript:w=window.open('{$image_upload_iframe_src}&flash=0','','scrollbars=yes,Width=650,Height=720,top=0,left=0');w.focus();" id="add_image" title='$image_title (Popup)' onclick="return true;"><img src='images/media-button-image_p.gif' alt='$image_title (Popup)' /></a>

以前から各所で声があり、ちょっと調べてやってみました。

その声とは・・・
「WordPressの投稿画面で画像を挿入する時、一々フラッシュが立ち上がり1枚挿入したら消えてしまう。
連続で挿入する時もの凄く面倒だから、ずっと表示していて欲しい」　との事。

機会があったらやってみようと思ってましたのでやってみました。
いやー、4・5時間かかっちゃったよ。ｗ

結果的に何をしたかと言うと、
・画像挿入画面をポップアップで出す。
・1枚挿入しても、そのまま表示させる。
以上2点だけです。
それだけの為に何時間も・・・。
その何時間もかかった結晶（？）は以下より。

基本的に、画像を挿入する場合以下のような画面になります。
画像を1枚挿入する度に、この画面が消えてしまう。


別ウィンドウで出しても、結局タブなりウィンドウなりを切り替えなきゃいけないので面倒。
なもんでポップアップ表示にしてみました。

結果から言うとこんな感じになります。


画像を挿入しても、ポップアップは残ったまま。
あらステキ。ｗ
やり方は分かってみれば超簡単。
1つのファイルの2箇所を変えるだけです。

では、『wp-admin/includes/media.php』を開きます。
まずはポップアップで表示する方法。

media.php　366行目　（2.9の場合）

<a href="{$image_upload_iframe_src}&TB_iframe=true" id="add_image" class="thickbox" title='$image_title' onclick="return false;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

<a href="{$image_upload_iframe_src}&TB_iframe=true" id="add_image" class="thickbox" title='$image_title' onclick="return false;"><img src='images/media-button-image.gif' alt='$image_title' /></a>
<a href="javascript:w=window.open('{$image_upload_iframe_src}','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

<a href="javascript:w=window.open('{$image_upload_iframe_src}','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

<a href="javascript:w=window.open('{$image_upload_iframe_src}&tab=type_url','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

<a href="javascript:w=window.open('{$image_upload_iframe_src}&tab=gallery','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

<a href="javascript:w=window.open('{$image_upload_iframe_src}&tab=library','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

<?php
  exit;
}

<?php
  #exit;
}