WordPress で「続きを読む」の折りたたみ Web2.0: 小粋空間

Top ＞ WordPress ＞カスタマイズ＞折りたたみ＞ WordPress で「続きを読む」の折りたたみ Web2.0

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

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

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

１．特徴

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

２．サンプル

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

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

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

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

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

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

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

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

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

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

Show Hide "more" with WordPress

５．プラグインファイルの修正

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

修正内容は、５．１～５．３の3つがあります。修正前の削除部分を赤色、追加部分を青色で示しています。

５．１その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);
...後略...

５．２その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
}
...後略...

５．３その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;
}
...後略...

６．プラグインのアップロード

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

７．プラグインの有効化

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

８．CSS

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

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

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

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

９．折りたたみ速度の変更

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

duration:   0.5,   // seconds

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

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

１０．その他

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

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

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

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

Posted by yujiro このページの先頭に戻る

関連記事をもっと読む

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ WordPress備忘録 from 四月階段
素敵なテーマ、そしてカスタマイズ、プラグインをお借りいたしました。ありがとうございました。 ... [続きを読む]

Tracked on February 17, 2008 1:34 PM

≫ WordPress で”続きを読む…”を作る from ちらうら☆蚤の市
ちらうらな内容なくせに、記事がやたら長いがな。なんとかせんとなぁ～と思っていたら、よそ様のサイトで（続きを読む…）というリンクを見つけた。さっそく... [続きを読む]

Tracked on July 27, 2008 8:36 AM

≫ 折りたたみ機能を追加 from manabu
... [続きを読む]

Tracked on June 23, 2009 1:31 AM

≫ WordPressのタグ折りたたみプラグイン-その2- from AfroNamiHeiの箱
... [続きを読む]

Tracked on February 17, 2010 2:48 PM

≫ WP続きを読むプラグイン from SWEET WATER
... [続きを読む]

Tracked on January 4, 2011 1:38 PM

yujiroさん

WordPress ME 2.2.3にてLightbox 2.0 for WordPressプラグイン【http://zeo.unic.net.my/notes/lightbox2-for-wordpress/】を導入している環境にこちらの記事の「WordPress で「続きを読む」の折りたたみ Web2.0」の設定をしますとサーバのエラーログに下記がでて困ってます。

[Fri Sep 28 08:18:44 2007] [error] [client ***.***.***.***] File does not exist: /***/***/****/blog/wp-includes/js/scriptaculous/wp-builder.js, referer: http://www.quistis.jp/blog/
[Fri Sep 28 08:18:44 2007] [error] [client ***.***.***.***] File does not exist: /***/***/****/blog/wp-includes/js/scriptaculous/wp-effects.js, referer: http://www.quistis.jp/blog/
[Fri Sep 28 08:18:44 2007] [error] [client ***.***.***.***] File does not exist: /***/***/****/blog/wp-includes/js/scriptaculous/wp-dragdrop.js, referer: http://www.quistis.jp/blog/
[Fri Sep 28 08:18:44 2007] [error] [client ***.***.***.***] File does not exist: /***/***/****/blog/wp-includes/js/scriptaculous/wp-controls.js, referer: http://www.quistis.jp/blog/
[Fri Sep 28 08:18:44 2007] [error] [client ***.***.***.***] File does not exist: /***/***/****/blog/wp-includes/js/scriptaculous/wp-slider.js, referer: http://www.quistis.jp/blog/

Lightbox 2.0 for WordPressプラグインかgetContentforShowHide.phpプラグインのどちらかをOFFにするとエラーはでないのですが、同居させる方法はありませんでしょうか。

ご教授をお願いいたします。

[1] Posted by キス : September 28, 2007 8:51 AM

＞キスさん
こんにちは。
ご質問の件ですが、インストールした script.aculo.us を削除し、修正した ajaxfied-showhide.php から下記の4行を削除してみてください（WordPress では script.aculo.us がプリインストールされていたので、冗長な処理でした）。

<script type="text/javascript" src="<?php echo get_option('siteurl') ?>/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="<?php echo get_option('siteurl') ?>/scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php echo get_option('siteurl') ?>/scriptaculous/src/effects.js"></script>
<script type="text/javascript" src="<?php echo get_option('siteurl') ?>/scriptaculous/src/controls.js"></script>

それではよろしくお願い致します。

[2] Posted by yujiro : October 1, 2007 11:48 AM

yujiroさん

test用Blogで確認しましたところ、エラー表示がなくなりました。
ありがとうございましたm(__)m

