[WP]ショートコードAPI仕様メモ

wordpress2.5から実装されたショートコードについて。
ショートコードというのは、タグの簡易版みたいなものです。プラグインではよくお目にかかります。
2.5から本文中に[gallery]と入力すると、その記事でアップロードされた画像がサムネイルで一覧表示される機能がありますが、こういうのを自作できるわけです。

胡散臭いまとめは信用ならねぇ、という方は公式サイトの説明を見てください。
※この記事は本家解説の完全翻訳はしてません

手っ取り早く作ってみる

下のソースをアクティブになってるテーマのfunction.phpにコピペする。

function bartag_func($atts) {
	extract(shortcode_atts(array(
		'foo' => 'no foo',
		'baz' => 'default baz',
	), $atts));

	return "foo = {$foo}";
}
add_shortcode('bartag', 'bartag_func');

▼投稿画面で次のタグを記入すると、それぞれ違う出力結果になります。

[ bartag ]と本文に投稿→foo = no foo
[ bartag foo=”bar” ]と本文に投稿→foo = bar

続きを読む

[PHP]オブジェクト指向プログラミング

初心者な自分用メモ、みたいなもんです…。
把握までの過程をメモってるので同じく初心者には分かりやすいかも?
考え方はJavacriptも同じだと思う。

名称

とりあえず呼び方がややこしい。初心者はまずここが覚えられない。

  • メソッド(method)
    クラス内にある関数(function)のこと
  • プロパティ(property)
    クラス内の変数(variable)のこと。メンバ変数も同じ意味
  • コンストラクタ(Constructor)
    初期化用のメソッド。オブジェクト生成時にやりたいことを入れる
  • 継承(Inheritance)
    クラスを元に新しいクラスを作る。上手いこと作らないとかえって面倒なことになるらしい

続きを読む

[js]ロールオーバー+見てるページのメニュー画像変更

メニュー画像をロールオーバーさせつつカレントページはon状態にするスクリプト。

見てるページのメニュースタイルを変更する
ロールオーバースクリプト(画像名のOn/Offで判別)を足したソースです。
プリロードはついてません。

続きを読む

[XHTML]コピペ用セレクトメニュー(テキスト編)

入力フォームで良く使うセレクトメニューのサンプルソース。
都道府県、質問内容、違反報告内容など。

お届け時間指定

業者によって時間は変わるけど大体こんな感じ。

<select name="time">
<option>希望なし</option>
<option>午前中</option>
<option>12時-14時</option>
<option>14時-16時</option>
<option>16時-18時</option>
<option>18時-20時</option>
<option>20時-21時</option>
</select>

続きを読む

[XHTML]コピペ用フォームパーツ(数字編)

年月日や西暦、商品個数などに使えるセレクトメニューのXHTMLソース。コピペ用です。

月(1~12)のセレクトメニュー

<select name="month">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>

9~0のセレクトメニュー

<select name="num">
  <option value="9">9</option>
  <option value="8">8</option>
  <option value="7">7</option>
  <option value="6">6</option>
  <option value="5">5</option>
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
  <option value="1">1</option>
  <option value="0">0</option>
</select>

続きを読む

[XHTML]応募フォームっぽい入力項目のメールフォーム

求人情報の応募フォームにありそうな入力項目のXHTMLフォームのコピペ用サンプル。

classやIDは一切使ってないのでスニペットとしても使えると思います。
テーブル使用。注釈はsmall。
結構手抜いてます。

<form action="" method="post">
<table cellpadding="0" cellspacing="0" border="1">
	<tr><th scope="row">お名前</th>
	<td><input name="name" type="text" size="50" /><small>(全角)</small></td></tr>
	<tr><th scope="row">ふりがな</th>
	<td><input name="name2" type="text" size="50" /><small>(全角)</small></td></tr>
	<tr><th scope="row">生年月日</th>
	<td><input name="birth" type="text" size="20" /><small>(例:1980/04/01)</small></td></tr>
	<tr><th scope="row">性別</th>
	<td><input name="sex" type="radio" value="男性" />男性
	<input name="sex" type="radio" value="女性" />女性</td></tr>
	<tr><th scope="row">E-Mail</th>
	<td><input name="email" type="text" size="50" /></td></tr>
	<tr><th scope="row">電話番号</th>
	<td><input name="tel" type="text" size="50" /><small>(例:1234-56-7890)</small></td></tr>
	<tr><th scope="row">携帯電話・PHS番号</th>
	<td><input name="tel2" type="text" size="50" /><small>(例:090-1234-5678)</small></td></tr>
	<tr><th scope="row">郵便番号</th>
	<td><input name="postcode" type="text" size="10" /><small>(例:507-0000)</small></td></tr>
	<tr><th scope="row">住所</th>
	<td><input name="address" type="text" size="50" /></td></tr>
	<tr><th scope="row">現在役職の有無</th>
	<td><input name="businesspost" type="radio" value="あり" />あり
	<input name="businesspost" type="radio" value="なし" />なし</td></tr>
	<tr><th scope="row">最終学歴</th>
	<td><input name="schoolcareer" type="text" size="50" /></td></tr>
	<tr><th scope="row">資格</th>
	<td><textarea name="license" cols="70" rows="3"></textarea></td></tr>
	<tr><th scope="row">職務経歴</th>
	<td><textarea name="history" cols="70" rows="10"></textarea></td></tr>
	<tr><th scope="row">自己PR</th>
	<td><textarea name="message" cols="70" rows="10"></textarea></td></tr>
	<tr><th scope="row">入社希望時期</th>
	<td><input name="enter" type="text" size="50" /></td></tr>
	<tr><th scope="row">その他希望条件</th>
	<td><textarea name="other" cols="70" rows="5"></textarea></td></tr>
