Blogブログ

最近見かける事が多くなったjquery プラグイン、またgithubで使われていることで有名な、pjaxを実装してみます。 pjaxとは、pushState + ajax　を意味する造語だそう。 そしてpushStateとはHTML5で導入されたURLを操作するAPIのこと。 これを使うことで、ajaxでコンテンツを入れ替えてもページ移動が行われる→ブラウザの進む・戻るボタンが使える、PVが取れる。 さらに重複するコンテンツの読み込みがなくなるので、スムーズな遷移が実現出来て、ウェブサイトやアプリケーションなどのUX向上に繋がります。 https://github.com/defunkt/jquery-pjax 対応ブラウザは以下。 caniuse.com/#search=pushstate pushStateが実装されていない、E9以下では使えません。 まずは静的ページへ実装してみます。 静的ページ内の、#pjax-container内部のコンテンツを入れ替える想定。 サンプル Sample page jquery と、jquery.pjax.jsを読み込んでいます。 その後、mypjax.jsで実装しています。 最初は$.pjaxをコールした後にanimateするような実装だったが、コンテンツが一瞬表示されてから透過を初めてしまうケースがあったので、 animateのコールバックでpjaxするのが吉。 if ($.support.pjax) { $(document).on(‘click’, ‘a’, function(e) { e.preventDefault(); var href = $(this).attr(‘href’); $(‘#pjax-container’).animate({ opacity : 0 }, 300, function(){ $.pjax({ url: href, container : ‘#pjax-container’, fragment : ‘#pjax-container’, timeout : 2000 }); }); […]

wordpress 多言語化 ■　プラグインファイル内の記述 前提として、mypluginというプラグイン名で、langという場所に言語ファイルを保存するとする。 プラグインのメインとなるファイルに、 load_plugin_textdomain(‘myplugin’, false, ‘myplugin/lang’); と記述。これで言語ファイルを読み込む設定が出来た。 ソース上の多言語化したいテキストには、以下の様に記述。第二引数には、上のload_plugin_textdomainで設定した第一引数を記述する。 __(“text”, ‘myplugin’) -> “text”を返す _e(“text”, ‘myplugin’) “text”を出力 上記が正しく設定されていれば、myplugin/lang に置かれている言語ファイルを読み込むはず。 ■言語ファイルの作成 ここからはpoeditを使う。 予め、poeditをインストールしておく。 http://www.poedit.net/download.php まずはcatalogを新規作成。 Source pathは、例えばxamppで作業してる場合は base path -> C:\xampp\htdocs\my_wordpress\wp-content\plugins\myplugin paths -> . のように設定。 次にSources Keywordsに下の2つを追加。 add _e, __ この状態でまずdefaultとして保存。この時に拡張子を.POTとする。 一旦閉じて、新たにnew catalog from POTで先に作成したdefault.POTを元に作成する。 PathとKeywordの設定を行い、保存するときに myplugin-ja.poの形式で保存する。 すると自動で翻訳該当のテキストを抽出してくれるので、あとはpoeditにしたがって入力していく。