[3] Posted by キス : October 1, 2007 4:45 PM

＞キスさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは！

[4] Posted by yujiro : October 1, 2007 5:40 PM

初めまして、カスタマイズやプラグインの情報を拝見させて頂いております。
少しこのプラグインについて要望なのですが、
カテゴリーやアーカイブ等の特定のテンプレート、又は関数次第では
プラグインを適用させないようにする事は可能でしょうか？

Indexでは使いたいのですが、カテゴリー一覧の時には記事表示件数が多いと
「Read more」で隠れている部分も全部読み込んでしまって遅くなりがちです。
（検索時には抜粋とエントリ本文をごっそり入れ替えてしまったのですが。）
もし可能でしたら切り替えも出来ると助かります。
試しに

<?php the_content('strip_teaser=true'); ?>

ともテンプレート該当部分を書き換えてもみたのですが
矢張り「Read more」が出てしまいます。

PHP触り始めの人間にはプラグインを見てもこれ以上弄れませんでした・・・。
宜しくお願いします。

[5] Posted by 長月 : November 11, 2007 10:20 AM

＞長月さん
はじめまして。
ご利用ありがとうございます。
ご質問の件ですが、ご要望事項として承りました（訂正コメントは元コメントをこちらで修正しましたので勝手ながら削除させて頂きました）。

動作確認ができ次第エントリー致しますので、申し訳ございませんがお時間ください。
それではよろしくお願い致します。

[6] Posted by yujiro

: November 12, 2007 8:11 PM

いつも拝見させて頂いております。
今回新しくWordPressを始めようと思い、いろいろ設定しています。
折りたたみを導入しようと記事通りにやったつもりなのですが、テスト投稿してみると
Read Moreは表示されてもHide Moreが表示されません。
またCSSの設定とありますが、どこに記述したらよろしいですか？
テンプレートは小粋空間様の３カラム版を使用しています。

[7] Posted by れでぃけっと : November 15, 2007 10:25 AM

＞れでぃけっとさん
こんにちは。
ご利用ありがとうございます。
ご質問の件につきまして、申し訳ありませんが文言だけでは適切な回答ができませんので、事象が発生しているページのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。

[8] Posted by yujiro

: November 15, 2007 2:44 PM

失礼いたしました。
URLはhttp://preeminence.info/wordpress/　です。
CSSの記述はエントリー記事にあった

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

を入れています。
何故表示されないのかわからず途方に暮れています。

[9] Posted by れでぃけっと : November 15, 2007 6:37 PM

＞れでぃけっとさん
こんにちは。
不具合の原因は当方のカスタマイズにありました。
ご迷惑おかけして大変申し訳ございません。

修正箇所を（その1）に追加しましたので、お試し頂けますでしょうか。
正常に動作しないようであればお手数ですが再度ご連絡ください。
それではよろしくお願い致します。

[10] Posted by yujiro

: November 16, 2007 3:06 PM

yujiroさん、こんばんは。
報告が遅くなりましたが、追加された修正を行ったところ、無事「Hide more」が
表示されました！！
どうもありがとうございました。

[11] Posted by れでぃけっと : November 17, 2007 11:39 PM

＞れでぃけっとさん
こんにちは。
ご連絡ありがとうございました。
無事に表示されたようで良かったです。
ではでは！

[12] Posted by yujiro

: November 19, 2007 1:36 PM

WordPress初心者です(泣)
テンプレートやプラグインで、またお世話になっております。
この折りたたみプラグインですが、
3回やり直したのですがまだ設置ができません。
お時間のあるときで結構ですので、
初心者が躓きやすい、注意しなくてはいけないポイントなどありましたら
お教え願えますでしょうか。
どうぞ、よろしくお願いいたします。
（実はサイドメニューを折り畳むでも悩んでいる愚か者です・ぽりぽり）

[13] Posted by ｕｋｙｏ : January 30, 2008 9:06 PM

↑のコメントをした者です。
もう一度、WordPressをインストールし直すところからやり直したところ、
今度は無事、動いてくれました。
何が悪かったのかはわかりませんが、
申し訳ありませんでした。　ありがとうございました。

[14] Posted by ukyo : February 1, 2008 3:37 PM

＞ukyoさん
こんばんは。
ご質問の件、無事に解決したようで良かったです。
ではでは！

[15] Posted by yujiro

: February 3, 2008 11:45 PM

時々質問させていただいております。
その都度、分かりやすい説明をいただきまして感謝しております。
今回は…getContentforShowHide.phpを直して

