ACFリピーターフィールドにショートコードを追加する

ショートコードを追加

ACFで作ったリピーターフィールド(フィールドタイプ:text)追加と同時に値をセットして、ビジュアルエディタ内で使い回したい。

フィールドを追加すると同時にショートコードをセットしたい

…これがややこしく考えすぎてて手詰まってたんだけど、あっさり解決w
やりたかったことは、

  1. 追加ボタンをクリック
  2. 追加されたフィールドセットのinput[type=”text”]フィールドにショードコードを追加
  3. input[type=”text”]をクリックで全選択
  4. コピー
  5. ビジュアルエディタ内に貼り付け

何がやりたいの?結果どうなればいいの?を書き出すのが大事だなぁと痛感。

eventはこの場合必要ないか (^^)。
※ ACFのリピーターフィールドってソート可能(ドラッグアンドドロップ)だったので、順番入れ替えた際、ショードコードの中身も入れ替えるよう追記した。

ショートコードを追加
追加ボタンをクリックでショートコードを追加する。

jQueryの$.when

jQuery.when()

最近の世の中の流れにさっぱり乗っていない(むしろ逆走してる?)感が凄いですが、そんなことなど全く気にせず今日のメモ。
スライダーや画像をフェードインさせたりフェードインが終わった後何か次のアクションをさせたりしたい場合に便利。

Deferred Objectの中の一つ。いろいろと長くなっちゃいそうなので、とりあえず動いたやつを。

ページロード時に画像をfadeInで出した後、FlexSliderを表示させる感じです。
.queue()とかでもOKなのかな?

.thenを使ったのは、.done, .failまとめて行けるなぁと思ったからですが、アニメーションさせる場合って、考えなくても良かったのかなぁと思いました。

ajaxでのサンプルというか、記事が沢山ありましたが、こういう場合にもOKだなぁと思った次第です。
.animateやその他イベントのcallbackを繋ぎまくるよりスッキリしてて分かり易いですね 🙂

Facebookコメントいただきました!!

政倉 智まだ調査できていませんが、ES6 で Promise が導入されたため、書き方がちょっと変わりそうです。jQuery 3 はこれに伴う変更が入ってたと思います。

もちろん、jQuery.when は依然として使えますので大丈夫です。

jQuery 3, Promise, ES6などなど!! 政倉さん、あざます!!!!!
Qiitaのまとめも見つけました。翻訳こちらもありがたいっすね〜 😀

施設内などで表示させる当日イベント作ってみた

館内イベント入力画面

基本は施設内でスマホでアクセスして、「(スタート時間)から(イベント会場)で(イベント名)が開催されます。」というのを画面に表示させるというもの。
作り方はきっとたくさんあるんだろうけど、悩んで作ったのが以下。

