頭脳外部メモリー » Post Topic » 「WP-dTree」 設置説明　WPプラグイン


スポンサード リンク
　

2008

4/8

「WP-dTree」 設置説明　WPプラグイン

Created: 2008年4月8日 （火）　 am 1時20分
modified: 2008年5月9日 （金）　 pm 5時47分
Posted by   Published in プラグイン, 解決済＆解決法

▼

スポンサードリンク



ネットショップ開業ならまるごとEC


スポンサードリンク

今まではカテゴリー表示に「dTree Handler」を使っていたのだが、「WP-dTree」に変更してみようと思う・・・・「WP-dTree」はカテゴリー以外にアーカイブ・ページもツリー表示してくれる。

・・・ほんとは「dTree Handler」以前に設置を試してみてうまく動作しなかったのだが、このページの問題解決のせいでこれも動くようになったのでは？　と思い、再チャレンジ！！・・・まぁ～結果を先に言っちゃうと動いたのだが・・・・問題が多少あり・・・　(T^T)　

最終追記・・・下の方に非常に読みづらいほど追記がありますが、この追記で今までの努力（追記）が全て無に？・・・
・・・下の方で「firefox」の問題について言っていますがこちらで解決しました。

設定方法

そんなに難しくなかったが、少しだけ注意点あり？
とりあえずこちらからダウンロード

そしたら解凍して「WP-dTree」のフォルダごと基本どおりに　/wp-content/plugins/ フォルダに転送します。

管理画面の「プラグイン」のところで有効にして、「表示」の所に「wp-dtree」の設定があるので、クリックして必要な所を設定して、保存する。

設定場所は、上から３ヶ所に分かれていて

WP-dTree Settings : ここで、機能を選択します・・・ちなみに、自分は全てにチェックを付けました。詳しくは・・・・試してみればわかります　(;￣ー￣川 アセアセ

Scriptaculous Effects : ここは、開く時のエフェクトを有効にするかどうかの設定なのですが・・・ここで、少し問題が発生！・・・有効にしてもエラーが出てしまう・・・仕方がないので英語能力のない自分が書いてある文を読んでみると・・・「WP-Scriptaculous plugin」がなんたらかんたらと書いてある・・・これを入れないとダメなのかな？・・・とりあえず入れて有効にしてみることに・・・(*ﾟ oﾟ*) オオー！　出来た出来た～　という事で成功！！　エフェクトの種類は試してみてね～・・・自分は「Appear」に設定しました・・　ちなみに自分の環境では「Grow」は不安定でした。

CSS Properties : ここで、表示されるスタイルを選択します・・・しかし自分の場合は、ブラウザによってこれが優先される場合と標準のスタイルシートが優先される場合があったため両方で同じ設定にしました。

で、問題点がもうひとつ・・・試したところ、アイコンが表示されなかったため「dtree.php」の３８行目あたりにフォルダーのアドレスを指定しました。　
<?php $curdir = "https://example.com/wp-content/plugins/wp-dtree" . $HTTP_SERVER_VARS['SERVER_NAME'] . dirname($HTTP_SERVER_VARS['PHP_SELF']);
黄色のところにアドレスを指定

さらに問題点がもうひとつ・・・日本語が文字化するところがある・・・また、文字コードの問題か？と思い、全てUTF-8にしてみたが解決せず・・・(T^T)　グルルン先生に聞いてみると・・・・発見！！
「wp-dtree_gen-functions.php」 ファイルの68行目あたり
function silpstream_truncate_string($str, $len='16') {
if ( strlen($str) > $len ) {
$str = mb_substr($str, 0, $len)."...";
}
return $str;
}
 黄色文字部分を追加

以上で素敵な表示方法になったぁ～～～・・・と喜んだのもつかの間・・・またまた、「lightBox」君が表示されなくなっているではありませんか～～！！　しかも相変わらずセットで「jQuery」シリーズ全て不能！！・・・・(T^T)
またですかぁ～～～・・・・しかし途中確認したところ平気だったはず・・・ん？怪しいのは・・・「WP-Scriptaculous plugin」おまえかぁ～！！無効にしたら問題なく「jQuery」シリーズ復活！！

・・・という事で、悲しいことですが自分の場合は、エフェクト効果は使えなくなってしまいました・・・｡･ﾟﾟ･(×_×)･ﾟﾟ･｡
くやしいぃ～～　あったほうが絶対かっこいいのに～～・・・

追記・・・その後こちらの設定により「エフェクト効果」＆「lightBox」共に使えるようになりました・・・しかし、自分の環境では微妙な副作用があって好みの「Appear」は「firefox」のみ動作しませんでした。「slide」は「safari」のみ動作せず（まったく開かない！）　・・・そこですべて試したところ・・・何故か、今度は「Grow」のみ「firefox」 「IE6」 「safari」 「Opera」で正常に動作しました・・・ってことで、エフェクトは、「Grow」になりました。

追記 2・・・その後さらにふざけてカスタマイズしました。
どうせなら色々あるエフェクト機能、どれも素敵なので表示するブラウザによって正常に動作するものを、それぞれ使うように設定しちゃいました。

カスタマイズ

管理画面でのエフェクト設定は、「Blind」に設定したものとします。
「dtree.php」ファイルの55行目あたり
}
elseif ( 'blind' == $effStyle ) {
if (strstr($_SERVER['HTTP_USER_AGENT'], "Firefox")) {
$effCall_o = "Grow";
$effCall_c = "Shrink";
$effParam = ", {direction: 'center'}";
}
elseif (strstr($_SERVER['HTTP_USER_AGENT'], "Opera")) {
$effCall_o = "SlideDown";
$effCall_c = "SlideUp";
$effParam = ", {durantion:1}";
}
elseif (strstr($_SERVER['HTTP_USER_AGENT'], "Safari")) {
$effCall_o = "Appear";
$effCall_c = "Fade";
$effParam = ", {durantion:1}";
} else {
$effCall_o = "BlindDown";
$effCall_c = "BlindUp";
$effParam = ", {durantion:1}";
}
}
elseif ( 'appear' == $effStyle ) {
赤色文字の部分を追記 （最後の「 } 」を忘れずに！！）・・・これで、
「firefox」 で表示した場合は、「Grow」
「Opera」 で表示した場合は、「Slide」
「safari」 で表示した場合は、「Appear」
「IE ＆ その他ブラウザ」 で表示した場合は、「Blind」のエフェクト効果になります。
・・・追記 ２－２　この設定はその後、すこし変更しました。　こちら
 