「'".get_permalink()."'」というすれば、ソースには含まれなず空欄になるはずだと思います。

しかし、permalinkが生きていて、別ページに飛んでしまうのです。

これはいかがなものでしょうか？

[16] Posted by yoh : February 10, 2008 7:45 PM

＞yohさん
こんばんは。
ご質問の件の要旨は「カスタマイズしたけれども、期待通りの動作（ページ上で追記が表示される）にならず、記事ページにジャンプしてしまう」ということでよろしいでしょうか。
念のため、本記事のカスタマイズを改めて行いましたが、正常に動作することは確認しました。どこかに設定誤りか、何らかの不具合があると思われます。
URLをご連絡頂ければもう少し解析できると思います。
それではよろしくお願い致します。

[17] Posted by yujiro

: February 15, 2008 12:07 AM

はじめまして、いつもお世話になっております。WordPressルーキーのSylphと申します。
こちらにはたびたびおうかがいしていろいろな情報をいただいています。

getContentforShowHideプラグインも、こちらを参考に導入したのですが、yujiroさんが↑でご指摘のような現象が起きています。
>カスタマイズしたけれども、期待通りの動作（ページ上で追記が表示される）にならず、記事ページにジャンプしてしまう

具体的にはこんな現象です↓
カスタマイズしたページをIE6+WinXPで参照したときには正常に動作します。
FireFox2.0+WinVistaで参照したときも正常に動作します。
IE7+WinVistaのときに、記事ページにジャンプしてしまいます。

お手数ですが、何かアドバイスしていただければ幸甚です。

[18] Posted by Sylph : April 19, 2008 10:17 PM

いつもお世話になっています。
WordPressで小粋空間さんのテンプレートやPluginを使わせていただいています。
WordPress2.3までは、通常通り使えていたのですが、
WordPress2.5にアップグレードした場合、記事ページにジャンプするようになってしまいました。
＃今は、Pluginのカスタマイズをせずに、デフォルト設定のまま使っています。
＃そうなると、パカッと続きが開いてしまい、小粋空間さんのようなタイム指定ができません。
よろしければ、何かアドバイスをいただけないでしょうか。

[19] Posted by charlie : April 22, 2008 3:53 PM

＞Sylphさん
こんばんは。
ご返事遅くなってすいません。
同じ環境（Windows VISTA + IE7）で閲覧してみたところ、こちらでは問題なく動作していますが、ご質問の件は解消しましたでしょうか。記事中のサンプルが正常に動作するようであれば、サイト側の設定の問題と思われます。
当方では解決策は見出せていませんが、他のプラグインをはずしてみるなどしてみてください。
それではよろしくお願い致します。

＞charlieさん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、設定された状態で拝見させて頂けますでしょうか。
それではよろしくお願い致します。

[20] Posted by yujiro

: April 26, 2008 1:13 AM

yujiroさんこんにちは。
いつもありがとうございます。
ちょうど、WordPress2.5.1がリリースされ、
アップグレードをしてから、小粋空間さんのカスタマイズをしたところ、
問題なく動くようになりました。
#アップグレードしたから動くようになったかどうかはわからないのですが。
ありがとうございました。

[21] Posted by charlie : April 28, 2008 4:00 PM

初心者多すぎにも関わらずいちいち回答してくれる管理人様が神様に見える。
ここで直接質問しないでプラグインフォーラムで聞いてくるべきだと思う。
それ以前に自分の凡ミスでしくじってる人もいるし。
こんな回答に時間をさかせるなんて失礼だと思わないんだろうか。

管理人様、全ての問いかけに回答する必要はありませんよ。

[22] Posted by 1ユーザ : April 29, 2008 10:59 PM

＞charlieさん
こんばんは。
ご連絡ありがとうございました。
ご質問の件、無事に直ったようで良かったです。
ではでは！

＞1ユーザさん
こんばんは。
お気遣いありがとうございます。
その件で、以前悩んだ時期がありました（例えばカスタマイズ以外の質問は有料にするなど）が、頂いた質問の回答がそのままエントリーとして役立つことも多いので、とりあえずこのスタイルで続けたいと思います（できそうにない質問はそれなりにお断りしています）。
ユーザーさんのミスだと思ってたら自分のミスだったこともありましたので…。
時間的に苦しくなったらまた再考したいと思います。

[23] Posted by yujiro

: May 1, 2008 2:15 AM

初めまして。毎回重宝するプラグインをありがとうございます
早速ですが、今回改装にあたり、こちらを参考にさせて頂いたのですが、
続きを読む、以降、どうしても本文が左へとずれてしまいます。

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

