WEBプログラム覚書

[WordPress] get_header()とwp_head()を捨てる。

2012-02-14T19:19:27Z

捨てることで何かメリットがあるかと言うと残念ながら特にありませんので、この内容をオススメしてるわけではありません。

]]> 僕はWordPressらしさ?を求められる場合は別ですが、個人的に利用する場合はget_header()、wp_head()は使いません。理由としてはフロントに干渉しすぎでウザいのとプラグインに頼らず生きていく術を身につけるためです。

といってもwp_head()は公開サイト用の関数なので標準的なサイト制作の能力がある人であれば、ほとんど困ることはないんじゃないでしょうか。

というわけでget_header()とwp_head()は捨ててCakePHPのエレメントっぽくしてみます。

header.phpとfooter.php

header.phpとfooter.phpはこんな感じにしておきます。

header.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>php echo isset($title) ? $title . ' < ': ''; ?>WordPress3.3.1日本語版title>
<link rel="stylesheet" type="text/css" media="all" href="http://331.wordpress.com/wp-content/themes/default/style.css" />
php
if (isset($page_css)) {
printf('<link rel="stylesheet" type="text/css" media="all" href="http://331.wordpress.com/wp-content/themes/default/%s.css" />' . PHP_EOL, $page_css);
}
?>
<link rel="pingback" href="" />
php do_action('my_wp_head'); ?>
head>
<body>

do_action('my_wp_head')は保険で付けてるだけなので無くてもいいです。

footer.php

body>
html>

functions.php

でfunctions.phpにはget_header()の代わりに使うWP_MyUtil::load()を定義しときます。

functions.php

class WP_MyUtil
{
/**
* ファイルの場所。基本的にTEMPLATEPATH
* @var string
*/
private $include_path = '';
public function __construct()
{
$this->include_path = dirname(__FILE__);
}
/**
* ファイル読み込み用のメソッド
*
* @param string $type elements
* @param string $filename filename
* @return string
*/
public function load($type, $filename, $vars = array())
{
switch ($type) {
case 'elements':
return $this->loadElements($filename, $vars);
break;
}
}
/**
* PHPファイルの読み込み結果を返す。
*
* @param string $filename 読み込むファイル名
* @param array_type $vars 読み込むファイルで利用する変数
* @throws Exception
* @return string
*/
private function loadElements($filename, $vars = array())
{
$path_to_file = $this->include_path . DIRECTORY_SEPARATOR . $filename;
if (file_exists($path_to_file) && is_readable($path_to_file)) {
ob_start();
extract($vars);
require_once $path_to_file;
return ob_get_clean();
} else {
throw new Exception($path_to_file . 'が存在しないか読み込めません。');
}
}
}
class CallBacks
{
public static function my_wp_head()
{
// 本当に必要なものだけフックする。
// とりあえずエディタだけ表示してみる。
//add_action( 'my_wp_head', 'wp_enqueue_scripts', 1 );
//add_action( 'my_wp_head', 'feed_links', 2 );
//add_action( 'my_wp_head', 'feed_links_extra', 3 );
//add_action( 'my_wp_head', 'rsd_link' );
//add_action( 'my_wp_head', 'wlwmanifest_link' );
//add_action( 'my_wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
//add_action( 'my_wp_head', 'locale_stylesheet' );
//add_action( 'my_wp_head', 'noindex', 1 );
//add_action( 'my_wp_head', 'wp_print_styles', 8 );
//add_action( 'my_wp_head', 'wp_print_head_scripts', 9 );
add_action( 'my_wp_head', 'wp_generator' );
//add_action( 'my_wp_head', 'rel_canonical' );
//add_action( 'my_wp_head', 'wp_shortlink_wp_head', 10, 0 );
}
}
$wmu = new WP_MyUtil();
add_action('my_wp_head', CallBacks::my_wp_head());
?>

home.php

でhome.php。load()の第3引数で設定している連想配列のキーは、呼び出すファイル内で変数名として利用できます。

home.php

php
echo $wmu->load('elements', 'header.php', array(
'title' => 'HOME',
'page_css' => 'home'
));
?>
test
php
echo $wmu->load('elements', 'footer.php');
?>

でもってホームにアクセスすると出力はこうなります。

home.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HOME < WordPress3.3.1日本語版title>
<link rel="stylesheet" type="text/css" media="all" href="http://331.wordpress.com/wp-content/themes/default/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://331.wordpress.com/wp-content/themes/default/home.css" />
<link rel="pingback" href="http://331.wordpress.com/xmlrpc.php" />
<meta name="generator" content="WordPress 3.3.1" />
head>
<body>
test
body>
html>

get_header()を利用するときと何が違うかというと、タイトルやロードするCSSをheader.phpで決定するのではなくhome.phpで決めてるという点です。

投稿ページでkeywordとdescriptionを表示したい場合

header.phpに下記を追記します。

header.php

if (isset($keyword)) {
printf('', $keyword);
}
if (isset($desc)) {
printf('', $desc);
}
?>

single.phpでのheader.phpの呼び出しを下記のように記述します。

single.php

// カスタムフィールド
$_fields = get_post_custom((int) $post->ID);
echo $wmu->load('elements', 'header.php', array(
'title' => $post->post_title,
'page_css' => 'single',
'keywords' => $_fields['keyword'],
'desc' => $_fields['desc']
));
?>

で、投稿時にカスタムフィールドでkeywordとdescを設定すればOK。

これをちょっと応用すると特定の投稿でcssやjavascriptをロードすることも可能です。

テンプレートからheader.phpに変数を送ることでどういうことができるか見えますでしょうか。できることに違いはないんですが、面倒だったことが意外とあっさりすっきりできる気がしません？

捨てることで得られるもの失われるもの。

得られるもの。

add_action()してremove_action()とか、excelを立ち上げては消す暇な上司みたいな無駄なことをしなくてよくなる。
is_home()、is_single()とかの条件分岐やら関数やらでアクセスしないとheader.phpの出力がわからないとかがなくなる。

失われるもの。

WordPressらしさ。フックしてなんぼのWordPressのなかでも重要なwp_head()を外す行為は他人にしたらいい迷惑。なので仕事では使えません。
便利なプラグインが使えない場合がある。

