JavaScriptで自動的に最終更新日をいれる

16Dの更新を自動化したいなと思い、ファイルの更新日を記載する形に変更しました。
初歩的なものになりますが、今後のためにメモ。

<script type="text/javascript">
	var date = new Date(document.lastModified);
	var y = date.getFullYear();
	var m = date.getMonth() + 1;
	var d = date.getDate();
	
	document.write('Last Update:' + y + '/' + m + '/' + d);
</script>

WordPressにアバターアイコンを表示する

サイドバーにTwitterのアイコンを表示したい!と調べていましたが、
GET users/profile_image/:screen_name | Twitter Developers
画像のソースURLとしては使えないようなので、
今回はGravatarのアイコンを表示する方法を試してみました。

公式:Gravatar

導入時のバージョン:Wordpress 3.3.2

自分のGravatarのアイコンを表示する

参考:Gravatar の使い方 – WordPress Codex 日本語版

sidebar.php

<?php echo get_avatar(get_the_author_meta('user_email'),48) ?>

コメント欄にGravatarのアイコンを表示する

comments.php

オリジナルテーマにした際に削除してしまったコメント欄のアイコン設定。

<?php echo get_avatar( $comment, 48 ); ?>

コメント周りはあまりテンプレート設定できていないので、
もう少し変更していきたいと思います

追記:管理画面のXML-RPCにチェック入れておくこと!

書いたつもりが忘れていました…

WordPressで自動挿入されるタグを削除する

これまで記事内のタグ気にしてなかったのですが、
空タグや謎の空白スペースが生まれてしまっていたので、
思い切って全記事ソース見なおしてみました。

ほとんどコピペになってしまいますので、自分のメモもかねてまとめておきます。

導入時のバージョン:Wordpress 3.3.2

<p><br>の自動挿入を削除する

便利機能?「投稿の編集」画面での自動挿入をなくしてしまう。
参考:wordpress 投稿記事に自動で付いてしまうpタグを削除する方法 | WEBデザイナーのしおり

single.php

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

画像挿入時に自動挿入されるリンクタグ・属性を削除する

サンプル画像はローカルで試した時のものですが、こんな感じでスッキリします!
参考:画像を投稿に挿入するタグをカスタマイズ | データベースに接続できません

functon.php

function my_remove_img_attr($html, $id, $alt, $title, $align, $size){

	$html = preg_replace('/ width=&quot;d+&quot;/', '', $html);
	$html = preg_replace('/ height=&quot;d+&quot;/', '', $html);
	$html = preg_replace('/ class=&quot;.+&quot;/', '', $html);
	$html = preg_replace('/ title=&quot;.+&quot;/', '', $html);

return $html;
}

add_action( 'get_image_tag', 'my_remove_img_attr', 1 ,6);

ほんとは画像タグは閉じタグの”/”も削除してしまいたいのですが…
もう少し調べてみないと :(
(本番では手動で<div>追加と閉じタグの削除をおこなっています)

補足:WordPressの隠しオプション画面

「options.php」を入力すると見ることができるオプション画面。
こちらもあわせて設定しておくとよさそうです :D
参考:WordPressで画像投稿時に自動で入るリンクを取る方法 | WEB DESIGN (B)LOG

プラグインなしでWordPressに関連記事を表示する

月イチ更新なこのブログもようやく掲載10件超えてきたので、導入することにしました :)
私の好きなプラグインを使わず!の方法です。
導入時のバージョン:Wordpress 3.3.2

参考:WordPressスニペット – かちびと.net
参考:プラグインを使わずWordPressに9の機能をつける | Webクリエイターボックス

変更したところ

  • 記事が少ないため(!)、関連する記事がない場合がある。(→その場合は関連記事のボックスごと非表示)
  • アイキャッチ画像表示したい。(LinkWithinっぽく!)

single.php

<?php
$tags = wp_get_post_tags($post->ID);
    if ($tags) {
        $first_tag = $tags[0]->term_id;
        $args=array(
            'tag__in' => array($first_tag),
            'post__not_in' => array($post->ID),
            'showposts'=>4,
            'caller_get_posts'=>1
        );
        $my_query = new WP_Query($args);
        if( $my_query->have_posts() ) {
            echo '<div id="related"><h3>Related article</h3><ul>';
            while ($my_query->have_posts()) : $my_query->the_post(); ?>
                <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?><?php the_title(); ?></a></li>
            <?php endwhile;
            echo '</ul></div>';
        }
    } 
?>

function.php

<?php
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( true );
?>

関連記事表示

関連記事

今回でWordpressにいろいろスニペットあることがわかったので、
ブログにもどんどん導入していこうと思います! :D

dlをtableっぽく段組レイアウトにする

dltable

テーブル以外で段組みにするのどうやるのーって聞かれたので、考えてみました。

その1:dt,ddに横幅指定float

dt,dd共にfloat指定する方法。
対象ブラウザ:IE6(IETester),IE7,IE8,FF5,Chorme12,Safari5

その2:dtにfloat,ddにmarginでdt分の横幅指定

ググるとよく出てくる手法。一般的にこれが多いんでしょうかね。
対象ブラウザ:IE6(IETester),IE7,IE8,FF5,Chorme12,Safari5

その3:table-cell!

これいけるかと思ったのですが、
今回みたいに多段だと難しそうでした:(
float以外のやり方ができそうなら追記してみます。