Skip to content
2011.01.26

wordpresプラグインlocalnavigationをバージョンアップしました。

by haruma

ローカルナビゲーションを作成するwordpresプラグイン「localnavigation」をバージョンアップしました。
記事中にローカルナビゲーションが表示できるようにショートコードに対応しました。

プラグインのページはこちら
ローカルナビゲーションを自動的に作成するwordpresプラグイン

2010.12.11

WordPress投稿画面でカテゴリーにチェックをいれるとソート順が変更される

by haruma

WordPress投稿画面でカテゴリーにチェックをいれるとソート順が変更される。
これを変更されないようにするには、コアのファイルをいじるしか方法がわからなかったのでメモ。

wp-admin/includes/meta-boxes.phpのソース内を変更

<?php wp_terms_checklist($post->ID, array( 'taxonomy' => $taxonomy, 'popular_cats' => $popular_ids  ) ) ?>

wp_terms_checklist()の引数に’checked_ontop’ => falseを追加する。

<?php wp_terms_checklist($post->ID, array( 'taxonomy' => $taxonomy, 'popular_cats' => $popular_ids ,'checked_ontop' => false ) ) ?>

とりあえずこれで対応できたけど、コアファイルいじらない方法でなんとかしたいなぁ。

2010.10.06

メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」

by haruma

FLASHのナビゲーションでみる、メニューにマウスオーバーするとメイン画像が切り替わるやつ。探しても思ったようなものがなかったので、jQueryで作成してプラグイン化しました。

こんな動作をします

  • ナビゲーションにマウスオーバーすると対応するイメージ画像に切り替わります。
  • エリアの外にマウスがあるときは、自動で次のナビゲーションに進みます。
  • ロールオーバー前後でナビゲーションの画像が切り替わります。

動作デモはこちら

設置方法

プラグインを下のボタンよりダウンロードします(ダウンロードファイルにはサンプルファイルが含まれています)

ImageNavigationプラグインをダウンロード

このプラグインはjQueryが必要です。

head内

