WordPress Lab

NextGEN GalleryとWP jQuery Lightboxを併用してレスポンシブ対応のギャラリーをつくる

2014年1月31日 金曜日

NextGEN Gallery自体はデフォルトではレスポンシブに対応していませんから、
横並び1列の画像数は表示カラム数を指定せず、「Gallery Settings」の「NextGEN Basic Thumbnails」にある、
「Number of columns to display」の値は0にしておいて、CSSのwidthを適切な％で設定しましょう。

NextGEN GalleryのAjaxによる拡大表示はデフォルトではFancyBoxですが、Lightboxに切り替えが出来ます。
しかし、レスポンシブデザインでは、拡大画像はそれぞれのデバイスモニタのサイズ以内でないと困りますよね。

プラグイン「WP jQuery Lightbox」なら、デバイスモニタにあわせて拡大画像を表示する設定ができます。

このWP jQuery Lightboxの機能をNextGEN Galleryで有効にするには、
「Other Options」の「Lightbox Effects」で、「Lightox」に切り替えたうえで、
codeを「class=’ngg_lightbox’」から「rel=”lightbox”」に書き換えて、
「Stylesheet URL」と「Javascript URL」の記述を全部削除してセーブすれば、
拡大画像はデバイスモニタに応じたを表示になります。

この設定はそれぞれのプラグインをインストールしてとくに何も触っていない状態で、
かつ干渉を受けるような他のプラグインがない状態で可能になりましたので、
何か手を入れられている場合は同様の結果になるかの保証はありませんので、あしからず。

投稿時のプラグインのバージョン
NextGEN Gallery　2.0.40
WP jQuery Lightbox　1.4.5

 

親のカテゴリーテンプレートで孫カテゴリーの情報をループ表示させる。

2014年1月9日 木曜日

親のカテゴリーテンプレートで孫カテゴリーの情報をループ表示させるソース。
ググってもあんまりないし、あってもたいがい使いにくいので、自分用も兼ねて書いておきます。

 

query_postsを使ったアーカイブページのカスタマイズで「WP-Pagevavi」によるページ送りが404になる件。

2014年1月8日 水曜日

お客様のサイトを制作していて、アーカイブページテンプレートをquery_postsを使って投稿件数を指定するカスタマイズをしていて、プラグイン「WP-Pagevavi」を使ったページ送りをテストしていましたが

<?php if (have_posts()) : query_posts( $query_string . ‘&posts_per_page=XX&paged=’.$paged); ?>
<?php while ( have_posts() ) : the_post() ?>

Loopさせる内容

<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>

どうしても2ページ以降は404ページを表示してしまう。
どうしてかなあ？と調べてみると、

