アクセス数: | 今日: | 昨日:   記事数:996

HOMESITE MAPBOOKMARKTAG CLOUD

Category:WordPressTips

WordPress以前の記事で『Simple Author Highlighter』を紹介しました。
でも、そんなプラグインに頼らなくてもCSSで簡単に出来る事を知りました。

コメント表示されているページのソースを見れば一目瞭然なんですが、コメントの上から見て奇数と偶数と管理人では違うCSSのクラスが入っています。
そのクラスを利用して、自分の好きなようにすれば良いだけです。
テキストカラー、ボーダー、バックグラウンドなどなど、自由に変更出来ます。

ベースのCSSクラス。(奇数列)

ol.commentlist li.comment {
}

偶数列のCSSクラス。
ol.commentlist li.thread-odd {
}

管理人(投稿者?)のCSSクラス。
ol.commentlist li.bypostauthor {
}

上記のCSSクラスはデフォルトテーマで見たクラスなので、他のテーマ等を使っている方は分かりません。
が、ソース見れば簡単に分かると思います。

ちなみに私はコメントとトラックバックの表示を分けているんですが、トラックバックは各列に違うクラスが入っていなかったので簡単には無理でした。

Twitter & JavaScriptタイトルにWordPressと付けていますが、勿論普通のHTMLサイトでも使えます。
検索すると結構な数がヒットするかと思います。

まず目を付けたのがこのサイト。
Twitterが公式に公開している(?)JavaScriptを使っての表示方法。

Webクリエイターボックス
プラグインを使わずWordPressに6の機能をつける

次に目を付けたのがこのサイト。

Creazy!
第5回:twitter の JavaScript Badge を改造する

どちらも一長一短。
公式の方は時間や曜日表記が公式サイトと同じ。
2つ目の方は時間・曜日はカスタマイズ出来るのに対し、リンクが貼られない。
うーむ。 と迷った後、「じゃ、2つ合体させればよくね?」って事で合体させました。

JavaScriptのコードは最後に書いていますが、今回もダウンロードした方が早いと思います。

ダウンロードはこちらから。 (右クリックで保存してください)

ダウンロードした『twitter.js』を好きな所に放り込んで、フッターにJavaScriptを書き込みます。
以下はWordPressのテンプレート内のjsフォルダ内に置いた例。

  <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/twitter.js"></script>
  <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/kuu_san.json?callback=twitterCallback2&count=3"></script>
</body>
</html>

赤字の所に自分のアカウント名と表示させる数を入力します。
後は実際にTwitterのTLを表示させたい箇所に以下のコードを書くだけです。

<ul id="twitter"></ul>

後はCSSで表示形式を整えるだけです。

#twitter {
  margin-bottom: 5px;
}

#twitter li {
}

#twitter li .name {
  border-bottom: 1px dotted #ccc;
}

#twitter li .time {
  text-align: right;
}


上記の例だと、以下のような表示になります。
Twitter & JavaScript

最後にJavaScriptの全文。
表示方法など変えたい場合は、JavaScriptをいじるだけで簡単に変更出来ます。

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><div class="name">'+status+'</div><div class="time"><a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></div></li>');
  }
  document.getElementById('twitter').innerHTML = statusHTML.join('');
}

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);
  var dt = new Date();
  dt.setTime(dt.getTime() - (delta*1000));
  yy = dt.getYear();
  mm = dt.getMonth() + 1;
  dd = dt.getDate();
  dy = dt.getDay();
  hh = dt.getHours();
  mi = dt.getMinutes();
  ss = dt.getSeconds();
  if (yy < 2000) { yy += 1900; }
  if (mm < 10) { mm = "0" + mm; }
  if (dd < 10) { dd = "0" + dd; }
  dy = new Array("日","月","火","水","木","金","土")[dy];
  if (hh < 10) { hh = "0" + hh; }
  if (mi < 10) { mi = "0" + mi; }
  if (ss < 10) { ss = "0" + ss; }

  return yy+"/"+mm+"/"+dd+"("+dy+") "+hh+":"+mi+":"+ss;
}

私は秒表示は要らなかったので、赤字のコードは省いています。
もし表示させたい場合は、上記のように書けばOKです。

プラグインも入れすぎると重くなる(?)し、ややこしくなるし、使わずに出来る事は使わない方が良いのかも。

Tag : ,

WordPress - メディアライブラリ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/』の中に放り込めば一先ず使えます。

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

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

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

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

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

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

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

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

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

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