ちなみにheader.phpとfooter.phpは自分のテーマ以外からも呼ばれることがあるのでそのことは意識した方がよいです。デフォルト値を設定しておくとか。

この先。

やらなくてもわかりますが、これはそれほどいいものではありませんw

なのでもっと良くしようと進めていくと、やっぱり僕の大好きなビューとレイアウトを分けるに行きつきます。誰かにプログラムをやって良かったことは？と聞かれたら、真っ先にビューとレイアウトを分ける方法を覚えられたことですと答えると思います。エンジニアのみなさん頭良すぎです。

ウェブ制作に携わる人は絶対覚えたほうがいいとおもってます。 CakePHP 2系も出たことだし、まだ触れたことない方はCakePHPに触れてみるいいチャンスだとおもいます。

そして2系の情報をブログに書いてもらえると僕はうれしい。

PHPによるWordPressカスタマイズブック―3.x対応

作者:藤本壱 | 価格:￥ 2,940

[jQuery]closest()とparents()

2012-02-03T04:57:24Z

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が似てたので何が違うのか試した時のメモです。

]]> closest()とparents()

closest([expr])は選択されたDOM要素の親要素で一番最初に[expr]にマッチした要素を取得します。

サンプル

実行結果

$().closest()は便利だよ。

Javascript

$('.jqTest span').closest('p').css('border', '3px solid #555555');

HTML

<div class="jqTest">
<div>
<p><span>$().closest()は便利だよ。span>p>
div>
div>

これは下記と同じ結果になりますです。

javascript

$('.jqTest span').parents('p').first().css('border', '3px solid #555555');

closest()ができること

closest()の場合、選択したDOM要素も検索対象となります。

サンプル

実行結果

$().closest()は便利だよ。

Javascript

// 要素が見つかればボーダーが付く
$('.jqTest2 .target').closest('.target').css('border', '3px solid #555555');
// 要素が見つかれば背景が付く
$('.jqTest2 .target').parents('.target').first().css('background', '#CCCCCC');

HTML

<div class="jqTest2">
<div>
<p><span class="target">$().closest()は便利だよ。span>p>
div>
div>

parents()ができること

closest()は最初のDOM要素だけですが、parents([expr])は[expr]にマッチする親要素全て取得します。

サンプル

実行結果

closest()

parents()

Javascript

$('.jqTest3 p').each(function(i){
if ($(this).data('func') === 'closest') {
$(this).closest('div.wrap').css({ border: '3px solid #555555',
padding: 10});
} else if ($(this).data('func') === 'parents') {
$(this).parents('.wrap').css({ border: '3px solid #555555',
padding: 10});
}
});

HTML

<div class="jqTest3">
<div class="wrap">
<div class="wrap">
<div class="wrap">
<p data-func="closest">closest()p>
div>
div>
div>
<hr />
<div class="wrap">
<div class="wrap">
<div class="wrap">
<p data-func="parents">parents()p>
div>
div>
div>
div>

パフォーマンスはclosest()の方がよさそうですね。

参照ページ

jQuery Parents vs Closest · jsPerf

jQuery Mobile

作者:Jon Reid | 価格:￥ 1,995

参照ページ

.closest()

[jQuery Mobile]初期化イベントメモ

2012-02-01T03:18:00Z

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

]]> mobileinit

jQuery Mobileがロードされた時に真っ先に発生するイベント。jQuery Mobileを読み込む前に記述しておくか読み込む。主にjQuery Mobileの各種設定を変更したりする場所。

jQuery.ready()よりも前なのでDOMの操作はおこなえないっぽい。

javascript

$(document).live('mobileinit',function(event){
$('.test ul').attr('data-role', 'listview');
});

HTML

<div class="test" data-role="page">
<ul>
<li><a href="#">りすと1a>li>
<li><a href="#">りすと2a>li>
<li><a href="#">りすと3a>li>
ul>
div>

実行結果

このイベントと次のpagebeforecreateの間にjQuery Mobileは何をやっているのだろうか・・・。

pagebeforecreate

DOMの拡張前に発生するイベント。動的にdata属性を与えたい場合などここに記述する。このイベントが完了した時点でのHTMLマークアップに基づいてjQeury Mobileがclassつけたり要素をラップしたりすると思われる。

javascript

$(document).live('pagebeforecreate',function(event){
$('.test ul').attr('data-role', 'listview');
});

HTML

<div class="test" data-role="page">
<ul>
<li><a href="#">りすと1a>li>
<li><a href="#">りすと2a>li>
<li><a href="#">りすと3a>li>
ul>
div>

実行結果

pagecreate

jQuery Mobileによるマークアップの拡張、ウィジェット化完了後に発生するイベント？

ベータ2より前は、jQuery Mobileにより拡張された後のページやウィジェットのマークアップを操作したい場合は pagecreate イベントにバインドすることが推奨されていました。しかしベータ2で内部的に大きな変更があり、各ウィジェットの初期化がが pagecreate イベントでバインディングされることで分離されました。jQuery UI ウィジェットファクトリーのライフサイクルに準拠すれば、初期化メソッドは create メソッドの後に呼ばれるべきです。そのため、拡張が行われたDOMやJavaScriptオブジェクトを操作するには pageinit イベントが最適なタイミングです。端的に言えば、以前 pagecreate を使ってページ表示前に拡張されたマークアップを操作していたならば、ほとんどの場合は pageinit に移してしまうべきです。

pageCreate() vs pageinit()

たぶんあんまり使わなそう。とりあえずこの時点でdata属性を与えてもスタイルは反映されない。

javascript

$(document).bind('pagecreate',function(event){
$('.bt1').attr('data-role', 'button');
$('.bt2').button({inline: true, icon: 'plus'});
});

HTML

<div data-role="page">
<a href="#" class="bt1">ボタン1a>
<a href="#" class="bt2">ボタン2a>
div>

実行結果

ただ.live()を利用すると効果あり。

javascript

$(':jqmData(role="page")').live('pagecreate',function(event){
$('.bt1').attr('data-role', 'button');
$('.bt2').button({inline: true, icon: 'plus'});
});