posts_per_pageの件数(XX)が、管理画面の「設定 > 表示設定」で1ページの表示を設定している投稿数より多くないとWP-Pagevaviが正常に機能しないようです。 メインクエリーでは2ページ目が存在しないので、アーカイブテンプレートが読み込まれず、query_postsも実行されないので404となってしまうのです。(大曲さんにおしえてもらいました!）

「設定 > 表示設定」をに触っていなければ、デフォルトは10件。
10に満たない少ないテスト投稿を使って、表示テストなんかやってるとハマってしまいます。

追記: 　pre_get_posts を用いて、メインクエリーそのものを変えてしまう方がいいんだそうです。(大曲さんにおしえてもらいました!）

 

コメントを”完全に”受け付けなくするには。

2013年12月27日 金曜日

いまどき、ブログでコメントって受け付けないのがもうスタンダードですよね。
AmebaでAKB48やタレントさんでもなければ、コメント数で資金稼ぎしてブログ旅してるわけでもないですからね。
スパムや炎上の窓を開けておくことはないですよね。

でも、投稿記事のテンプレートの

を取りはずすだけでは閲覧ユーザーが投稿できなくなるだけで、
コメント投稿用のテンプレートphpを介してスパムは入ってきてしまう可能性があるので、機能そのものを停止しないといけません。

functions.phpに以下を追記して、機能停止しましょう。

(参考:「現場でかならず使われているWordPressのデザインメソッド」(MdN刊)より）

追記: 投稿タイプによらず、全てコメント停止したい場合は、以下でもよいようです。(大曲さんにおしえてもらいました!）

 

「Welcart」と「不動産プラグイン」。

2013年9月26日 木曜日

案件で、日本製の2大WordPressプラグイン、
「Welcart」と「不動産プラグイン」のデザインカスタマイズを体験しました。

 

まず、Welcartですが、

「Welcartはデザインテーマを選びません」と謳っておられますが、
そこそこ独自にカスタマイズされたWordPressテーマになんでも適応するほど万能なことはもちろんないわけで、

やっぱりデフォルトの「Welcart Default Theme」を基本にカスタマイズしていくのが
表示や機能に不具合がなく、作業を進めやすいことは間違いないと思います。

商品詳細やカートページはインストールされたデフォルトの状態だと、
pluginsフォルダ内のusces_cart.cssでデザインコントロールされてしまいますから、
これをカスタマイズしていると、今後来るアップデートで上書きされちゃって、
デザインがパーになっちゃうので、

管理画面の「Welcart Shop」＞「システム設定」で
usces_cart.css の無効化にチェックをしておくのが、デザインカスタマイズでは必須です。

こうしておくことで、デザインはWordPressでの通常作業と同じように、
直感的にthemesファイルの中のテーマだけ触ればいいことになります。

難点をあげるなら、商品登録の際、商品の写真は商品番号と同じ命名をした画像を
あらかじめメディアにアップしておく必要があるところですね。 このへんは有名なショッピングカートASPなどと比べるとすんなりとはいかないところです。

でも、たったそれだけで、ショッピングサイトとしてはもうまったく申し分ない感じです。

 

不動産プラグインについて。

Welcartは独自の「Welcart Default Theme」が無償提供されますが、

不動産プラグインはWordPressにデフォルトで同梱されている
Twenty-Eleven、Twenty-Twelve、Twenty-Thirteenなどからデザインカスタマイズしていくのが楽。
と、いいますか、これらのデフォルトテーマを下地にすることを前提で作られています。

だから別テーマにするにしても、これらから、機能面を維持して変えていったものを使うべきですし、
最近僕が作業した案件では、子テーマでカスタマイズしました。
ちょっとCSSファイルが分散してて面倒ですが、Firefoxの開発ツールを使えば、
ブラウジングされた画面で部分をさわれば、どのCSSファイルのどの記述が効いているかがよくわかるので便利です。
これはWelcartのカスタマイズでも、とても役に立ちました。

ただ、子テーマでのカスタマイズって、じつははじめてだったんですが、
親テーマのCSSの変えたいプロパティを完全に上書きで改訂していかないと
親テーマの設定が有効になっちゃうんですね。
Firefoxの開発ツールで効いているCSSが親テーマ側だったりして、少々とまどいます。
すぐ慣れますが・・・。

またfunctions.phpに関しては勝手が違ってて、子テーマでは初期状態ではまっさらの白紙で、
必要な関数を書き足していくようにしないと、まるコピして子テーマにアップロードしたら、
テーマ自体が全然機能しなくなっちゃいます。

ただこのままだと物件に関するページテンプレートはplugins側で制御されちゃうので、
ここにあるように、functions.phpに記述して、
関連のファイルを子テーマ側に移しとっておけば、はWordPressでの通常作業と同じように、
themesファイルの中のテーマだけ触ればいいことになります。

近畿レインズが管理する物件情報のpdfを専用の拡張プラグインを使えば、簡単に取り込めて、
物件ページが完成するのは、圧巻です。

不動産プラグインは不動産業界出身の技術者のかたが手がけられたもので、
細かいところまで行き届いているようで、業者の方々が、他の高価なASPを利用せず、
このプラグインに流れてこられているのだそうです。

 

いずれも、触るほどに手の込んだ作りこみが実感できます。
お世辞抜きに、世界のWordPressで、日本が誇れるプラグインなんじゃないですか。

 

ページトップへ