contentFollow:RSSTwitterNET-KINGWEBデザインやWordPress、PHP、日々の気づきを書いていきます。Home紹介cakePHPjQueryWEB制作wordpresswordpressを企業用CMSとして使うFLASH2011.01.26wordpresプラグインlocalnavigationをバージョンアップしました。harumaローカルナビゲーションを作成するwordpresプラグイン「localnavigation」をバージョンアップしました。記事中にローカルナビゲーションが表示できるようにショートコードに対応しました。プラグインのページはこちらローカルナビゲーションを自動的に作成するwordpresプラグインコメントは受け付けていません。harumaWordPress投稿画面でカテゴリーにチェックをいれるとソート順が変更される。これを変更されないようにするには、コアのファイルをいじるしか方法がわからなかったのでメモ。falseを追加する。?>とりあえずこれで対応できたけど、コアファイルいじらない方法でなんとかしたいなぁ。harumaFLASHのナビゲーションでみる、メニューにマウスオーバーするとメイン画像が切り替わるやつ。探しても思ったようなものがなかったので、jQueryで作成してプラグイン化しました。こんな動作をしますナビゲーションにマウスオーバーすると対応するイメージ画像に切り替わります。エリアの外にマウスがあるときは、自動で次のナビゲーションに進みます。ロールオーバー前後でナビゲーションの画像が切り替わります。動作デモはこちら設置方法プラグインを下のボタンよりダウンロードします(ダウンロードファイルにはサンプルファイルが含まれています)ImageNavigationプラグインをダウンロードこのプラグインはjQueryが必要です。「#image-navigation」の部分はプラグインを適応させたい場所を任意で指定できます。{$(#image-navigation).imageNavigation();});</script>body内メニューに表示する画像と対応するイメージ画像を記述します。style="clear:both;"></div></div>これで動作します。オプションオプションで色々な設定ができます。});timeスライドショーで次の画像に移動する時間です。animationTimeスライドショーで次の画像に切り替わるフェードの時間です。rolloverTimeナビゲーションのロールオーバーが完了する間の時間です。rolloverTimeナビゲーションのロールアウトが完了する間の時間です。autoPlayfalseにすると自動切り替えしません。rolloverImagefalseにすると画像ナビゲーションを使用しません。テキストでナビゲーションを表示したい場合に。テキストのナビゲーションのデモはこちら画像ナビゲーションのロールオーバーの際のファイル名について。ロールオーバーの画像はファイル名に「_on」をつけた画像が使われまず。「menu01.jpg」という画像のロールオーバー画像は「menu01_on.jpg」になります。最後にプラグインに不備があるかもしれませんが、分からない点や不具合などありましたらコメントください。harumaローカルナビゲーションを作成するwordpresプラグイン「localnavigation」をバージョンアップしました。標準テンプレー関数のwp_list_pagesに対応しました。wordpressを企業サイトのCMSとして使用する場合に役立つプラグインです。プラグインのページはこちらローカルナビゲーションを作成するwordpresプラグイン「localnavigation」コメントは受け付けていません。ショートコードに対応しました。このプラグインは、wordpressを企業サイトのCMSとして使用する場合に役立つ、ローカルナビゲーションを自動的に作成するプラグインです。ウィジェットにも対応しています。こんなプラグインです1.ページの構成から自動的にローカルナビゲーションを作成します→同様の機能をもったプラグインは他にもありますが2.ローカルナビゲーションを任意作成できる→同様のプラグインはないんです例えば「会社案内」ページだけローカルナビゲーションにページ内リンクを表示したい場合などに対応できます。プラグインの使い方1.以下のリンクをクリックして、ファイルをダウンロードします。localnavigationフォルダをpluginフォルダに入れます。3.ダッシュボードで有効にします。設定方法には下の2つの方法があります。(1)自動でローカルナビゲーションを作成する場合(2)ローカルナビゲーションを任意で作成する場合(1)自動でローカルナビゲーションを作成する場合ページ投稿画面に追加されたフィールドで「ローカルナビゲーションを自動で作成」を選びます。これを選択すると、ページの構成から自動的にローカルナビゲーションを表示します。(2)ローカルナビゲーションを任意で作成する場合1.管理メニューの「ローカルナビゲーション」を選択。2.「新規追加」を選択。3.識別するための「名前」を入力して、ローカルナビゲーションに表示するテキストを入力します。テキスト入力欄にはHTMLだけでなく、phpコードが記述できます。href=”#history”>会社沿革</a></li></ul><htmlとphpコードの例>phpコードをつかってリンク先を絶対パスで指定する例です。?>/company/#history”>会社沿革</a></li></ul>4.ページ投稿画面の「ローカルナビゲーション」セクションの「設定したローカルナビゲーションから選択」の項目から選びます。●ナビゲーションに表示しないページを指定できます。「このページをナビゲーションに表示しない」にチェックをいれてください。ローカルナビゲーションにページへのリンクが表示されなくなります。wp_list_pages関数にも対応していて、ページ一覧のリンクにも表示されなくなります。●ページ投稿画面でローカルナビゲーションの表示内容を編集できます。クイック編集を押すと、ローカルナビゲーション設定ページに移動しなくても、設定を編集できます。編集を確定するにはページを公開(保存)してください。●ウィジェットウィジェットに対応しているのでウィジェット管理画面から設定して「ローカルナビゲーション」ウィジェットを有効にしてください。ウィジェットの設定で親ページのタイトルを表示するかどうか指定できます。ウィジェットで表示される際のマークアップを変更する場合は、テーマのfunction.phpの設定を変更します。詳しくは下ページなど参照してください。http://wpdocs.sourceforge.jp/Widgetizing_Themes●テンプレート関数ウィジェットをつかわない場合は、テーマファイルに以下のコードを付け加えてください。local_navigation_page_navigation();この関数には引数も使用できます。local_navigation_page_navigation('before_title=<h3>&after_title=</h3>&hide_parent_title=1');before_title:タイトルの前に表示する文字列after_title:タイトルの後に表示する文字列hide_parent_title:親ページのタイトルを表示しない場合は1●ショートコード記事中にローカルナビゲーションを表示するにはショートコードを使います。[local_navigation]次のような属性をサポートします。div="wrapper"]before_title:タイトルの前に表示する文字列after_title:タイトルの後に表示する文字列hide_parent_title:親ページのタイトルを表示しない場合は1class:ナビゲーションを囲むulにつけるclass名div:値を指定すると全体をそのclass名で囲います。プラグインのアンインストールこのプラグインではwordpressのデータベースにテーブルを追加しています。プラグインを停止または削除する際はプラグインのアンインストールを推奨します。プラグインのアンインストールをすると設定した内容は全て削除されます。アンインストールの方法は、ローカルナビゲーション設定ページから「設定とデータベース削除」を選びます。最後にはじめてつくったプラグインなので不備があるかもしれませんが、分からない点や不具合などありましたらコメントいただければと思います。ショートコードに対応しました。wp_list_pages関数に対応しました。Pluginをつかいました。http://jquery.malsup.com/cycle/(ダウンロードのリンクは左上に文字リンクがあります)上のページにデモがありますが、このプラグインは多くの(記事作成時27種類の)トランジションエフェクト(移行効果)をもったスライドショーが実装できます。/></div>これだけで、とりあえずスライドショーは設置できます。これにトランジションエフェクトを加えるには以下のようにします。トランジションエフェクトを’fade’にする場合。'fade'});トランジションエフェクトには以下の種類が指定できます。blindX:2つの画像が横方向に入れ替わるblindY:2つの画像が縦方向に入れ替わるblindZ:2つの画像が斜め方向に入れ替わるcover:画像が横から差し込まれる。curtainX:画像が横に縮まってアウトする。curtainY:画像が縦に縮まってアウトする。fade:画像がフェードで入れ替わる。fadeZoom:画像はフェードアウトしてズームイン。growX:横に縮まった画像がインしてくる。growY:縦に縮まった画像がインしてくる。scrollUp:画像が上に流れる。scrollDown:画像が下に流れる。scrollLeft:画像が左に流れる。scrollRight:画像が右に流れる。scrollHorz:画像が左に流れる。scrollVert:画像が下に流れる。shuffle:トランプをシャッフルするように入れ替わる。slideX:画像が左に縮まって入れ替わる。slideY:画像が上に縮まって入れ替わる。toss:画像が右上に移動してアウト。turnUp:立方体が下から上に移動するように入れ替わる。turnDown:立方体が上から下に移動するように入れ替わる。turnLeft:立方体が右から左に移動するように入れ替わる。turnRight:立方体が左から右に移動するように入れ替わる。uncover:画像が横に移動してアウト。wipe:画像が左上からインしてくる。zoom:画像がズームしていれかわる。その他にもオプションが指定できます。2000});speed:トランジションエフェクトの時間を指定。timeout:画像が切り替わる時間を指定。pause:1を指定すると画像にマウスオーバーするとスライドショーが一時停止します。random:1を指定すると画像をランダムに表示します。dalay:指定したミリ秒だけスライドを遅れて開始します。負の値も指定できます。sync:0を指定するとスライドのトランジションが同時に起こらなくなります。その他、「次へ」「前へ」やページャーででスライドをコントロールすることができます。詳しくは配布ページのこちらへ。http://jquery.malsup.com/cycle/int2.htmlコメントは受け付けていません。haruma2つ以上のテーブルの各セル幅を合わせたいことがあります。テーブルの縦のラインを揃える必要がある場合など。下のコードを使います。}});コメントは受け付けていません。harumaテーブルの1列目のセルには「col-1」というクラス名、2列目には「col-2」というように列ごとにセルにクラス名をつけることはあると思いますが面倒です。この面倒をjQueryで解決します。$("td:nth-child(3)").addClass("col-3");});これで1列目のセルにcol-1、2列目のセルにcol-2、3列目のセルにcol-3とクラス名がつきます。コメントは受け付けていません。filesystem.」というエラーがでます。page」の意味がわからなかったので、検索すると、FirefoxではURLの入力欄に「about:config」と入力すると設定画面に移動するのでした。設定画面にはいったら、エラーメッセージ通り、「security.fileuri.strict_origin_policy」をダブルクリックして値をfalseに変更すると、エディターは動きました。pluginが影響しているわけでありません。便利なプラグインを紹介したかっただけでした。GoogleMapsuプラグインhttp://martinezdelizarrondo.com/googlemaps/下のほうにデモもあります。コメントは受け付けていません。harumaロリポップで2010年の6月からサーバー移設がはじまりました。これに関連して今まで使えていたロリポップで用意したPEARが使えなくなる現象が起こっているようです。(そんなPEARファイルありませんよ、というエラーがでます)これはphp.iniの設定の「safe_mode」を”off”にすると従来通り使えるようになるようです。1.管理画面の「WEBツール」から「php.iniの設定」を選択。2.「safe_mode」を「off」にします。コメントは受け付けていません。Articleswordpresプラグインlocalnavigationをバージョンアップしました。解消する方法AboutWEBデザインやPHP、日々の気づきを書いていきます。