これらの記述位置がどうしても解らず、その為の問題だとは思うのですが･･･
何分素人判断、色々と調べましたがどうしても解らず、
お忙しいのを承知の上でご教授頂ければと書き込みさせて頂きました。

問題が起きているページURLを置いておきます。
コチラでお伺いする内容ではないかもしれませんが、お返事頂ければ幸いです。

[24] Posted by C2 : June 27, 2008 5:01 AM

＞C2さん
こんにちは。
ご質問の件ですが、拝見させて頂いたところ現在は解消しているように見えます（Firefox3で確認）。
解消していないようであればブラウザ名を添えてご連絡ください。
それではよろしくお願い致します。

[25] Posted by yujiro

: July 2, 2008 6:14 PM

はじめまして。

参考にこのプラグインを実装させていただきました！ありがとうございます。

ですが、どうしてもわからない箇所があります。
（バージョンは、ＷｏｒｄＰｒｅｓｓ2.6です。）

上の方のエラーの質問の回答で、

>WordPress では script.aculo.us がプリインストールされていたので、冗長な処理でした

とされているのですが、私のケースでは、それ逆に書いていないと動いてくれないのです・・・。

挿入したタグは、以下のタグになります。
index.phpの</head>の直前に入れています。

<script type="text/javascript" src="<?php echo get_option('siteurl') ?>/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="<?php echo get_option('siteurl') ?>/scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php echo get_option('siteurl') ?>/scriptaculous/src/effects.js"></script>
<script type="text/javascript" src="<?php echo get_option('siteurl') ?>/scriptaculous/src/controls.js"></script>
<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);
  }
}

なぜ、この上のスクリプトをindex.phpの中に書き込むと動いてくれるのでしょうか。。。
また、このやり方をした場合、Read moreと、hide moreという文字を変更しても、一度クリックしない限り、設定した文字に置き換わらないというバグが出てしまっております。

お時間のあるときにアドバイスいただけないでしょうか。
よろしくお願いいたします。

[26] Posted by Ｔａｍａｓｈｉｍａ : October 6, 2008 12:43 AM

＞Ｔａｍａｓｈｉｍａさん
こんにちは。
ご質問の件ですが、「その1」の変更を行えば、script 要素は head 要素に出力されると思います。
具体的には、wp_enqueue_script という関数を起動することで、パラメータで指定した該当ファイルを script 要素の src 属性に埋め込んで表示してくれます。

ただし、表示されないようであれば、頂いたコメントの方法で良いと思います。当方の 2.6.2 では追加をしなくても script 要素が表示されることは確認していますがブラウザによって動作しない等、確認不足がありましたらご指摘ください。

「なぜ動くか」という件については、script.aculo.us 内部の実装を把握している訳ではないので、「こういう設定をすれば動作するライブラリです」ということしかお答えできません。ネットや書籍で色々な情報があるのでご確認頂ければ幸いです。
質問の解釈が間違っていたらすいません。

設定した文字に置き換える件ですが、getContentforShowHide.php の中に「Read more」「Hide more」を書き換える場所がそれぞれ2ヶ所あります。「Read more」「Hide more」で getContentforShowHide.php の中を検索して、置き換えたい文字列に書き換えてください。

それではよろしくお願い致します。

[27] Posted by yujiro

: October 8, 2008 2:02 PM

管理人様

ご丁寧なご回答ありがとうございました。
無事にread moreとhide moreを任意の文字列に書き換えることができました。
（また、スクリプトの書き込み部分の不備、大変失礼致しました。）

有用に活用させていただきます。
また一読者として頻繁に拝見させていただきます。

[28] Posted by Ｔａｍａｓｈｉｍａ : October 8, 2008 3:18 PM

＞Ｔａｍａｓｈｉｍａさん
こんにちは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは！

[29] Posted by yujiro

: October 8, 2008 3:23 PM

こんにちわ。同スクリプトのカスタマイズはWordpress2.7でも動作確認されているでしょうか？先日リリースされたばかりの最新版にしてから同ポストを見つけ、既に5回程、大元のスクリプトをDL、カスタマイズして試しているのですが、どぅ頑張っても動作してくれません。

続きを読むに該当するリンク部は同スクリプト内で設定されている語に変更されるのですが、その変更されたリンクをクリックすると、インラインスライド表示する代わりに、別ページへ移動語、ポストを表示する通常の表示方法になってしまいます。