HTML

<div data-role="page">
<a href="#" class="bt1">ボタン1a>
<a href="#" class="bt2">ボタン2a>
div>

実行結果

pageinit

jQuery Mobileにおける$(document).ready()。このイベントが発生したときjQuery Mobileは初期化の仕事は終えているはず。

ajaxで要素を追加した場合、スタイルが反映される。

javascript

$('#StartPage').live('pageinit',function(event){
$("#ListPage").load("/codes/jqm/uldata.php ul");
});

HTML

<div data-role="page" id="StartPage">
<a href="#ListPage">移動a>
div>
<div data-role="page" id="ListPage">
div>

実行結果

けどjavascriptでdata属性を追加した場合、スタイルは反映されない。

javascript

$('#ListPage').live('pageinit',function(event){
$("#ListPage ul").attr('data-role', 'listview');
});

HTML

<div data-role="page" id="StartPage">
<a href="#ListPage">移動a>
div>
<div data-role="page" id="ListPage">
<ul>
<li><a href="#">りすと1a>li>
<li><a href="#">りすと2a>li>
<li><a href="#">りすと3a>li>
ul>
div>

実行結果

なんか混乱してきた。

とりあえずそれぞれのイベント発生時にDOMがどんな状態になっているのか(いつマークアップの拡張が終わって、いつウィジェット化されてんのか)がわかっていないということがわかった。

HTML5＋CSS3で作る魅せるiPhoneサイト iPhone/iPad/iPod touch対応

作者:谷拓樹 | 価格:￥ 2,310

参照ページ

[WordPress]管理画面のフッタのフィルタとアクション。

2012-01-31T18:54:12Z

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

]]> フッタ部分はwp-admin/admin-footer.phpに書かれています。見にくいだけで特に難しいところはありませんね。

wp-admin/admin-footer.php

php do_action( 'in_admin_footer' ); ?>
<p id="footer-left" class="alignleft">php
$upgrade = apply_filters( 'update_footer', '' );
$footer_text = array(
'<span id="footer-thankyou">' . __( 'Thank you for creating with <a href="http://wordpress.org/">WordPressa>.' ) . 'span>',
);
echo apply_filters( 'admin_footer_text', implode( ' • ', $footer_text ) );
unset( $footer_text );
?>p>
<p id="footer-upgrade" class="alignright">php echo $upgrade; ?>p>
<div class="clear">div>
div>

出力と合わせてみるとこんな感じ。

AdminFooks.php

class AdminFooks
{
/**
* フッタのワードプレスのバージョン部分のテキストを設定する。
*
* @param strign $string
*/
public function update_footer($string)
{
return 'update_footer';
}
/**
* フッタの文章を変更する。
*
* @param string $code
*/
public function admin_footer_text($html)
{
return 'admin_footer_text';
}
/**
* フッタの先頭に何かを出力する場合、echo
*
* @return void
*/
public function in_admin_footer()
{
echo '
in_admin_footer
';
}
}
?>

function.php

if (is_admin()) {
require_once 'path/to/AdminFooks.php';
$admin_fooks = new AdminFooks();
add_filter('update_footer', array($admin_fooks, 'update_footer'));
add_filter('admin_footer_text', array($admin_fooks, 'admin_footer_text'));
add_filter('in_admin_footer', array($admin_fooks, 'in_admin_footer'));
}
?>

結果はこんな感じになります。

update_footerにはcore_update_footer関数も登録されてるので優先順位なしだとWordPressのバージョンが古い場合、「バージョン 3.3.1 を入手」のような表示が出てしまします。これも表示させたくない場合、

function.php

add_filter('update_footer', array($admin_fooks, 'update_footer'), 20);
?>

のように、優先度を下げることでcore_update_footerの後に実行されるようにします。

WordPressスーパーカスタマイズ 3.2対応　ポテンシャルを100％引き出すテクニック

作者:下野理子 | 価格:￥ 2,940

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

2012-01-28T14:01:04Z

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

]]> ブログIDを取得したい。

ブログのIDを取得したい場合、グローバル変数の$current_blogを使うか、get_blog_id_from_url()を利用する。

PHP

global $current_blog;
$blog_id = $current_blog->blog_id;
?>

$current_blogはstdClassでプロパティは

PHP

'blog_id' => string '2'
'site_id' => string '1'
'domain' => string 'www.kantenna.com'
'path' => string '/'
'registered' => string '2012-01-15 12:08:02'
'last_updated' => string '2012-01-23 18:06:25'
'public' => string '1'
'archived' => string '0'
'mature' => string '0'
'spam' => string '0'
'deleted' => string '0'
'lang_id' => string '0'
?>

となっている。マルチサイトをサブドメインベースで構築した場合の結果なのでディレクトリベースの場合とか多少変わってくるかも。もう一つのget_blog_id_from_url()は引数にドメイン名とディレクトリパスをとれる。

PHP

$blog_id = get_blog_id_from_url(get_bloginfo('wpurl'));
?>

としたいところだがこれはfalseが返る。プロトコルはいらないらしい。

PHP

$blog_id = get_blog_id_from_url('http://www.kantenna.com'); // false
$blog_id = get_blog_id_from_url('www.kantenna.com'); // int
?>

get_bloginfo('id')でとれるようにしてくれないんだろうか。ちなみに、get_bloginfo()の引数、homeとsiteurlがいつの間にか、DEPRECATEDになっていた。

オプションを全て取得したい。

wp_load_alloptions()を使用します。で、気になったのがWordPressマルチサイトのパフォーマンス問題 | qnote。

マルチサイトの場合、get_option()がキャッシュを使わずデータベースアクセスしているとの指摘。まじかよwwwでもWordPressならありえそうと思いつつ問題箇所を見てみる。

wp_load_alloptions()

if ( !defined( 'WP_INSTALLING' ) || !is_multisite() )
$alloptions = wp_cache_get( 'alloptions', 'options' );
else
$alloptions = false;
?>