</table>
<p><button type="submit">送信</button><button type="reset">リセット</button></p></form>

サンプルのCSSは続きにあります。

続きを読む

[js]メールアドレスを自動収集されないように表示する

放置してたメールボックスを受信してみたら1000通もスパムが溜まってた。さすがに驚いた。

スパマーはWebサイトに記載されてるメアドをgoogleのクローラのようなbotで拾っていくとか。
直接メアド書くのは最早時代遅れとなりつつあり、お手軽な方法としてはエンティティ化が流行ってる様子。
でも唐突にエンコード文字があると逆に怪しいと思うんだけどどうでしょう。
個人的にはあのクソ長い文字の羅列はあまり好きじゃない。ソフトが勝手にデコードしたりするし。

そこでmailtoリンクつきのメールアドレスをスタイリッシュにjavascriptで表示するサンプルを。
前にmootoolsで書いたけど、今回は普通のjavascriptで。

続きを読む

[WP]カテゴリーのアイコンを表示するプラグイン「Category Icons」

各カテゴリーに任意のアイコンを設定・表示するWordpress用プラグイン「Catgory Icons」の紹介と日本語化ファイルの配布。

このプラグインは、カテゴリーそれぞれに独自のアイコンを設定することが出来て、
サイドバーのカテゴリーリストや記事のタイトルに設定したアイコンを表示してくれます。

インストール

WordPress2.3~2.6.1対応
最新バージョン2.0.7

※ver2.0.5の翻訳ファイルそのまま使用してても問題はありません。

ダウンロード後展開、wp-content/plugins/にアップロードしたら、有効化する。

日本語化ファイルは、解凍したmoファイルをlanguagesフォルダに入れます。
moファイルのアップロード形式はバイナリで。
2.0.5からプラグインに同胞されたようです。ワーイ

ダウンロード

若干エラーの日本語が怪しいかもしれない。

2.0.7の変更点は大体次の通りです。

  • My Category Orderに対応。
  • アイコンリストにソート機能が付いた(テーブルのヘッダクリックで動作)
  • ウィジェットが本体に内包された(category-icons_widget.phpが無くなり、本体有効化だけでウィジェットが使用可能に)
  • 不要なフィールドの削除とMySQLに関する修正
  • イタリア語・トルコ語翻訳ファイルの追加

2.0.2→2.0.5はSEO Friendly Imagesに関する差分です。

続きを読む

超便利なFirefoxアドオンリスト(Web開発者向け)

Firefoxのウリといえばアドオン入れまくりでカスタマイズしまくれるとこだと思ってます。
今現在使用中、もしくは使う機会がありそうなFirefoxのプラグインのブックマーク。

Firebug
»Mozilla Add-ons
»公式サイト
超有名なWeb開発者用アドオン。もうこれの為にFirefox使ってると言っても過言ではないかもしれない…。
HTMLの構造、適用されてるCSS、HTMLとCSSの編集、Javascriptのデバッグと分析、接続状況などWeb開発にあると便利な機能がこれでもかと盛り込まれている。
注※Googleなど、Ajax利用してるサービスではOFF設定しないともっさりします

Web Developer
»Mozilla Add-ons
»公式サイト
これもまた便利なWeb開発者用アドオン。Firebugと比べるとこちらはHTMLに特化。機能的にはSleipnirのHawkeyeと似てる。
オーサリングツールのデザインビューについてる機能がアドオンになったという感じだろうか…
javascriptはあんまり使わないというならFirebugよりこちらの方が便利かも。

続きを読む

[WP]WordPressテンプレートカスタマイズ用小技メモ

テンプレートファイルのカスタマイズで使えそうなソースのサンプルをつらつらと書き散らしてみる。その2はこちら。

タイトルの文字数制限

一定数以上のタイトルを省略(抜粋)する。
下記サンプルだと10文字まで拾って以下を三点リーダにしています

<?php 
	$title= mb_substr($post->post_title,0,10);
	echo '<h1>'.$title.'…</h1>';
?>

続きを読む