「#image-navigation」の部分はプラグインを適応させたい場所を任意で指定できます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.imageNavigation.js"></script>
<script type="text/javascript>
$(function() {
$(#image-navigation).imageNavigation();
});
</script>

body内

メニューに表示する画像と対応するイメージ画像を記述します。

<div id="image-navigation">
  <div class="navi">
    <ul>
      <li><a href="#"><img src="images/menu.jpg" /></a></li>
      <li><a href="#"><img src="images/menu.jpg" /></a></li>
      <li><a href="#"><img src="images/menu.jpg" /></a></li>
      <li><a href="#"><img src="images/menu.jpg" /></a></li>
    </ul>
  </div>
  <div class="navi-image">
      <a href="#"><img src="images/photo1.jpg" /></a>
      <a href="#"><img src="images/photo2.jpg" /></a>
      <a href="#"><img src="images/photo3.jpg" /></a>
      <a href="#"><img src="images/photo4.jpg" /></a>
  </div>
  <div style="clear:both;"></div>
</div>

これで動作します。

オプション

オプションで色々な設定ができます。

(数字の単位はミリ秒です)

      $(function(){
        $("#image-navigation").imageNavigation({
          time:2000,
          animationTime:500,
          rolloverTime: 0,
          rolloutTime: 500
        });
      });

time
スライドショーで次の画像に移動する時間です。

animationTime
スライドショーで次の画像に切り替わるフェードの時間です。

rolloverTime
ナビゲーションのロールオーバーが完了する間の時間です。

rolloverTime
ナビゲーションのロールアウトが完了する間の時間です。

autoPlay
falseにすると自動切り替えしません。

rolloverImage
falseにすると画像ナビゲーションを使用しません。テキストでナビゲーションを表示したい場合に。

テキストのナビゲーションのデモはこちら

画像ナビゲーションのロールオーバーの際のファイル名について。
ロールオーバーの画像はファイル名に「_on」をつけた画像が使われまず。用意してください。
例えば「menu01.jpg」という画像のロールオーバー画像は「menu01_on.jpg」になります。

最後に

プラグインに不備があるかもしれませんが、分からない点や不具合などありましたらコメントください。

2010.09.20

wordpresプラグインlocalnavigationをバージョンアップ

by haruma

ローカルナビゲーションを作成するwordpresプラグイン「localnavigation」をバージョンアップしました。
標準テンプレー関数のwp_list_pagesに対応しました。
wordpressを企業サイトのCMSとして使用する場合に役立つプラグインです。

プラグインのページはこちら
ローカルナビゲーションを作成するwordpresプラグイン「localnavigation」

2010.08.31

ローカルナビゲーションを自動的に作成するwordpresプラグイン

by haruma

2011/1/26 version1.2リリース ショートコードに対応しました。

このプラグインは、wordpressを企業サイトのCMSとして使用する場合に役立つ、ローカルナビゲーションを自動的に作成するプラグインです。ウィジェットにも対応しています。

こんなプラグインです

1.ページの構成から自動的にローカルナビゲーションを作成します

→同様の機能をもったプラグインは他にもありますが

2.ローカルナビゲーションを任意作成できる

同様のプラグインはないんです

例えば「会社案内」ページだけローカルナビゲーションにページ内リンクを表示したい場合などに対応できます。


プラグインの使い方

1.以下のリンクをクリックして、ファイルをダウンロードします。

http://blog.net-king.com/downloads/local-navigation1.2.zip

wordpress 3.0.x、wordpress 2.9.x で動作確認しています。

2.ダウンロードしたファイルを解凍して出来た localnavigationフォルダをpluginフォルダに入れます。

3.ダッシュボードで有効にします。


プラグインの設定方法

設定方法には下の2つの方法があります。

(1)自動でローカルナビゲーションを作成する場合

(2)ローカルナビゲーションを任意で作成する場合

(1)自動でローカルナビゲーションを作成する場合

ページ投稿画面に追加されたフィールドで「ローカルナビゲーションを自動で作成」を選びます。

これを選択すると、ページの構成から自動的にローカルナビゲーションを表示します。

(2)ローカルナビゲーションを任意で作成する場合

1.管理メニューの「ローカルナビゲーション」を選択。

2.「新規追加」を選択。

3.識別するための「名前」を入力して、ローカルナビゲーションに表示するテキストを入力します。

テキスト入力欄にはHTMLだけでなく、phpコードが記述できます。

<htmlの例>

<ul>

<li><a href=”#speech”>ご挨拶</a></li>

<li><a href=”#outline”>会社概要</a></li>

<li><a href=”#history”>会社沿革</a></li>

</ul>

<htmlとphpコードの例>

phpコードをつかってリンク先を絶対パスで指定する例です。

<ul>

<li><a href=”<?php bloginfo(‘url’); ?>/company/#speech”>ご挨拶</a></li>

<li><a href=”<?php bloginfo(‘url’); ?>/company/#outline”>会社概要</a></li>

<li><a href=”<?php bloginfo(‘url’); ?>/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]

次のような属性をサポートします。

[local_navigation before_title="<h3>" after_title="</h3>" hide_parent_title=1 class="navi" div="wrapper"]

before_title:タイトルの前に表示する文字列
after_title:タイトルの後に表示する文字列
hide_parent_title:親ページのタイトルを表示しない場合は1
class:ナビゲーションを囲むulにつけるclass名
div:値を指定すると全体をそのclass名で囲います。


プラグインのアンインストール

このプラグインではwordpressのデータベースにテーブルを追加しています。

プラグインを停止または削除する際はプラグインのアンインストールを推奨します。

プラグインのアンインストールをすると設定した内容は全て削除されます。

アンインストールの方法は、ローカルナビゲーション設定ページから「設定とデータベース削除」を選びます。

最後に

はじめてつくったプラグインなので不備があるかもしれませんが、分からない点や不具合などありましたらコメントいただければと思います。


更新履歴

2011/1/26 version1.2リリース ショートコードに対応しました。
2010/9/20 version1.1リリース wp_list_pages関数に対応しました。

2010.08.02

jQuery Cycle Plugin 1枚の画像を次々と表示するjQueryのスライドショー

by haruma

1枚の画像を次々と表示するスライドショーを実装する、jQueryプラグインのjQuery Cycle Pluginをつかいました。

http://jquery.malsup.com/cycle/
(ダウンロードのリンクは左上に文字リンクがあります)

上のページにデモがありますが、このプラグインは多くの(記事作成時27種類の)トランジションエフェクト(移行効果)をもったスライドショーが実装できます。

設置は簡単です。

