2008.09.28
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('続きを読む &ｒａｑｕｏ;',0,'','&ｌａｑｕｏ; [続きを読む]に書かれた部分を隠す'); ?>
※「ｒａｑｕｏ」と「ｌａｑｕｏ」は変換されちゃうんで全角で書いてますが、ホントは半角ね。
はいー、出来上がりでございますー。
試しにうちの「[カテゴリー] 世界樹の迷宮?: たにもりのもり」を見て、「続きを読む」が上手く作動してるかどうかチェック！(^^)b
JavaScriptがオンだとその場で展開、JavaScriptがオフだと個別記事の「続きを読む」にジャンプしてくれましたよ。
Internet ExplorerでもNetscapeでもOK (≧▽≦)ﾉｼ
これでちょっと見やすくなったかなー。
もしこのブラウザでは見れんぞ、( ﾟДﾟ)ｺﾞﾙｧというのがありましたら、ひっそり教えて頂けるとありがたいです。(^^;
Web拍手
このページへのリンクを作る
このページへのリンクは自由にどうぞ。JavaScriptが有効であればエリア内クリックで全選択されますので、コピーしておつかいください。
↓
コメント & トラックバック