AjaxでWordPressのコンテンツを遷移せず表示させる - Show-web
WordPressのコンテンツをtwitterやgoogle画像検索のようにあらかじめ一定数のコンテンツを表示させておき「もっと見る」リンクをクリックで画面遷移無くコンテンツを出力させたいと思います。 INDEX 仕様・デモ WordPressでAjaxを使う /wp-admin/admin-ajax.phpを使う /wp-admin/admin-ajax.phpを使ったデモ 表示用の固定ページ作成 functions.php周り JavaScript登録 全投稿数を取得しクッキーに保存させる 「もっと見る」クリック時のAjax処理登録 課題等 参考サイト 仕様・デモ いくつか課題はありますが、とりあえずの仕様としては以下の通り。 投稿のタイトル及びリンクをあらかじめ一定数表示（今回は10件） 「もっと見る」をクリックする度にAjaxでコンテンツを取得し10件ずつ追加 固定ページ「Ajax
別のページをjQueryのajaxを使って読み込み表示させる | スターフィールド株式会社
jQueryのajaxを使って別のページ(html)をページ内のある部分に読み込み表示させてみました。 概要 index.htmlにて、メニューのボタンを押すと、 $.ajaxにて、1.html(~4.html)のファイルを読み込み、 ページ内に表示させています。 今表示させているページのボタンを押すと、なにも起こらないようにしています。 デモは以下になります。 DEMO 【html】 <div class="gnavi"> <ul> <li><a href="1.html">1のページ</a></li> <li><a href="2.html">2のページ</a></li> <li><a href="3.html">3のページ</a></li> <li><a href="4.html">4のページ</a></li> </ul> </div> <div class="pageDispl
非同期通信（Ajax）をするときはタイムアウト処理を必ず入れてほしい（切実） - Qiita
非同期通信（Ajax）を行うとき、きちんとタイムアウト処理を入れていますか？ スマートフォンやタブレットでWebサイトを閲覧しているとき、地下に入ったりして通信ができなくなるというケースは頻繁に起こります。そんなとき、きちんとタイムアウト処理をしていないと、場合によってはいつまで経ってもローディングが終わらず、ユーザーが離脱してしまうということが起こります。質の高いWebコンテンツ制作のために、必ずタイムアウト処理は入れましょう。 jQueryでの実装例 たとえばjQueryでAjaxを扱うajax()メソッドには、timeoutという便利なオプションがあります。timeoutに指定した時間（ms）が経過しても通信が完了しない場合、エラー処理が実行されます。手軽に実装できるので、ajax()メソッドを使うときは必ず設定しましょう。 // 10秒経っても通信が成功しない場合は失敗処理を実行す
jQuery.post()で、JSON形式のデータを読み込みパースし表示
jQuery の jQuery . post( url [, data] [, success( data, textStatus, jqXHR ) ] [, dataType] ) メソッドを使った Ajax リクエストで、JSON形式のデータを読み込み、パースし、表示する方法。 実装例（サンプル） 実装例（サンプル）の動作について 「toggle」ボタンをクリックすると、「jquery-sample-post-json.js」ファイルを読み込み、パースし、黄色のボックス要素内に表示する。 読み込みが成功すると、「toggle」ボタンの右横に「読み込み成功」と表示する。 「toggle」ボタンを、再度クリックすると、元に戻す。 実装例（サンプル）のソースコード JavaScript <script> <!-- jQuery( function() { jQuery( '#jquery-s
Googleジョン・ミューラー、新しいサイトには「#!」のAjaxよりも「HTML5のHistory API/pushState」を推奨
[対象: 上級] GoogleのJohn Mueller（ジョン・ミューラー）氏は、Ajaxを利用する場合は、「example.com/#!/xyz」のように「#!」を使ってURLを構成するよりも、HTML5で採用されたHistory APIやpushStateの機能を使うことを勧めました。 「HTML5のpushState/replaceState」の使用を推奨 John Mueller氏は、SEO系のフォーラムに投稿された「#!」の使い方に関する2つの別々の質問に、次のようにアドバイスしました。 非難されるかもしれないのを承知で言うと、HTML5で新しいサイトを運用しているなら、HTML5のHistory APIを利用し通常のURLを使ってコンテンツを提供した方がいい。 ナビゲーションにはJSを使いブラウザのURLを変える、しかし最初の読み込みで静的なコンテンツを返す。 より新しい代替
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装する
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装することにより、追加されたコンテンツをインデックスに登録させる方法を紹介します。 １．はじめに 「Googleが推奨するSEOに適した無限スクロールの構成方法」で「無限スクロールのページにpushStateを実装する。（ことを推奨）」とあります。 同じページにサンプルへのリンクが掲載されていますが、自前の実装らしく、汎用的に使えるようなサンプルが紹介されているサイトはひとつもみつかりませんでした。 ということで、配布されているjQueryプラグインを組み合わせて、SEO対策つきの無限スクロールを実装してみたいと思います。 利用するjQueryプラグインはタイトルのとおり、jQuery.pjaxとjQuery.bottomの2つです。 defunkt / jquery-pjax jimyi / jq
Googleが推奨するSEOに適した無限スクロールの構成方法
[対象: 上級] Googleは英語版ウェブマスター向け公式ブログで、検索エンジンが処理しやすい無限スクロール（Infinite Scroll）の推奨構成を説明しました。 細かな話は後回しにして、その推奨構成をさっそく日本語で紹介します。 なお逐一の訳ではなく、理解しやすくするために表現や構成を原文とは多少変えてあります。 構成の概要 無限スクロールからリンクされている個々のアイテム（記事やコンテンツなど）を検索エンジンが確実にクロールできるように、利用しているシステムが、無限スクロールとともにページネーションしたページも作成できるように必ずしておく（無限スクロールで、1つのURLに収めるのではなく、分割して複数のページに分けるということ）。 ※拡大画像はオリジナルのURLで表示します（もう1つの画像も同様） 無限スクロールは、分割したページに変換されることで検索エンジンが処理しやすくなる
世界で最も美しくSEOに適した無限スクロールを実装するサイト、QUARTZ (qz.com)
[対象: 上級] この記事では、非常に華麗な無限スクロールを実装しているサイトを紹介します。 美しく、見やすい、SEOも考慮できた QUARTZ の無限スクロール そのサイトは、ニュースメディアサイトの QUARTZ です。 「百聞は一見にしかず」で、実際に QUARTZ に訪問して見てください。 注目してほしいのはブラウザに表示されるURLです。 無限スクロールで下がっていくと、今あなたが見ている記事に対応したURLに自動的に切り替わります。 下方向だけでなく上に戻ればまたそれに対応してURLが変わります。 titleタグももちろん切り替わります。 個別のURLをブラウザのアドレスバーに入れれば、直接そのコンテンツを閲覧できます。 そして、そこから無限スクロールが始まります。 記事に与えられた個別のURLは、そのURLできちんとGoogleにインデックスされています。 Mozのランドもイ
2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
WordPressでAjaxする方法をざっくりまとめておく
アドベントカレンダーには参加してないけど今日も今日とてWordPressネタの更新です。今年に入ってから17記事目ですよ。concrete5 Japan Inc.なんてやってるのにおかしいですね。 それはさておき月末の追い込み時に調べる時間がないのにまとまった資料がなくて困った件の覚え書き。30分で終わらせようと思ったのに1時間以上かかってしまった…。WordPressのAjaxはやり方が多すぎてとりあえずこうしとけというのがまとまってないように思います。どうせ山ほどあるWordPress本にも書いてないだろうしな。これでいいのかよく分からないので、間違ってたらツッコミお願いします。 んで、どうも wp_ajax_{action_name} または wp_ajax_nopriv_{action_name} というアクションフックで処理するのがよさそうである。noprivの方はログアウト中、
Googleに続いてBingもAjaxにはpushStateを推奨
[対象: 上級] Ajaxを利用する場合のURLの生成にはpushStateを使ってもいいとGoogleのMatt Cutts（マット・カッツ）氏は勧めていました。 またこれとは別にGoogleのJohn Mueller（ジョン・ミューラー）氏に、AjaxのURLにはpushStateを使うことができると僕はGoogle+でコメントをもらったことがあります。 さてこれはGoogleにおいての話なのですが、BingもAjaxを利用したURLのベストプラクティスとしてpushStateを推奨することを公式に表明しました。 Search Engine Optimization Best Practices for AJAX URLs BingもAjaxコンテンツのURLにはpushStateを推奨 BingがpushStateを推奨する理由はGoogleと同じです。 Ajaxの処理で作られたコン
いまさらだけどWordPressでAjaxのやり方 | 高橋文樹.com | プログラミング
この投稿は 12年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 Never Let Me Go 先ほど拙作WordPressプラグインのNever Let Me Goをアップデートしたので、その際の作業ログです。基本的にはWordPressを知っていて、PHPとかJavascriptとかはまあわかるかなという人を対象にしています。それでは、レッツスタディ。かなり長いですよ。 成果物 Ajaxでユーザーを検索して、IDと名前の一覧を取得して表示、選択すると該当するユーザーIDをinputタグにセットします。 管理画面でのインクリメンタル検索 Ajaxを導入した経緯 Never Let Me Go（以下NLMG）はユーザーが自分で退会できるようにするプラグインなのですが（参考）、そのユーザーがコンテンツを作成していた場合、そのコンテンツは消え
WordPressでデータベースを使ったプラグインを作成する | 高橋文樹.com | プログラミング
Facebookの「いいね！」みたいに「誰がつけたのか」が重要になる場合は、ユーザーIDが必要になりますので、別の構造になります。ただ、その場合は凄まじい量のデータ更新があるはずなので、Tokyo CabinetとかのKVS使ったほうがいいのかもしれません。 ちなみに、MySQLで急に怯え出すPHPerがたまにいますが、データの正規化について学べばそんなに難しくはないです。二億件データがあるとか、0.1秒でレスポンスする全文検索作れとか、秒間7万レスポンスさばけとか、二分木検索がうんたらかんたらとかは難しいですが、普通のWebサイト作ってるだけならなんとかなります。 プラグイン作成の下準備 さて、準備ができたらプラグインの作成に入ります。プラグインの名前は”Anyway Feedback”としましょう。なんでもいいから、フィードバックを集められるプラグインですね。「同じ人が重複登録したらど
プラグインで AJAX を使う - WordPress Codex 日本語版
はじめに Ajax/en (Asynchronous JavaScript And XML)はWebページがページ全体を再読み込みすることなく、一部の情報だけを更新できるようにする技術です。これはWordPressの管理画面において、投稿編集時の自動保存や、新規カテゴリーの追加など、色んなことに使われています。WordPressプラグインの中には、投票機能や地図の更新などにAjaxを使っているものがあります。 この記事はプラグイン開発者を対象とし、プラグインにAjaxを追加する方法について説明します。この記事を読む前に、以下のことについて理解している必要があります: Ajax/en - 技術の概要 プラグインの作成 - プラグインの作成方法 プラグイン API - フィルターとアクション - それがなんであり、どうやって使うか WordPress内の意図したページ・投稿・画面にHTMLを追
jQuery :: 画像のリロード :: ウェブデザイナーの日記
Javascriptで（jQueryの話）、既にあるimgタグの中身を更新したい、つまり、src属性の値は同じなんだけれども、画像そのものが変わっているので、強制リロードさせたいとき、たいていのブラウザはキャッシュを呼ぶので、 var src = '/path/to/img.jpg'; $('img').attr('src', src); とやってもなにも変わりません。くそお。 こんなときには、srcの最後に "?xxxxx"みたいなインチキクエリをくっつけてやると、ブラウザは「ちがう画像だ！」と解釈して新しい画像に差し替えて表示してくれるようになります。"xxxxx" に入る文字列はなんでもいいですが、常にユニークであることが望まれるので、普通はtimestampを使うようです。 var timestamp = new Date().getTime(); $('#img-id').att
第9回 Ajax編（後編）
連載目次 $.ajaxメソッドのifModifiedオプションをtrue（有効）にすることで、サーバ側のコンテンツが更新された場合にのみ、successイベントを発生させ、通信成功時の処理を行うことができます。これによって、サーバ側の応答が更新されていない場合の無駄な処理を省くことができます。 少しだけ内部的な挙動を補足しておくと、ifModifiedオプションを有効にした場合、jQueryはLast-Modified応答ヘッダ（コンテンツの最終更新日時）をチェックします。このとき、初回アクセスと2回目以降のアクセスで更新日時が変わっていなければ、successイベントを発生せずにerror／completeイベントのみを発生させるわけです。 具体的な挙動も確認してみましょう。以下はサーバ側のコンテンツ（Modified.aspx）にアクセスするためのサンプルです。ifModifiedオプ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
