「WordPress で『続きを読む』の折りたたみ」を特定のページだけに適用する
「WordPress で「続きを読む」の折りたたみ Web2.0」では、スライドダウンで本文下に続きを表示するカスタマイズをご紹介しましたが、カテゴリーアーカイブや月別アーカイブでも折りたたみが適用されてしまうため、追記部分のテキスト量が多い場合、ページの読み込みに時間がかかる可能性があります。
ということで、本エントリーではインデックスページのみ折りたたみを適用し、アーカイブページでは記事ページへのリンクを表示するカスタマイズを紹介します。
注:このカスタマイズを行う前に「WordPress で「続きを読む」の折りたたみ Web2.0」を設定してください。
設定方法
getContentforShowHide.php
を任意のエディタで開き、以下の青色部分を追加してください。追加部分は大きく分けて4ヶ所あります。特に閉じカッコ "}" 忘れがないよう、ご注意ください。
:
function output_showHide_js() {
if(is_home()) {
?>
<script type="text/javascript">
Effect.DefaultOptions = {
transition: Effect.Transitions.sinoidal,
duration: 0.5, // seconds
fps: 60.0, // max. 60fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
}
function ajaxShowHide(entryID) {
element = $('Text' + entryID);
if(element.style.display == 'none') {
options = {
afterFinish: function(effect) {
$('Link' + entryID).firstChild.innerHTML = '« Hide more';
Element.show(effect.element);
}
};
Effect.BlindDown(element, options);
} else {
options = {
afterFinish: function(effect) {
$('Link' + entryID).firstChild.innerHTML = 'Read more »';
Element.hide(effect.element);
}
};
Effect.BlindUp(element, options);
}
}
</script>
<?php
}
}
:
function get_the_contentshowhide($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
:
(中略)
:
if (count($content)>1) {
$allcontent = "";
for ($counter = 1; $counter < count($content); $counter++) {
$allcontent .= $content[$counter];
}
if ($more) {
$output .= '<a id="more-'.$id.'"></a>'.$allcontent;
} else {
if(is_home()) {
$output .= "
<div id='Link$id' class='ajax-entry-more-link'><a href='".get_permalink()."' name='ext$id' onclick=\"ajaxShowHide($id);return false;\">Read more »</a></div>
<div id='Text$id' style='display: none'>
" . $allcontent . "
<div class='ajax-entry-more-link'><a href='#ext$id' onclick=\"ajaxShowHide($id);return false;\">« Hide more</a></div>
</div>";
} else {
$output .= "<div class='ajax-entry-more-link'><a href='".get_permalink()."' name='ext$id'>Read more »</a></div>";
}
}
}
if ($preview) { // preview fix for javascript bug with foreign languages
$output = preg_replace('/\%u([0-9A-F]{4,4})/e', "'&#'.base_convert('\\1',16,10).';'", $output);
}
return $output;
}
修正後、元のディレクトリにアップロードすれば完了です。
2007.11.14
ソースコードの関数名が誤っていたので修正しました。また折りたたみを適用しない場合のマークアップ(div)に class 属性を追加しました。
- WordPressのアーカイブページで本文を折りたたむ「wp_content_folderプラグイン」
- tabAccordion によるサイドメニューの折りたたみ for WordPress
- dTree プラグイン for WordPress v0.4
- WordPress で「続きを読む」の折りたたみ Web2.0
リクエストしておりました長月です。どうも有難う御座いました!
実際やってみましたのでご報告致します。
最初の一文の
function ck_wp_head() {
の表記が見当たらなかったので(試してもみましたがエラーになるようでした)他の文と比べて
function output_showHide_js() {
の下に
if(is_home()) {
と入れました。
また、「Read more」が端によってしまう為、
(使用テンプレートは「wp.Vicuna Ext」です。)
} else {
$output .= "<div><a href='".get_permalink()."' name='ext$id'>Read more »</a></div>";
}
の<div>には class='ajax-entry-more-link'を加えました。
機能を切った場合は「Read more」から元の表記に戻るのかと思いましたが
そういう訳ではないのですね・・・。
それと前回のコメントではどうもお手数をお掛け致しました。
以後気をつけます。
>長月さん
こんにちは。
ご連絡ありがとうございました。
ご指摘の部分は修正致しました。お手数かけて申し訳ございません。
表示をデフォルトに戻すのであれば、下記の青色部分を追加すればよさそうです(本記事のカスタマイズは行っても行わなくても)。
:
function get_the_contentshowhide($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
if(!is_home()) {
return get_the_content($more_link_text = '(more...)', $stripteaser = 0, $more_file = '');
}
global $id, $post, $more, $single, $withcomments, $page, $pages, $multipage, $numpages;
:
それではよろしくお願い致します。
とても便利なプラグインありがとうございます。
ただ、自分の場合は、折りたたみを「続きを読む」ではなく、任意の場所を折りたためるようにしたいのですが、その場合はどうすればいいでしょうか?
任意の場所をどのクラスのdivタグで囲めばいいかわかりません。
アーカイブページは記事のタイトルだけを一覧で出して、タイトルをクリックすると、折りたたまれていた記事内容が展開するようにしたいです。
もしよろしければ、ご回答の方よろしくお願いします。
>inforboyさん
こんばんは。
プラグインを作ってみましたのでご確認ください。
http://www.koikikukan.com/archives/2011/08/24-025555.php
それではよろしくお願い致します。