TopWordPress > カスタマイズ > 折りたたみ > 2007年11月
2007年11月14日

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

November 14,2007 3:10 AM
Tag:[, ]
Permalink

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

Comments [4] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3