小粋空間: 折りたたみ: 2007年9月アーカイブ

Top ＞ WordPress ＞カスタマイズ＞折りたたみ＞ 2007年9月

2007年9月20日

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

September 20,2007 1:25 AM
Tag：[Plugin, scriptaculous, WordPress]
Permalink

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

１．特徴

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

２．サンプル

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

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

３．WordPress で「続き」を作成する方法

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

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

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

参考：メモ帳であり備忘録でありブログであり・・・：記事の途中に「続きを読む・・・」みたいなのを挿入する方法

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

４．プラグインのダウンロード

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

Show Hide “more” with WordPress

ダウンロードした getContentforShowHide.php を任意のエディタで開き、下記の修正を行ってください。
修正箇所は、大きく分けて2つあります（下記）ので、ごっそり入れ替えてください。修正前の削除部分を赤色、追加部分を青色で示しています。

変更前（その1）

注：その1の手順は wp-lightbox2 プラグインを有効にしていると不要かもしれません
（その2→その3を行って動作しないようであれば本修正を行ってください）。

add_action('wp_head', 'output_showHide_js');
add_action('the_content', 'the_contentshowhide',0);

変更後（その1）

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);

変更前（その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;
}

変更後（その2）

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
}

変更前（その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;
}

変更後（その3）

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;
}

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

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

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

duration:   0.5,   // seconds

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

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

５．CSS

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

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

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

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

６．その他

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

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

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

Comments [25] | Trackbacks [2]

小粋空間 - a cheap joke and a play on words site