ぱっと見た感じキャッシュが使われない気がするのだが、僕の状況(3.3.1の日本語版、サブドメインベースのマルチサイト)ではdefined('WP_INSTALLING')が大抵の場合falseを返す。じゃあWP_INSTALLINGってどこで定義されてんのかと見てみると、wp_activate.phpとwp-admin/install.phpとwp-admin/setup-config.php、wp-admin/upgrade.php、wp-includes/ms-funtions.phpのwpmu_create_blog()の中。

おそらくWP_INSTALLINGはインストール時とか特定の状況でしか定義されない定数ため、普通のコンテンツページなどはキャッシュが使われるているみたいです。

バージョンによってはWP_INSTALLINGがグローバルに定義されてたり自分で定義しちゃってたり、僕の環境が特殊だったりするかもしれないのでちゃんとキャッシュ使われてるか確認した方がいいかもしれません。

PHPによるWordPressカスタマイズブック―3.x対応

作者:藤本壱 | 価格:￥ 2,940

検索エンジンにやさしいパンくずリストのコーディング

2012-01-26T19:04:34Z

ってなんだ。

]]> HTMLに意味を。

こんなHTMLがあったとします。

HTML

<p>kantennap>

シンプルでとてもコーディングしやすいですが、kantennaがどういう意味を持つのか、何を表しているのかがまったくわかりません。これに意味を持たせてやろうじゃないかということで作られたのがRDFa、maicroformats、microdataという仕様です。

RDFa、maicroformats、microdata

maicroformatsではclass属性やrel属性を利用してマークアップするので、これまでと違和感なく使えるのですが、拡張性がなくCSSやJavascriptでも利用することから歪なマークアップになったりいまいち使いにくい。

ここでW3Cさんが登場してRDFaというものを標準化しました。業界では一目置かれる存在であるW3Cさんが取り組んでいるので信頼性が高いのですが、いかんせん名前空間の宣言が必要だったり冗長すぎてコーディングしたくないレベル。

こいつのペースに巻き込まれると事がどんどんややこしくなりやがる。

結局どちらも使いづらいよねってことで、RDFaよりシンプルでmaicroformatsより拡張性があるものをということでできたのがmicrodata。ようやく使えそうな仕様ができたところで、google、yahoo、msnの検索大手が手を組んでmicrodataを利用したschema.orgを策定しました。

引用

民明書房刊『幕が上がらなかったウェブ新時代』より

microdataは名前空間的なものを作れるので、なんなら自分のアプリケーション用に定義することも可能はずです。 DOM APIもあるようなので今後使うケースもあるかもしれませんね。

ってことでschema.orgを利用してマークアップするとどうなるかというと

HTML

<div itemscope itemtype="http://www.schema.org/BookStore">
<p class="shop" itemprop="name">kantennap>
div>

これでkantennaが実は本屋(BookStore)の名前(name)ということが検索エンジンに伝わるようになります。同じようにschema.orgではパンくずリストということを検索エンジンに伝えるWebPage というitemtypeにbreadcrumbというプロパティが存在しています。

それを利用するとパンくずリストのマークアップは

HTML

<body itemscope itemtype="http://schema.org/WebPage">
<p itemprop="breadcrumb"><a href="/">HOMEa> > <a href="/pg/">プログラム覚書a>p>
body>

のようになります。他にも意味を与えることができるitemtypeがありますがFull Hierarchyが、とてもわかりやすく、探しやすく作られているので眺めてみるといいかと思います。

このくらいわかりやすくしてくれると使いやすいですね。

問題はこれがHTML5で利用できる属性ってことだけど、googleは microformats、RDFaも認識してくれるようなので、どれを利用してもよさそうです。

参照サイト

SERPs

当然ながら、これは順位をあげるものではありませんので、変な営業にひっかからないように気をつけてください。この期に及んで内部施策、外部施策とか言ってくる業者とは一切関わらないようにしましょう。

彼らは今お金が欲しいだけなんです。

あなたの事業の強みを理解してコンテンツの企画を提案してくる業者であれば話を聞く価値があります。

と言っても、たぶんこのサイトを見てるのはそういう層じゃないんだよな。。。

スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Android対応

作者:クジラ飛行机 | 価格:￥ 2,520

[jQuery Mobile]ダイアログ

2012-01-25T16:47:49Z

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

]]> HTMLに直接記述する場合

hrefをファイルにすれば外のページもダイアログとして表示できる。

HTML

<div id="Contents" data-role="page">
<header data-role="header">
<h2>ダイアログテストh2>
header>
<div data-role="content">
<a href="#DialogContents" data-rel="dialog" data-transition="pop">ダイアログa>
div>
div>
<div id="DialogContents" data-role="page">
<header data-role="header">
<h2>ダイアログのヘッダh2>
header>
<div data-role="content">
<p>コンテンツp>
div>
div>

ダイアログテスト

ダイアログを動的に生成したい場合

こういうことはあまりやらないとおもいますが。

Javascript

