Category : jQuery

jQuery, jQuery画像関連
0

画像キャプションjQueryプラグイン【jCapSlide】

jCapSlide – クールなjQuery画像キャプション プラグイン – jQuery様で見つけたクールな画像キャプションjQueryプラグインjCapSlideを、WordPress(ワードプレス)に設置してみます!
(いろいろググってみても、初心者向けの日本語での設置手順などは見当たらず….もしかしたらライセンス的にビミョ~とか!?)

↓こんな感じに、
◆DEMOページ:jQuery Image Caption Slide – jCapSlide
出来るようです!!

1、まずは、ダウンロード!
◆DLページ
jCapSlide: A jQuery Image Caption Plugin | Codrops

続きを読む
jQuery, jQueryフォーム関連
0

フォームをクールにデザインするjQueryプラグイン「Formly」

「お問い合わせ」などに使う「フォーム」を、jQueryプラグインを利用してクールなデザインで。

利用するのはFormlyというjQueryのプラグイン。
フォームをクールにデザインするjQueryプラグイン「Formly」1
↑こんなフォームのデザインが、簡単なhtmlコードを記述するだけでつくれます。

1、ダウンロード

Formly – The form glamorizer for jQuery
よりダウンロード⇒解凍。
・formly.js
・formly.css

「formly.js」を/wp-content /themes/利用テーマ/jsフォルダにアップロード。
「formly.css」を/wp-content /themes/利用テーマ/cssフォルダにアップロード。
※利用しているテーマにより、js・cssフォルダがない場合には作成しちゃいましょう!

2、<head>~<head>内への記述

下記コードは、Webデザインレシピ様の
WordPressではじめてのjQueryが動かないという人へ スライドショー レビューも兼ねてを参考にさせて頂いております。

<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('formly', get_bloginfo('template_url') . '/js/formly.js'); ?>
<?php wp_enqueue_style('formly-css', get_bloginfo('template_url') . '/css/formly.css'); ?>

1行目、WordPressに標準で搭載されているjQueryを使えるようにする。
2行目、../利用テーマフォルダ/jsフォルダ内にある「formly.js」の読み込み。
3行目、../利用テーマフォルダ/cssフォルダ内にある「formly.css」の読み込み。
上記3つを<?php wp_head(); ?>の直前に記述する!

次に、
~<head>の直前あたりに下記を記述。

<script type="text/javascript">
jQuery(function() {
jQuery('#my-form').formly({
'theme':'Dark' //指定なし,Light,Darkの3種類
});
});
</script>

↑このコードは、skuare.net – JavaScript / Movable Type / etc.様の綺麗なデザインでフォームを彩るバリデーション付きjQueryプラグイン「Formly」|skuare.netを参考にさせて頂いおります。

通常jQueryを利用する時のjavascript記述では、

<script type="text/javascript">
#(function() {
#('#my-form').formly({
'theme':'Dark' //指定なし,Light,Darkの3種類
});
});
</script>

↑こうなるのですが、WordPress(ワードプレス)でjQueryを利用する時は、この記述方法では動きません。(試しにやってみましたが、やっぱり全く動かず、でした…)
違いは、
# の部分が jQuery という文字列に変更されています。

#(function() {
#(‘#my-form’).formly({
↓↓↓
jQuery(function() {
jQuery(‘#my-form’).formly({

※理由については「wordpress jquery 読み込み」とググってみてください。(解りやすい説明のサイトが多々あります!)
# を jQuery に置き換える!
WordPress(ワードプレス)でjQueryを利用する際にはココがポイントになるようです!

※3行目、jQuery(‘#my-form‘).formly({
の「my-form」はid名ですのでお好きな文字列で。

3、body内にフォーム作成

あとは、
<form id="ID名"~として、普通にhtmlのフォームタグを記述すればOK。
(今回の場合は、ID名=my-form)

例えば、

<form id="my-form" action="" width="80%" method="post">
<div style="font-size:small;">お問合せはこちらから!</div>
<input type="text" name="" size="15" place="おなまえ" /><br />
<input type="text" name="" size="35" validate="email" place="メールアドレス" /><br />
<input type="text" name="" size="18" place="携帯番号" /><br />
お住まい<select name=""><option>北海道</option><option>青森</option><option>岩手</option><option>秋田</option><option>宮城</option><option>山形</option><option>福島</option><option>茨城</option><option>栃木</option><option>群馬</option><option>埼玉</option><option>千葉</option><option selected="selected">東京都</option><option>神奈川</option><option>新潟</option><option>長野</option><option>山梨</option><option>静岡</option><option>愛知</option><option>岐阜</option><option>富山</option><option>石川</option><option>福井</option><option>三重</option><option>滋賀</option><option>奈良</option><option>京都府</option><option>大阪府</option><option>兵庫</option><option>和歌山</option><option>鳥取</option><option>島根</option><option>岡山</option><option>広島</option><option>山口</option><option>徳島</option><option>香川</option><option>愛媛</option><option>高知</option><option>福岡</option><option>佐賀</option><option>長崎</option><option>熊本</option><option>大分</option><option>宮崎</option><option>鹿児島</option><option>沖縄</option></select><br />
<input type="checkbox" name="[]" value="同意する" checked="checked" />規約に同意する<br />
<input type="reset" value="やり直す" /><input type="submit" name="sbm" value="内容送信" />
</form>

こんな感じになります!
フォームをクールにデザインするjQueryプラグイン「Formly」2

※上記の例では、titleタグを入れてません。

追記

jQueryプラグイン「Formly」でクールに装飾された、再検索フォームをつくってみました!
フォームをクールにデザインするjQueryプラグイン「Formly」で検索フォーム
コードは下記。

<form id="my-form" name="my-form" action="<?php bloginfo('home'); ?>" width="97%" method="get">
<input type="text" name="s" id="s" size="33" tabindex="1" accesskey="i" value="<?php echo wp_specialchars($s, 1); ?>" /> 
<input type="submit" tabindex="2" accesskey="s" value="再検索" />
</form>
続きを読む