2010年 8月 の投稿一覧

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

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関数に対応しました。

「ServersMan@VPS」にsubversion をインストールする

ServersMan@VPS」にsubversion をインストールします。

▼subversion

$ sudo yum install subversion mod_dav_svn ※以下の所にファイル等があります /etc/subversion /etc/httpd/conf.d/subversion.conf /usr/share/doc/subversion-1.4.2 $ sudo mkdir /var/www/svn $ sudo svnadmin create /var/www/svn/common $ sudo chown -R daemon:daemon /var/www/svn/ $ sudo svn mkdir file:///var/www/svn/common/trunk file:///var/www/svn/common/tags file:///var/www/svn/common/branches -m "Create trunk, tags, and branches." $ sudo vi /etc/httpd/conf.d/subversion.conf <Location /svn> DAV svn SVNParentPath /var/www/svn # # Limit write permission to list of valid users. # <LimitExcept GET PROPFIND OPTIONS REPORT> # # Require SSL connection for password protection. # # SSLRequireSSL AuthType Basic AuthName "Authorization svn repos" AuthUserFile /etc/httpd/.htpasswd Require valid-user # </LimitExcept> </Location> $ sudo htpasswd -c /etc/httpd/.htpasswd {USERNAME1} $ sudo /etc/init.d/httpd restart

※確認 http://{YOUERSERVER}/svn/common/

でアクセス出来ればOKかと思います。

関連する記事:

  1. 「ServersMan@VPS」にPHP5.3,MySQL5.1,PostgreSQL8 をインストールする
  2. 送受信メールサーバー構築設定(sendmail+Dovecot)
  3. 最近欲しい(読みたい)と思う本

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

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