正方形のサムネイルを作成することって結構よくありますよね。
そんなわけでphp-gdでそれをやるスニペットです。jpg専用にしてありますが、応用範囲は広そうです。
フリーランスのフロントエンドエンジニア、WordPress エンジニアです
カスタム投稿のパーマリンクはデフォルトだと
/カスタム投稿名/投稿タイトル
になってて、これが結構使いづらいんですよ。日本語タイトルだとURLまで日本語になってしまったり。
また、月別アーカイブとかが無かったりで色々と面倒。なので、functions.phpで色々カスタマイズします。
2011-12-28追記:プラグインにしました。今後はこちらをお使い下さい。Custom Post Type Permalinks
[php]
class set_custom_rewrite {
var $post_type;
function set_custom_rewrite($post_type){
$this->post_type = $post_type;
add_action(‘init’, array(&$this,’set_rewrite’));
add_action(‘init’, array(&$this,’add_rule’));
add_filter(‘post_type_link’, array(&$this,’set_permalink’), 1, 3);
}
//Rewrite Ruleの追加
function add_rule(){
add_rewrite_rule($this->post_type.’/([0-9]{4})/([0-9]{1,2})/([0-9]{1,2})/feed/(feed|rdf|rss|rss2|atom)/?$’,’index.php?year=$matches[1]&monthnum=$matches[2]&day=$matches[3]&feed=$matches[4]&post_type=’.$this->post_type);
add_rewrite_rule($this->post_type.’/([0-9]{4})/([0-9]{1,2})/([0-9]{1,2})/(feed|rdf|rss|rss2|atom)/?$’,’index.php?year=$matches[1]&monthnum=$matches[2]&day=$matches[3]&feed=$matches[4]&post_type=’.$this->post_type);
add_rewrite_rule($this->post_type.’/([0-9]{4})/([0-9]{1,2})/([0-9]{1,2})/page/?([0-9]{1,})/?$’,’index.php?year=$matches[1]&monthnum=$matches[2]&day=$matches[3]&paged=$matches[4]&post_type=’.$this->post_type);
add_rewrite_rule($this->post_type.’/([0-9]{4})/([0-9]{1,2})/([0-9]{1,2})/?$’,’index.php?year=$matches[1]&monthnum=$matches[2]&day=$matches[3]&post_type=’.$this->post_type);
add_rewrite_rule($this->post_type.’/([0-9]{4})/([0-9]{1,2})/feed/(feed|rdf|rss|rss2|atom)/?$’,’index.php?year=$matches[1]&monthnum=$matches[2]&feed=$matches[3]&post_type=’.$this->post_type);
add_rewrite_rule($this->post_type.’/([0-9]{4})/([0-9]{1,2})/(feed|rdf|rss|rss2|atom)/?$’,’index.php?year=$matches[1]&monthnum=$matches[2]&feed=$matches[3]&post_type=’.$this->post_type);
add_rewrite_rule($this->post_type.’/([0-9]{4})/([0-9]{1,2})/page/?([0-9]{1,})/?$’,’index.php?year=$matches[1]&monthnum=$matches[2]&paged=$matches[3]&post_type=’.$this->post_type);
add_rewrite_rule($this->post_type.’/([0-9]{4})/([0-9]{1,2})/?$’,’index.php?year=$matches[1]&monthnum=$matches[2]&post_type=’.$this->post_type);
add_rewrite_rule($this->post_type.’/([0-9]{4})/feed/(feed|rdf|rss|rss2|atom)/?$’,’index.php?year=$matches[1]&feed=$matches[2]&post_type=’.$this->post_type);
add_rewrite_rule($this->post_type.’/([0-9]{4})/(feed|rdf|rss|rss2|atom)/?$’,’index.php?year=$matches[1]&feed=$matches[2]&post_type=’.$this->post_type);
add_rewrite_rule($this->post_type.’/([0-9]{4})/page/?([0-9]{1,})/?$’,’index.php?year=$matches[1]&paged=$matches[2]&post_type=’.$this->post_type);
add_rewrite_rule($this->post_type.’/([0-9]{4})/?$’,’index.php?year=$matches[1]&post_type=’.$this->post_type);
}
function set_rewrite() {
global $wp_rewrite;
$queryarg = ‘post_type=’.$this->post_type.’&p=’;
$wp_rewrite->add_rewrite_tag(‘%’.$this->post_type.’_id%’, ‘([^/]+)’,$queryarg);
$wp_rewrite->add_permastruct($this->post_type, ‘/’.$this->post_type.’/%year%/%monthnum%/%day%/%’.$this->post_type.’_id%/’, false);
}
function set_permalink($post_link, $id = 0) {
global $wp_rewrite;
$post = &get_post($id);
if ( is_wp_error( $post ) )
return $post;
$newlink = $wp_rewrite->get_extra_permastruct($this->post_type);
$newlink = str_replace("%".$this->post_type."%", $post->post_type, $newlink);
$newlink = str_replace("%".$this->post_type."_id%", $post->ID, $newlink);
$post_date = strtotime($post->post_date);
$post_year = date("Y",$post_date);
$post_monthnum = date("m",$post_date);
$post_day = date("d",$post_date);
$newlink = str_replace("%year%",$post_year, $newlink);
$newlink = str_replace("%monthnum%",$post_monthnum, $newlink);
$newlink = str_replace("%day%",$post_day, $newlink);
$newlink = home_url(user_trailingslashit($newlink));
return $newlink;
}
}
$set_blog_permalink = new set_custom_rewrite("カスタム投稿名");
[/php]
こいつをfunctions.phpに書くと、
/カスタム投稿名/年/月/日/投稿id
に個別記事のURLが変更されます。
また、add_ruleのところで
カスタム投稿の月別アーカイブなどのURLを追加しています。これで
/カスタム投稿名/年/月
などで、月別アーカイブ等が表示されるようになります。
ついでに
http://ja.forums.wordpress.org/topic/6080
を参考に
[php]
global $my_archives_post_type;
add_filter( ‘getarchives_where’, ‘my_getarchives_where’, 10, 2 );
function my_getarchives_where( $where, $r ) {
global $my_archives_post_type;
if ( isset($r[‘post_type’]) ) {
$my_archives_post_type = $r[‘post_type’];
$where = str_replace( ‘\’post\”, ‘\” . $r[‘post_type’] . ‘\”, $where );
} else {
$my_archives_post_type = ”;
}
return $where;
}
add_filter( ‘get_archives_link’, ‘my_get_archives_link’ );
function my_get_archives_link( $link_html ) {
global $my_archives_post_type;
if ( ” != $my_archives_post_type )
$my_archives_post_type;
$blog_url = get_bloginfo("url");
$link_html = str_replace($blog_url,$blog_url.’/’.$my_archives_post_type,$link_html);
return $link_html;
}
[/php]
を記述しておくと、
[php]
wp_get_archives(‘type=monthly&post_type=カスタム投稿名’);
[/php]
でカスタム投稿の月別アーカイブ一覧が表示されます。
ここまでするならDrupalとかで作った方が楽なんじゃないかとかは言わない約束です。
参考
http://ja.forums.wordpress.org/topic/6080
http://www.phpfreaks.com/forums/index.php?PHPSESSID=ad52a9sjjre4bh7fue8uf5c4g4&topic=328834.0
サイトの高速化を図るためにGoogleにホスティングされているjqueryを使いたいとき、WordPressのデフォルトのjQueryが邪魔で仕方ないことが結構ありまして。。。
そんな時functions.phpで少しのコードを書くだけでどうにでもなります。
[php]
//Replace jQuery
function rep_jQuery(){
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_enqueue_script(‘jquery’,’http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js’);
wp_deregister_script(‘jquery-ui-core’);
wp_enqueue_script(‘jquery-ui-core’,’http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js’);
}
}
add_action(‘init’,’rep_jQuery’);
[/php]
管理画面でも使いたい場合はif文を外してもらえば全てに適応されます。
この例だと、jquery1.5系と、jQuery UIの1.8系の最新版が読み込まれます。
その他細かい仕様等はGoogleさんに聞いてみてください、
http://code.google.com/apis/libraries/devguide.html
メールフォームって自分で作ろうとすると結構面倒なので、クラスとか無いかなぁ、と思ったらJPHPMailerというものを見つけたので、導入レポートです。
bassistance.de » jQuery plugin: Validation
とかjQueryでフォームの入力チェックのプラグインは高機能なものがあるのですが、勉強ついでに作ってみました。
素敵なブログって、記事の最初にアイキャッチャーの画像があったりするんですよね。
というわけで、投稿サムネイルを活用して、それをやってみたい。。。
しかし、デフォルトだと、150×150の画像になってしまう。。。
自分が使いたいのは、横長の画像なんです。
って困っていたら、こんな関数発見。
[php]
set_post_thumbnail_size(WIDTH,HEIGHT, true );
[/php]
をfunctions.phpに書いておくと、投稿サムネイルの画像のサイズのデフォルトがここで指定された値になって、このサイズの画像がアップロード時に作成されるようです。
追記
また、set_post_thumbnail_sizeで指定したサイズの投稿サムネイルは
[php]
the_thumbnail(‘post-thumbnail’);
[/php]
で表示することができます。
これでまたアルファブロガーに一歩近づきましたね!
ActionScript3で逆再生するためのscriptです。
setIntervalで20msごとに1フレーム戻って止まるを繰り返すだけの簡単なお仕事です。
このサンプルだと第1フレームまで戻ります。
clearIntervalを忘れるとデスパラソルだったりブラクラだったりいろいろまずいことになるので注意。
速度はfpsとか重さとかの兼ね合いで要調整。20msは若干早い気がします。
[as3]
function myEvent(e:MouseEvent):void{
var targetMc:MovieClip = e.currentTarget as MovieClip;
var timer= setInterval(backPlay, 20);
function backPlay(){
if(targetMc.currentFrame > 1){
targetMc.prevFrame();
}else{
clearInterval(timer);
}
};
}
[/as3]
jQuery hashchange eventを使ったWordPressテーマを作成してみました。
デモサイトはコチラ
一応HashLogなんていうそのまんまな名前です。
Ver0.1というアルファバージョンです。一応CSS周りはIE7までOKのはずです。
WordPress3以上対応です。
制作の元ネタにでもして頂けたらと思います。
ダウンロードはこちらからどうぞ。
hashlog
これだけではちょっとあれなのでJS周りのソースを張っておきます。
[php]
<script type="text/javascript" src="<?php bloginfo( ‘stylesheet_directory’ ); ?>/js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="<?php bloginfo( ‘stylesheet_directory’ ); ?>/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
var blogUrl = "<?php bloginfo( ‘url’ ); ?>";
</script>
<script type="text/javascript">
//ハッシュ付にリダイレクトさせる。
if ( location.href != blogUrl+"/") {
var index = location.href.indexOf(blogUrl+"/#",0);
if(index < 0){
var goHash = location.href.replace(blogUrl, ”);
location.href =blogUrl+ ‘#’ + goHash;
}
}
jQuery(function($){
//hrefをハッシュ付に変更
function changeHref(){
$("#contentsArea a,#siteId a,#widgetArea a").each(function(){
var setHref = $(this).attr("href").replace(blogUrl, ‘#’);
if(setHref.match(/^\//)){
setHref = "#"+setHref;
}
$(this).attr({href:setHref});
});
}
changeHref();
//Ajaxで変更する部分
var contentsArea = $("#contentsArea");
contentsArea.css({height:0,opacity:0,marginBottom:0});
var nowHash = "";
$(window).hashchange(function() {
var setHash = location.hash.replace(‘#’, ”);
//for Front Page
if(!setHash){
setHash = "/?p=0";
}
//ページ内リンク(コメントの返信は除く)
if(setHash.indexOf("#",0)>-1 && setHash.indexOf("respond",0)<0){
var sel = setHash.match(/(#.+)$/);
var target = $(sel[1]).offset().top;
$(‘html,body’).delay(100).animate({ scrollTop: target }, 200,"easeOutQuart");
}else{
//コンテンツの削除
contentsArea.animate({height:0,opacity:0,marginBottom:0},200,function(){
//ロード
$(this).hide().load(setHash+" #contents",function(){
//表示
$(this).delay(200).show().animate({height:$(this).find("#contents").height(),opacity:"1",marginBottom:"36px"},200,"easeOutQuart",function(){
changeHref();
//コメントの返信だった場合の処理
if(setHash.indexOf("respond",0)>-1){
var respondOffset = $("#respond").offset().top;
$(‘html,body’).delay(100).animate({ scrollTop: respondOffset }, 200,"easeOutQuart");
}
});
});
});
}
nowHash = setHash;
});
//検索フォーム
$("form").submit(function(){
var s = $("#s").val();
location.href = ‘/#/?s=’+s;
return false;
});
$(window).hashchange();
});
</script>
[/php]
という感じでWordPressとの連携をとっています。トップページの記事はパラメーターにp=0を入れて表示しています。page_idやp等に存在しない値を放り込むとトップページの内容を表示することを利用しています。
空白だといまいちうまくいきませんでしたので、こんなおかしなことをやっています。
indexOfとmatchとか色々混在していて見づらいソースですが、そこはご愛敬ということで、ご勘弁下さい。徐々に直していこうと思いますので。
そういえば結構前の話ですが、Googleが検索順位に表示速度を反映するという発表がありました。
またAmazonでは0.1秒表示速度が遅くなると1%売り上げが減るとか。
そんな中、WordPressはSEO的には優れているのですが、毎回動的生成を行うために、表示速度の面で他のCMSと比較するとやや、遅いと言われています。
そんなわけで今回はWordPressで作ったサイトを高速化することについて。
CSS2.1で定義された疑似要素、:before,:after。
しかし以外に使い方を知らないって人が多いはず。
clearfixとかで色々お世話になっているはずのbefore,afterの使い方を改めてまとめて行ければと思います。
WordPress屋のDrupal入門その2です。
今回はモジュールについて書いていこうと思います。
特に今回の案件でお世話になったモジュールを中心にWordPress語に翻訳して行けたら良いなと思って書きます。