[WP] テーマのカスタマイズ

WordPress の管理画面をカスタマイズする方法には色々あり、全てをまとめてご紹介することは難しいので順番にご紹介しようと思います。まず最初は全体の概要と 「５．jQuery でHTMLを置換する」 をご紹介します。

管理画面のカスタマイズ方法にはざっと、以下のような方法があるのではないでしょうか。
１．プラグインを使う
２．アクションフック、フィルターフックを使う
３．meta_box の追加や削除を使う
４．CSS で要素を変更したり非表示にする
５．jQuery でHTMLを置換する
６．リダイレクトで代替ページにとばす
７．WordPress コアファイルを変更する

１．プラグインを使う

まずはプラグインがあるかを確認します。こちらは詳しい方が大勢おられると思いますので詳細は割愛しますが、例えばカスタムフィールドテンプレートというプラグインひとつとっても様々な機能があり、色々なことに対応できますよね。

２．アクションフック、フィルターフックを使う

まず、カスタマイズしようと思ったときにアクションフックやフィルターフックが用意されているか調べます。そして、あったら迷わず使います（本当に助かりますよね）。ただし、管理画面のアクションフックやフィルターフックを探すのは骨が折れる場合も多いので根気強く頑張りましょう。

続きを読む→

WordPress3.0 のデフォルトテーマ「Twenty Ten」 を１カラムや３カラムにしたいと思ったことはありませんか？今回はCSSの設定だけでTwenty Tenを１カラムや３カラムにする方法をご紹介します。

ＣＳＳで１カラムにする方法

１カラムにするには container や content の枠を広げて下さい（ margin-right を 240px を 0px にします）。子サイトの style.css に以下を追加して下さい。そして、ウィジェットエリア１と２に登録したウィジェットを削除して下さい。

#container { margin-right: 0px; }
#content   { maｍrgin-right: 0px; }

ＣＳＳで３カラムにする方法

Twenty Ten のサイドバーは #primary と #secondary のふたつが用意されています。これを横並びにすれば３カラムにできますね。

まず、２カラム分のスペースを空けるために container や content の枠を狭めます。そして #primary と #secondary の回り込みをできるようにします（clear:none にします）。
続きを読む→

WordPress のデフォルトテーマ Twenty Ten をベースにしている当サイトを InternetExplorer で閲覧した場合の互換チェックを、 Twenty Ten はIE6でどう見えるでおこないました。

先日 CPI 主催の Adobe セミナーで上條さんから Adobe BrowserLab でもブラウザの互換チェックができるとご紹介いただいたので、実際に試してみました。
まず、実際に試した結果（下図）を紹介します。

やはり IE6 ではタイトルが２行になったり、サイドバーが崩れていたりしていますね。画像での表示のため動作を確認することはできませんが、様々なブラウザで確認できますし、またルーラーを表示することもできるなど、なかなか便利ですね。

以下、Adobe BrowserLab の使い方をご紹介します。
続きを読む→

WordPress では get_children で添付画像を取得して関数「wp_get_attachment_image」や「wp_get_attachment_image_src」を使って表示することができることを、 添付画像をサムネイルで表示するでご紹介しました。今回は画像を登録した際に記入できる「説明」って使ってないなと思って調べてみました。

メディアに登録した画像の説明に「説明」、キャプションに「キャプション」と入力して保存してみます。そして、var_dump を使って、get_childrenで取得したオブジェクトをのぞいてみると、 post_content には「説明」、post_excerpt には「キャプション」と入っています。

なるほど、これなら get_children で取得した画像（複数が配列に格納されている）から１つオブジェクトを $image とすると、以下のように指定して使用することができますね。
(1) 説明：　$image->post_content
(2) キャプション：　$image->post_excerpt
続きを読む→

WordPressをマルチサイト化（ネットワーク化）して、子サイトでユーザアカウントを登録しようして、新規ユーザアカウントが親サイトに登録されてしまったことありませんか？今回、この問題を解決すべく、以下の２点を調査してみましたのでご紹介します。
(1) ユーザアカウント 新規登録の仕組み
(2) 子サイトにユーザアカウントを登録する方法

ユーザアカウント 新規登録の仕組み

まず、前提条件としてマルチサイト化して、特別管理者＞設定から 「ユーザアカウントの新規登録を許可する」もしくは、「新規サイトおよびユーザーアカウントの登録をどちらも許可する。」 いずれかの設定になっている必要があります。


ユーザアカウント登録が許可された状態で、子サイトで新規登録をしようとする（http://（サブドメイン）.（親ドメイン）/wp-signup.php にアクセスする）と、親サイトの wp-sign.up にとばされてしまいます。しかたなく、そこで新規ユーザ登録すると予想通り親サイトにユーザ登録されてしまいます・・・。そこで、親サイトでの新規ユーザ登録の仕組みを調べてみました。

実際にユーザアカウント新規登録の流れをコードから追跡してみると、以下のようになっていました。


