米が好き

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

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

ベースのCSSクラス。（奇数列）

ol.commentlist li.comment {
}

偶数列のCSSクラス。

ol.commentlist li.thread-odd {
}

管理人（投稿者？）のCSSクラス。

ol.commentlist li.bypostauthor {
}

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

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

Twitterでリンクを貼られた場合、その数を表示させてくれるWEBサービスです。
今では設置しているブログも多くなっています。

以前にも記事を書いたんですが、今まではJavaScriptで表示させていました。
しかしJavaScriptで書くと、ブログの表示速度が遅くなる事に今更ながら気付きました。

直接JavaScriptを書く場合だと、1記事1記事Topsyの数を読み込むようでブログが完全に表示されるまで時間が掛かります。
それをプラグインに変えたら、ブログを一旦全部読み込んでからTopsyを読んでいるようです。
サイドが表示されなくてイライラしていたのが、これでちょっとは緩和されました。

後の問題として、プラグインだと <div class=”entry”>～～～</div>の中に勝手に入ってしまうんですが、それ以外の場所にも以下のコードで表示させる事が出来るようです。

大きい画像の場合。

<?php topsy_retweet_big(); ?>

今現在私が置いている場所は<div class=”entry”>の外なので、これでちょっとは自分好みになりました。

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

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

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


どちらも一長一短。
公式の方は時間や曜日表記が公式サイトと同じ。
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;
}

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


最後に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です。

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

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』を見ると少々ややこしく・・・と言うか前よりは簡単になっているんでしょうが、以前のやり方では上手くいきません。

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

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

何故か管理画面上の『WordPress 開発ブログ』にはアナウンスされてなかったんですが、アップデートボタンを押してみると日本語版へのアップデートが可能状態になっていました。

これは是非ともしなければ！

って事で、早速3.0にアップグレードしました。

管理画面の『WordPress 開発ブログ』


アップグレード画面


アップグレード完了画面


アップデートする前に、データベースとファイルのバックアップを全て済ませる。
そして拍子抜けするぐらい簡単にアップグレード完了。
プラグインは、サイドに表示させているトラックバック部だけがエラー表示されてしまってます。
それ以外は概ね良好かな。（全部は未確認）

投稿画面の『Simple Tags』のClick tagsが、ID順じゃなく『記号・数字・英字・かな・カナ・漢字』順にデフォルトでなっているのは何気に嬉しい。


私はコアの部分をかなり触っているので、これからまた色々変更していかなければいけません。
前までに書いていた方法と違っている箇所があったら、また記事にしたいと思います。

現在リニューアル作業真っ只中なので、完成するまでサイドのトラックバックはコメントアウトしておきます。
水面下で色々動いているリニューアル計画。
乞うご期待。

コメント部で自分（Author）のバックカラーとテキストカラーのみを変更出来るプラグインです。
名前の通り凄くシンプルですけど、以外と使える奴なのかもしれません。

以下のページからダウンロードして、解凍して、アップロードするだけです。

管理画面で使用するを選択した後、左サイドメニューの設定の所に『SAH Settings』が表示されているのでクリック。
すると、以下の画面が表示されます。


上がバックカラー、下がテキストカラーです。
16進数（例：#b6bdf6、#ffffff、#ccc、#fff）で入力して『変更を保存』をクリックすればOK。
自分のコメントではなく、厳密にはその記事を書いた人のコメントになります。

ちょっと気になって調べたら案外簡単に出来たので、備忘録として書いておこうと思います。
今回行ったのは、特定のクラス（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以外にも使えると思います。

普段はRCには手を出さず正式版を待つ派ですが、ローカル上でならちょっと見てみようかなーとダウンロードしてみました。
3.0 になったらリニューアルしようとコツコツ作成している段階ですが、細かい仕様の変更などがあった場合また手直ししなくてはいけません。
まぁ、そういう細かい作業は結構好きだったりしますが。

以下は簡単に触ってみて気づいた点。
正式版では直ってるかもしれませんし、あくまでも現段階での事です。

シングルページが開かない。
パーマリンクを変更している場合、もう一度管理画面上で変更を保存し直さなくてはいけないようです。
画面上の見た目はちゃんとなっていても、再保存が必要でした。

管理画面の色が少しだけ変わった。
見てすぐ分かる点は、『ヘッダー部』の色と『現在の状況』の箇所でしょうか。
それ以外はそんなに変わった様子はありません。

WordPress 2.9.2


WordPress 3.0 RC2


新規投稿画面。
タイトル入力部に『タイトルを入力してください』の文字がありました。
良く見ると、ボタンアイコンの形も微妙に変わっています。


テーマ内の『index.php』の仕様が変わった。
新デフォルトテーマ『Twenty_Ten』の中の index.php の中身ですが、今までと違い超簡略化されています。

themes/twentyten/index.php

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query. 
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
 
<?php get_header(); ?>

    <div id="container">
      <div id="content" role="main">

      <?php
      /* Run the loop to output the posts.
       * If you want to overload this in a child theme then include a file
       * called loop-index.php and that will be used instead.
       */
       get_template_part( 'loop', 'index' );
      ?>
      </div><!-- #content -->
    </div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

これはリニューアルするだけでも一苦労か！？
シングルページ（single.php）なども少しだけ見ましたが、CSSのクラス等が少し変わっていました。
新仕様の変数なども追加されているかもしれませんね。

新しい変数などは、以下のサイトで色々見れるようです。

新デフォルトテーマ、『Twenty Ten』。
ローカルで見てみましたが、やっぱりデザインは自分で変えた方が良いと思いました。


何はともあれ、正式版が非常に楽しみです。

WordPressなどのTipsを書く時、よくコードを記事内に表示させたりするんですけど、そのコードを簡単・綺麗に表示させるプラグインがありました。

行番号も表示されるし1行毎のハイライトも出来る優れもの。
優れものなんですけど、いまいち私的に合わないので使うのを止めました。

『＆lt;』や『＆gt;』を使わずとも『＜』や『＞』をそのまま表示してくれる点は楽なんですが、これではコード内にタグが使えません。
行毎のハイライトだけでなく、行の中の1部分だけ色を変えたりが出来ない。
これが決定的な私的に合わない点。
コードが綺麗に色つき等で表示される点や、行番号が表示される点は良いんですが。

あと、コピペした時に行番号もコピーされるのは嫌な点。
クリップボードにコピーする機能も付いてはいるんですが、只何となく。

これに似てて、コード内にタグが使えるプラグインないですかね。