2007年11月14日
「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 属性を追加しました。
Comments [2]
| Trackbacks [0]

