WordPressのTwenty ElevenテーマでPinterest風サイトに変更する | solo.design

WordPressのTwenty ElevenテーマでPinterest風サイトに変更する WordPressのTwenty Elevenテーマで Pinterest風サイトに変更するには、jQueryの Masonryプラグインと Infinite scroll プラグインを組み合わせることによって実現できます。実際に試してみたところInfinite scrollはWordPressのプラグインでありますがMasonryと組み合わせると上手く動作しないのでjQueryのプラグインで組み合わせることにしました。 Twenty Elevenテーマの変更 まず Masonryプラグインのjsファイルjquery.masonry.min.jsと Infinite scrollプラグインのjsファイルjquery.infinitescroll.min.jsをテーマ内のjsフォルダの中にコピーします。アニメーションエフェクト用に使う Easing プラグインのjquery.easing.1.3.jsもjsフォルダにコピーします。 Twenty Elevenテーマのheader.phpをエディタで開きhead内に以下のコードを追加します。このコードはトップページが表示された時にjQueryを読み込み先ほどのjsファイルとindex.jsファイルを読み込みます。 次にindex.jsファイルをテーマ内のjsフォルダ内に作成し以下のコードをペーストします。ローディング用の画像のajax-loader.gifを指定していますが、 Ajaxload のサイトで簡単に作れますので作成しテーマ内のimagesフォルダにコピーします。 jQuery(function(){ var $container = jQuery('#content'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.post', isAnimated : true, animationOptions: { duration: 500, easing: 'easeOutQuart', queue: false } }); }); $container.infinitescroll({ navSelector :

http://bit.ly/Pdq2bA