web-dev-qa-db-ja.com

投稿ページ自体の詳細を読む

私は 使い方をもっと読む を使ってホームページのトピックの抜粋を見て、もっと読むアイコンをクリックして投稿を開き、全内容を見る方法を知っています。

私たちは投稿自体にそれをすることができますか？訪問者が（ホームページではなく）投稿ページ自体を開いたとき、抜粋のみが利用可能であり、彼らは全内容を見るために "read more"をクリックするべきです。

excerptread-more
1
Samer Mahfouz

解決策は、投稿ページでなぜそのように機能させたいのかによって異なります。しかしおそらく最善の方法はクライアント側でこれを行うことでしょう。

最大の高さを持つメソッド

あなたの投稿テンプレートの内容は次のようになっているとしましょう。

<div id="content"><?php the_content(); ?></div>

このdivの後にボタンを追加する必要があるので、それは次のようになります。

<div id="content"><?php the_content(); ?></div>
<button class="show-more">Show more</button>

次に、CSSを追加して、特定の高さまでのコンテンツのみを表示します。あなたのstyle.cssに以下を追加します。

#content { max-height: 100px; overflow: hidden; }
.show-more { margin-top: 15px; }

最後に、コンテンツの全高を表示するスクリプトを追加し、クリック後に「show-more」ボタンを削除します。

jQuery(document).ready(function($) {
    $('.show-more').click(function() {
        $('#content').css('max-height', 'none');
        $(this).remove();
    });
});

これは基本的な設定ですので、スタイルやスクリプトを自由に調整してください。

これはあなたがそれを試すことができるフィドルへのリンクです： https://jsfiddle.net/psxtur2L/

内容を置き換えた方法

抜粋を特に短いバージョンとして表示したい場合は、この方法で行うことができます。

テンプレートに、抜粋とコンテンツの両方、およびボタンを次のように追加します。

<div id="excerpt"><?php the_excerpt(); ?></div>
<div id="content"><?php the_content(); ?></div>
<button class="show-more">Show more</button>

CSSでは、デフォルトでコンテンツを隠すだけです。

#content { display: none; }
.show-more { margin-top: 15px; }

次に、抜粋を非表示にして、ユーザーがボタンをクリックしたときにコンテンツを表示します。

jQuery(document).ready(function($) {
    $('.show-more').click(function() {
        $('#excerpt').hide();
        $('#content').show();
        $(this).remove();
    });
});

これがそのためのフィドルです。 https://jsfiddle.net/o7z2Lsks/ /

ユーザーがブラウザのデバッガツールを使用している場合、ユーザーはボタンをクリックせずにフルコンテンツにアクセスできますが、重要ではないと思います。ユーザーがログインしているかどうかなどを確認する必要がある場合は、AJAXを使用する必要があります。そのため、コードにさらに追加が必要になります。

1
Dmitriy Demir