続きを読む→

WordPress3.0 のデフォルトテーマ「Twenty Ten」の特徴のひとつは「豊富なウィジェットエリア」（合計６つ）ですね。実際にテーマ「Twenty Ten」のコードを見た方には、「get_sidebar( ‘footer’ ):」ってサイドバーかフッターかどっちだよと、つっこみを入れた人が多数おられたかと思いますｗ
また、カスタム投稿タイプを使うようになって、アーカイブページがなく一覧を表示するのにお困りの方も多くおられたと思います。

そこで、サイドバーやフッターだけでなくコンテンツエリアにウィジェットエリアを広げて、投稿（カスタム投稿タイプなど）を表示変更できるようにして、ウィジェットでコンテンツ管理できるようにしてみたいと思います。

ウィジェットエリアを定義する

ウィジェットエリアを登録する以下のコードを functions.php に加えて下さい。すると、外観＞ウィジェットで、コンテンツウィジェットエリアＨＯＭＥが表示されます。
続きを読む→

WordBench川崎が11月14日にあり、WordCamp Nagoya 2010 について報告いただきました。参加できなかった私にはとてもありがたい会でした。

当日は WordCamp での発表や写真を中心に広い範囲に話題がおよびましたが、その中で @jim0912 さんの報告にて register_taxonomy がカスタムタクソノミー（カスタム分類）以外にも使えるのではないかとのお話があったので試してみました。

WordCamp Nagoya 2010



WordCampNagoya2010 発表「WordPress 3.0とは」

Copyright (C)２０１０Prime Strategy co.,ltd.

大曲さんの報告でカスタムタクソノミー（カスタム分類）を登録する関数「register_taxonomy」について以下のアドバイスをいただき、調べてみました。
register_taxonomy($taxonomy, $object_type, $args);
(1) パラメーター「 $taxonomy」 はカスタムタクソノミーだけでなくカテゴリーも使えるかも
(2) パラメーター「$object_type」 は投稿タイプ（post_type）を指定することができる

結論から言うと、register_taxonomy や register_taxonomy_for_object_type で登録できました。

---

1. カスタム投稿タイプにカテゴリーをつける
   以下のコードのように、まずカスタム投稿タイプ「food」を登録して、register_taxonomy_for_object_type( $taxonomy, $object_type ) を使ってカスタム投稿タイプにカテゴリーをつけることができました。
   
   なお、以下のコードは、子テーマのfunctions.php に記載して下さい。以降はadd_action と register_my_taxonomy は記載を省略しています。

続きを読む→

ブラウザ FireFox に多くのアドオン（拡張機能）が存在しています。今回はそのなかで、私にとってWEB開発になくてはならなくなった FireBug というアドオンを紹介します。、

まずは、あなたのブラウザを FireFox にしていただき、上記の（出典）からリンクして、「今すぐダウンロード」を押下すとインストールできます。※インストールしたアドオンはメニューのツール＞アドオン＞拡張機能 から設定や削除ができます。

インストールすると、BUGという名の通り虫マークがステータスバーに表示され、押すとFIreBug が起動します。※メニューのツール＞FireBug＞FIreBugを開く からも起動できます。



FireBug のタブで HTML を選択するとサイトのHTML構造が表示されます。さらに詳しく知りたい要素を選択すると以下が表示されます。
(1) サイトの該当箇所に色が付きます（青：選択要素、紫：Padding範囲、黄：Margin範囲）
(2) 右にスタイルシート、累積、レイアウト、ＤＯＭ情報が表示されます



続きを読む→

例えばカスタム投稿タイプの添付画像をサムネイルの大きさで表示しようと思うと、結構手間がかかりますよね。

WordPress3.0 のデフォルトテーマ Twenty Ten では loop.php に、カテゴリー「Gallery」だった場合に画像を表示するコードがあります。そこで、これを参考にしてカスタム投稿タイプの添付画像をサムネイルの大きさで表示するプログラムを作成してみました（今回はひとつ目の画像のみ）。

さて、全体の流れは以下の通りとなります。

続きを読む→

今さらですが、WordPress3.0 のデフォルトテーマ Twenty Ten をベースに運営している当サイトが IE6 でどう見えているのか気になったので試してみた。

使用したのは IETester です。ダウンロードはこちら （IETester）

Windows 7 に特に問題なくインストールすることができました。

さて実際に見てみると・・・、以下の３点に気付きましたが、全体としては思ったほど崩れていないものだなと安心しました。まぁ、Twenty Ten テーマのおかげなのですが。
続きを読む→

Twenty Ten のページをカスタマイズする場合の代表的な手順を紹介する。

続きを読む→

WordPress のヘッダーにログインしているときは「ログイン｜新規登録する」、していないときは「こんにちわ○○さん｜ログアウトする」と表示したいが上手くいかないそうなので、作成してみた。

実現に必要になるのは以下の３つの要素になる。