追記 ３・・・・・・・・・・・さらに さらに その後、一時は平気だった「Grow」の設定・・・またまた「firefox」のみ展開ができない状態になってしまった・・・・環境変化のせいだろうか？？　(TOT)　とりあえず、「firefox」の人が見れなくなってしまうので、エフェクト効果は今現在無効になっています。　。。。。｡･ﾟﾟ･(＞Д＜；)･ﾟﾟ･｡。。。

只今、「firefox」のみエフェクト無効にできるカスタマイズ法を試行錯誤中・・・・これが非常に難しい・・・・(T^T)　どこで、エフェクト有効・無効を設定しているのでしょうか？　・・・誰か初心者に教えてぇ～～～～～！！！！　ペコリ(o_ _)ｏ)) 

追記 ４・・・やったよ！！ついに今度こそ完璧だよ！！（・・・追記だらけになってしまって見にくいですが　ペコリ(o_ _)ｏ))）　ついに、「firefox」のみエフェクト無効の方法を見つけたよ！！v(=∩_∩=) ブイブイ!!　・・・「php」の入門者レベルが探すのはほんとにつらかった・・・実際に試してみないと判らないからね・・・(TOT)
さて方法はというと・・・・その前に現在の設定を、エフェクト有効の状態にしておいてください。
そして、まず最初にデータベースに保存される設定場所をもうひとつ作ります・・・（有効の設定と無効の設定の2個を作り使い分けます。）
「wp-dtree.php」のすべて（全部で6個）の「wp_dtree_options」を「wp_dtree_options_firefox」に置き換えた後、管理画面から今度はエフェクト無効にして保存してください。（置き換えは全部じゃなくても良さそうですが・・・安全のため・・・＆ 知識不足のため特定できないのです・・・・・・(゜＿゜i)タラー・・・）
そうしたら、とりあえず置き換えたもの（6個すべて）を元に戻します。「wp_dtree_options_firefox」を「wp_dtree_options」に置き換え。
そしてメイン作業へ・・・・「wp-dtree.php」の89行目にある、1個目の「wp_dtree_options」の部分
function silpstream_wp_dtree_add2head() {
$wpdtreeopt = get_option('wp_dtree_options');

$cd = "<script type=\"text/JavaScript\" src=\"" . get_bloginfo('wpurl')・・・・省略
上記に下記の赤文字部分を追記します。
function silpstream_wp_dtree_add2head() {
if (strstr($_SERVER['HTTP_USER_AGENT'], "Firefox")) {
$wpdtreeopt = get_option('wp_dtree_options_firefox');
} else {
$wpdtreeopt = get_option('wp_dtree_options');
}

$cd = "<script type=\"text/JavaScript\" src=\"" . get_bloginfo('wpurl') ・・・・省略
最後の「 } 」を忘れずにね～
するとどうでしょう？　「firefox」で表示した時だけ、エフェクト無しになりましたでしょうか？・・・自分はなりました。σ(^◇^;)ヒヤアセ　これでやっと完璧になりました・・・そうそう、そういえば「IE６」だけツリーを開きすぎるとサイドバーごと下に落ちますが・・・これは仕方ないでしょう・・・「IE」だし・・・（＾∀＾2）、　「position: fixed;」 も使えないしね・・・「position: absolute;」は使えるけど・・・無理！

そうそう、上記のブラウザにより違うエフェクト効果設定から現在は多少変更になりました。（ブラウザにより不安定なものがあった為・・・）　現在は
「firefox」 で表示した場合は、「エフェクト無し」
「Opera」 で表示した場合は、「Appear」
「safari」 で表示した場合は、「Grow」
「IE ＆ その他ブラウザ」 で表示した場合は、「Blind」のエフェクト効果になります。
「slide」はどのブラウザでも、ちょっと怪しかったので使用しないことにしました・・・

そしてさらにもうひとつ問題が？・・・何と最近お気に入りの「firefox」に問題発生！！「IE」ダメダメ事件でせっかく乗り換えたのに、何故か表示される時に「firefox」で見た時だけこんな感じにボーダーが付いてしまう・・・スタイルシートの変更では直せず・・・・(T^T)　文字が消える部分も「safari」と「IE」は問題ないのに「firefox」だけ改行されてしまう・・・自分の環境だけだろうか？？　調べても見当たりませんでした・・・・「firefox」～～～～～

まぁ～仕方ないので諦めです・・・って言うか、前回の経験からどうやっても自分の今の知識では直せないことが判明しているので・・・・そのうち直るといいなぁ～・・・・σ(^◇^;)ヒヤアセ
追記・・・「jQery」 と 「prototype」の競合は直ったが、ボーダーの件は直らず・・・(TOT)
追記 ２・・・ボーダーの件もやっと解明！！自分の場合はサイドバーに表示しているのでスタイルシートのサイドバー内の「id」に、「img」の指定を下記のように追記したらやぁ～っとなおりました～　v(^o^")v
#サイドバー内のid img {
border: 0px;
vertical-align:bottom;
}　
ちなみに「vertical-align:bottom;」は点線ラインが途切れないようにするためです。
追記 ２・・・「firefox」だけ記事のタイトルが改行されてしまって非常に見えにくい問題と、フォントの指定が無視される問題も解決！！　方法は、上記と同様にサイドバー内の「id」に「ul」や「div」や「span」などのタグを下記のように指定　＆　「 a:hover」や「 a:active」なども同様に
#サイドバー内のid ul {
font-size: 11px !important;
white-space: nowrap;
font-weight: bold;
}
#サイドバー内のid a:hover, #サイドバー内のid a:active {
font-size: 12px !important;
font-weight: bold;
color: #4f6cf4;
}
この設定により、サイドバーからはみ出してしまって醜いが、見にくくなくなりました・・・・{{{{(+＿+)}}}}寒ううぅ～。。
追記 3・・・さらに発見、上記のスタイルシートに
overflow: hidden;
 を追記すると、はみ出さなくなって醜くなくなりました。　（笑）