$(document).bind('pageinit', function(e){
$('#DialogButton').bind('vclick', function(e){
// ダイアログの内容。
var dialog_html = ['
',
'
ヘッダ
',
'
ダイアログ生成てすと
',
'

'].join('');

// DOMに追加

$('body').append($(dialog_html));

// ダイアログを表示させる。

$.mobile.changePage('#DialogTest', {

transition: 'pop',

role: 'dialog',

});

HTML

<button id="DialogButton">クリック meeeeeee!!!button>

上記のようにDOMに追加した場合、ダイアログが閉じられた時に削除しないとイベント発生の度に追加されてしまう。なので閉じられた時に削除をしたいわけだが、ダイアログも通常のページと同じということで、独自のイベントをトリガするわけでもなさそう。

なのでpagehideイベントを監視する。 pagehideはページ遷移の度に発生するので、動的に生成したダイアログだった場合という判定が必要になる。

Javascript

$(document).bind('pagehide', function(e, ui){
if ($(e.target).attr('id') === 'DialogTest') {
$(e.target).remove();
}
});

ダイアログテスト2。もっといい方法がありそうだけど。

参照ページ

ダイアログ | jQuery Mobile 1.0 日本語リファレンス

スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Android対応

作者:クジラ飛行机 | 価格:￥ 2,520

[WordPress] テンプレートのごちゃごちゃが限界にきたのでラッパー書いてみた。

2012-01-12T16:37:22Z

[WordPress]テンプレートがごちゃごちゃしてきたらstr_replaceとかでごまかしてきたけど、限界が来たのでラッパーをかいてみた。

]]> 初期設定はcaquu/cqt - GitHubをダウンロードしてfuntions.phpに

functions.php

require_once('/path/to/CQT/CQT/CaQuuTools.php');
CaQuuTools::init();
?>

と書いてパスを通します。あとは

PHP

// postオブジェクト作成
$_posts = CQT_WPLayer::factoryPost(array(998, 834, 995));
foreach ($_posts as $_post) {
// サムネイルがあれば表示
try {
echo $_post->thumnail()->toHTML('', array(
'alt' => $_post->title
));
} catch (CQT_WPLayer_Exception $e) {
echo $e->toHTML('{{{ message }}}');
}
// 投稿へのリンク
echo $_post->toHTML('
{{{ title }}}
');
// 投稿した人
echo '[筆者] ' . $_post->author()->display_name . '
';
// 投稿のカテゴリ
echo '[カテゴリ] ' . $_post->categories()->toHTML('{{{ name }}}') . '
';
// 投稿に付けられたタグ
echo '[タグ] ' . $_post->tags()->toHTML('{{{ name }}}');
echo '
';
}
?>

のような感じで書けます。結果はCQT_WPLayer::factoryPost() | デザインの汁な感じになります。

single.phpとかなら

PHP

while ( have_posts() ) : the_post();
// postオブジェクト作成
$_post = CQT_WPLayer::factoryPost($post)->current();
endwhile;
?>

とするとCQT_WPLayer_Postのメソッドが利用できます。たぶんWordPressに慣れてない人の方がすんなり使えるかも。

基本からしっかりわかる　WordPress 3カスタマイズブック (Web Designing Books)

作者:大藤幹 | 価格:￥ 2,520

参照ページ

[WordPress] 次の投稿と前の投稿を取得する。

2012-01-11T16:03:57Z

次の投稿とか前の投稿を取得するget_adjacent_post()が、どうもループ内じゃないと利用できないようになっている模様。

]]> get_adjacent_post()はループの際に作成されるグローバル変数の$postを使うようになっているので、どの投稿を使うかこちらで決めれるようにちょっとだけ変更してみる。

functions.php

/**
* グローバルの$postを利用しないようにする
*
*
* Retrieve adjacent post.
*
* Can either be next or previous post.
*
* @since 2.5.0
* @see get_adjacent_post()
*
* @param int|object 投稿IDか投稿オブジェクト
* @param bool $in_same_cat Optional. Whether post should be in a same category.
* @param array|string $excluded_categories Optional. Array or comma-separated list of excluded category IDs.
* @param bool $previous Optional. Whether to retrieve previous post.
* @return mixed Post object if successful. Null if global $post is not set. Empty string if no corresponding post exists.
*/
function my_get_adjacent_post($postdata = null, $in_same_cat = false, $excluded_categories = '', $previous = true ) {
global $wpdb;
if (is_null($postdata)) {
global $post;
} else {
if (is_numeric($postdata)) {
$post = get_post($postdata = (int) $postdata, OBJECT);
} elseif ($postdata instanceof stdClass && is_propety('post_type', $postdata) && $postdata->post_type === 'post') {
$post = $postdata;
}
}
if ( empty( $post ) )
return null;
$current_post_date = $post->post_date;
$join = '';
$posts_in_ex_cats_sql = '';
if ( $in_same_cat || ! empty( $excluded_categories ) ) {
$join = " INNER JOIN $wpdb->term_relationships AS tr ON p.ID = tr.object_id INNER JOIN $wpdb->term_taxonomy tt ON tr.term_taxonomy_id = tt.term_taxonomy_id";
if ( $in_same_cat ) {
$cat_array = wp_get_object_terms($post->ID, 'category', array('fields' => 'ids'));
$join .= " AND tt.taxonomy = 'category' AND tt.term_id IN (" . implode(',', $cat_array) . ")";
}
$posts_in_ex_cats_sql = "AND tt.taxonomy = 'category'";
if ( ! empty( $excluded_categories ) ) {
if ( ! is_array( $excluded_categories ) ) {
// back-compat, $excluded_categories used to be IDs separated by " and "
if ( strpos( $excluded_categories, ' and ' ) !== false ) {
_deprecated_argument( __FUNCTION__, '3.3', sprintf( __( 'Use commas instead of %s to separate excluded categories.' ), "'and'" ) );
$excluded_categories = explode( ' and ', $excluded_categories );
} else {
$excluded_categories = explode( ',', $excluded_categories );
}
}
$excluded_categories = array_map( 'intval', $excluded_categories );
if ( ! empty( $cat_array ) ) {
$excluded_categories = array_diff($excluded_categories, $cat_array);
$posts_in_ex_cats_sql = '';
}
if ( !empty($excluded_categories) ) {
$posts_in_ex_cats_sql = " AND tt.taxonomy = 'category' AND tt.term_id NOT IN (" . implode($excluded_categories, ',') . ')';
}
}
}
$adjacent = $previous ? 'previous' : 'next';
$op = $previous ? '<' : '>';
$order = $previous ? 'DESC' : 'ASC';
$join = apply_filters( "get_{$adjacent}_post_join", $join, $in_same_cat, $excluded_categories );
$where = apply_filters( "get_{$adjacent}_post_where", $wpdb->prepare("WHERE p.post_date $op %s AND p.post_type = %s AND p.post_status = 'publish' $posts_in_ex_cats_sql", $current_post_date, $post->post_type), $in_same_cat, $excluded_categories );
$sort = apply_filters( "get_{$adjacent}_post_sort", "ORDER BY p.post_date $order LIMIT 1" );
$query = "SELECT p.* FROM $wpdb->posts AS p $join $where $sort";
$query_key = 'adjacent_post_' . md5($query);
$result = wp_cache_get($query_key, 'counts');
if ( false !== $result )
return $result;
$result = $wpdb->get_row("SELECT p.* FROM $wpdb->posts AS p $join $where $sort");
if ( null === $result )
$result = '';
wp_cache_set($query_key, $result, 'counts');
return $result;
}
?>

これでループ作らなくても利用できる。

functions.php

$next = my_get_adjacent_post(5, false, false, false);
$prev = my_get_adjacent_post(5);
echo $next->title;
echo $prev->title;
?>

それにしてもループ内でしか使えないとかおかしいので、実はちゃんととれる関数があるかもしれない。

WordPress 逆引きデザイン事典PLUS ［3.x対応］

作者:林亮 | 価格:￥ 3,129

参照ページ

Function Reference/get adjacent post « WordPress Codex

[PHP] is_a() と Zend_Loader_Autoloader::autoload()

2012-01-07T12:52:25Z

Zend_Loader_Autoloader::autoload()を利用していて、is_a()の第1引数がパスっぽいものだとWarningが発生する。

]]>

