[wp] 投稿サムネイルに記事やフル画像へのリンクを張る

WordPressに新しく実装された投稿サムネイル用のタグthe_post_thumbnail()は出力されるのが画像だけなんだけど、
これにページへのリンクとか拡大画像とかのリンクをつけたいと思うことがあったので関数作った。

構文

 the_linked_post_thumbnail($size = 'medium', $linkto = 'image', $attr = NULL) 

$size
画像のサイズ。文字列(thumbnail, medium, large, full)か配列( array(32,32) )で。

$linkto
リンク先。image=フルサイズの画像url、page=投稿記事、NULL=リンクしない

$attr
画像の属性。連想配列形式で指定する

$default_attr = array(
			'class'	=> "zoom",
			'title'	=> 'クリックで拡大',
		);

続きを読む

[wp] 自作したショートコードをビジュアルエディタ内で置換する

WordPressに標準搭載されているGalleryショートコードでは、
HTMLエディタの時は[gallery]なんだけど、ビジュアルエディタにした時には画像が表示されるようになっている。

wp-gallery

ギャラリーに限らずとも、この置換が再現出来れば自作したショートコードの見やすさが段違い。

で、実際やってみたら今まで記事に書いた事の範囲でさっくり出来てしまったので、
アクティブテーマディレクトリ下にあるイメージディレクトリのURLを出力するショートコードを例にして、方法を書いてみます。

2019年時点ではこのコード動かないので、TinyMCE(v5)バージョンも書きました

続きを読む

[wp] ページタイトルとパンくずリンクを統一する

ページタイトルとかパンくずナビとかがリンクしてないのが気持ち悪かったので、
WordPressのタイトル周りの統一感を出す関数を作ってみたYO。

シングルページ

タイトルだと「ページタイトル » カテゴリー等 | サイト名」 になり、
パンくずでは「ホーム > カテゴリー等 > ページタイトル」になる。記号はお好みで変更可。
$localから始まるグローバル変数はテンプレートページ内のどこでも使用出来る。

続きを読む

[wp] GoogleMaps を記事本文内に埋め込むショートコードの作成(応用)

基本編で適当に作ったショートコードを改変してマーカーを増やす。

Gmap shortcode

ショートコード間に書いたHTMLとかがそのまま出力されるのは同じで、

  • マーカーを増やす
  • タブ表示
  • 最大化表示
  • style属性でheightの設定
  • showMapBlowup()

以上を追加。

1記事1MAPで複数表示は(使う用事がなかったので)未対応。

続きを読む

[HTML5+CSS3] 第二回コーディングコンテスト に参加してました

締切後のソース公開OKらしいんで晒しておきます。

応募用デザインにキュンとしたので、思い立ったが吉日な勢いでコーディング。
連休中のいい暇つぶしになりました。
イベント自体は前々から知ってたんだけど、腰が重くてなかなか手を出さず…実質的な製作期間は4日くらい。
例によってMooToolsをしこたま多用してます。

応募用デザイン

完成したのはこれ

ボタンにはCSS3のtransitionとグラデーションをフル活用してます。
このプロパティ面白いんだけど手打ちは地獄を見れるぜ…!
transition.cssのカオスさは必見かもしれない。

一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。

続きを読む

[CSS] contentプロパティで挿入できるコンテンツ

clearFixでお馴染みなCSSの擬似セレクタ::before::afterではcontentプロパティというものが使えるわけですが、
::before::afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。

2019年現在は全ブラウザ対応しています。

挿入出来るモノ

大きく分けると3つです。

  • テキスト
  • プロパティの値
  • 画像

続きを読む

[wp] GoogleMaps を記事本文内に埋め込むショートコードの作成(基本)

各記事ごとにマップを埋め込むのはプラグイン使えばいいんだけど、
地図のポイントと記事を連動させる必要がない場合もあるし、
WordPressのページ機能で作成されたページ(例えば会社概要だとか)にだけ埋め込みたいとか、
地図に表示するマーカーが複数あるとか、タブで表示する情報を自由に制御したい…なんてケースもあるわけで。

プラグイン使うほどでもないならショートコード自作して埋め込めばいいじゃないか! 😀 という記事です

単体マーカー

続きを読む

[perl] 学習メモ:Hello world!! → GET値の取得と処理 → ファイルの内容出力