[WP]SEO対策系プラグイン比較まとめ

WordPress用のSEO対策・ヘッダ操作系プラグインを比較したまとめ。
タイトルやメタタグを操作するもの中心。サイトマップは除外。
メタタグ操作はテーマでやれなくもないけど、プラグイン使う方が楽です。

選択条件

  • 公式サイトでのダウンロード数の高い順
  • WordPress2.5に対応している
  • 日本語で使える(翻訳の有無は問わない)

続きを読む

[WP]テンプレートファイルの仕様と構成

テンプレートファイルの役割やら構成なんかについてのまとめ。そこそこ初心者向け。

WordPressテーマ概要

WordPressのデザインはテーマと呼ばれてます。テーマを構成するファイル群がテンプレートファイルです。
他のブログのようにテーマをテンプレートと呼んでも通じるけど、検索するときはテーマ(Theme)を使う方が良いかも。

ダウンロードしたばかりだと”Classic” と “Default”の2つがプリインストールされてますが、
テーマ新しく追加する場合は、ダウンロードして解凍したテーマのフォルダをWordpressのwp-content/themes/にアップロードするだけ。
デザイン(表示)に並ぶテーマのスクリーンショットをクリックすれば即座に変更されます。
テーマ変更で再構築が必要ない、というのがWordpressの良いところ。

WordPressは1.x系、2.0.x系、2.1.x系、2.2以降と2.5以上では内部仕様が違ってるので、テーマやプラグインはバージョンにあったものを選ばないとエラーが出たりするので注意。
特に2.7は最新とあって対応してるテーマやプラグインもまだ少ないようです。
公式のリスト»
WordPress 2.7 Theme Compatibility List
WordPress 2.7 Plugin Compatibility List
ver2.5→ver2.7に修正

WordPressはコアファイル・プラグイン等全てPHPなので、PHPとmySQLに通じていればかなり色々なことができます。
テーマを構成するテンプレートファイルは、XHTMLとPHPのテンプレートタグで作成されてます。
XHTMLとUTF-8で記述するのがベターですが、HTMLでも文字コードさえ合ってれば問題はないです。
文字コードはWordpress2.5ではUTF-8のみになりました。
テキストエディタはBOM無しのUTF-8で保存できるものを選ぶ必要があります。(メモ帳はダメ!絶対)

テンプレートに記述するWordpress独自のPHPコードはテンプレートタグの他、ループファンクションなどかなり色々使えます。
PHPの関数や変数なんかも使えます。

続きを読む

[WP]WordPress オプションページの作成

どうしても作りたいプラグインが出来たので試しに作ってみてるが、その際避けて通れないオプション設定ページ。
テーマの独自設定を作りたい時にも使える。
Creating Options Pagesから適当に抜粋。
ページそのものの追加は前のエントリーで紹介してるので省略。

最後の方に設定保存のメカニズムについても適当に解説をつけてみた。

続きを読む

[WP]WordPress2.5~2.6 サムネイル画像を取得して表示

テンプレート内でサムネイルを表示する方法について。
サムネイル(中)をカテゴリーで表示したいと思ったとき、自動でサムネイル作られるならそれ表示するようにすればいいじゃん、と思いませんか。

でもwordpress2.5~2.6ではthumbnailが小、mediumが中という分け方をしてるが、ファイル名にはなぜかファイルサイズが付く。
ギャラリーというサムネイル自動表示の新機能があるんだけど、ショートコードだからテンプレートのソースコードでは使えない。
ファイル名は*-thumbnail.jpgとか*-medium.jpgとかでいいじゃん、という気がする。
というかむしろそちらの方が便利だと思う。ので修正されないかなあ…(期待)

自動作成された、これら名前のバラバラなサムネイルをテンプレートで自動取得する方法があった。

続きを読む

[WP]WordPress2.5~2.7用 Tiny-MCEカスタムプラグイン

WordPress2.5のTiny-MCEは非常に具合がいい。Divタグを普通に使えたのが一番驚いた。
そんな具合のいいTiny-MCEのボタン増やしたいと思って、aoinaさんが作られたプラグインみたいな、Tiny-MCEをカスタマイズするプラグインを探してたらいいものが見つかった。

TinyMCE Advanced

▼インストールすると色々追加できるようになります。
Tiny-MCEのカスタマイズが出来るようになるプラグインです

Ver2.7にも対応してます。

続きを読む

[WP]2.2.3から2.5にバージョンアップしてみた

5分で終わった:-)

念のためデータベースとwordpressからのエクスポート両方でのバックアップ。
2.2.3の入ってたディレクトリに2.5の全ファイルつっこんで、アップグレードファイルにアクセスするだけで完了。

これとは別にもう一つ2.1.3のがあるんだけど、多分そちらは苦労しそう。2.1.xって結構違うからなあ…
UTFにしてあるけどプラグインが動かないの多そうな予感がする。

続きを読む