head内

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
    $('.slideshow').cycle();
});
//-->
</script>

body内

<div class="slideshow">
    <img src="images/photo1.jpg" width="200" height="200" />
    <img src="images/photo2.jpg" width="200" height="200" />
    <img src="images/photo3.jpg" width="200" height="200" />
</div>

これだけで、とりあえずスライドショーは設置できます。
これにトランジションエフェクトを加えるには以下のようにします。
トランジションエフェクトを’fade’にする場合。

$('.slideshow').cycle('fade');

または

$('.slideshow').cycle({
  fx: '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:画像がズームしていれかわる。

その他にもオプションが指定できます。

$('.slideshow').cycle({
    fx:      'scrollDown',
    speed:    300,
    timeout:  2000
});

speed:トランジションエフェクトの時間を指定。単位はミリ秒。
timeout:画像が切り替わる時間を指定。単位はミリ秒。
pause:1を指定すると画像にマウスオーバーするとスライドショーが一時停止します。
random:1を指定すると画像をランダムに表示します。
dalay:指定したミリ秒だけスライドを遅れて開始します。負の値も指定できます。
sync:0を指定するとスライドのトランジションが同時に起こらなくなります。

その他、「次へ」「前へ」やページャーででスライドをコントロールすることができます。
詳しくは配布ページのこちらへ。
http://jquery.malsup.com/cycle/int2.html

2010.07.01

jQueryで2つ以上のテーブルの各セル幅を合わせる

by haruma

2つ以上のテーブルの各セル幅を合わせたいことがあります。
テーブルの縦のラインを揃える必要がある場合など。

下のコードを使います。

$(function() {
  cols = $("tr:first td").size();
  for(i=1;i<cols;i++) {
    tmp = 0;
    max = 0;
    $("table").each(function(){
      tmp = $(this).find("td:eq("+(i-1)+")").width();
      if ( tmp > max ) max = tmp;
    });
    $("td:nth-child("+i+")").css('width',max);
    $("td:nth-child("+i+")").addClass("col-"+i);
  }
});
2010.07.01

jQueryでテーブルの1列ごとにクラス名をつける

by haruma

テーブルの1列目のセルには「col-1」というクラス名、2列目には「col-2」というように列ごとにセルにクラス名をつけることはあると思いますが面倒です。

この面倒をjQueryで解決します。

$(function() {
  $("td:nth-child(1)").addClass("col-1");
  $("td:nth-child(2)").addClass("col-2");
  $("td:nth-child(3)").addClass("col-3");
});

これで1列目のセルにcol-1、2列目のセルにcol-2、3列目のセルにcol-3とクラス名がつきます。

2010.07.01

FCKeditorをローカルで動かすとエラーがでる

by haruma

WYSIWYエディターのFCKeditor(現在は後継のCKEditorに名称変更)の便利なプラグインにGoogleMaps  pluginがあり、それをローカル環境で使おうと、Firefox3からFCKeditorを使おうとすると、「Your browser security settings don’t allow FCKeditor to be opened from the local filesystem.」というエラーがでます。

Please open the about:config page and disable the “security.fileuri.strict_origin_policy” option; then load this page again.
と表示されるのですが、「open the about:config page」の意味がわからなかったので、検索すると、FirefoxではURLの入力欄に「about:config」と入力すると設定画面に移動するのでした。知りませんでした。

設定画面にはいったら、エラーメッセージ通り、「security.fileuri.strict_origin_policy」をダブルクリックして値をfalseに変更すると、エディターは動きました。

というか、この記事のエラーにGoogleMaps  pluginが影響しているわけでありません。ただ、便利なプラグインを紹介したかっただけでした。。
GoogleMapsuプラグインhttp://martinezdelizarrondo.com/googlemaps/
下のほうにデモもあります。

2010.06.21

ロリポップ(lolipop)でPEARが使えなくなった

by haruma

ロリポップで2010年の6月からサーバー移設がはじまりました。
これに関連して今まで使えていたロリポップで用意したPEARが使えなくなる現象が起こっているようです。
(そんなPEARファイルありませんよ、というエラーがでます)

これはphp.iniの設定の「safe_mode」を”off”にすると従来通り使えるようになるようです。

1.管理画面の「WEBツール」から「php.iniの設定」を選択。

2.「safe_mode」を「off」にします。