以上、終了です。
スポンサードリンク








Previous Top



関係のある記事

12 users の書き込みがあります

Subscribe to this post コメント RSS or トラックバック URL
mygif
梶川 said in 8月 29th, 2008 at 2:12 AM

ＤｔｒｅｅをありがたくＤＬさせてもらいました
http://xn--fx–y85fm67p.com/

このＨＰで今使おうとしてるんですけど、点線がＩＥ７だとはなれてしまうんです。どこの設定が悪いのか想像はつきませんか？（ＩＥ６ならきちんと繋がっています）

後、このコメント書くところのお名前、メールアドレス、ウェヴサイトは、どのファイルで書き換えたのですか？デフォルトでは英語ですよね？

いろいろとしつもんしてすみませんが、お願いします。

mygif
梶川 said in 8月 29th, 2008 at 2:46 AM

追加で、、、

open all | close all
と
カテゴリの間はどこでかえれるのですか？
たぶんどこかに改行タグがはいているのだと思いますが。

mygif
jun said in 8月 29th, 2008 at 1:31 PM

梶川　様　コメントありがとうございます。

点線が離れてしまうのは、自分の場合は上記でも書いてあるのですが（分かりずらいと思いますが・・・）firefoxの場合に同じ現象が出ました（ボーダーが付いてしまう問題の部分）
（IE7では、テストしませんでしたが、現在見てみたところ離れてはいませんでした・・・）
自分のやった解決方法としては、スタイルシートに

