複数の Web サイトを運用していて、WordPress で投稿したブログの内容（タイトルやアイキャッチ、公開日など）を別の Web サイトにも表示させたいと思ったことはありませんか？ 同じサーバー上でしたら読み込むのは簡単ですが、別のサーバー上にある WordPress の投稿を参照するのはハードルが高めです。 そこで今回は、WordPress に標準搭載されている『 WP REST API 』を使ってブログの内容を他の Web サイトに表示させる方法を紹介します。 PHP を使わず JavaScript と HTML だけで実装できるので、表示させたい側の Web サイトのサーバーが PHP に対応していない場合も安心です。 目次 WordPress の『 WP REST API 』について 『 WP REST API 』で最新のブログ一覧を取得する方法 他のWebサイトに最新のブログ

複合検索（絞り込み検索）の実装後編ではループ表示とページング機能を作るとともに、JavaScriptとAjax（jQuery）を使用してより使いやすい複合検索（絞り込み検索）フォームにしてみたいと思います。ワードプレスではAjax用のリクエストルートも用意されていますので確認していきます。 2019年3月5日 検索結果のループ表示と固定ページでのページング 検索結果を標準ループで表示 前回『複合検索（絞り込み検索）をPHPとJavaScriptで実装（前編）』までの内容でWP_Queryに与える引数$argsができましたので、あとはループを回すだけになります。記述は以下のようになります。 <?php $the_query = new WP_Query($args); ?> <ul> <?php if ($the_query->have_posts()) : ?> <?php while (

リスト表示をJavaScriptで絞り込んで表示させる機会がたまにあるので、実装方法を3パターン試してみました。 ■目次 選択した項目で絞り込み検索をする 複数の項目で絞り込み検索をする 配列を使ってリスト側に複数の値を設定できるようにする 1. 選択した項目で絞り込み検索をする 以下のデモの様に、リスト表示の上部に絞り込み検索の項目を配置して、その項目をクリックすると絞り込み検索が行われるパターンです。 デモはサッカーW杯の出場国をグループステージの組み合わせで絞り込む実装です。 See the Pen gvMZGM by tam_yi (@tam_yi) on CodePen. 設定方法ですが、絞り込み検索部分、リスト表示部分の両方にdata属性(data-groupという名前にしています)を設定して、値が一致するものを絞り込むようにしています。 例えばグループAを選択した場合、dat

※2017年11月30日に追記しました 少し前に仕事で作ったものですが、それなりに汎用性が高いので紹介させていただきます クリエイターズシップさんの見積作成ページのように選択項目から選ぶと料金を計算して表示するといった感じです 単一選択と複数選択がある想定です 各種ファイル JSファイル radioprice = 0; checkprice = 0; $('.radio').click(function(){ if($(this).closest('.radiocontainer').find('.checked').length > 0){ radioprice = radioprice - $(this).closest('.radiocontainer').find('.checked').data('price'); radioprice = radioprice + $(this

網元公式サイトでも実装してるヘッダーのとこね。 https://ja.amimoto-ami.com/ 仕様 HTMLはワンソース スクロールしたらヘッダーは常に上部に固定 デモ ソース JavaScript（jQuery） はスクロール量を判定して対象の DOM に CSS クラスを付与（削除）するだけ CSS で .scrolled の見た目作っておく .scrolled 有り・無し間のアニメーションは transition 使う (function($) { $(window).on('load resize', function(){ // masthead scroll var header = $('#header-nav'); // fixed DOM var addclass = 'scrolled'; // add css class var offset = heade

パララックス効果を採用したサイトが一時期ブームになっていましたが、それに合わせてたくさんのプラグインが登場しました。ただプラグインで実装しようとすると細かなカスタマイズが面倒だったりと少し使いづらい面もあります。 …

【jQuery + PHP】クロスドメイン対応版：Google Feed API の代替案を紹介します。 昨日 Google Feed API が停止した事件があり、ウェブ制作者の方々はその対応に追われ、各地で阿鼻叫喚と大混乱が起きていました。 一夜明けて、現時点で Google Feed API が復旧しているようですね。 しかしまたいつ廃止されるかもわからない状況なので、今のうちに対策をしておいたほうが安心です。 ……というワケで。 昨日の記事の続きです。 外部ドメインのRSSをjQueryで読込／出力するには？昨日紹介したやり方ではクロスドメイン問題を解決していないため別ドメインのRSSは読み込み不可能でした。 そもそもクロスドメインとは？「クロスドメイン」とは、一般的には『異なるドメインを跨いで通信すること』を指します。 セキュリティの関係で ajax では同一ドメインのファイルと

プルダウンに親子関係 select要素にjQueryを使って親子関係を持たせる方法をご紹介します。 まずは実際に下記にサンプルを用意しました。 実際のソース HTML 都道府県のoption要素にdata-valがあることに注目してください。 同じ地方に属する都道府県は同じ値になっています。 <select class="parent" name="foo"> <option value="" selected="selected">地方を選択</option> <option value="北海道・東北">北海道・東北</option> <option value="関東">関東</option> <option value="甲信越・北陸">甲信越・北陸</option> <option value="東海">東海</option> <option value="関西">関西</opt

高速化の重要性が叫ばれる昨今だが、WordPressもその例に漏れない。WordPressのようなPHP+MySQLという構成のCMSは、データベースやサーバー間ネットワークがボトルネックになることが多く、その対処法（キャッシュなど）はたくさんあるのだが、フロントエンド高速化となると、フロントエンド業界からの情報発信に埋もれてWordPressに固有のハックを見つけるのが難しいというのが現状ではないだろうか。フロントエンド業界の情報にはSPAを主に作っている人からの発信も含まれるので、WordPressとは必ずしも相性がよくない場合がある。 今回はそんなせわしない時代においても手軽に高速化を実現できるハックを紹介する。 フロントエンド高速化とは？ フロントエンドでの高速化には色々あるが、昨今よく言われているのは次のようなものではないだろうか。 HTTP/2導入でのストリーム並列処理。HTT

イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。

TOPjQuery inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き 公開日：2016.05.30 更新日：2023.03.19 jQuery, アニメーション inview.jsはスクロールして表示領域に入ったらイベントを開始させてくれるさせてくれるjQueryプラグインです。 CSSアニメーションとSVGのアニメーションを行うデモを作ってみました。 inview.js配布元

商品購入や見積もりフォームで、ページ上に現在の合計額を表示させたいというリクエストにヒイヒイ言いながら対応したあの日のメモ。 ○○円以上で送料無料とか、割引価格に切り替え用のチェックボタンも対応可能。 こんなフォーム（デモあり） 商品（項目）ごとに値段（数値）があって、セレクトボックスで個数を切り替えると合計金額が自動的に更新されるフォームです。 こういうやつ。 一応デモページ <div class="form-box"> <p class="buy_itemu_menu" data-price="2500">人力飛行機 <span class="kakaku">(定価 2,500円／会員価格 2,300円)</span> </p> <select name="人力飛行機数量"> <option data-num="0" value="0個" selected>0個</option> <o

レスポンシブWebデザインではおもにウィンドウサイズによってレイアウトを変更していきますが、画像はHTMLとCSSだけでは最適化するのが難しいです。 backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。また、srcset属性を使えばウィンドウサイズや解像度によって画像を切り替えることができますが、IEはまったく対応していないので専用のプラグインを読み込む必要があります。 そこで使用しているのが、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。 ウィンドウサイズを検知して画像ファイル名を置換する HTML側は.js-image-switchのついているimg要素のファイル名を以下のように変更して表示を切り替えていきます（ここでは仮に768pxとします）。.js-image-switchにはCSSでス

デモを見る下記メリットがあり設置も簡単。 YouTubeのページURLをリンクに指定するだけ埋め込み用 iframe をHTMLに書いておく必要がないモーダルウィンドウを表示すると同時に動画を再生CDNが用意されている 検証済みブラウザとOSIE 9～FirefoxGoogle ChromeSafariWindows 7OS X El CapitaniOS 9Android 5 / 6 要点とコードCDNからjQueryを読み込み、専用CSSも読み込んで、専用メソッドを指定するだけ。 <link rel="stylesheet" href="css/magnific-popup.css"> <body> <a class="popup-iframe" href="//www.youtube.com/watch?v=OMyAZh_BT4s"> KISS ME </a> <a class="p

使いやすいサイトを目指して！入力フォームの使いやすさを劇的にアップさせるjs厳選4点ご紹介！【DEMO付】 「使いやすいサイト」に必要不可欠なのがお問い合わせフォームの使いやすさじゃないかと思います。そこで今回は、お問い合わせフォームを使いやすくする為のカスタマイズを色々試してみました。 お問い合わせフォーム関連のjsは色々あるのですが、今回は導入してみて個人的に使いやすいなと思ったものを厳選して4つご紹介いたします。全てDEMO付きですので是非チェックしてみてくださいね。それではどうぞ！ 1.間違いがあったらアラートを出してくれる！：validetta.js わりと基本的な機能ですが、外せないのがこれ。入力フォームに間違いがあった場合、送信時にアラートを出してどこがどう間違ってくれるかを教えてくれます。 この「validetta.js」は、必須項目や数字、○文字以上、○文字以下など設定で

はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 - 一部破壊的な変更があり - 既に非推奨と公表していたAPIを削除 - ドキュメントにない隠しAPIの削除 - 特定の入力値に対する既存APIの振る舞いを修正 サポートブラウザ IE9 以上 Chrome, Edge, Firefox, Safariの最新版とそのひとつ前のバージョン Operaの最新版 iOS 7 以上のモバイルSafari Android 4.0以上

tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ

特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。