他にも画像を入れる時があり、先頭に持ってきた画像(class=”entry_thumb”)だけを抽出したい。
これが出来れば、検索画面や関連記事や最近の記事などでサムネ付きというのが表示できるようになります。
プラグインや他の方法もググったら出てきましたが私的にいまいち合わなく、それらを踏まえていった上でもの凄く簡単に出来ました。
リニューアル後の表示変更を考えていたので、これは覚えておかなくてはいけない方法です。

search.phpなどを開き、記事のループを行っている中に以下のコードを書きます。

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

解説
2行目 $cnt に記事内容を代入するんですが、『the_content()』だと記事が全て表示されてしまうので、必ず『get_the_content()』にする。

3行目 記事の1文字目が『<』じゃないと何も無しを返します。
6行目の else を書かないと、『Array』と表示されてしまうので注意。

4行目 PHPの『preg_match』関数で該当するタグ・クラスを書いて、$thumb に代入する。
『”/~~~/”』とダブルクォーテーション・スラッシュで囲むのが一般的らしいので、それ以外のダブルクォーテーション・スラッシュの前には¥(Macはバックスラッシュ)を記述する。

5行目 代入された $thumb[0] を echo ではき出す。

6~7行目 上記の例だと何も書いてませんが、『no image』みたいな画像を書き足してもOK。

画像の大きさを変えたかったら、<div>~~~</div>で囲ってCSSで変えた方が早いかもしれません。


取り合えず私個人用なので、別の方法(a や他のタグ)では試していませんが、応用すれば色々いけると思います。
勿論WordPress以外にも使えると思います。

Tag : , , ,

WordPress - メディアライブラリ@yoidoreoさんからの要望でやってみました。

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

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

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

・ 画像のリスト表示部にも挿入ボタンが欲しい。
・ ついでにリストに表示する数も増やしたい。
・ ついでにサムネイル画像の大きさも変えたい。
以上3つをやってみました。

結論から言うと、以下のようになります。
変更前
WordPress - メディアライブラリ

変更後
WordPress - メディアライブラリ

では変更方法です。

1画像のリスト表示部にも挿入ボタンが欲しい
詳細を表示した際にあるボタンをリスト部に持ってくるだけなので簡単なんですが、デザイン的に崩れたりしてしまうので、ちょっとだけ手を加える必要があります。
デザインなんか関係ねぇって人はいいんでしょうけど。

では、『wp-admin/includes/media.php』を開きます。
まずはボタンを設置する方法です。

media.php 1165行目~ (2.9.2の場合)
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 = '';
}

上記のコード内に、ボタンを表示するコードを付け足します。
ついでにCSSも直接書いてみました。

media.php 1165行目~ (2.9.2の場合)
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 = '';
}

青色のコードがCSSなんですが、『float:right;』を入れないと、画像タイトルの上にボタンが来てしまいます。
見栄え悪いし、使いづらいかとも思います。

私はシングルクォーテーションよりダブルクォーテーションの方が好きなので『¥”』の書き方にしています。
Windowsの人は『¥』でいけますが、Macの人はバックシュラッシュになります。
素直にシングルクォーテーション( ’ )だけでもOKです。


2ついでにリストに表示する数も増やしたい
同じ『media.php』の 2 3 箇所を変更する必要があります。

media.php 1807行目(ボタンコード未挿入時) (2.9.2の場合)
add_filter( 'post_limits', $limit_filter = create_function( '$a', "return 'LIMIT $start, 10';" ) );

追記
上記の変更だけでは、ページを送った際10個ダブった表示になるので、もう1箇所変更しなければいけません。

media.php 1801行目(ボタンコード未挿入時) (2.9.2の場合)
$_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';" ) );

media.php 1870行目(ボタンコード未挿入時) (2.9.2の場合)
'total' => ceil($wp_query->found_posts / 10),

上記の『 10 』を20や30にする事で、リストに表示される数が増えます。
同じ数にしないと表示が変になると思うので、同じにしておいた方が良いと思います。


3ついでにサムネイル画像の大きさも変えたい
リストに表示されているサムネイル画像の大きさは、CSSで変更しているらしいです。
サムネイル画像には以下のCSSが使われています。
.media-item .pinkynail {
  float: left;
  margin: 2px;
  max-width: 40px;
  max-height: 32px;
}

『max-width』と『max-height』の大きさを変更すれば良いだけです。
削除すると画像がそのままの大きさで表示されてしまうので、とんでもない事になります。
適度な大きさにしておいた方が良いと思います。(50×50 pxとか)