#サイドバー内のid img {
vertical-align:bottom;
}

で、解決したと思うのですが・・・いかがでしょうか？

コメント欄の日本語化については、自分の場合はテーマの「comments.php」を直接日本語で記述しただけです・・・ご存知かもしれませんが、保存時の文字コードにご注意ください。

追記の「open all | close all」については・・・記憶にないのですが・・・・自分の変わってますか？　（＾◇＾；；；　だとしたら、スタイルシートでやったのだと思うのですが・・・・　(;^_^A アセアセ

あまり参考にならず、申し訳ないです。
ペコリ(o_ _)ｏ))

mygif
梶川 said in 8月 31st, 2008 at 1:02 AM

お返事ありがとうございます
cssの仕組みはまったく知らないので適当に色々試してみましたが相変わらず　エラーです＞＜。線は繋がっても記事関連や表示のエラーが出ます。

ＷＰバージョンは２．５１　
dtreeは2，2　http://blog.cecily.jp/kotou/132/　ここのやつです。

style.cssやdtreeのstyle.phpに
#menu img {border: 0px;　vertical-align:bottom;}　
もしくは
.turee{border: 0px;　vertical-align:bottom;}
と書いて

wp-dtree.phpや
wp-dtree_arc-functions.phpや
wp-dtree_cat-functions.phpの一番上や適当な場所に

や

もしくは

や
と
書きました。

ーーーーーーーーーーーーーーーーーーー
どこかやり方が間違っているのでしょうか？
どのファイルのどこら辺をいじるのでしょうか？

open all | close allですが、このサイトは
open all | close allとCategoriesの間が狭いですよね。

でも私のサイトは間にpかbrかは知りませんが改行が入っています。改行をなくすやり方は分かりますか？スタイルシートというのはdtreeのstyle.phpでしょうか？

mygif
梶川 said in 8月 31st, 2008 at 1:07 AM

書き込めない形式があるみたいですね

wp-dtree_cat-functions.phpの一番上や適当な場所に
div id=”menu img” /div
や
div id=”menu” /div/img

もしくは
span class=”turee” /span
や
div span class=”turee” /span/div
と
書きました

mygif
jun said in 8月 31st, 2008 at 12:35 PM

梶川　様　こんにちは

自分の場合 wpバージョンが、MEの2.2.3なのでバージョン違いが原因の問題などもあるのかもしれませんが・・・いまだにMEつかってます・・・(-_-;)

id を書き込む場所は「wp-dtree_cat-functions.php」ではなく、ご自分の使用しているテーマのフォルダに入っている「sidebar.php」に直接書いた方が良いと思います。そうでないと、phpの記述が間違っているとエラーが出ますので・・・

・・・しかし上記方法よりも、すでにあるid 名を利用して、スタイルシート（テーマフォルダのstyle.css）に
#dtreecat img {border: 0px; vertical-align:bottom;}
#dtreearc img {border: 0px; vertical-align:bottom;}
と書いてみると途切れはなくなりませんでしょうか？　※上記はスタイルシートの一番下に書いてください。
これで、途切れなくなるようならこれが一番簡単だと思いますが・・・

open all | close all　についてですが、ブログのソースを見ていただくとわかると思いますが、当方のものも梶川様のものも同じようには２個はいっていると思います。ですので、自分の場合は改行を消してはいないと思います・・・記憶にないのですが・・・やはりスタイルシート（テーマフォルダのstyle.css）でやったのではないかと・・・関係ありそうなものとしては
line-height
padding
margin
あたりが関係していると思うのですが・・・そこら辺を調整して改善しないでしょうか？・・・自分もスタイルシートは当初素人でしたがネットで調べるとかなり詳しく説明がありますので参考にしてください。
一応、書き方としては・・・
#dtreecatwrapper {
line-height: 15px;
}
上記を記述して試してみてください。（これもスタイルシートの一番下の方に書いてください。）
・・・上記はカテゴリー部分ですのでアーカイブの方は「#dtreearcwrapper 」ですので、うまくいけば同様にしてください

自分もスタイルシートやphpは独学ですのであまり詳しくはありませんのではっきりしたことは言えません・・・スタイル（見え方）を変更したい場合は関係してそうな部分を見つけて本人が色々試行錯誤してみるしかないと思います。　自分も１か所変えたい部分によく数時間費やします・・・上記の場合改行が２個なので１個目は普通にリンク部分の改行で２個目が隙間部分だと思われるので、１行の間隔が大きいのだと思い「line-height」が怪しいと思ったわけです。　それ以外の原因としては間隔をあける「padding」「margin」あたりかと・・・

