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

WordPress で「続きを読む」の折りたたみ Web2.0

September 20,2007 1:25 AM
Tag:[, , ]
Permalink

WordPress で追記文章を書いた時、「続きを読む」のリンクをクリックすると、スライドダウンで本文下に続きを表示するカスタマイズをご紹介します。

1.特徴

  • JavaScript エフェクトライブラリ script.aculo.us(スクリプタキュラス)を利用し、「Read more(続きを読む)」のリンクをクリックすると追記文章をスライドダウンで表示します。
  • JavaScript が無効の場合は記事ページにジャンプします。
  • 「Hide more(続きを隠す)」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。
  • スクリプタキュラスのライブラリを編集せずに、折りたたみ速度の変更が可能です。

2.サンプル

以下にサンプルを作りましたので、動作をお試しください。折りたたみ速度は0.5秒に設定しています。

追記文章の折りたたみ 2.0 サンプル

3.WordPress で「続き」を作成する方法

実は「続き」の作り方がさっぱり分からず、都合10分ほど悩みました(笑)。

WordPress では、テキストエリアにあるアイコン moreまたは「more」をクリックすることで続きを作成します。

テキストエリアのモード(タブ)が「ビジュアル」を選択している場合は、テキストエリア内に続き用の罫線が表示され、「コード」の場合は、<!--more--> が埋め込まれます。

以下、カスタマイズ方法です。

4.プラグインのダウンロード

下記のリンクよりプラグインをダウンロードしてください(IEの場合、Step 1の「Download and "install" this plugin.」を右クリックして「対象をファイルに保存」を選択し、getContentforShowHide.php という名前で保存。ファイルの種類は「すべて」を選択してください)。

5.プラグインファイルの修正

ダウンロードした getContentforShowHide.php を任意のエディタで開き、以下に示す修正を行ってください。

修正内容は、5.1~5.3の3つがあります。修正前の削除部分を赤色、追加部分を青色で示しています。

5.1 その1

注:その1の手順は wp-lightbox2 プラグインを有効にしていると不要かもしれません(先に、「その2」「その3」の変更を行い、正常に動作しないようであれば本修正を行ってもかまいません)。

変更前

...前略...
add_action('wp_head', 'output_showHide_js');
add_action('the_content', 'the_contentshowhide',0);
...後略...

変更後

...前略...
function showhide_javascript() {
    if ( !function_exists('wp_enqueue_script') || is_admin() )
        return;
    wp_enqueue_script('prototype');
    wp_enqueue_script('scriptaculous-effects');
}
add_action('init', 'showhide_javascript');
add_action('wp_head', 'output_showHide_js');
add_action('the_content', 'the_contentshowhide',0);
...後略...

5.2 その2

変更前

...前略...
function output_showHide_js() {
    $output = '<script type="text/javascript">';
    $output .= 'function showHide(entryID, entryLink, htmlObj, type) {';
    $output .= 'if (type == "comments") {';
    $output .= 'extTextDivID = (\'comText\' + (entryID));';
    $output .= 'extLinkDivID = (\'comLink\' + (entryID));';
    $output .= '} else {';
    $output .= 'extTextDivID = (\'extText\' + (entryID));';
    $output .= 'extLinkDivID = (\'extLink\' + (entryID));';
    $output .= '}';
    $output .= 'if( document.getElementById ) {';
    $output .= 'if( document.getElementById(extTextDivID).style.display ) {';
    $output .= 'if( entryLink != 0 ) {';
    $output .= 'document.getElementById(extTextDivID).style.display = "block";';
    $output .= 'document.getElementById(extLinkDivID).style.display = "none";';
    $output .= 'htmlObj.blur();';
    $output .= '} else {';
    $output .= 'document.getElementById(extTextDivID).style.display = "none";';
    $output .= 'document.getElementById(extLinkDivID).style.display = "block";';
    $output .= '}';
    $output .= '} else {';
    $output .= 'location.href = entryLink;';
    $output .= 'return true;';
    $output .= '}';
    $output .= '} else {';
    $output .= 'location.href = entryLink;';
    $output .= 'return true;';
    $output .= '}';
    $output .= '}';
    $output .= '</script>';
 
    echo $output;
}
...後略...

変更後

...前略...
function output_showHide_js() {
?>
<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
}
...後略...

5.3 その3

変更前

...前略...
function get_the_contentshowhide($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
...中略...
    $output .= "
    <div id='extLink$id'>
        <p>
            <a href='".get_permalink()."#more-$id'>Read more...</a> or <a href='".get_permalink()."' name='ext$id' onclick=\"showHide($id,'".get_permalink()."',this,'entry');return false;\">Read more right here... &#187;</a>
        </p>
    </div>
    <div id='extText$id' style='display: none'>
        " . $allcontent . "
        <p>
            <a href='#ext$id' onclick=\"showHide($id,0,this,'entry');return true;\">&#171; Hide it</a>
        </p>
    </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;
}
...後略...

変更後

...前略...
function get_the_contentshowhide($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
...中略...
    $output .= "
    <div id='Link$id' class='ajax-entry-more-link'><a href='".get_permalink()."' name='ext$id' onclick=\"ajaxShowHide($id);return false;\">Read more &#187;</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;\">&#171; Hide more</a></div>
    </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;
}
...後略...

6.プラグインのアップロード

修正後、getContentforShowHide.phpwp-content/plugins ディレクトリにアップロードしてください。

7.プラグインの有効化

アップロード後、プラグイン管理画面で「Content with show/hide javascript for "more"」を有効にすれば設定完了です。

8.CSS

「続きを読む」「続きを隠す」のリンクに class 属性 ajax-entry-more-link を与えています。必要に応じて設定してください。

.ajax-entry-more-link {
    /* 任意のプロパティを設定 */
}

例えば、wp.Vicuna では下記の設定が必要です。

.ajax-entry-more-link {
    margin-left: 30px;
}

9.折りたたみ速度の変更

折りたたみ速度を変更する場合は、getContentforShowHide.php 内の

duration:   0.5,   // seconds

の数値を変更します。0.5 はスライドアップ・スライドダウンに 0.5 秒かかることを意味します。

この Effect.DefaultOptions = { ... } の部分は scriptaculous ライブラリの設定の上書きですので、速度を変更しない場合はここから削除しても構いません。ちなみにデフォルトは1秒に設定されています。

10.その他

(X)HTML の1行目に XML 宣言がある場合、IE6 では動作がややスムーズではありません(開く瞬間と閉じた瞬間にビクッとなります)。サンプルの公開テンプレートは XML 宣言を外しています。

2007.10.01
カスタマイズ手順より script.aculo.us のインストールを削除しました(プリインストールされているため)。

2007.10.01
script.aculo.us のインクルードがもれていたので追加しました。

2008.12.15
エントリーの構成を見直しました。

Comments [59] | Trackbacks [5]
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