PHP

$obj = new stdClass();
$str = '文字列';
$path = '/path/to/file/';
var_dump(is_a($obj, 'stdClass')); // true
var_dump(is_a($str, 'stdClass')); // false
var_dump(is_a($path, 'stdClass')); // false だけど Warning: include_once(/path/to/file/.php) がでる。
var_dump($obj instanceof stdClass); // true
var_dump($str instanceof stdClass); // false
var_dump($path instanceof stdClass); // false
?>

キャストするのもいいけど、is_a()はバージョンによってE_STRICTで引っかかったり挙動が変わったりといろいろあるみたいなので、PHP 5.1.0より上であればinstanceofを利用した方がよさそう。

注意すべき落とし穴があります。PHP 5.1.0 より前のバージョンでは、 instanceof は、クラス名が存在しない場合に __autoload() をコールしていました。さらに、クラスが読み込めなかった場合に致命的なエラーが発生していました。この問題の回避策としては、動的なクラス参照を使用するか、クラス名を含む文字列変数を使用します。

instanceof 演算子は PHP 5 から使用可能になりました。それ以前には is_a() が使用されていましたが、現在は is_a() は推奨されておらず、 instanceof の使用が推奨されています。 PHP 5.3.0 以降、is_a() は非推奨ではなくなったことに注意しましょう。

PHP: 型演算子 - Manual

大きな修正点として、is_a関数の挙動が挙げられています。autoload機能を使ってクラスをロードしている場合への対応と思われますが、PHP5.3.7以降挙動が変更されていたのですが、PHP5.3.9RC1ではデフォルトの挙動を元に戻したようです。

2011-11-04 - Do You PHP はてな

PHP 逆引きレシピ (PROGRAMMER’S RECiPE)

作者:河合勝彦 | 価格:￥ 2,730

[WordPress]アバウトなis_home()

2011-12-22T16:31:52Z

query_posts()を使うとfalseになるとかの問題もあるis_home()。

]]> ついでに/wp-signup.php、/wp-activate.phpにアクセスした場合もtrueが返る。 WordPress 3.3、マルチサイトON。ちなみにWordPress 3.1でもこの問題は存在していた。

この条件分岐タグは、サイトのメインページ（ホームページ）が表示されているかどうかを判定します。これは TRUE または FALSE の値を返す boolean 関数です。注: WordPress 2.1 以降からこの関数の動作が変わりました。静的フロントページ機能を利用（固定ページをフロントページに表示）している場合は、「投稿ページ」でこの判定が真となります（is_front_page()もご覧ください）。

関数リファレンス/is home - WordPress Codex 日本語版

サイトのメインページってWordPressの定義ではインストールディレクトリ直下のファイルはメインページって扱いなのだろうか？ 2個所あるとバグなのか仕様なのかよくわからん。

まぁ、あんまり困ることもないと思うけど。

PHPによるWordPressカスタマイズブック―3.x対応

作者:藤本壱 | 価格:￥ 2,940

Webサイト制作者のための PHP入門講座

作者:小出範明 | 価格:￥ 3,129

[WordPress] Zend_Loader_Autoloader を使うとWarning

2011-12-21T16:05:53Z

WordPress 3.3。Zend_Loader_Autoloaderでクラスのオートロードしたら管理画面でWarning出現。

]]>

PHP

$zend = Zend_Loader_Autoloader::getInstance();
$zend->setFallbackAutoloader(true);
?>

原因はwp-admin/includes/deprecated.phpの291行目の

PHP

if ( !class_exists('WP_User_Search') ) :
?>

...。

対処するには

PHP

if ( !class_exists('WP_User_Search', false) ) :
?>

ってするか、ぶち消すか。deprecatedだしいいよねｗ Zendのオートローダーって結構使われてるだろうし、そのうち修正されると期待しておこう。

追記

上記だけじゃなく編集画面でも発生wコアでもプラグインでもclass_existsは結構使われてるので、面倒なので対処はあきらめたほうがよさそうｗ

WordPress 逆引きデザイン事典PLUS ［3.x対応］

作者:林亮 | 価格:￥ 3,129

PHP 逆引きレシピ (PROGRAMMER’S RECiPE)

作者:河合勝彦 | 価格:￥ 2,730

参照サイト

PHP: class_exists - Manual

[WordPress] テンプレートルーティングのメモ

2011-12-18T19:40:42Z

WordPressが呼びだすテンプレートをTEMPLATEPATH直下じゃなくてTEMPLATEPATH/views/とかにできるのか調べた時のメモ。バージョンはWordPress 3.3 日本語版。

]]> wp_includes/tempate_loader.php

テンプレートの選択、呼び出しはこのファイルで実行される。

template_redirectアクション

リクエストされたページの表示に使用するテンプレートファイルを判断する前に実行し、プラグインがテンプレートファイルの選択を上書きできるようにする。

プラグイン API/アクションフック一覧 - WordPress Codex 日本語版

とあるが、基本的にここで何をしようが、次のテンプレート選択処理に入る気がする。例外投げるとかdieするとかリダイレクトするとかすれば別だが。なのでtemplate_redirectはテンプレートファイルの選択を上書きというより、 wordpressがテンプレートを読み込む前に、リダイレクトしたいとか何らかの処理をしたい場合に利用するものっぽい。