その１も含め全てを試したのですが、解決方法がわからなかったので、もし提案があれば教えて下さい。

[30] Posted by Taka : December 14, 2008 7:48 AM

＞Takaさん
こんにちは。
ご質問の件ですが、2.7 日本語版をダウンロードしてローカル環境で試したところ、正常に動作することを確認しました。
なお、カスタマイズもれがないよう、カスタマイズの各作業に見出しを付与しました。プラグインの有効化など、再度ご確認頂ければ幸いです。

どうしてもうまくいかない場合、サイトのURLをご連絡頂き、サイトを拝見させて頂ければ、より適切な回答ができると思います。あるいは、当方で修正して動作を確認したプラグインファイル（へのリンク）を掲載しますのでご連絡ください。
それではよろしくお願い致します。

[31] Posted by yujiro

: December 15, 2008 3:42 PM

こんにちわ。返信ありがとうございました。
再度、カスタマイズその２、３を試し、その後、１を試したのですが、どうも動作しません。カスタマイズ自体は「７．プラグインの有効化」でひとまず終了ですよね。(つまり、８以降は追加的ですよね。)

また、wp-lightbox2は利用せず、nyroModalと言うJavascriptを利用して、LitghtBoxの様な動作をさせているので、その１も含めたのですが、そぅするとRead Moreのリンク自体がクリックしても何も反応しなくなります。(その１を除いた場合は、同タブ内/同ウィンドウ内でリンク先へ移動します。)

もし、動作可能なプラグインへのリンクを掲載頂けると嬉しいのです。(とは言え、実際何が悪いのかわからないので悲しいのですが…。)よろしくお願いします。

P.S. また同サイトは現在引っ越し中(引っ越し先)でテスト段階なので、不安定な可能性があります。(サーバー自体がここ数日おかしいので。)

[32] Posted by Taka : December 16, 2008 12:57 AM

こんにちわ。連続投稿になってしまいますが、原因がわかりました。テーマによって同スクリプトカスタマイズが動作しないようです。上記投稿時に利用していたテーマは「 WordPress Grid Focus Download - Derek Punsalan - 5ThirtyOne」と言うMagazine、CMS系テーマなのですが、このテーマ上では何故か同スクリプト(カスタマイズ版)が動作しませんでした。

そして、今、試しに「 WordPress Theme - Statement | Blog Oh Blog」と言うテーマに変更した処使えるようになりました。

[33] Posted by Taka : December 16, 2008 3:17 AM

＞Takaさん
こんにちは。
先ほどこちらから拝見させて頂いた限りでは正常に動作しているようです。
PCまたはブラウザを変えて試してみて頂けますでしょうか。

念のため、プラグインファイルのリンクを掲載しておきます。
http://www.koikikukan.com/archives/download/WordPress/getContentforShowHide/0.1/getContentforShowHide.zip

それではよろしくお願い致します。

[34] Posted by yujiro

: December 16, 2008 9:45 AM

こんにちわ。ありがとうございます。テーマ関連で利用不可になっているようです…と言う趣旨のコメントを32のコメントから数分後に投稿を試みたのですが、届いていなかったでしょうか？(リンクを文中に含んだ為、認証されてから表示されますと注意が出ました。)

Yujiroさんが確認して下さったときに利用していたテーマ上では正常に動くのですが、利用するテーマによっては利用不可(動作不可)のようです。ありがとうございました！

[35] Posted by Taka : December 18, 2008 12:23 PM

＞Takaさん
こんにちは。
すいません、[33]のコメントが保留状態になって、見落としてました。
それで、リンク先のテーマをダウンロードしてみましたが、やはり正常に動作しました。

以下に動作したものをアップロードしています。

http://www.koikikukan.com/test/20081218/

あと、Takaさんの環境と私の環境で異なるのは、その他のプラグインです。
他にご利用のプラグインがあれば一旦外してみて頂けないでしょうか。
それではよろしくお願い致します。

[36] Posted by yujiro

: December 18, 2008 4:56 PM

こんにちわ。返信ありがとうございます。例の”動作しないテーマ”についてなのですが、何故か現在は動作しました。(サーバー上の問題だったんでしょうか。ここ数日、借りているサーバーの調子が悪かったので。)

現在、色々と何があると動作しないのか確認しつつ、自分のWordpress環境を改善するべく弄っているのですが、一つ気づいた事があります。

Mootoolsと言うJavascriptの一がありますよね。このスクリプトと同プラグインの共存は出来ないものなのでしょうか？jQueryと言うスクリプト群を利用していたのですが、「Mediabox」と言うYouTubeなども含めたコンテンツをLightbox風に表示可能と言う事で興味が沸き、設置したのですが、どぅもこのスクリプトとの相性が悪いようです。