使ったのはAdvanced Custom Fieldsプラグイン。ドキュメントもネット上にも情報たくさんある (^^)。
ドキュメントはこちら↓↓
ACF { Advanced Custom Fields Plugin for WordPress

最初に悩んだのが入力画面

イベントの構成はこんな感じ。

イベント構成

この構成が、

  • 平日
  • 土日祝
  • その他(イレギュラーな場合で自由に書き換えが利くように)

とのこと。

各イベント毎に投稿タイプ作れば簡単そうだなぁと思ったんだけど、入力する時のことを思うと、1日のイベントが一画面で見えていた方が便利だ。僕が入力担当だったらその日のイベントが一覧したいってことで、

入力画面作ってみた

冒頭でも書いたけど、使ったのはACF。もうこれはずっとお世話になりっぱなしな気がする。先ずは入力画面。

館内イベント入力画面
各項目入力するのはちょっと手間かも知れないけど、一旦作ってしまえばプリセットっぽい感じにできるかも (^^)

この画面が最適かどうかは別問題として、全く素人のカミさんに黙って見せて、入力方法がわかったようなので、この形で進めた。

で、次は入力したデータを出力。コードはこんな感じ。

タブが広すぎ…^^;

今回は一つのWordPressの中に別ヘッダ作って、特定固定ページ配下はスマホ用のレイアウトに変更するってやり方で作ったので、content-xxx.phpみたいな感じで用意した。

ここで気になるのが、ACF使った場合、いつも各項目をget_fieldで持ってくるんだけど、項目が多くなると、いちいち面倒。まとめて一発で持ってくる方法ってないのかなぁ…

実際に出力

今回は、当日のイベント表示なので、本来はリアルタイムで表示させられたらそれが一番いいと思うんだけど、あれこれ調べたり、相談したりした挙げ句、GOWASの藤井さんから教えていただいたシンプルなやり方で行くことにした。

流れはこんな感じ

  • jQueryの.load
  • タイマーで一定時間おきにデータを取得
  • Web Storage を使って判定
  • content-xxx.phpの内容をフッターへ読み込む

で、タイマーの部分はコレ

各イベントは10分前から表示させるんだけど、ウザかったら非表示にしたいのでこの部分でWeb StorageのsessionStorageに

  • イベント名
  • イベント(○回目)の終了時間

をセットして、非表示になったイベントが実際に終了したときはsessionStorageを削除するといった流れになるよう書いてみた。

プリセットっぽく選択する

平日、土日祝、その他と3パターンのイベントを作成したら、別途用意しておいたページ内に用意したラジオボタンで選択する。

イベントパターン選択

平日、土日祝とか自動化した方が楽ちんかなぁと思いつつも、パッと思いつけなかったし、ある程度手動の方が良かったりして…と言い訳的な考えもあって、この形に (^^)

イベントの出力で一番悩んだところは同じイベントが複数回あるところ。
非表示の設定が難しかった。。。

そもそも論だけど、イベント登録自体を変えればあまり悩まなくて済んだのかもしれないけど。。 (^0^;)

それから、今回いろいろな方に雑談から相談になったり、いろいろアイディアをいただいたりしてとても勉強になったし、ありがたかった。

1人じゃないってホント素敵っすね 😀

それからもし「このクソコード!!」とか思う優しい人がいたらツッコミをおなしゃす (^0^;)

.closest()

とりあえずメモ。
.closest(tr).remove(); とかで一番近い親要素の中の何とかを削除。

近いやつを捕まえるイメージ (^0^;)

.unwrap() 使ってクライアントさんの使い勝手を考えてみる

手間を減らしてみよう

WordPress好きです、ええ、大好きです。

先日、WordPressを使って美容室サイトを作っていた際、クライアントさんがPC操作はあまり得意ではないことが判明しまして、一先ずやってみたことをメモとして残しておこうと思います。

クライアントさんが普段からブログなどを書いている方なら、特に迷う必要もないと思いますが、そうでない場合、投稿に画像を追加する際は、

  • メディアを追加ボタンをクリック
  • 載せたい画像をPCの中から選ぶ
  • タイトルやキャプションを書き込む
  • 左・中央・右寄せもしくは、なしで画像を置く場所を選択
  • 投稿に挿入ボタンをクリック
のような操作を覚える必要があるのではないかと思います。
操作は覚えてしまえばいいのですが、不慣れな操作+更新頻度が低い場合、クライアントさんは忘れてしまう確率が高いと思います。  “.unwrap() 使ってクライアントさんの使い勝手を考えてみる”の続きを読む

もしも Fancybox for WordPress でイメージマップが使いたくなったら

ドリフコント的なタイトル(古)ですが、先日サイトを作っている際に、どうしてもイメージマップ + Lightbox系の動作をさせなければならなくなったので、メモを残しておこうと思います。以前使ったFancybox for WordPressに引き続き今回もこれで。便利〜!!

やってきたデザインは、院内マップ。
どうやらパンフレットと同じものを使うらしく、建物の形は斜めになっていてさらに隣り合う部屋がちょっと重なってる………。四角くリンクをおけるならリストタグでやれちゃいそうなんですがパッと頭に浮かんだのがイメージマップ。← 懐かしすぎるよ >_<

しかもそこをクリックしたら、担当者の顔写真や院内の画像をライトボックス風にして欲しいとのご要望でした。サイト全体でFancybox for WordPressを使用していたので、もしかしたら、イメージマップも大丈夫なか?と思い、サンプルを作って当て込んでみると……反応無し。ググってみると、 “もしも Fancybox for WordPress でイメージマップが使いたくなったら”の続きを読む

Fancybox for WordPress (version 3.0.2) を使ってみた

16 Useful WordPress Lightbox Plugin Showcaseより

 

banner-772x250-2
今回はこれ使ってみた。

サイトのトップページってスッキリしていながらも「ギュッと感」があるのが個人的な好みです。何でもそればっかりじゃダメだけどね。

WordPressのプラグインにもLightbox系はたっくさんありますが結局使うのってシンプルなヤツになったりしません?僕は結局そうなっちゃいます。

どうしても気に入ったものがなきゃぁ自分で作れば良いという考え方ももちろんアリですが、手軽に試せるしWordPressだったら管理画面の作り方とかも勉強になります。最近どちらかというと後者の方に興味があります (^^)

ってことで16 Useful WordPress Lightbox Plugin ShowcaseからFancyBox for WordPressを使ってみました。

設定項目がわかりやすい

動きはシンプルだけど、設定画面がタブで区切ってあり、一部英語にはなっていましたがメニューも日本語でわかりやすかったです。

 

ebc643783dec078243d9c84837cb4c51
オーバーレイの色や不透明度など割と思ったとおりに設定できてなおかつ操作し易い(これ大事っすね)

基本、プラグインを有効化すればリンク貼ってるimgは全て効果が適用されます。でもこれだと、特定の投稿や固定ページで動作して欲しくなかったりしますよね。。プラグインによってはチェックボックスで個別に選択できるものもあったりしますが、「スライドショーにならんでもいい」とか、「キャプションだけ出て欲しい」とかサイトの雰囲気によって不要な設定もあったりします。

結局自分で作れ!! 的なところへ意識は向かっていくのですが……^^;

FancyBox for WordPressにもあった

FancyBox for WordPressには特定の固定ページや投稿タイプなどの選択画面はありませんでしたが、ギャラリー設定内にありました

 

3aa0a068f0874aa46a470e7822f6701c
特定の要素だけ外すことができるようになってた (^^)。

今回はどうしても1箇所(ページ)だけ機能して欲しくないページがありまして、でも動きやその他の設定はこのFancyBox for WordPressが非常に良くて、どうにかならないものかと設定画面のタブを開いていて見つけました (^^)。
要は機能して欲しくない部分にclass=”fancybox”が入らないようにしてやればいいワケです。
外部jsにremoveClassを書いてみてんですがダメでした、が、管理画面 > Galleries > FancyBoxへのカスタム表示の適用内に

jQuery("foo a").removeClass("fancybox");

って書いてあげるだけでOKでした (^^)。チェックボックスではありませんが、これなら細かく指定できて親切ですよね (^^)
僕もこんな親切な設定画面付きのプラグインを作れるようになりたいです (^^)

シンプルにオーバーレイしてくれるだけで十分なんだよ!! って時にはオススメのプラグインだと思います (^^)

ネタもと

jQuery使って画像にキャプションをオーバーレイ

非常にシンプルです

画像にキャプションをオーバーレイ。これってjQueryのプラグインたくさんある。

などなど。。どれもサクッと使えていいのだろうけど、とりあえずやってみよう!! やればわかるさ (^^)

//画像へキャプションをオーバーレイ
jQuery(".works_meta").css({
	position	:	"absolute",
	bottom		:	"-200px",
	width		:	"200px",
	height		:	"200px",
	opacity		:	"0"
});

jQuery(".works_each_entry").hover(function(){
  jQuery(this).children(".works_meta").stop().animate({
  	bottom		:	"0",
  	opacity		:	".65"
  }, 600, "swing");
  jQuery(".works_meta a").css({
	  position	:	"absolute",
	  width		:	"100%",
	  height	:	"100%",
	  top		:	"0",
	  left		:	"0"
  });
}, function(){
	jQuery(".works_meta").stop().animate({
		bottom	:	"-200px"
	}, 600, "swing");
});

.children()が便利 (^^)。要は画像+キャプションを出したいボックスを作って画像以外のデータはそのボックスから外に出してoverflow: hidden;しといて、hoverで出すってヤツ。最初は.children()を付けてなかったからhoverで全ての画像にキャプションが出て非常に残念な動きだった…^^;

children([exper])

要素内の全ての子要素を選択する。選択される要素は直下にある子要素のみで、孫要素以下は対象外となる。

この関数は、条件式を渡して選択される子要素を更に絞り込むことも可能。
parents()関数が先祖まで辿って行くのに対し、children()関数は直下の子要素のみ選択する。

直下の子要素のみ選択ってのがいいっすね (^^)
あとは、各要素を順番にフェードインさせたかったので、jQueryで画像などコンテンツ要素を順番にフェードインさせる方法を参考に、

//.works_each_entryを順番にフェードイン
jQuery(".works_each_entry").css({
	display		:	"none"
});
var delaySpeed	=	250;
var fadeSpeed	=	1000;
jQuery(".works_each_entry").each(function(i){
	jQuery(this).delay(i*(delaySpeed)).css({
		display	:	"block",
		opacity	:	"0"
	}).animate({
		opacity	:	"1"
	}, fadeSpeed);
});

でOK (^^)。WordPressで作ってるサイトなので、今回はカスタムフィールドに追加した画像を一覧表示でやってみた。ついでにトップページへもスライダーで出すようにしてみた。結構便利かも (^^)

ネタもと

jQueryメモ:toggleClass();

メモ。

jQueryのslideToggle();使った時、classも入れ替えたいとき便利。

.slideToggle( [duration] [, callback] )

$(".under_close_panel").click(function(){
$(this).parent().slideUp(1500);
$(this).parent().prev().toggleClass("active"); //activeがあるときは消して、ないときは追加
});

参考URL