変更したい方は『wp-admin/wp-admin.css』を開きます。
スペースが入っていない軽量版のCSSなので、『.media-item .pinkynail』で検索すれば該当するCSSクラスが引っかかると思います。

IE版のCSSは別ファイルになります。

wp-admin/css/ie.css 414行目~ (2.9.2の場合)
* html .media-item .pinkynail {
  height: 32px;
  width: 40px;
}

上記の大きさを『wp-admin.css』と同じにしましょう。
IE使ってない人は別に変更しなくても大丈夫だと思います。

100px × 100px とかにした人は分かると思いますが、画像に『float: left;』が入っていてPHPのソース内にはクリアータグが入っていません。
なので、メチャクチャな表示になると思います。
その場合は、『media.php』の以下の箇所にクリアータグを追加します。

media.php 1209行目(ボタンコード未挿入時)~ (2.9.2の場合)
$display_title
<table class='slidetoggle describe $class'>

上記タグの間に以下のクリアータグを追加します。

media.php 1209行目(ボタンコード未挿入時)~ (2.9.2の場合)
$display_title
<div style=\"clear:both;\"></div>
<table class='slidetoggle describe $class'>


簡単に見ただけなので、何か問題があればコメントください。

【WordPress】TwitterのRSSを表示させる方法

『【WordPress】TwitterのRSSを表示させる方法』をはてなブックマーク

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

1.Twitterからのフィードは、全文表示しかない。
2.文の頭にアカウント名が入る。
3.リンクはテキストのまま。(非リンク状態)
4.日時表示が日本向きではない。

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

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

1.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
      )

6つになっているにも関わらず、被っている点が多いです。
今回は『description』と『pubdate』のみを使用します。

結果的に表示させたい箇所に書き込むコードは以下。(リスト表示にした場合)
<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>


2.文の頭にアカウント名が入る。
『$text = substr($item['description'],12);』の部分です。
substrで12文字目からの指定をし、アカウント名を表示させていません。
アカウント名によっては、この『 12 』の数値が変わります。