本当にここでテンプレート選択処理をしたいのなら、/index.phpで設定されてる

PHP

define('WP_USE_THEMES', true);
?>

を削除するかfalseにすればテンプレート選択処理には入らないので、リダイレクト先のファイルでテンプレートのルーティングを実装すればよい。このファイルってコアに含まれるのだろうか？

で、WordPressがルーティングしたテンプレートを変更したい場合。

ルーティングしたいテンプレートが決まっている場合。

wp_includes/theme.phpのget_query_template()関数内で設定されている {$type}_templateフィルターを利用する。

$typeには、indexとか404とかcategoryとか呼ばれるテンプレートのタイプ名?が入る。

WordPressをサイトの一部として利用していて、404はサイトのものを利用したい場合。まぁ404.phpから呼び出すとかでもいいんだけど例ってことで。

PHP

add_filter('404_template', 'my_404_template', $templates);
function my_404_template($template) {
return $_SERVER['DOCUMENT_ROOT'] . '/errors/404.php';
}
?>

$templateにはWordPressのルーティングで決定されたテンプレートのパスが入る。この場合、

ABSPATH/wp-content/themes/theme_name/404.php

のように。

全てをルーティングしたい場合

template_loader.php内でテンプレートが呼ばれる直前に apply_filters( 'template_include', $template )というフィルタが設定されているのでこれにフックすればよい。

$templateはインクルードされるテンプレートのフルパス。 function.php内でこんな感じで設定する。

PHP

add_filter('template_include', 'my_template_include', $template);
function my_template_include($template) {
$name = pathinfo($template, PATHINFO_FILENAME);
switch ($name) {
case '404':
$load_file = $_SERVER['DOCUMENT_ROOT'] . '/errors/404.php';
brea;
default:
$load_file = $template;
break;
}
return $load_file;
}
?>

ただ、この場合テーマ直下をindex.phpとfunction.phpとstyle.cssだけにした場合 $templateにはindex.phpしか入ってこない。

WordPressのテンプレート階層はTEMPLATEPATHにあるファイルの存在を確認することで決定しているので TEMPLATEPATH/views/をテンプレート設置場所にしたい場合、TEMPLATEPATH自体を変更しないといけない。

ただfunction.phpが呼ばれる時点ではTEMPLATEPATHは決定されているので、ここがfunction.phpの限界点。 TEMPLATEPATHを変更するにはプラグインを利用する必要がある。

TEMPLATEPATHの変更

TEMPLATEPATHはwp-includes/theme.phpのget_template_directory()の実行結果で決まっていて、この関数では

PHP

return apply_filters( 'template_directory', $template_dir, $template, $theme_root );
?>

が設定されているので、プラグインで、

PHP

template_directory($template_dir, $template, $theme_root)
{
return $template_dir . '/views/';
}
?>

とすることで、TEMPLATEPATHの変更が可能となる。でもってテンプレートが呼び出される直前で実行されるtemplate_includeに

PHP

add_filter('template_include', 'my_template_include', $template);
function my_template_include($template)
{
// グローバルなオブジェクトとか変数に
// 本来呼び出されるファイルのパスを保存。
Configure::write('View.file', $template);
// WordPressは常にテーマ直下のindex.phpを呼び出す
return get_theme_root() . DS . get_template() . DS . 'index.php';
}
?>

としておくことでテーマ直下のindex.phpからテンプレートをビューとして呼び出せる。

PHP

<html>
<head>
head>
<body>
php require_once(Configure::read('View.file')); ?>
?>

これでCakePHPのようにビューとレイアウトを分けることが出来そうな気がする。まだ実装はしてないのでわからんけどｗ

追記

ファイル確認はSTYLESHEETPATHが優先されるので、テーマ直下がSTYLESHEETPATHで、index.phpを呼び出すパターンの場合、上記だとviews/index.phpではなくテーマ直下のindex.phpが選択される。なので

PHP

// WordPressは常にテーマ直下のfront_controller.phpを呼び出す
return get_theme_root() . DS . get_template() . DS . 'front_controller.php';
?>

など、フロントコントローラーはWordPressのテンプレート階層で利用されないファイル名にした方がよい。

その他メモ

funtions.phpはTEMPLATEPATHとSTYLESHEETPATHが異なる場合、STYLESHEETPATHが最初に検索され存在しない場合、TEMPLATEPATHも検索するのでどちらにおいてもよい。
get_header()など使わなくなるので、そこらへんのアクションにフックされているプラグインとかは動かなくなる。使いたい場合、自分でトリガーすればよい。

基本からしっかりわかる　WordPress 3カスタマイズブック (Web Designing Books)

作者:大藤幹 | 価格:￥ 2,520

[jQuery] もう＋演算子とはおさらば。jQuery Templates

2011-12-12T02:11:11Z

いまさらながら、jQueryに公式なテンプレートプラグインあるの気がつきました。もう一年以上前に出ていたんですね。まだベータだけどｗ

]]> .tmpl( [data] [, options] )

jQueryオブジェクト内のindexが0のDOM要素のコンテンツをテンプレートとし、dataで置き換えてくれます。 dataが配列の場合、Array.length回繰り返しレンダリングしてくれます。

もちろんjQueryオブジェクトを返してくれるので、.appendTo()、.prependTo()、.insertAfter()、.insertBefore()でドキュメントにぶっこむことができます。

サンプル

実行結果

アストロスイッチ

Javascript

$('#template-1').tmpl([
{ no: 1, name: 'ロケット'},
{ no: 2, name: 'ランチャー'},
{ no: 3, name: 'ドリル'},
{ no: 4, name: 'レーダー'}
]).appendTo('.switches ul');

HTML

<div class="jqTest1">
<script id="template-1" type="text/x-jquery-tmpl">
<li>[no.${no}] ${name}li>
script>
<div class="switches">
<h5>アストロスイッチh5>
<ul>
ul>
div>
div>

jQuery.tmpl( template [, data] [, options] )

.tmpl()がドキュメント内に記述された文字列をテンプレートとして利用するのに対し、こちらはJavascriptの変数に入ってる文字列とか、その場でテンプレートを記述したい場合に便利です。

