Date().getTime();if(instance.group.length<2||current.opts.wheel===!1||(current.opts.wheel==="auto"&&current.type!=="image")){return}e.preventDefault();e.stopPropagation();if(current.$slide.hasClass("fancybox-animated")){return}e=e.originalEvent||e;if(currTime-prevTime<250){return}prevTime=currTime;instance[(-e.deltaY||-e.deltaX||e.wheelDelta||-e.detail)<0?"next":"previous"]()})}})})(document,jQuery);制作メモとか、趣味とか、雑記。前提:やりたいことと制限の話makeshopでWEBサイトを作成することになり、サイト内コンテンツとして新着情報とかブログを付けたいという話になった。makeshopにはそのどちらも機能がない(新着情報はあるっちゃある)んで、wpで作ろうってことになった。makeshop内でwpは作れないけどそこに関してのクロスドメインは問題ない。wpから記事一覧を取得する方法はいくつかあるけど、googleとかyahooとかが取得できるapiサービスを展開してたけど終了してしまった。クロスドメイン下でのRSS取得は、JSではできないっていう仕様がある。セキュリティの問題がどうのこうのって話で、詳しいことはめんどいので割愛。phpであればRSSを拾ってこれるらしいけどmakeshopにphpは組み込めない。RSS配布側で一覧を作ってiframeで読み込めばなんとかなるんだけど、iframeはiphoneだと勝手が悪いんであんまり使いたくない。デザインがぶっ壊れるっていうのが何年も前から言われてるけど、未だにそのままっぽい。jsだけが使える静的ページ(.html)でWPの記事一覧を取得・表示する方法を本ページでやっていく。WPの記事一覧取得について記事一覧の取得といえばfeedとかrssとかが挙がるけど、jsonでも取得できる。一般的なやつhttps://ドメイン/wp-json/wp/v2/postsサムネ画像とか込みhttps://ドメイン/wp-json/wp/v2/posts?_embedとりあえず、URLを置換してブラウザで開けば中身が覗けるのでどんな感じか分かる。組み込みは多次元連想配列で格納されてるのを取得して必要なものを拾って表示させるって感じ。結論の1つとしてここで言いたいのが、RSSはクロスドメインだと制限がかかるけどjsonだったら無条件で表示までもっていける。RSSとJSONで何が違うんだろうね。JSON取得のURLについてWPには初期状態で設置されてる「投稿」とプラグインなり何なりで用意する「カスタム投稿」がある。RSSよろしく、JSONでもそれぞれを分けて取得できる。通常投稿https://ドメイン/wp-json/wp/v2/postsカスタム投稿「news」https://ドメイン/wp-json/wp/v2/news通常投稿・カスタム投稿問わず、取得内容に条件をつけられる。詳しくはこちらの記事でいい感じにまとめられてる。UI」で作成したカスタム投稿は別段なにか設定をする必要もなく、そのままJSONを拾える。サービスが終わったり更新が途絶えたりしたらリスクだからプラグイン否定派の気持ちもわかるけど、やっぱ楽ですね。$('.data').append("読み込みませんでした。class="data"></ul></body></html>jQuery1~3で動作確認済み。ローカル上でも取得できるから動作確認が楽。jsonの取得条件によって読み込める内容が変わるから注意しましょうねって感じ。わからんかったら全取得状態にしておけばとりあえず大丈夫っていう。「len」は表示数の上限指定。コードではJSONに存在する全部をカウントしてるんで注意。通常投稿からアイキャッチ取得は上記からちょっと手を加えることになる。$('.data').append("読み込みませんでした。class="data"></ul></body></html>前例に倣って連想配列のkeyで繋いでいくと「wp:featuredmedia」で躓くことになる。そのままだと使えないんで、「[‘wp:featuredmedia’][0]」と書く。これはアイキャッチ画像をそのまんま取得するように書いてるんで、the_post_thumbnail()で指定できるサイズも格納されてるんで、そっちを使いたかったらもっと改装を掘り下げる。JSONの確認タイトル・日付・URLがあればひとまず足りると思うけど、アイキャッチ画像よろしく他の要素も表示したいってなる場合もある。jsonを表示すると改行とかインデントの無い状態になってるんで、人の目にはすごく見づらい。手作業で改行作業をするのも面倒が勝つ。WEB上にはコード整形を公開してくれてるところがいくつかあるのでそれを利用するのが手っ取り早い。整形ツール自体にコードが指定されてる場合もあるので気をつける。toolstools.m-bsys.comコピペして変換を押せば出る。違和感RSSはクロスドメインに制限があるのに、なんでJSONはクロスドメインをクリアできたのか。WPの仕様なのか、テーマとかでたまたま環境が許可される状態になってるのか、そもそもそういうものなのか。ぶっちゃけた話、理由がわからない。調べてみたら制限があるとかJSONPならいけるよとか色々書いてるけど、現状CORSで指定してない別サーバー・別ドメインに突っ込んでも動作してる。いうことなんだろうか。カスタム投稿のJSON取得JSONのURLは上記にあるとおりだけど、とりあえず、通常投稿とカスタム投稿はJSONの中身が違うことがあるということを念頭に置いておく。アイキャッチ画像を設置してないのにアイキャッチを呼び出そうとするとエラーが出る。抜粋文が無いのに呼び出そうとするとエラーが出る。単純に掲載してないからだったり、カスタム投稿に不要だから存在しない、とか理由は様々ある。呼び出す際の記述が異なる部分があるんで気をつける。存在しないものを呼び出そうとするとエラーが出る。存在しないものを呼び出そうとするとエラーが出る。存在しないものを呼び出そうとするとエラーが出る。一緒なんで、まんま使えると決めてかかったらちょっとだるいよって話。$('.data').append("読み込みませんでした。$('.data_news').append("読み込みませんでした。class="data_news"></ul></body></html>JSONの記述有無チェックJSONは多次元連想配列なわけだけど、keyに値がないって場合、空欄であったりkeyそのものが無かったりする。keyが存在しない場合、抽出するためのコードはエラーを吐いて処理が止まる。具体的には、アイキャッチが登録されてないのにアイキャッチを取得しようとしたらエラーになる。WPのアイキャッチの処理は投稿内容にアイキャッチがなかった場合は表示しないor代替画像を表示するって感じで、投稿内容自体に対してのフォローは無くて、表示側のフォローで対応されてる。URLとか投稿日時とかは記事とともに確実に存在するからいいんだけど、そういう存在があやふやなものを取得する場合には条件分岐を入れておく必要がある。}これでいうと何かしら画像は確定で表示したいから、「img」に何を突っ込むかっていうのを条件分岐で作成。条件分岐のifはkeyの有無で行う。どのkeyが欲しいかによってifの内容が変わってくるんだけども、その有無によって極端に内容が変わる場合がある。表示する内容について色んなバリエーションで記事を書き出して、JSONがどう変わるのかを実際に確認したほうがいい。20211130追記JSONの知識がついた。API」で検索すると参考記事がいっぱいでてくる。blog.megefeps.info2021.11.26しかし、いきなり触ってjsで出力したのは今思えば中々すごいことだと思うよ。上記のやつはフルサイズの画像を取得していた。でかいものが必要ない場合は重いだけ無駄なので、小さい画像を使いたい。json[i]._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url;「medium」のところをthumbnailにするとかでサイズを変えられる。当然だけど取得元が用意しているサイズに準拠してるので、こちらは拾いに行ってるだけなので、できるのは選ぶことだけ。やっててわかったんだけど、何を言ってもバカでかい画像や不揃いをアップし続ける人がたくさんいるので面倒がすごい。整形されたものを拾えばいいよねって。Factory関連記事WEB[js]youtube埋め込みの高速化とか最適化とか結論というよりは足がかりに。WEB[ロリポップ]DBを複数作成するときの小ネタ書くほどのことでもないっちゃ無いんだけど。WEB[jQuery]SNSシェアボタンの自作についてアドオン使えないとか、各サービスのを使うとサイズが統一できないから自分でやりたいとか、そういうときの。難解過ぎるWEB[wordpress]固定ページで投稿記事一覧(アーカイブ)を作るまさかまさかで詰まりまくった。コメントをキャンセルメールアドレスが公開されることはありません。※サイトΔホームWEBスポンサーリンク掲載内容について内容をパクる場合は自己責任でお願いします。内容が古い場合、環境が変わって通用しないことがあります。記事の内容は最適解ではなく、作成時点においての筆者の理解の限界であることが多々あります。修正やそもそもの宗旨替えは不定期に行われるため、活用される場合はご注意ください。Highlighterがいよいよダメっぽいので、プラグインを変更しました。古い記事は表示が壊れてるものがあります。楽天Room主に釣具とか。transaction")},s.open("GET",d,!0),s.setRequestHeader("dlm-xhr-request","dlm_XMLHttpRequest"),s.send()}}タイトルとURLをコピーしました。