3.リンクはテキストのまま。(非リンク状態)
『$text = ereg_replace(“(https?|ftp)(://[[:alnum:]\+\$\;\?\.%,!#~*/:@&=_-]+)”, “<a href=\”\\1\\2\” target=\”_blank\”>\\1\\2</a>”, $text);』の部分です。
テキスト内にURLが含まれると、テキストと同じリンクURLを貼る形になっています。


4.日時表示が日本向きではない。
ただ単に表示させると『Sun, 02 May 2010 15:23:40 +0000』になってしまいます。
これを日本表示向けにするのが『date(“Y/n/j H:i”, strtotime($item['pubdate'])+32400)』の部分です。
日本はGMT+9時間なので、date表示する時に『+32400(+9:00)』にしています。
strtotimeでタイムスタンプに変換した内容を、dateで任意の表示方法に変えています。
最後にの『$text』と一緒に表示(echo)させています。

Y = 4桁の年
n = 0無しの月(1~12)
j = 0無しの日(1~31)
H = 24時間制0付き(00~23)
i = 0付きの分(00~59)
秒を表示させたい場合は
s = 0付きの秒(00~59)

私は日時を赤で表示させていますが、その場合はこちら。
echo "<span style=color:#ff0000;>" . date("Y/n/j H:i", strtotime($item['pubdate'])+32400) . "</span> " . $text;
通常は『<span style=”color:#ff0000;”>』と『 ” (ダブルクォーテーション)』を使いますが、上手く表示しなかったので省いています。(結果オーライw)


以下は参考になったサイト。
[PHP-users 20308]自動リンク
ウェブシステム開発【Lucen@Wiki】
[PHP] RSSのpubDateを時間に変える方法
そふぃのphp入門
PHPスクリプト講座:GMTの有効利用

Tag : , ,

【WordPress】iTunesのRSSを表示させる方法

『【WordPress】iTunesのRSSを表示させる方法』をはてなブックマーク

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

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

Bluesome
Exec-PHP plugin for WordPress

このプラグインを入れると、記事内だろうがページ内だろうが、どこでもPHPを書く事が出来ます。

以下はWordPressのページを使って、無料ゲームアプリ トップ10を表示させています。

米が好き
App Store 無料ゲームアプリ トップ10

説明文の開閉はjQueryを使用しています。
では、サンプルページのように表示させる方法。

まず、以下のサイトでRSSフィードを取得します。
Apple – iTunes – RSS Generator
Apple - iTunes - RSS Generator

今回は『Japan / App / 無料 app / 10 / ゲーム』で取得しています。
ページを作成し、以下のコードを書きます。
<?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; ?>

取得したRSSフィードをコピペし、表示する数を10に設定しています。
『~~~~~』の所に好きなようにデザインします。
RSSからの情報は『$item』に格納されます。
配列に入っているデータは以下のようになります。
名 称表示コード
アップデート日
<?php echo $item['updated']; ?>
ID
<?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']; ?>
1枚目のスクリーンショット
<?php echo $item['link_enclosure']; ?>
コピーライト
<?php echo $item['rights']; ?>
全文
<?php echo $item['atom_content']; ?>

注意点1
アイコンは3つのサイズがあり、『image』の中に3つ分のURLが入っています。
それをそのまま書いても表示されないので、100×100のアイコンを表示させる場合、以下のような文になります。
<img src="<?php echo substr($item['im']['image'],162,245); ?>" />
PHPのsubstrで162(161)文字目~245(244)文字目を出力するようにしています。
数値は0から始まります。

ちなみに175×175の大アイコンもあるようで、その場合はこちら。
<img src="<?php echo substr($item['im']['image'],0,69); ?>175x175-75.jpg" />

注意点2
ジャンルとカテゴリーに関してはRSS内に入っていないので、手書きする必要があります。

最後に、サンプルページの全内容です。
<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; ?>

デザイン部で改行が変になっているのは、『brBrbr』を入れている為です。

注意点3
RSSを表示しているだけなので、LinkShareは使えません。
Yahoo Pipes』を使えば出来るようですが、そこまで調べていません。

app-store.org』、『BuzzApp!』、『CatchApp』なんかはシステムでしてそうですけど、どうやってiTunesからのデータを引っ張って来ているのかを知りたい。
そうすればLinkShare貼ってゴニョゴニョ出来るのに。w

Tag : , , , ,

WordPressWordPress2.9.1を無視して、やっとこさ2.9から2.9.2にしました。
バージョンアップ自体は自動で出来て簡単なんですが、コアの部分を色々いじっているのでその変更が面倒でした。
こんな時の為にノートにも書いているんですが、やっぱり面倒なんですよね。

@yoidoreoさんも作っているように、私も備忘録作ろうかしら。

酔いどれオヤジのブログwp
WordPress バージョンアップ後にする事

今回は備忘録前に、ちょっとまとめてみました。
プラグイン関係は今回は無しです。

私はDreamweaverで編集しているんですが、元ファイルは『Shift-JIS』になっているので『UTF-8』で保存しなければいけません。


サーバー上で自動アップロード後、ファイルをダウンロードします。
wp-admin/includes/media.php
wp-includes/comment-template.php
wp-includes/media.php
wp-includes/post-template.php
wp-includes/js/quicktags.dev.js

上記ファイルの上から設定していきます。

投稿時の画像挿入設定(ポップアップ表示にして画面上に残しておく方法)
解説記事1解説記事2
『wp-admin/includes/media.php』を開き、以下の2箇所を変更。

media.php 170行目(2.9)
exit;
 ↓
#exit;

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 (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>
ちなみに表示画像も変更していますが、コア部(wp-admin/images/)にアップしてもバージョンアップ時に削除されないので、UPし直さなくて良いようです。


記事内のコメントで自分以外のターゲットを「_blank」にする
解説記事
『wp-includes/comment-template.php』を開き、以下の箇所を変更。

comment-template.php 145行目~(2.9)
if ( empty( $url ) || 'http://' == $url )
  $return = $author;
else
  $return = "<a href='$url' rel='external nofollow' class='url'>$author</a>";
return apply_filters('get_comment_author_link', $return);
 ↓
if ( empty( $url ) || 'http://' == $url )
  $return = $author;
else
  if ( $url == "http://kome-suki.net/")
    $return = "<a href='$url' rel='external nofollow' class='url'>$author</a>";
  else
    $return = "<a href='$url' rel='external nofollow' class='url' target='_blank'>$author</a>";
return apply_filters('get_comment_author_link', $return);
http://kome-suki.net/』を任意で変更。


記事投稿時の画像挿入の際、CSSのクラスを予め決めておく
自分で設定したCSSのクラスに予め設定しておく事が出来ます。(1つのみ)
『wp-includes/media.php』を開き、以下の箇所を変更。

media.php 226行目(2.9)
$html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" '.$hwstring.'class="'.$class.'" />';
 ↓
$html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" '.$hwstring.'class="pict" />';
pict』を任意で変更。


記事内の「続きを読む」のリンク設定
「続きを読む」をクリックした際、サイトの頭から表示させる方法。
『wp-includes/post-template.php』を開き、以下の箇所を変更。

post-template.php 219行目(2.9)
$output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink() . "#more-$id\" class=\"more-link\">$more_link_text</a>", $more_link_text );
 ↓
$output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink() . "\" class=\"more-link\">$more_link_text</a>", $more_link_text );
上の『#more-$id』を削除。


投稿時にリンクを貼った時のターゲット指定
クイックタグを自分好みに作成する
解説記事(リンクターゲット)解説記事(クイックタグ)
『wp-includes/js/quicktags.dev.js』を開き、以下の箇所を変更。

quicktags.dev.js 369行目(2.9)
edButtons[i].tagStart = '<a href="' + URL + '">';
 ↓
edButtons[i].tagStart = '<a href="' + URL + '" target="_blank">';
target=”_blank”』を追加。

quicktags.dev.js 33行目~(2.9)
クイックタグの追加は、自分でカスタマイズするのであればコチラを参考に。
プラグイン『AddQuicktag』もありますが、順番などは好きに出来ません。
が、複数行設定が出来るので、タグ(コード)によって使い分けると良い感じだと思います。

『quicktags.dev.js』は『quicktags.js』にリネームしてアップしなければ反映されません。

Tag :

WordPress - メディアライブラリ昨日書いた記事の続きです。

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

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

フラッシュポップアップ
アイコンWordPress - メディアライブラリWordPress - メディアライブラリ
ファイル名media-button-image_f.gifmedia-button-image_p.gif

これをアップロードし、また『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 (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 - メディアライブラリ

ついでに titlealt も変えてみました。
赤の太字で追加したコード(&flash=0)がありますが、これはポップアップ表示した際『Flashアップローダー』ではなく『ブラウザアップローダー』に最初から指定するコードです。
私はFirefoxを使っていて『dragdropupload』のアドオンを入れる事によって、テキストボックスにドラッグ&ドロップ出来るので多少の時間短縮にはなります。

『動画』『音声』『メディア』は使った事無いので無視してますと書きましたが、この方法で行えば同じような事が出来ると思います。(多分w)

WordPress - メディアライブラリ以前から各所で声があり、ちょっと調べてやってみました。

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

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

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

基本的に、画像を挿入する場合以下のような画面になります。
画像を1枚挿入する度に、この画面が消えてしまう。
WordPress - メディアライブラリ

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

結果から言うとこんな感じになります。
WordPress - メディアライブラリ

画像を挿入しても、ポップアップは残ったまま。
あらステキ。w
やり方は分かってみれば超簡単。
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>

以上のコードが、フラッシュで表示させるコードになっています。
これを残しても良いし書き換えても良しです。
以下のコードは“残す”パターンで、2種類のボタンが並ぶようにしてます。

media.php 366行目~
<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>

赤字が追加した文です。
1つずつ説明しますと、
『scrollbars=yes』スクロールを表示するようにしています。
これが no だと、下の方が見えなくなってしまいます。
『Width=650,Height=700』ポップアップ表示した時の横幅(Width)と高さ(Height)です。
横幅は600で横スクロールが出たので、コレぐらいが丁度良いかも。
高さは好みの高さ指定をどうぞ。(ピクセル単位です)
『top=0,left=0』デスクトップにポップアップを表示した時の場所を指定しています。
上(top)、下(bottom)、右(right)、左(left)で指定出来ます。(これもピクセル単位です)

ポップアップ表示した時に、表示するページ指定も出来ます。
タブで『コンピューターから』『URLから』『ギャラリー』『メディアライブラリ』と4つに分かれており、最初は『コンピューターから』になっています。
最初から別のタブで表示させたい場合は、以下のようになります。

『コンピューターから』は変更なし。
<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>

『URLから』
<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>


後は1番苦労した、ポップアップを閉じない方法。

media.php 169行目~
<?php
  exit;
}
これを
<?php
  #exit;
}

コメントアウトなり削除なりをすれば良いだけです。
こ、こ、これだけに数時間も・・・・・・。orz


当然の事ながらWordPressのバージョンアップがあった場合、毎回書き換えなければいけません。
まぁ、たったコレだけの事なのでプラグインに頼る程でもないですね。

『動画』『音声』『メディア』は使った事無いので無視してます。
では、よきWordPress生活をっ!


追記
表示アイコンを変えたい場合などは、『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2』に書きましたので、合わせてどうぞ。