１．ログイン判定は「is_user_logged_in()」でできる
２．各々のＵＲＬを取得する関数は、SOURCEFORGE で調べた

• ログイン：　wp_login_url
• ログアウト：　wp_logout_url
• 新規登録：　wp_login_url . ‘?action=register’
  
  ※新規登録は wp_register があるが、これはURLだけでなくリンク自体を作成するのでNGたが、実際に動作させてみるとURLは wp_login_url + ?action=register となっているので採用してみた。

WordPressの関数はWordPress日本語のドキュメント「SourceForge」に掲載されているが、「関数リファレンス」と「テンプレートタグ」に分かれているので両方見る必要がある。また、日本語に翻訳されていないものは英語版で調べる必要あり。
http://wpdocs.sourceforge.jp/テンプレートタグ

３．ログインしているユーザ名の取得
現在のユーザ（オブジェクト）は wp_get_current_user() で取得できる。英語版の SourceForge の例文を見るとユーザIDはuser_login 、表示名は display_name だと分かる。
http://codex.wordpress.org/Function_Reference/wp_get_current_user

さて、これらをふまえると以下のようなコーディングで実現できると考えられる。
※４行目が-> とHTML文字コードもまま表示されているので、->と変更して使用下さい。

if(is_user_logged_in()){
	$current_user = wp_get_current_user();
	$logout_url = wp_logout_url();
	echo 'こんにちは'.$current_user-&gt;display_name.'さん｜<a href="'.$logout_url.'">ログアウトする</a>';
} else {
	$login_url = wp_login_url();
	echo '<a href="'.$login_url.'">ログイン</a>｜<a href="'.$login_url.'?action=register">新規登録する</a>';
}

wp_head でヘッダに追記する で記載した wp_enqueue_script は、外部ファイルをに登録する際にその名称やバージョンをグローバル変数 $wp_scripts で管理して出力してくれるらしいという件について調べてみた。（参考）WordPress フォーラム


wp_enqueue_script は以下のように引数として渡されたスクリプトを、グローバル変数 $wp_scripts に登録している。

$wp_scripts は wp-includes/class.wp-scripts.php で定義されているクラスで WP_Dependencies を継承している（WP_Dependencies は wp-includes/class.wp-dependencies.php ）。
関数 wp_enqueue_script で実行される $wp_scripts->enqueue( $handle ) はWP_Dependenciesクラスで定義されている。

wp-includes/functions.wp-scripts.php

/**
 * Enqueues script.
 *
 * Registers the script if src provided (does NOT overwrite) and enqueues.
 *
 * @since r16
 * @see wp_register_script() For parameter information.
 */
function wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false, $in_footer = false ) {
	global $wp_scripts;
	if ( !is_a($wp_scripts, 'WP_Scripts') )
		$wp_scripts = new WP_Scripts();

	if ( $src ) {
		$_handle = explode('?', $handle);
		$wp_scripts->add( $_handle, $src, $deps, $ver );
		if ( $in_footer )
			$wp_scripts->add_data( $_handle, 'group', 1 );
	}
	$wp_scripts->enqueue( $handle );
}

wp-includes/class.wp-dependencies.php

	function enqueue( $handles ) {
		foreach ( (array) $handles as $handle ) {
			$handle = explode('?', $handle);
			if ( !in_array($handle, $this->queue) && isset($this->registered]) ) {
				$this->queue = $handle;
				if ( isset($handle) )
					$this->args] = $handle;
			}
		}
	}

さて、実際に $wp_scripts を出力してみた出力結果は以下の通り。

続きを読む→

CSSを変更する時はこれまで style.css に追記したり、要素に style=”" と直接追記していたが、javascript や JQuery のスクリプトをこれから追記していこうと思い、その方法を調べてみた。

Twenty Ten ではの最後に wp_enqueue_script( ‘comment-reply’) と wp_head() を呼び出している。

	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing 
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to  such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();

wp_head() はというと do_action(‘wp_head’) だけをおこなっているので、に追記する内容を出力する関数をadd_action（’wp_head’,'呼び出す関数名’) で定義すればよさそう。ただし、追記順に制約がある場合は add_action に優先順位を設定する必要がある。

wp-includes/general-template.php

続きを読む→

Twenty Ten ではカテゴリーアーカイブの場合に抜粋表示をおこないます。今回はそれが全文表示されるように変更しました。

Twenty Ten の loop.php では104、132行目の2箇所で is_archive() || is_search() で判定してアーカイブか検索結果なら the_excerpt() で抜粋表示をおこない、右記以外の場合は the_content() で more 指定した場合のみ、抜粋表示するようにしています。

  if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>

      the_excerpt();

そこで、まず Twenty Ten を template とする子テーマに loop.php をコピーして、条件分岐の「 is_archive() || 」をはずしてみたところ、else にある the_content によってカテゴリーアーカイブで全文表示されるようになりました（more があればもちろん抜粋表示されます）。

        if ( is_search() ) : // Display excerpts for archives and search. ?>

        the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) );