.tmplItem()

dataや、レンダリングに利用したデータはDOMツリー追加後に.tmplItem()で取得することができます。 (テンプレート内ではitem、dataが利用できる。)

.tmplItem()で返ってくるオブジェクトは、.nodes、.parent、.data、.tmpl、.tmpl()の第二引数で設定したdata、のプロパティを持っています。

サンプル

クリックで料金をalert。.tmpl()の第二引数で渡したオブジェクトのtaxプロパティは.tmplItem().tax()で呼び出せる。

実行結果

Javascript

$('
', {
html: $.tmpl(
'
[NO.${no}] ${name}
',
[
{ no: 1, name: 'ロケット', price: 100},
{ no: 2, name: 'ランチャー', price: 200},
{ no: 3, name: 'ドリル', price: 300},
{ no: 4, name: 'レーダー', price: 400}
],
{
tax: function(price) {
return price * 1.05;
}
}
),
class: 'switches'
}).appendTo('.jqTest2').find('p').on('click', function(e){
var item = $(e.target).tmplItem();
alert(item.tax(item.data.price));
});

HTML

<div class="jqTest2">
div>

テンプレートに挿入される値は、レンダリング時にエスケープされますが {{html name}}を利用するとエスケープなしでレンダリングされます。

当然、外部の入力をいきなりこれで出力するとヤバいのでやめましょう。

サンプル

実行結果

Javascript

$('#template-3')
.tmpl({ name: 'www.caquu.com' })
.appendTo('.jqTest3');

HTML

<div class="jqTest3">
<script id="template-3" type="text/x-jquery-tmpl">
<dl>
<dt>デフォルトdt>
<dd>${name}dd>
dl>
<dl>
<dt>htmldt>
<dd>{{html name}}dd>
dl>
script>
div>

${name} = {{= name}}

${name}は{{= name}}のショートハンドなので、どちらも同じ結果となります。

PHP内で利用する場合、${name}がPHPの構文とかぶるので、エスケープする必要がありますが、 {{= name}}を使えばエスケープなしで利用できます。

その他

テンプレート内ではif文やeachなども利用可能です。さらにテンプレートのネスト等もできるようです。詳しくはドキュメントを参照ください。

おまけ。

jQuery Templatesはご覧のようにjQueryで使いやすく仕上がってますが、ここまで大きくなくていい。っていうかsprintf、str_replaceがあればなぁって思ってるかたはこちらがおススメです。

参照ページ

テスト駆動JavaScript

作者:Christian Johansen | 価格:￥ 3,780

jQueryクックブック

作者:jQuery Community Experts | 価格:￥ 3,780

参照ページ

[jQuery] jQuery入門前の話。

2011-12-08T16:43:07Z

jQueryの概念というか役割というか、おおざっぱなイメージについて。jQueryの書き方とかの話じゃありません。

jQuery APIリファレンスをみて、 jQuery.each()とjQuery(selector).each()のような同じ名前のメソッドで何が違うんだ？どう使い分けるんだ？と迷わないためのお話です。

]]>

リファレンスをおおざっぱに分類してみる

Selectors

SelectorsはjQuery関数に渡す引数について、どのような書き方が出来るのか、そしてどんなDOMが取得できるのか。についてです。

jQueryオブジェクトのメソッド

.hoge()のようにドットから始まっているものは、jQueryオブジェクトのメソッドで、オブジェクトが持っているDOMに対して何かを設定、取得したいときに利用するもの。

jQuery関数のメソッド(関数)

jQuery.hoge()のようにjQueryから始まっているのは、jQuery関数のメソッド。関数のメソッドってなんだよって思うかもしれませんが、Javascriptでは関数もオブジェクトなのでまぁクラス関数みたいなイメージかな？

素のJavascriptで作成したオブジェクトとかをjQueryで使える形にしたり、その逆をやったり。 Javascriptであったらいいなと思うメソッドがここにあったりする。

特殊なオブジェクト

それ以外は、jQueryが提供している特殊なオブジェクトに関するもの。そんなものはそのうち覚えればいいと言いたいところだけど、eventは結構重要だったりします。

次はイベントについて書くかも。

jQuery関数の名称

jQuery関数という呼び方についてはJavascriptにおいて関数もオブジェクトなので、jQueryオブジェクトと呼ばれたり本体と呼ばれたりもします。両方同じような名前で呼ばれたりするので混乱しないように気をつけましょう。

まぁほとんどjQueryオブジェクトの話ですけどｗ

jQueryデザインブック　仕事で絶対に使うプロのテクニック

作者:No Date | 価格:￥ 2,940

Webサイト制作者のための JavaScript入門講座

作者:安藤建一 | 価格:￥ 3,024

WEBプログラム覚書

[WordPress] get_header()とwp_head()を捨てる。

header.phpとfooter.php

header.php

footer.php

functions.php

functions.php

home.php

home.php

home.php

投稿ページでkeywordとdescriptionを表示したい場合

header.php

single.php

捨てることで得られるもの失われるもの。

得られるもの。

失われるもの。

この先。

[jQuery]closest()とparents()

サンプル

実行結果

Javascript

HTML

javascript

closest()ができること

サンプル

実行結果

Javascript

HTML

parents()ができること

サンプル

実行結果

Javascript

HTML

参照ページ

参照ページ

[jQuery Mobile]初期化イベントメモ

javascript

HTML

pagebeforecreate

javascript

HTML

pagecreate

javascript

HTML

javascript

HTML

pageinit

javascript

HTML

javascript

HTML

参照ページ

[WordPress]管理画面のフッタのフィルタとアクション。

wp-admin/admin-footer.php

AdminFooks.php

function.php

function.php

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

PHP

PHP

PHP

PHP

オプションを全て取得したい。

wp_load_alloptions()

検索エンジンにやさしいパンくずリストのコーディング

HTML

RDFa、maicroformats、microdata

引用

HTML

HTML

参照サイト

SERPs

[jQuery Mobile]ダイアログ

HTML

ダイアログを動的に生成したい場合

Javascript

ヘッダ

HTML

Javascript

参照ページ