では、頑張ってみてください。

mygif
jun said in 8月 31st, 2008 at 1:50 PM

梶川　様　こんにちは

只今試させてもらったところ、上記で書いたものはすべて無視してもらって＆元に戻してもらって・・・σ(^◇^;)ヒヤアセ

スタイルシート（テーマフォルダのstyle.css）の一番下に・・・
#dtreecatwrapper, #dtreearcwrapper {
line-height: 12px;
}
#dtreecat, #dtreearc {
line-height: 16px;
}
と、追記するとうまくいかないでしょうか？
数字はお好みで変更してください・・・大きいと離れます。

お試しください。

mygif
梶川 said in 9月 2nd, 2008 at 1:05 AM

キターーーーーーーーーーーー
　北島選手じゃないですけどｗｗ

jun様　見事にくっ付きました。ありがとうございます。
＃dtreecatwrapper等の設定はdtreeのstyle.cssから怪しいと睨んだのですか？

記事数を表示させるやり方は分かりますでしょうか？
私も試してはいるのですが画面が真っ白になったり、表示されなくなったりする始末で、、、＞＜

mygif
jun said in 9月 2nd, 2008 at 8:06 PM

こんばんは　ペコリ(o_ _)ｏ))
うまくいったようで良かったです。

> ＃dtreecatwrapper等の設定はdtreeのstyle.cssから怪しいと睨んだのですか？

dtreeのstyle.cssからというか、この場合dtreeは関係なく見た目（スタイル）の問題なので、dtreeが作ってくれている id名 を利用してスタイルシートで１行の幅を指定しただけです。　・・・結局この問題の原因は、スタイルの指定がされていなかった為だと思います。・・・多分

> 記事数を表示させるやり方は分かりますでしょうか？
・・・自分のphpの知識ではわかりません。　（＾∀＾2）、　まだ初級レベルなもので　ペコリ(o_ _)ｏ))　申し訳ありません。

> 画面が真っ白になったり、表示されなくなったりする
上記の原因はphpの記述が間違っている場合に起こるので、正しく記述すればうまく表示されるようになると思いますのでがんばってください。

あまりお役に立てず申し訳ないです。
ペコリ(o_ _)ｏ))

mygif
梶川 said in 9月 3rd, 2008 at 12:40 PM

ありがとうございます

がんばってみます＾－＾

mygif
mk1623 said in 9月 3rd, 2008 at 10:18 PM

はじめまして。

http://wordpress.org/extend/plugins/wp-dtree-30/installation/
にある様に、WP-dTree 3.4.1 を　WordPress 2.6.1 にインストールしたんですが、動いていないません。

それで、対処法を探して、辿りつきました。

「WP-Scriptaculous plugin」も入れたんですが、こちらの様に、色々弄らないと動かないんでしょうか？

mygif
jun said in 9月 4th, 2008 at 4:49 PM

mk1623 様　コメントありがとうございます。

最初に、ひとつ気になるのは、上記でコメント頂いた梶川様の使用している dtree を使用してみるのはいかがでしょうか？　・・・WordPress 2.5で動かないという不具合があるようでそれを改善したバージョンのようです・・・自分の環境ではどちらも試せないのでなんともいえませんが、最初に試してみる価値はあると思います。↓
http://blog.cecily.jp/kotou/132/

mk1623 様の環境と自分の環境とではバージョンが両方とも違うのでなんともいえないのですが・・・（＾∀＾2）、
基本的には dtree のバージョンが WordPress のバージョンに対応していれば、サイドバー部分に記述すれば表示されると思いましたが・・・

ただ、それ以外の環境的な原因（使用しているスクリプト同士の競合など）でうまくいかない場合もあります・・・テーマで使用しているスクリプトやその他のプラグインとの競合などなど・・・出来れば、一度その他で使用しているスクリプト（プラグイン）をすべて停止（アンインストール）してから試してみると判りやすいかもしれません。
それでも、うまくいかないようなら dtree の設定または記述が間違っているということになります。とりあえず原因を見つけないと対処の仕様が無いと思います・・・

自分の環境でもちょうど同じテーマを使用しているのがありますがこちらではうまく表示できるようですが・・・↓
http://le-coeur.net/sample/i3theme

あまり参考になりませんが、がんばってみてください。
ペコリ(o_ _)ｏ))

コメントほしぃ～よぉ～　σ(^◇^;)

 お名前 (* 必須)

 メールアドレス (* 非公開)

 ウェブサイト (* 任意)