WordPressで続きを読むを折りたたむ
Category : WordPress | | 
記事の中で<!--more-->を使用して「この投稿の続きを読む」を表示した場合、そのリンクをクリックすると規定の動作では個別記事(single.php)に移動してしまう。
ページを移動させず<!--more-->以降の文章を表示したい。ただし、常に全て表示した状態ではページが縦に長くなりすぎるので、必要に応じて表示できるようにしたい。
WordPressのプラグインでは「Show Hide “more” with WordPress」が期待している動作ができそうだが、少しのテンプレート修正とJavaScriptの追加で実装できるので自作テーマに追加してみた。
[追記:2009/10/22]
- プラグインを作成しました。
- 詳細は以下のページをご覧下さい。
- Expand More Link プラグイン
[/追記]
1.wp-includes/post-template.php にある the_content、get_the_content の2つの関数をテーマのfunctions.phpに名前をリネームしてコピー。
2.get_the_content関数の$outputへの代入箇所を修正
--- 02.post-template-parts.php 2008-07-25 06:43:12.987250000 +0900
+++ 02.functions-parts.php 2008-07-25 06:41:26.268500000 +0900
@@ -1,12 +1,12 @@
<?php
-function the_content($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
- $content = get_the_content($more_link_text, $stripteaser, $more_file);
+function als_the_content($more_link_text = '(more...)', $stripteaser = 0, $more_file = '', $less_link_text = '(less...)') {
+ $content = als_get_the_content($more_link_text, $stripteaser, $more_file, $less_link_text);
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;
}
-function get_the_content($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
+function als_get_the_content($more_link_text = '(more...)', $stripteaser = 0, $more_file = '', $less_link_text = '(less...)') {
global $id, $post, $more, $page, $pages, $multipage, $preview, $pagenow;
$output = '';
@@ -42,11 +42,12 @@
$output .= $teaser;
if ( count($content) > 1 ) {
if ( $more ) {
- $output .= '<span id="more-'.$id.'"></span>'.$content[1];
+ $output .= "\n\n".'<span id="more-'.$id.'"></span>'."\n\n".$content[1];
} else {
$output = balanceTags($output);
- if ( ! empty($more_link_text) )
- $output .= ' <a href="'. get_permalink() . "#more-$id\" class=\"more-link\">$more_link_text</a>";
+ if ( !empty($more_link_text) && !empty($less_link_text) )
+ $output .= "\n\n".'<span id="more-link-'."$id" .'"><a href="'. get_permalink() . "#more-$id\" class=\"more-link\" onclick=\"showMore($id, '". get_permalink() . "#more-$id'); return false;\">$more_link_text</a></span>\n\n";
+ $output .= "\n\n<div id=\"expand-$id\" style=\"display: none;\">\n\n" . $content[1] . "\n\n<a title=\"$less_link_text\" href=\"#more-$id\" onclick=\"showMore($id,0); return true;\">$less_link_text</a>\n\n</div>\n\n";
}
}※「<span id=”more-xxx”></span>」が挿入される場所によって表示がおかしくなるので該当箇所に改行を追加している。
3.折りたたみ用のJavaScript作成
function showMore(id, uri) {
var d = ('expand-' + (id));
var m = ('more-link-' + (id));
if( document.getElementById ) {
if( document.getElementById(d).style.display ) {
if( uri != 0 ) {
document.getElementById(d).style.display = "block";
document.getElementById(m).style.display = "none";
} else {
document.getElementById(d).style.display = "none";
document.getElementById(m).style.display = "block";
}
} else {
location.href = uri;
return true;
}
} else {
location.href = uri;
return true;
}
}4.header.phpに3で作成したJavaScriptを<head>内に追加
5.index.phpのthe_content関数を入れ替える
-<?php the_content('続きを読む…'); ?>
+<?php als_the_content('続きを読む…',0,'','…続きを隠す'); ?>
PC上のブラウザとWindows Mobile 6上のOperaでは問題ないがWindows Mobile 6上のIE Mobileでは表示がおかしくなる。