「Show Hide "more" with WordPress」のPlug-inを利用するとMediaboxが動作しなくなってしまい、外すと利用可能になります。かと言って、Mootools関係でShow/Hide系のスクリプトを探したのですが、Yujiroさんのカスタマイズ版が自分のイメージと一番シックリ来ているので、共存した状態で使う術があるなら、ベストなのですが…。何か方法はないでしょうか？

[37] Posted by Taka : December 18, 2008 6:10 PM

＞Takaさん
こんにちは。
色々調べてみましたが、どうも prototype と mootools（Mediabox）の共存はできないようです。
Mediabox を prototype 系のライブラリに変更した方が良いかもしれません。
とりあえずご連絡まで。

[38] Posted by yujiro

: December 24, 2008 5:24 PM

プラグインを有効にすると
「エラーが出たため有効にする事ができません」
と出て来てしまいます。
WP2.3、UTF-8、OSXです。
単純に、修正ミスかとも思い何回もやり直しましたが改善しません。
修正は3つとも行いました。
解決策が分かれば教えていただきたいです。

[39] Posted by しむ : January 10, 2009 11:06 PM

＞しむさん
こんにちは。
ご質問の件ですが、当方で修正したファイル getContentforShowHide.php のURLを[34]のコメントに貼り付けてますので、一度そちらでお試しください。
事象が変わらない場合、ご利用のサーバはMacのローカルPC環境ということであれば、当方は同じ環境をもっていないため、申し訳ありませんが解決は困難です。
それではよろしくお願い致します。

[40] Posted by yujiro

: January 14, 2009 2:17 PM

ここの記事を拝見し、記事中の追記をスムーズにインラインで見られるようになりました。
大変重宝しているのですが、ひとつ問題がありまして、Ozh’ Better FeedというRSSフィードをカスタマイズするプラグインを入れているのですが、getContentforShowHideを入れると、前述プラグインが動作しなくなります。

何がしたいかというと、吐き出すRSSフィードに画像や改行を活かしつつも、以降を除去したいのです。
Ozh’ Better Feedを外して、wp-include/feed-rss2.phpを直接書き換えようとしても、the_content("", true, "")が効かず、何をやっても全文出力されてしまいます。

getContentforShowHideによって、the_contentのmore_link_textパラメーターが変わっているとも思われるのですが、自分では解決することが出来ません。

お知恵をお借りできないでしょうか。よろしくお願いします。

[41] Posted by ほす : January 18, 2009 11:35 PM

＞ほすさん
こんにちは。
ご返事遅くなって申し訳ありません。
ご利用ありがとうございます。
ご質問の件ですが、不具合が発生しているページのURLをご連絡いただけますでしょうか。
それではよろしくお願い致します。

[42] Posted by yujiro

: February 4, 2009 12:37 PM

お返事ありがとうございます。ほすです。

getContentforShowHideとOzh’ Better Feedがコンフリクトするサンプルページを作りましたのでご確認願います。

http://www.hosplug.com/sample1/

http://www.hosplug.com/sample2/

それぞれのページのRSSフィードを見て頂きますと、1つめは追記部分が削除されて「（…続きがあります）」という表記が足されていますが、2つめは全文が表示されています。Ozh’ Better Feedによるフッター表示はどちらも表示されています。
それではご確認お願いします。

[43] Posted by ほす : February 12, 2009 1:46 AM

＞ほすさん
こんばんは。
確認ですが、Ozh’ Better Feedはプラグインをインストールして、記事に続きを設定するだけで、追記部分が削除されて「（…続きがあります）」が表示されるのでしょうか。
すいませんが、プラグインの概要や、プラグイン設定画面での設定内容など、情報ありましたらご教示ください（英語はあまり得意ではありません）。
それではよろしくお願い致します。

[44] Posted by yujiro

: February 18, 2009 12:20 AM

>確認ですが、Ozh’ Better Feedはプラグインをインストールして、記事に続きを設定するだけで、追記部分が削除されて「（…続きがあります）」が表示されるのでしょうか。

はい。文字列などはカスタマイズしていますが、プラグインを入れればそういう挙動になるはずです。

設定ページの最初「Cut your Feed」のチェックボックスの1つ目が追記をカットするオプションですが、デフォルトでオンになっていると思います。