ちょっとPerlが必要になったので、Hellow worldからの過程をメモることにします。
このエントリーの最終目標は、[Ajax + PHP] Web2.0的にHTMLソースを隠す方法 で晒した Request.phpでやってることで、

  1. GETを取得(pとaction)
  2. 取得したGET値pに基づいてファイルを読み込む
  3. 読み込んだファイルの内容を出力

です。
Perlが使えるとさくらインターネットのライトプランみたいなPerlのCGIしか許可されてない鯖で強い。
安価な鯖だとPHPダメって所は多いです。

現時点での自分の状況を書くと…

  • CGI設置経験は豊富(でも最近ご無沙汰)
  • PHPやJavaScriptの文法を元にそこそこ読めるけどイチからは書けない
  • 人が書いたソースのカスタマイズはそれなりに出来る
  • Perlでのファイル操作は全く知識がない
  • POSTとGETの扱いも良く分からない
  • C++に挫折経験あり

設置は経験あるけど作ったことはないっていう状況。
自分の中で消化する為にPHPと比較しながら覚える手を使ってます。
ZeroMail作り始めた時もこんなんでしたわ。

PerlはDreamweaverでサポートされてないので、テキストエディタMeryを使用した。
Exchangeに何かあるかと思ったけどさっぱりだった。

PerlでHello world!!

ローカル環境はXAMPPです。パスはxamppデフォルトそのまんまで、文字コードはUTF-8。

#!/xampp/perl/bin/perl

print "Content-type: text/html; charset=UTF-8\n\n";
print "Hello world!!\n";

拡張子cgiのファイル作って上のソースコピペしてブラウザで開けばHello worldが出力されるのだが、
content-typeが無いとmalformed header from script. Bad header云々のエラーが出る。
文字コードの扱いに関してはPHPよりも厳しいんだよな、確か。

続きを読む

[MooTools] 診断テスト作成スクリプト Diagnosizm

質問に対し、YESまたはNOで答える1問2答形式の簡易診断テストを自動生成するスクリプト。
問題と診断結果はJSONファイルに保存するのでCGI使えない鯖でも設置できます。

diagnosizm

新しく書き直したものはこちら▼
[JS] 9年前の診断テスト作成スクリプトを今風に書き直してみた

続きを読む

ZeroMail ver1.2

AjaxのPOST送信に対応!
MooToolsのForm.ValidatorとかForm.Requestに向けての対応なんだけどjQueryとかでも使えます多分 😀
セッションを使った送信が相変わらずメインなので、Ajax使わないと送信できなくなったというわけではないです。

AjaxでPOST送信されなかった場合は通常のページ遷移による送信を行うため、
フォームタグの属性にactionを入れてあればJavascript無効でもメールフォームの送信ができます。
なのでAjaxでメールフォームを送信する場合と普通にセッションで送る場合とが混在していても、これまで通りコアファイルは1セットあればOK。

Ajaxで送受信を行う場合、デモが置いてある@PAGESのような広告が挿入されるサーバーだと
大抵zeromail.phpからのレスポンスにも広告が挿入されてしまうので、
JavaScript側でそれらを削除する設定が必要になってきます。(scriptだけでも削除しないと最悪フリーズする)
これについては解説ページの方に書きますのでそちらをご覧ください。

ダウンロードは準備中です。来週再開予定。
リポジトリにはうpしてあります。

Ajaxサンプル
通常送信サンプル
 (設置場所は@pages鯖です)

丁度2年前に書いたZeroMailになる前のソース(通しバージョンでいうと0.1)が発掘されたので、これも来週あたりにリポジトリで晒す予定。
実はそれが初の自作PHPスクリプトだったり。

続きを読む

[MooTools] Form.Validator.addAllThese for Japanese

MooToolsのForm.Validatorの足りないところを補う日本語環境向けaddAllThese。中身は殆どzeromailからの転載。
全角チェック、全てひらがな、全てカタカナ、全て全角数字、全て全角英数、日本語の有無、郵便番号、電話番号。
続きに郵便番号検索APIとの連携例と、Form.Validatorを搭載したメールフォームのデモがあります。

