TopWordPress > カスタマイズ > 折りたたみ > 「WordPress で『続きを読む』の折りたたみ」を特定のページだけに適用する
News
各種ブログテンプレート
2007年11月14日

エントリー本文

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

Posted at November 14,2007 3:10 AM
Category:[折りたたみ]
Tag:[, ]

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 属性を追加しました。

Posted by yujiro ReTweet This!
関連記事
この記事を読んだ人はこんな記事も読んでいます
人気エントリー
Hatena Hot Entries
Hatena Entries
トラックバック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 : November 14, 2007 1:23 PM
コメントする
greeting

*必須



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

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

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

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

Now loading...
Introduction
Entries of this Category
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.02