「WordPress で『続きを読む』の折りたたみ」を特定のページだけに適用する

「WordPress で『続きを読む』の折りたたみ」を特定のページだけに適用する

Posted at November 14,2007 3:10 AM
Tag:[Customize, 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 = '&#171; Hide more';
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = 'Read more &#187;';
            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 &#187;</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 属性を追加しました。

関連記事
トラックバックURL


コメント

リクエストしておりました長月です。どうも有難う御座いました!
実際やってみましたのでご報告致します。

最初の一文の
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」から元の表記に戻るのかと思いましたが
そういう訳ではないのですね・・・。

それと前回のコメントではどうもお手数をお掛け致しました。
以後気をつけます。

[1] Posted by 長月 : November 14, 2007 10:33 AM

>長月さん
こんにちは。
ご連絡ありがとうございました。
ご指摘の部分は修正致しました。お手数かけて申し訳ございません。

表示をデフォルトに戻すのであれば、下記の青色部分を追加すればよさそうです(本記事のカスタマイズは行っても行わなくても)。

    :
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;
    :

それではよろしくお願い致します。

[2] Posted by yujiro logo : November 14, 2007 1:23 PM

とても便利なプラグインありがとうございます。

ただ、自分の場合は、折りたたみを「続きを読む」ではなく、任意の場所を折りたためるようにしたいのですが、その場合はどうすればいいでしょうか?

任意の場所をどのクラスのdivタグで囲めばいいかわかりません。

アーカイブページは記事のタイトルだけを一覧で出して、タイトルをクリックすると、折りたたまれていた記事内容が展開するようにしたいです。

もしよろしければ、ご回答の方よろしくお願いします。

[3] Posted by inforboy : August 20, 2011 3:53 PM

>inforboyさん
こんばんは。
プラグインを作ってみましたのでご確認ください。

http://www.koikikukan.com/archives/2011/08/24-025555.php

それではよろしくお願い致します。

[4] Posted by yujiro logo : August 24, 2011 3:24 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)