Form.Validator.addAllThese([
	['isJpOnly',
		{
			errorMsg:'全て半角英数の文字列は使用できません。',
			test: function(el){if(el.value.length == 0) return true; else return !el.get('value').test(/^[\x01-\x7e]+$/,'i');}
		}
	],
	['isNoAlp',
		{
			errorMsg:'全て全角で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[^ -~。-゚]*$/);}
		}
	],
	['isHirakana',
		{
			errorMsg:'全てひらがなで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[あ-ん]+$/,'i');}
		}
	],
	['isKatakana',
		{
			errorMsg:'全てカタカナで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[ア-ン]+$/,'i');}
		}
	],
	['isZNum',
		{
			errorMsg:'全て全角数字で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[0-9]+$/,'i');}
		}
	],
	['isZAlp',
		{
			errorMsg:'全て全角英数字で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[0-9A-Z]+$/,'i');}
		}
	],
	['isKana',
		{
			errorMsg:'カタカナもしくはひらがなで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[ア-ンあ-ん]+$/,'i');}
		}
	],
	['validate-zipcode',
		{
			errorMsg:'郵便番号の書式に誤りがあります。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/(^\d{3}\-\d{4}$)|(^\d{7}$)/);}
		}
	],
	['validate-tel',
		{
			errorMsg:'電話番号の書式に誤りがあります。',
			test:function(el){
				var value = el.get('value');
				if(value.length == 0) return true;
				
				if(el.get('value').test("-")){
					if(value.test(/^(090|080|070)/)){
						return value.test(/(^(090|080|070)(\-\d{4}\-\d{4})$)|(^[\d\-]{13}$)/);
					}else if(value.test(/^(0080|0120)/)){
						return value.test(/(^0120(\-\d{2,3}\-\d{3,4}|[\d\-]{12})$)|(^0080\-\d{3}\-\d{4}$)/);
					}else{
						return value.test(/(^\d{2,5}?\-\d{1,4}?\-\d{4}$|^[\d\-]{12}$)/);
					}
				}else{
					if(value.test(/^(090|080|070)/)){
						return value.test(/^(090|080|070)\d{8}$/);
					}else if(value.test(/^(0080|0120)/)){
						return value.test(/(^0120\d{6}$)|(^0080\d{7}$)/);
					}else{
						return value.test(/^\d{10}$/);
					}
				}
			}
		}
	]
]);

電話番号の正規表現修正

続きを読む

ZeroMail ver1.1

暇だったのでファイル添付に対応してみました。 添付可能なファイル数に上限は設けていません。 添付可能なファイル: 拡張子:gif, png, jpg, pdf, swf, txt, xls, doc, ppt ファイルタ … 続きを読む

[MooTools] 自動収集対策メールリンク自動挿入2

任意のclassを振った要素にメールアドレスを自動挿入するMooToolsクラスです。

@やドットを置換するっていうのはヴァニラJSver1.1で昔書いたけど、
@の前後にある文字列を置換する手もあるなあと。substituteの説明見てたら思いついた次第。

(X)HTMLソースは出力したい場所の要素にclassをつけるだけ。
body以下を対象にオプションで指定された要素があるかどうかを判別するので、タグやクラス名はなんでもいい。

<span class="email">Mail to Us? Please Enable JavaScript on you Browser.</span>

中に入っているテキストやHTMLはクリアされる。
画像作るの面倒でメッセージにしたけど、代わりに入れておくならメアド画像がおすすめ。

出力されるHTMLは以下2種類。

mailtoリンクを有りにした場合:

<span class="email"><a href="mailto:info@example.com" title="メールを送信">info@example.com</a></span>

リンク無しの場合:

<span class="email">info@example.com

続きを読む

Google Chrome Extention まとめリスト

ChromeのExtensionで実際に使ってみて便利だったもののレビューとリストでござる。
まとめた数→18

Chromed Bird

chromebirdユーザー数の多さがダントツのTwitterエクステンション。
小さなアイコンをクリックするだけでWebと変わらない操作性を持つウィンドウが表示されます。
未読が貯まるとアイコンの鳥が流血したように真っ赤になるので、気になってついクリックしてしまう中毒性は要注意。

Chromicious (Delicious Bookmarks)

chromicious Deliciousのタグ付け、表示が出来るエクステンション。公式のアドオンとほぼ同じ挙動をする。
ブックマークの表示はポップアップウィンドウなので、リンク先を表示する度にアイコンをクリックする必要がない。

One Number

one numberGMail、Google Reader、 Google Voice、Google Waveの未読チェックと表示。
表示はフローティングウィンドウではなく別タブです。

Yet Another Google Bookmarks Extension

yagbeGoogle Toolbarのブックマーク表示と同じ見た目と、それを超える階層表示。動作も軽快&スムーズ。
GoogleBookmarkをメインに使っていたらこれは超おすすめ。

続きを読む