2008.09.28
前回のエントリー(「WordPressの「続きを読む」の折りたたみをJavaScriptで実現」)で「続きを読む」をJavaScriptで折りたたみにする作業は完了したのだけれど、ちょっと気になる動きが。
続きを展開した状態から閉じると、閉じた分だけ先にスクロールした状態になってしまうのです。(^^;
これだと開く前はどこまで読んでたのかが判らなくなりそうなヨカン。
てなわけで、「続きを読む」を閉じたときは、その「続きを読む」の位置まで戻るようにしようと思いました。
さて。
狙ったところに戻すにはaタグのname属性でリンクを指定すれば良さそう。
有り難いことに元々「#more-番号」がリンク先になってるので「続きを読む」の位置にあらかじめ<a name="more-番号">を仕込んでおけばOKかなっと。
厳密に言うとXHTML1.1以降ではa要素のname属性は廃止されるらしいので、これってちょっとトリッキーなやり方ではあるんですが、XHTML1.0ではセーフwっぽいので良しとします。
(うちのブログはXHTML 1.0 Strict DTD)
折りたたみの参考にさせていただいたここ
→AlienLoveSecrets » WordPressで続きを読むを折りたたむ
の記事の「2.get_the_content関数の$outputへの代入箇所を修正
」の部分から次の記述を探して、
↓
$output .= "¥n¥n".'<span id="more-link-'."$id" .'">
その後ろにこれを足します。
↓
<a name="more-'."$id" .'">
これで閉じたときの飛び先が決まるので、「続きを読む」の位置まで戻るようになりましたー。
上の修正を加えたfunctions.phpの中身はこちら。
もちろん使用は自己責任でよろしく。(^^;
→ functions.phpの中身
(「WordPressの「続きを読む」の折りたたみをJavaScriptで実現」の記事中でも差し替えてあります。)
久々に自分の所の世界樹の迷宮カテゴリを読んでいて気付いたのは、ネタバレ防止のために「続きを読む」が多いので個別記事とカテゴリ一覧とを行ったり来たりしなくてはいけないこと。(^^;
んー、これは面倒だな。
というわけでかねてからやろうと思いつつやってなかった「続きを読む」をJavaScriptで折りたたみにする作業をしてみることにした。
試しに「続きを読む」を押してもらえれば、JavaScriptがオンなら個別ページに飛ばず展開するはず。(^^)b
(元から個別ページでこの記事を見ている方は「続きを読む」は出てませんよー。)
↓
続きを読む »
ということでこの「続きを読む」を折りたたむJavaScriptというのはいろいろあるんだけれど、たにもりの希望としては
・古いブラウザでも動くこと
・JavaScriptがオフの場合は個別記事へ飛ぶ動作(=デフォルトの動作)をすること
という2点は外せないところ。
折りたたまれた部分をいろいろエフェクト付きで表示するJavaScriptなんかは、Internet Explorerでは動くけれど他のブラウザでは動かなかったりするのだ。(^^;
またJavaScriptがオフだと最初から展開された状態で表示されてしまうJavaScriptもあって、これはやっぱりパスしたい。
さてそれでは検索の旅に出るとして、Googleで「WordPress JavaScript 続きを読む 折りたたみ」なんぞで調べてみる。
ヒットしたページのをいくつか試してみて、希望した動作になったのがこちらのサイトのこの記事。
↓
AlienLoveSecrets » WordPressで続きを読むを折りたたむ
じゃ、順番にやってみよう。(^^)b
1.wp-includes/post-template.php にある the_content、get_the_content の2つの関数をテーマのfunctions.phpに名前をリネームしてコピー。
2.get_the_content関数の$outputへの代入箇所を修正
3.折りたたみ用のJavaScript作成
4.header.phpに3で作成したJavaScriptを内に追加
5.index.phpのthe_content関数を入れ替える
という手順だそうなので、まずは関数をコピーするところから。
ってここでいきなり詰まる。(^^;
うちのサイトは小粋空間さんの3カラムテンプレートを使わせてもらっているんだけど、そこにはfunctions.phpなるものが無い。
うーん。
無かったら勝手に作っちゃっていいよね。
テキストファイルを新規作成して関数をコピー、関数名をfunction show_hide_the_contentとfunction show_hide_get_the_contentに変更したのち、「2.get_the_content関数の$outputへの代入箇所を修正
」を参考に$outputへの代入箇所を修正させてもらった。修正したのち、さらに展開していた「続きを読む」を閉じたときに、開く前の位置に戻るように加筆してみた。
→「折りたたんだ「続きを読む」を元の位置まで戻す方法」も参考にどうぞ。
そして忘れてはいけない、最初に<?php、最後に?>を付けて、functions.phpとして保存。
実は最初うっかりこれを付け忘れてアップロードしたもんだから、あとでとんでもないことが起こったのはナイショだ(爆)
(もともとfunctions.phpがあってそこへコピーする場合は元からこの記述があるはずなのでコピー&ペーストだけでOK。)
作ったfunctions.phpの中身はこちらテキストファイルとして見れるようにしておきますね。
WordPress 2.6のwp-includes/post-template.phpが元ファイルです。
同じバージョンならコピー&ペーストして拡張子phpにすればそのまま使えるはずですが、自己責任でよろしく。(^^;
→ functions.phpの中身
[20:30 差し替え]→ functions.phpの中身
で、作ったファイルをテーマディレクトリ(うちだと /wp/wp-content/themes/koikikukan3 )に放り込んでおきます。
次は「3.折りたたみ用のJavaScript作成
」→「4.header.phpに3で作成したJavaScriptを<head>内に追加
」ということですが、見通しいいようにサクッと外部ファイルにしちゃいます。
「3.折りたたみ用のJavaScript作成
」で記述されてるソースをshowmore.jsとして保存。
WordPressのアップデートの時に誤って削除しないように wp/wp-content に入れておきました。
次に、テーマファイルの「ヘッダー (header.php) 」を開きまして、<head>?</head>内に<script type= "text/javascript " src= "(showmore.jsへの絶対URL) "></script>と記述しておきます。
最後に「5.index.phpのthe_content関数を入れ替える
」ですが、うちは「アーカイブ (archive.php) 」と「メインインデックスのテンプレート (index.php) 」と「単一記事の投稿 (single.php) 」と3つに「続きを読む」があったんで、その3ヶ所を書き換えます。
こんな感じで。
↓
<?php show_hide_the_content('続きを読む &raquo;',0,'','&laquo; [続きを読む]に書かれた部分を隠す'); ?>
※「raquo」と「laquo」は変換されちゃうんで全角で書いてますが、ホントは半角ね。
はいー、出来上がりでございますー。
試しにうちの「[カテゴリー] 世界樹の迷宮?: たにもりのもり」を見て、「続きを読む」が上手く作動してるかどうかチェック!(^^)b
JavaScriptがオンだとその場で展開、JavaScriptがオフだと個別記事の「続きを読む」にジャンプしてくれましたよ。
Internet ExplorerでもNetscapeでもOK (≧▽≦)ノシ
これでちょっと見やすくなったかなー。
もしこのブラウザでは見れんぞ、( ゚Д゚)ゴルァというのがありましたら、ひっそり教えて頂けるとありがたいです。(^^;
« [続きを読む]に書かれた部分を隠す
2008.07.18
2008年7月16日付けで、WordPress 2.6の日本語版がリリースされてました。
→ WordPress 2.6 日本語版リリースのお知らせ 2008 年 7 月 16 日, tai
お知らせによると、
これ以降、WordPress 2.5.x はメンテナンスされないので、すべてのユーザーにアップグレードをおすすめします。新機能、更新箇所等は WordPress 2.6 のリリースアナウンスの訳を参照してください。
ということなのでサクッとアップデートしました。(^^)b
まぁもうWordPressのアップデートにも慣れたというか、フルパッケージをダウンロードして、あとは自分の過去日記(→ WordPress ME 2.2.3からWordPress 日本語版 2.5に移行)を参考にしてアップデート完了。
もちろんカレンダーの「土」と「日」の文字に色を付ける作業もやっておきます。
これだけが毎回面倒だぬ。(^^;
ざっと設定周りを見てみたりしましたが、プラグインの設定画面が「使用中のプラグイン/停止中のプラグイン」って感じの二段に分かれてまとめられたんで見やすくなりました。
あとは上の引用文にもあるとおり、WordPress 2.6 のリリースアナウンスの訳を参考にどうぞー。(^^)b
それにしてもアップデート作業が楽なんで、WordPressは(・∀・)イイ!
2008.05.12
だいぶ前になりますが、WordPress 2.5.1の日本語版がリリースされてました。
→ WordPress 2.5.1 日本語版リリースのお知らせ 2008年4月27日
お知らせによると、
WordPress 2.5.1 にはセキュリティフィックスが含まれていますので、すべてのユーザーにアップグレードをおすすめします。
ということなのでサクッとアップデートします。(^^)b
画像がアップロード出来なかった問題もWordPress 2.5.1にて修正されていますよん。
差分ファイルが見つからなかったので(探し方が悪いだけかも)、まずはフルパッケージをダウンロード。
あとは以前WordPress ME 2.2.3からWordPress 日本語版 2.5に移行したときの自分の日記を参考にしてアップデート完了。
忘れちゃいけないカレンダーの「土」と「日」の文字に色を付ける作業もやっておきます。
そういえばプラグインの一覧を見たら「新しいバージョンの×××が利用可能です。」みたいなアナウンスが個別に出てたので、該当のプラグインもアップデート。
うわー、これって何気に便利だわー。
こういうプラグイン関係のアップデートって、バージョンが上がってるかどうかを調べにサイトを訪れるのが面倒になって ついつい放ったらかしになりがちなんだよね。(^^;
一元管理されているというのは素晴らしい♪
さすがに2回目ともなるとアップデート作業も慣れてきたというか、特に問題なく終わりました。
よって今日の日記は何もネタがありませんw
2008.04.03
※ この問題はWordPress 2.5.1にて修正されています。
→ WordPress 2.5.1 日本語版リリースのお知らせ 2008年4月27日
それは4/2のこと。
WordPress ME 2.2.3からWordPress 日本語版 2.5に移行して、カレンダーの色もちゃんと置き換わってめでたしめでたし。
いそいそとエントリーを書き、さて幼SD千夏の写真をアップロードしましょー♪とか思ってやってみたら、いきなり問題発生。
指定されたファイルはアップロードのテストに失敗しました。
だそうです。
せっかく4枚も写真撮ったのにひどいよママン _| ̄|○
アップロードのテストって、別にテストしたわけでなくー、普通にアップロードしたいんですががが。
しかし何度やってもエラーが出る。
ところが不思議なことにサーバーにはちゃんとアップロード出来ていて、サムネイルも作成されている模様。
何がなんだかさっぱりですが、そういうときにはGoogleで調べるに限ります。
どうやら同じ現象が出ている人が居るようで、Internet Explorer特有の問題みたいでした。
(FireFoxだとちゃんとアップロード出来るらしい。)
2.5.1で修正されるのだと思うけれど、それまで画像がアップロード出来ないっつのも困るんで自力でファイルを書き換えましょう。(^^;
参考にさせていただいたのはこちら。
Wordpress 2.5: サムネイル表示に失敗する / 周囲が切れる | nire.com
#6443: fileuploaderfix.patch – WordPress Trac – Trac←ここの記述を見てwp-admin/includes/media.phpとwp-includes/js/swfupload/handlers.jsを修正して上書きアップロード。
うわぁ、「,」一つだけの問題だったのかー。
人間なら「あらコンマが余分だわ、これは無しってことね」って融通が利くものの機械相手だとそうはいかないからなー。(^^;
プログラミングってほんと大変だと思う。
あ、それはさておいて、とりあえず上の修正をかけたらちゃんと画像がアップロード出来る様になりましたよー。
もしも書き換えて差し替えたのにうまくいかないって場合は、Internet Explorerのキャッシュをクリアしてから再ログインすると良いかもです。
うちでは何故かキャッシュをクリアするまではエラー出たままだったので。(^^;
さてもう問題が出ないことを祈ってこれにておしまいですー。
15:47 追記
WordPressのフォーラムにてトピックがあがってました。
↓
WordPress › フォーラム » 2.5 画像・メディアアップロード機能の問題(英訳)
※ この問題はWordPress 2.5.1にて修正されています。
→ WordPress 2.5.1 日本語版リリースのお知らせ 2008年4月27日