「"Read more" Link」のところにカットした追記部分の代わりに挿入する文字列を設定します。ここを「（…続きがあります）」にしています。

「Feed Item Footer」はフッタですが、ここは空欄にしています。ただ、プラグインが有効になっていることをわかりやすくするため、一番下の「Credit & Love」のチェックボックスをオンにしてプラグインのクレジット情報を表示させています。

やはりgetContentforShowHideが追記まわりのフォーマットを変更していることが原因なのかもしれませんが、なんとか両方同時に使用したいと思っておりますので、ご協力お願いいたします。

[45] Posted by ほす : February 20, 2009 3:04 PM

＞ほすさん
こんばんは。
ご返事遅くなってすいません。
書かれたとおりの設定を行なってみましたが、同じ事象を確認できませんでした。
申し訳ありませんが、確認の件は一旦取り下げさせてください。
それではよろしくお願い致します。

[46] Posted by yujiro

: March 5, 2009 1:48 AM

yujiroさんへ

最近、WordPressに触り始めたものです。

現在バージョン2.7.1を入れ、はじめてのプラグインとして、
こちらのyujiroさんの記事を参考にしながら
「Show Hide "more" with WordPress」を導入してみました。

導入後、各記事にパスワードをかけたところ、
パスワードを何度入力しても記事が開かない状態に陥りました('A`;)
(正しいパスワードを入れても再度パスワード入力フォームだけが表示される)

このプラグインを「無効」にすると正常にパスワードが動作するので、
こちらのプラグインが問題なのかな？と思い、
他のPHPページを参考にしながら「getContentforShowHide.php」を書き換えてみました。

function get_the_contentshowhide($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
    (※中略)
    if (!empty($post->post_password)) { // if there's a password
        if ($_COOKIE['wp-postpass_'.$cookiehash] != $post->post_password) {  // and it doesn't match the cookie
            $output = get_the_password_form();
            return $output;
        }
    }
･･･

この部分を

function get_the_contentshowhide($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
    (※中略)
    if (post_password_required($post)) {
        $output = get_the_password_form();
        return $output;
    }
･･･

へ修正したところ正しく動作しましたヾ(*・ω・)ノ゜
(if文の書き換えです。)

もしかしたら他のプラグインと競合してしまうとか、このバージョンだと動かないとか、
その修正方法間違ってるよ？とかあるかもしれないので一応ご報告までに。

まぁ、調査する気力が無いだけなんですがｗ
難しい事はよく分からないので(=ω=；)

P.S.
yujiroさんの記事で「Show Hide "more" with WordPress」が導入出来たので、
お礼を申し上げます。ありがとうございます～☆

[47] Posted by sakuran : March 5, 2009 1:52 PM

検証ありがとうございます。そちらではOzh’ Better FeedとgetContentforShowHideの両方の機能が正常に動作しているということでしょうか。

ということはあと考えられる原因としてはデフォルトのテーマが悪さしているくらいしか思いつきませんね。もう少しこちらでも検証してみます。

ありがとうございました。

[48] Posted by ほす : March 12, 2009 1:27 AM

プラグインファイルの修正、その３。そこの最後に ?> が抜けています。
ブログ(WordPress）のみならず、php も初心者なため、最初書いてあるとおりにコピペし、エラーで動作せずに悩みました。

その後、全コメントを参照し、ファイルになったものをいただいて無事に動作しました。ありがとうございました。

しかも、巷でいろいろと記事になっている「LightBox との共存」がＯＫでした。しばらく LightBox 2 を使っており、どちらを取るか迷った結果、折り畳みをとろうと決心したのが拍子抜けのうれしさです。重ねてほんとにありがとうございました。

[49] Posted by https://me.yahoo.co.jp/a/Qctq6xZofeyI8cnVQjLUbYybUg--#ca1a4

: September 12, 2009 3:43 PM

こんばんは。
ご利用ありがとうございます。
無事にカスタマイズできたようでよかったです。

なお、「「その３」の最後に ?> が抜けている」というご指摘もありがとうございます。
カスタマイズ対象から離れている行は省略しており、変更箇所は記事に記している通り、赤色と青色部分のみなのですが、同じような誤解を与えないよう、ソースコードの表記は修正致しました。
それではよろしくお願い致します。

[50] Posted by yujiro

: September 12, 2009 9:50 PM

>なお、「「その３」の最後に ?> が抜けている」という

　あ、すいません。たしかに誤解です。最終行に近かったため勘違いしました。訂正後のスクリプトが最後までだと。こういうのって、一度はまると、何回見直しても目はそこを素通りするんですよね．．．．

　ところで、実害は全然ないようなんですが、FireFox, Chrome では全く問題なく、Internet Explorer(7 と8）で実行するとステータスバーに「ページでエラーが発生しました」と表示されます。しつこくやってみましたが、他に影響はないようです。気にしなければいいのでしょうが、ご報告まで。

[51] Posted by https://me.yahoo.co.jp/a/Qctq6xZofeyI8cnVQjLUbYybUg--#ca1a4

: September 13, 2009 3:50 PM

こんばんは。
ご指摘ありがとうございました。
ご返事遅くなりましたが、エラーにつきましては修正いたしました。
ではでは！

[52] Posted by yujiro

: September 20, 2009 3:48 AM

こんばんわ、夜遅くに失礼します。
現在ここで紹介されていますスクリプトを使おうと思っているのですが
ニコニコプレスというスタイルに反映できません。

プラグインの競合の問題かと思ったのですが、
デフォルトのスタイルでは問題なく動作致しました。

java系は全然わからず、解決できませんでした…

●やった事
英語の直訳的に見ると、ヘッダーにscriptをoutputし
スクリプトを読み込ませてる様に思えたので、プラグインから
outputせずに、直接ヘッダーに書き込んでみたりしたのですが、
(その場合プラグインのアウトプットの部分は消しました)
上手く動作しませんでした。

javaかcssの競合問題だと思われるので、これ以上私の頭では
どうしようもなく、ご教授頂きたくコメント致しました。

何か解決策などありましたらよろしくお願いします。

[53] Posted by 我流儀 : February 25, 2010 1:11 AM

ありがとうございます。
参考になりました。ありがたく使わせていただきます。

[54] Posted by it-eye : May 25, 2010 3:14 AM

＞it-eyeさん
こんにちは。
コメントありがとうございました。
お役に立てたようでよかったです。
ではでは！

[55] Posted by yujiro

: May 25, 2010 6:34 PM

初めまして。
WP3.0になってから「Ajaxified Expand Post NOW」が正常に動作しなくなり困っていました。「続きを読む」で検索してこちらに辿り着きました。

おかげさまで自分の思っていた動作になり大変感謝しています。
私のサイトの記事内にこちらの記事へのリンクをさせて頂きました。
（事後報告で申し訳ありません）

［more >> の不具合］↓
http://wordpressmu.reyspress.net/%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB/more%E3%82%BF%E3%82%B0%E3%81%AE%E4%B8%8D%E5%85%B7%E5%90%88/

本当にありがとうございました_(._.)_ヾぺこり

[56] Posted by REY : July 29, 2010 4:25 PM

＞REYさん
こんにちは。
ご返事遅くなってすいません。
カスタマイズご利用ありがとうございました。
こちらも事後報告になりましたが、下記のエントリーで情報展開させていただきました。

http://www.koikikukan.com/archives/2010/07/29-235555.php

それではよろしくお願い致します。

[57] Posted by yujiro

: August 6, 2010 3:46 PM

お世話になります。思っていた動作になり大変感謝しています。
しかし、きちんとmore/hideの折り畳みの動作はするのですが、残念なことに下記2点の不具合が出てしまいました。

　１）コメント欄が表示されない
　２）パスワード保護コンテンツの表示ができない

Wordpress3.1.1(Ja)で、テーマは標準のTwenty Ten 1.2でも同現象が発生してしまいます。
お手数ですが、回避方法を教えていただけないでしょうか。

１・２について、両方共全てのプラグインを無効にした上で、プラグインContent with show/hide javascript for "more"を有効にすると、本現象が出てしまい、無効にすると本現象は出ませんでした。
また、２についてはコメント欄の47番さんのものを試そうとしたのですが、修正前の部分が見つからず、修正を試せておりません。

なお、今回のプラグインを下記にテキストとしてuploadしてあります。
http://infra-lab.net/wp-content/plugins/getContentforShowHide/getContentforShowHide.txt

以上、よろしくお願いいたします。

[58] Posted by infra-lab : April 29, 2011 6:47 PM

＞infra-labさん
こんにちは。
ご質問の件ですが、プラグインで追加したJavaScriptを記事ページで表示しないようにすれば解決するかもしれません。function output_showHide_js()に赤色のif文を追加してみてください。

function output_showHide_js() {
    if (!is_singular()){
?>
<script type="text/javascript">
…中略…
</script>
<?php
    }
}

それではよろしくお願い致します。

[59] Posted by yujiro

: May 4, 2011 4:27 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

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